Phase 3 — project dashboard and tool selection

This prompt builds on the completed project setup wizard. Read the full codebase before starting. Understand the existing node structure, the phase node meta fields (movement, phase, status), the reference instance tool nodes, and the current content section rendering in lfti-spine.html.

This prompt has two distinct pieces:

1. Project node → dashboard view
2. Phase node → tool browser + session launcher

Build and verify piece 1 before starting piece 2.

PIECE 1 — Project Dashboard

When a node of type project is selected, render a dashboard instead of the standard parents/this node/children layout. The standard layout remains accessible via a small “← node view” link in the dashboard header for power users.

Dashboard layout

┌─────────────────────────────────────────────────────────────────┐
│ [Project title]                    [● Active]  [node view ↗]   │
│ [institution name] · [date range] · [format]                    │
├─────────────────────────────────────────────────────────────────┤
│ TABS: [ Overview ] [ Approvals n ] [ Participants ] [ Settings ]│
├─────────────────────────────────────────────────────────────────┤
│ [tab content — see below]                                        │
└─────────────────────────────────────────────────────────────────┘

Status badge colours (using existing CSS variables):

• not_started → var(--text-dim) · label: “Not started”
• active → var(--accent) · label: “Active”
• complete → muted blue · label: “Complete”
• archived → var(--text-dim) · label: “Archived”

Overview tab

Three sections:

Progress grid:

PROGRESS

              Gather          Collate         Present
Past          [●●●○○  3]     [○○○○○  0]     [○○○○○  0]
Situation     [○○○○○  0]     [○○○○○  0]     [○○○○○  0]
Futures       [○○○○○  0]     [○○○○○  0]     [○○○○○  0]
Whole         [○○○○○  0]     [○○○○○  0]     [○○○○○  0]

Each cell is clickable — navigates to that phase node via selectNode(). The number shown is the count of direct child nodes of that phase node (i.e. contribution/artefact nodes created under it). Filled dots scale: 0=empty, 1-2=one dot, 3-4=two dots, 5+=three dots (out of five dot positions).

Each cell has a subtle status colour:

• No children, no tool selected → dim (not started)
• Tool selected but no contributions → amber (in progress / waiting)
• Has contributions, not approved → amber
• Has approved contributions → accent green

Needs attention: A list of items requiring action from this user. Only show items relevant to their role. Empty state: “Nothing needs attention right now.”

Items to surface:

• “n contributions awaiting approval” → links to Approvals tab
• “[Phase name] has no tool selected” → links to that phase node
• “Workshop date [date] is tomorrow — [phase] is not started”
• “Partner institution has shared new content” (when interchange exists)

Each item has a small arrow link → navigating to the relevant node or tab.

Participants summary:

PARTICIPANTS
  2 staff  ·  2 classes (11S1, 9J1)  ·  ~30 students
  [ Manage participants → ]

Manage participants link navigates to the Participants tab.

Approvals tab

Only visible to facilitator, institution_admin, superadmin roles. Badge on tab shows count of pending approvals.

Standard mode (default): A list of pending contributions. Each item shows:

• Group name / contributor
• Phase (e.g. “Past — Gather”)
• Tool used
• Timestamp
• Content preview (title + first line of body, or thumbnail if image)
• [ Approve ] [ Flag ] buttons

Approve: sets node.meta.approval_status = "approved", saves via PUT /api/nodes/:id Flag: opens a small inline text field for a note, sets node.meta.approval_status = "flagged", sets node.meta.flag_note = "[text]", saves. Flagged content is visible to the group with the note displayed.

Empty state: “No contributions awaiting approval.”

Live session mode: A toggle button in the top right of the Approvals tab: “[ ○ Live mode ]” When activated:

• Tab background shifts slightly (subtle amber tint on the tab itself)
• List becomes a real-time feed — poll GET /api/projects/:id/pending every 5 seconds
• New items animate in at the top
• Approve button is larger and more prominent
• A “Live session active” indicator appears in the header status area

Add endpoint:

GET /api/projects/:id/pending
  Returns all child nodes of this project's phase nodes where 
  meta.approval_status is null or "pending"
  Ordered by created_at desc
  Auth: facilitator+ only

Participants tab

Three sections matching the wizard Step 3:

Staff & facilitators — list with role badge, remove button Classes — list with class name, teacher, student count, remove button Groups — auto-suggested groups per class, editable names

+ Add staff, + Add class buttons open small inline forms (not the full wizard). Changes save immediately via PUT /api/nodes/:id on the relevant person/session node.

Settings tab

Editable fields:

• Project name
• Description
• Date range (start/end)
• Workshop dates (add/remove)
• Approval mode toggle (Standard / Live)
• Group contribution limit (number input)
• Archive project button (sets status to archived, confirms first)

All changes save via PUT /api/nodes/:id on the project node’s meta.

PIECE 2 — Phase Node: Tool Browser & Session Launcher

When a node with meta.phase set (gather/collate/present) is selected, replace the empty children section with a purposeful phase panel.

Phase panel layout

┌─────────────────────────────────────────────────────────────────┐
│ PAST — GATHER                                    [status badge] │
│ Students explore and capture their experience of the past.      │
│ (pulled from the matching reference phase node body)            │
├─────────────────────────────────────────────────────────────────┤
│ TOOLS FOR THIS PHASE                                            │
│                                                                 │
│ Filters: [Individual] [Group] [Indoors] [Outdoors] [Async]     │
│          [Sync] [< 30min] [30-60min] [60min+]                  │
│          [Low-tech] [High-tech]                                 │
│                                                                 │
│ [tool card] [tool card] [tool card]                             │
│ [tool card] [tool card] [+ more]                                │
│                                                                 │
│ Selected: Body Map ×   Story Circle ×   [+ add another]        │
│                                                                 │
│ [ Start this phase → ]  (appears when ≥1 tool selected)        │
├─────────────────────────────────────────────────────────────────┤
│ CONTRIBUTIONS  0                                                │
│ (empty state until session is started)                          │
└─────────────────────────────────────────────────────────────────┘

Tool cards

Each card represents a reference tool node matching this phase. Pull tool nodes from the reference instance where meta.phase matches the current phase node’s meta.phase value.

Card shows:

• Tool title (truncated if long)
• 2-line description excerpt from node body
• Small badges: individual/group, indoor/outdoor, time estimate
• Selected state: accent border + checkmark when selected

Clicking a card toggles selection. Maximum selection: no hard limit, but after 3 selected show a gentle nudge: “You have 3 tools selected — that’s a full session. Add more if you need, or start now.” The nudge disappears after 5 seconds or on dismissal.

Tool filters

Filter buttons are toggle pills above the tool grid. Multiple can be active simultaneously — show tools matching ALL active filters (AND logic). Clearing all filters shows all tools for this phase.

Filter values come from tool node meta fields. Add these meta fields to reference tool nodes during this prompt (update the existing seeded nodes):

"meta": {
  "_level": "reference",
  "_visibility": "public",
  "phase": "gather",
  "format": ["group", "individual"],       // can be both
  "location": ["indoors", "outdoors"],     // can be both  
  "modality": ["sync", "async"],           // can be both
  "duration": "60min+",                    // "< 30min" | "30-60min" | "60min+"
  "tech_level": "low"                      // "low" | "high" | "both"
}

Update all reference tool nodes with appropriate values based on PLA_TOOLS_REFERENCE.md descriptions. Do not guess — if a field is genuinely ambiguous for a tool, use both values or omit the filter tag.

Starting a phase

“Start this phase →” button:

1. Sets phase_node.meta.status = "active", saves
2. Sets phase_node.meta.selected_tools = ["ref_g_body_map", "ref_g_story_circle"] (array of selected reference tool node ids)
3. Adds references relations from phase node to each selected tool node
4. Shows the contributions area (was empty/hidden before)
5. Updates the project dashboard progress grid cell for this phase to amber

The phase node now shows the session launcher area below the tool section:

Contributions area (after phase started)

CONTRIBUTIONS  0          [ + Add contribution ]   [ ⚡ Live mode ]

Groups:  [ All ] [ Group 1 ] [ Group 2 ] [ Group 3 ]

(empty state)
"No contributions yet. Groups can add their work using the button above 
or from their own view."

+ Add contribution button: opens the quick-capture overlay pre-configured for this phase — type set to artefact, parent set to this phase node, meta.phase and meta.movement inherited, meta.approval_status = "pending".

Group filter tabs: filter displayed contributions by the contributing group node.

Each contribution card shows:

• Title
• Contributor (group name)
• Timestamp
• Approval status badge: pending / approved / flagged
• If flagged: the flag note
• Click → selectNode() to view the full contribution node

For facilitator/admin: Approve and Flag buttons inline on each card. For students: their own group’s contributions only, with approval status visible.

Collate phase special behaviour

When meta.phase === "collate", the tool browser shows Collate tools. Additionally, above the tool browser, show a “From Gather” section:

FROM GATHER
[contribution card] [contribution card] [contribution card]
(approved contributions from the matching Gather phase node)
"These are the findings your group produced in Gather. 
Use them as the starting point for Collate."

Pull these by finding the sibling Gather phase node (same movement, phase: “gather”) and showing its approved children.

Present phase special behaviour

When meta.phase === "present", the tool browser shows Present tools. Additionally, above the tool browser, show a “From Collate” section showing approved Collate outputs, same pattern as above.

If a partner institution exists on this project, show:

EXCHANGE
This project is paired with [partner institution].
Approved Present artefacts will be visible to them.
[ View their Present artefacts → ]  (links to partner's present phase node)

Reference tool node meta updates

Update ALL reference tool nodes in the database with appropriate filter meta values. Do this via a migration script scripts/update_tool_meta.js that can be run with node scripts/update_tool_meta.js.

Use these values as a guide (fill in all tools from PLA_TOOLS_REFERENCE.md):

New API endpoints

GET /api/projects/:id/pending
  Returns pending contributions for facilitator approval
  Auth: facilitator+

GET /api/projects/:id/progress  
  Returns contribution counts per phase for the progress grid
  { past_gather: 3, past_collate: 0, ... }
  Auth: any authenticated user with access to this project

What does NOT change

• Tree navigation, position mode, graph mode — unchanged
• Quick capture overlay (used as base for contribution capture) — unchanged
• Auth system — unchanged
• Reference instance nodes (except adding filter meta fields) — otherwise unchanged
• Standard node view for non-project, non-phase nodes — unchanged
• Image maps, temporal nav — unchanged

File changes

lfti-spine.html     — project dashboard UI, phase panel UI
api/projects.js     — add /pending and /progress endpoints  
scripts/
  update_tool_meta.js  — one-time migration to add filter meta to tool nodes

When you’re done — test in order

1. Click the project node as ukadmin. See the dashboard with Overview tab showing the progress grid (all empty/dim), no needs-attention items, participant summary.

2. Click “Past — Gather” phase node. See the tool browser with filter pills and tool cards. Click “Group” filter — only group tools remain. Click a tool card to select it. Select two more. See the nudge appear. See “Start this phase →” button.

3. Click “Start this phase →”. Phase status changes to active. Progress grid cell updates to amber. Contributions area appears (empty).

4. Click “+ Add contribution”. Quick-capture opens pre-filled for this phase. Save a test contribution. It appears in the contributions area with “pending” badge.

5. As ukadmin in the dashboard Approvals tab, see the pending contribution. Click Approve. Contribution badge changes to “approved”. Progress grid cell updates to green.

6. Navigate to “Past — Collate”. See the “From Gather” section showing the approved contribution from step 5.

← All notes · More from LFTI