@marcomigozzi/trailhead 0.14.0 → 0.15.0

package/plugins/trailhead/hooks/mod/map-pane.tsx

@@ -4,7 +4,7 @@
 import { atom, read, update } from 'claude-code'
 import type { EngineInterface, On } from 'claude-code'
 
-import type { BurndownHistory, MapPaneData, MapSummary, PaneTicket, WorkState } from '../../types'
+import type { BurndownHistory, DashboardPaneData, MapCounts, MapPaneData, MapSummary, PaneTicket, UatParent, WorkState } from '../../types'
 import {
   ageLabel,
   axisStart,
@@ -14,20 +14,29 @@ import {
   failureReason,
   footerStatus,
   groupTickets,
+  headingRoom,
   HISTORY_LIMIT,
   LIST_LIMIT,
+  MAP_LABEL,
   mapRowLayout,
   nextViewed,
   parseActiveMap,
+  parseDashboard,
   parseHistory,
   parseMap,
   parseMaps,
+  parseMapsRead,
   parseTickets,
+  parseUatParents,
   rasterCells,
   refreshDecision,
   rowLayout,
   sparkline,
+  uatParentLine,
   viewTarget,
+  withUatParents,
+  whiteboardHeading,
+  whiteboardRowLayout,
 } from './map-pane-view'
 import { fit, isMissing, sameValue } from './work-state-view'
 
@@ -41,10 +50,13 @@ export const GH_TIMEOUT_MS = 20_000
 const AGE_REFRESH_MS = 60_000
 const ACTIVE_MAP_PATH = '.trailhead/active-map'
 const TICKET_FIELDS = 'number,title,labels,assignees,url'
+const UAT_FIELDS = 'number,body'
 const MAP_FIELDS = 'title,body,url'
 const HISTORY_FIELDS = 'number,labels,createdAt,closedAt'
 const MAPS_FIELDS = 'number,title,url'
 const MAPS_LIMIT = 100
+const MAPS_QUERY = `query($owner:String!,$repo:String!){repository(owner:$owner,name:$repo){issues(first:${MAPS_LIMIT},states:OPEN,labels:["trailhead:map"]){nodes{number title url subIssuesSummary{total completed}}}whiteboardOpen:issues(states:OPEN,labels:["trailhead:whiteboard"]){totalCount}whiteboardAll:issues(labels:["trailhead:whiteboard"]){totalCount}}}`
+const DASHBOARD_FIELDS = 'number,url'
 // Same colours as the band.
 const ACCENT = '#7aa2f7'
 // The accent as a Raster colour (0x00RRGGBB), and the chart height in terminal rows.
@@ -58,6 +70,7 @@ const EMPTY: MapPaneData = {
   map: null,
   tickets: [],
   maps: [],
+  whiteboard: null,
   unverifiedCount: 0,
   isCapped: false,
   history: null,
@@ -67,11 +80,24 @@ const EMPTY: MapPaneData = {
   isLoading: false,
 }
 
+const EMPTY_DASHBOARD: DashboardPaneData = {
+  dashboard: null,
+  tickets: [],
+  unverifiedCount: 0,
+  isCapped: false,
+  fetchedAt: null,
+  error: null,
+  isLoading: false,
+}
+
 export const mapPane = atom({ plugin: 'trailhead', key: 'mapPane' } as const, EMPTY)
 export const activeMap = atom({ plugin: 'trailhead', key: 'activeMap' } as const, null as number | null)
 // The map shown when it is not the active one (a click on the maps list); null follows the active map.
 // The pane only reads `.trailhead/active-map`; the work verb is what changes it.
 export const viewedMap = atom({ plugin: 'trailhead', key: 'viewedMap' } as const, null as number | null)
+// The dashboard view (maps index + whiteboard tickets) in place of a map; a map press leaves it.
+export const isDashboard = atom({ plugin: 'trailhead', key: 'isDashboard' } as const, false)
+export const dashboardPane = atom({ plugin: 'trailhead', key: 'dashboardPane' } as const, EMPTY_DASHBOARD)
 // The ticket whose `work` press is queued; one at a time.
 export const pendingWork = atom({ plugin: 'trailhead', key: 'pendingWork' } as const, null as number | null)
 // Set once the pane was opened by the command, by itself or closed by the person: never auto-opened after.
@@ -83,6 +109,7 @@ const CLEAR_COMMAND = 'clear'
 // The same refs the band's atoms are written under; read here to mark the ticket in play.
 const workState = atom({ plugin: 'trailhead', key: 'workState' } as const, null as WorkState | null)
 const isOrphaned = atom({ plugin: 'trailhead', key: 'isOrphaned' } as const, false)
+const ownTicket = atom({ plugin: 'trailhead', key: 'ownTicket' } as const, null as number | null)
 
 type Dollar = EngineInterface
 type Timer = { cancel: () => void }
@@ -103,7 +130,7 @@ let lastStartedAt: number | null = null
 let trailing: Timer | null = null
 let ticker: Timer | null = null
 // What /clear would take from the pane, kept across it (module variables survive it, atoms do not).
-type Carried = { isAutoOpened: boolean; viewed: number | null; active: number | null }
+type Carried = { isAutoOpened: boolean; viewed: number | null; active: number | null; isDashboard: boolean }
 let carried: Carried | null = null
 // The ticket whose `work` press is running: /clear empties the pendingWork atom meanwhile.
 let workInFlight: number | null = null
@@ -146,12 +173,26 @@ const readList = ($: Dollar, target: number) =>
     gh($, ['issue', 'list', '--label', `trailhead:map-${target}`, '--state', 'open', '--limit', String(LIST_LIMIT), '--json', TICKET_FIELDS]),
     gh($, ['issue', 'list', '--label', `trailhead:map-${target}`, '--state', 'all', '--limit', String(HISTORY_LIMIT), '--json', HISTORY_FIELDS]),
     readMaps($),
+    readUat($, `trailhead:map-${target}`),
   ])
 
-// The open maps of the repo. A failed or unreadable read is null: the caller keeps the last good list.
-const readMaps = async ($: Dollar): Promise<readonly MapSummary[] | null> => {
+// The pending UAT tickets of one scope (a map label, or the whiteboard) with their bodies, for the parent
+// each one tests. A failed or unreadable read is null: the rows still group by label, only the parent line goes.
+const readUat = async ($: Dollar, scope: string): Promise<ReadonlyMap<number, UatParent> | null> => {
+  const out = await gh($, ['issue', 'list', '--label', 'trailhead:uat', '--label', scope, '--state', 'open', '--limit', String(LIST_LIMIT), '--json', UAT_FIELDS])
+  return out.ok ? parseUatParents(out.stdout) : null
+}
+
+// The open maps of the repo and the whiteboard's counts. A failed or unreadable maps read is null: the
+// caller keeps the last good list. One GraphQL call gives every map with its sub-issue counts and the
+// whiteboard's; if it fails or is unreadable the name-only `gh issue list` runs instead (counts null, and
+// the whiteboard null: the row is drawn name-only, never stale). Both bounded at MAPS_LIMIT open maps.
+const readMaps = async ($: Dollar): Promise<{ maps: readonly MapSummary[] | null; whiteboard: MapCounts | null }> => {
+  const counted = await gh($, ['api', 'graphql', '-F', 'owner={owner}', '-F', 'repo={repo}', '-f', `query=${MAPS_QUERY}`])
+  const withCounts = counted.ok ? parseMapsRead(counted.stdout) : null
+  if (withCounts !== null) return withCounts
   const out = await gh($, ['issue', 'list', '--label', 'trailhead:map', '--state', 'open', '--limit', String(MAPS_LIMIT), '--json', MAPS_FIELDS])
-  return out.ok ? parseMaps(out.stdout) : null
+  return { maps: out.ok ? parseMaps(out.stdout) : null, whiteboard: null }
 }
 
 // What the pane compares to skip a write: times aside, but whether the history is as fresh as the list.
@@ -176,7 +217,7 @@ async function fetchMap($: Dollar, token: number, wantsAnother: () => void) {
   if (token !== generation) return
   const isStale = async () => {
     if (token !== generation) return true
-    if ((await readTarget($)) === target) return false
+    if (!(await read($, isDashboard)) && (await readTarget($)) === target) return false
     wantsAnother()
     return true
   }
@@ -184,38 +225,76 @@ async function fetchMap($: Dollar, token: number, wantsAnother: () => void) {
 
   if (target === null) {
     // No map to show: the open maps alone, so one can be picked.
-    const maps = (await readMaps($)) ?? before.maps
+    const mapsRead = await readMaps($)
+    const maps = mapsRead.maps ?? before.maps
     if (await isStale()) return
-    return setPane($, { ...EMPTY, maps })
+    return setPane($, { ...EMPTY, maps, whiteboard: mapsRead.whiteboard })
   }
   const isSameMap = before.map?.number === target
   if (!isSameMap) {
     if (await isStale()) return
-    await setPane($, { ...EMPTY, maps: before.maps, isLoading: true })
+    await setPane($, { ...EMPTY, maps: before.maps, whiteboard: before.whiteboard, isLoading: true })
   }
 
-  const [view, list, historyRead, mapsRead] = await readList($, target)
-  const maps = mapsRead ?? before.maps
-  await dropClosedView($, mapsRead)
+  const [view, list, historyRead, mapsRead, uatParents] = await readList($, target)
+  const maps = mapsRead.maps ?? before.maps
+  const { whiteboard } = mapsRead
+  await dropClosedView($, mapsRead.maps)
   const now = await $.clock.now()
   if (await isStale()) return
 
   const kept = isSameMap ? before : EMPTY
   const failure = !view.ok ? view.reason : !list.ok ? list.reason : null
-  if (failure !== null) return setPane($, { ...kept, maps, error: failure, isLoading: false })
+  if (failure !== null) return setPane($, { ...kept, maps, whiteboard, error: failure, isLoading: false })
   const map = view.ok ? parseMap(view.stdout, target) : null
   const tickets = list.ok ? parseTickets(list.stdout) : null
-  if (map === null || tickets === null) return setPane($, { ...kept, maps, error: 'gh returned unreadable output', isLoading: false })
+  if (map === null || tickets === null) return setPane($, { ...kept, maps, whiteboard, error: 'gh returned unreadable output', isLoading: false })
 
   // A history that failed alone keeps the last good one of this map (with its own time), never another map's.
   const history = historyRead.ok ? parseHistory(historyRead.stdout) : null
   const historyPart = history !== null ? { history, historyAt: now } : { history: kept.history, historyAt: kept.historyAt }
-  const next: MapPaneData = { map, ...tickets, maps, ...historyPart, fetchedAt: now, error: null, isLoading: false }
+  const next: MapPaneData = { map, ...tickets, tickets: withUatParents(tickets.tickets, uatParents), maps, whiteboard, ...historyPart, fetchedAt: now, error: null, isLoading: false }
   const isFresh = before.fetchedAt !== null && now - before.fetchedAt < AGE_REFRESH_MS
   if (isFresh && isSameMap && sameValue(shape(before), shape(next))) return
   await setPane($, next)
 }
 
+// The whiteboard's open tickets (map-less) and the pinned index, plus the open maps. Same drop rule
+// as a map read: a result is not committed once the pane closed or the dashboard was left.
+async function fetchDashboard($: Dollar, token: number, wantsAnother: () => void) {
+  const isStale = async () => {
+    if (token !== generation) return true
+    if (await read($, isDashboard)) return false
+    wantsAnother()
+    return true
+  }
+  const before = await read($, dashboardPane)
+  if (before.fetchedAt === null && !before.isLoading && before.error === null) {
+    await update($, dashboardPane, () => ({ ...before, isLoading: true }))
+  }
+  const [list, index, mapsRead, uatParents] = await Promise.all([
+    gh($, ['issue', 'list', '--label', 'trailhead:ticket', '--label', 'trailhead:whiteboard', '--state', 'open', '--limit', String(LIST_LIMIT), '--json', TICKET_FIELDS]),
+    gh($, ['issue', 'list', '--label', 'trailhead:dashboard', '--state', 'open', '--limit', '10', '--json', DASHBOARD_FIELDS]),
+    readMaps($),
+    readUat($, 'trailhead:whiteboard'),
+  ])
+  const now = await $.clock.now()
+  if (await isStale()) return
+  const shown = await read($, mapPane)
+  await setPane($, { ...shown, maps: mapsRead.maps ?? shown.maps, whiteboard: mapsRead.whiteboard })
+  await dropClosedView($, mapsRead.maps)
+
+  const kept = await read($, dashboardPane)
+  const tickets = list.ok ? parseTickets(list.stdout, { isWhiteboard: true }) : null
+  const error = !list.ok ? list.reason : tickets === null ? 'gh returned unreadable output' : null
+  if (tickets === null) return update($, dashboardPane, () => ({ ...kept, error, isLoading: false }))
+  // A failed index read alone keeps the last link: the list is what the view is about.
+  const parsed = index.ok ? parseDashboard(index.stdout) : null
+  const dashboard = parsed === null ? kept.dashboard : parsed.ref
+  const next: DashboardPaneData = { dashboard, ...tickets, tickets: withUatParents(tickets.tickets, uatParents), fetchedAt: now, error: null, isLoading: false }
+  if (!sameValue(kept, next)) await update($, dashboardPane, () => next)
+}
+
 async function isPaneUp($: Dollar): Promise<boolean> {
   return (await $.ui.panes()).some(pane => pane.id === PANE_ID && pane.isPlaced)
 }
@@ -252,7 +331,9 @@ async function decide($: Dollar, request: Request) {
   lastStartedAt = now
   trailing?.cancel()
   trailing = null
-  await fetchMap($, generation, () => void requestRefresh($, { bypassFloor: true }))
+  const again = () => void requestRefresh($, { bypassFloor: true })
+  if (await read($, isDashboard)) await fetchDashboard($, generation, again)
+  else await fetchMap($, generation, again)
 }
 
 // Does nothing while the pane is closed: the data exists only for the pane.
@@ -270,6 +351,7 @@ async function carryOverClear($: Dollar) {
     isAutoOpened: await read($, paneAutoOpened),
     viewed: await read($, viewedMap),
     active: await read($, activeMap),
+    isDashboard: await read($, isDashboard),
   }
 }
 
@@ -281,6 +363,7 @@ async function restoreAfterClear($: Dollar) {
   carried = null
   try {
     if (kept?.isAutoOpened === true) await update($, paneAutoOpened, () => true)
+    if (kept?.isDashboard === true) await update($, isDashboard, () => true)
     const active = await readActiveMap($)
     const viewed = kept?.viewed ?? null
     if (viewed !== null && viewed !== active && active === kept?.active) await update($, viewedMap, () => viewed)
@@ -323,6 +406,7 @@ async function startWork($: Dollar, number: number) {
 // A view change is not a repeat read, so the floor does not apply.
 async function viewMap($: Dollar, number: number | null) {
   const active = await read($, activeMap)
+  await update($, isDashboard, () => false)
   await update($, viewedMap, () => (number === active ? null : number))
   void requestRefresh($, { bypassFloor: true })
 }
@@ -332,6 +416,16 @@ const pressView = ($: Dollar, number: number | null): void => {
   void viewMap($, number).catch(err => debug($, `trailhead mod: map view failed: ${String(err)}`))
 }
 
+// The switch to the dashboard (the Whiteboard row), or back to the map shown before it (the view is kept).
+async function setDashboard($: Dollar, isOn: boolean) {
+  await update($, isDashboard, () => isOn)
+  void requestRefresh($, { bypassFloor: true })
+}
+
+const pressDashboard = ($: Dollar, isOn: boolean): void => {
+  void setDashboard($, isOn).catch(err => debug($, `trailhead mod: dashboard switch failed: ${String(err)}`))
+}
+
 // Opening always refreshes. A render cannot write state, not even from work it left running,
 // so the auto-open runs from a zero-delay timer, a dispatch of its own; `isOpening` keeps two
 // renders from opening twice before the flag is written.
@@ -447,8 +541,11 @@ export function registerMapPane(on: On) {
     const active = await read($, activeMap)
     const viewed = await read($, viewedMap)
     const target = viewTarget(active, viewed)
+    const isBoard = await read($, isDashboard)
+    const board = await read($, dashboardPane)
     const play = await read($, workState)
     const orphaned = await read($, isOrphaned)
+    const own = await read($, ownTicket)
     const pending = await read($, pendingWork)
     const now = await $.clock.now()
     const cols = e.props.bodyColumns
@@ -463,8 +560,9 @@ export function registerMapPane(on: On) {
     const link = (url: string, label: string) => (url === '' ? label : <Link href={url} label={label} />)
 
     // The open maps, one row each; shown with several maps open (or with no active map, to pick one).
+    // On the dashboard every map is listed and each row opens it.
     const mapRow = (m: MapSummary) => {
-      const r = mapRowLayout(m, { active, viewed, columns: cols })
+      const r = mapRowLayout(m, { active, viewed, columns: cols, isDashboard: isBoard })
       return (
         <Box key={`map-row-${m.number}`}>
           {text(`map-mark-${m.number}`, r.isActive ? accent : {}, r.mark)}
@@ -481,13 +579,13 @@ export function registerMapPane(on: On) {
         </Box>
       )
     }
-    const mapsGroup =
-      data.maps.length > 1 || (active === null && data.maps.length > 0) ? (
-        <Box key="group-maps" flexDirection="column" marginTop={gap}>
-          {text('head-maps', bold, `Maps · ${data.maps.length}`)}
-          {data.maps.map(mapRow)}
-        </Box>
-      ) : null
+    const isMapsShown = isBoard ? data.maps.length > 0 : data.maps.length > 1 || (active === null && data.maps.length > 0)
+    const mapsGroup = isMapsShown ? (
+      <Box key="group-maps" flexDirection="column" marginTop={gap}>
+        {text('head-maps', bold, `Maps · ${data.maps.length}`)}
+        {data.maps.map(mapRow)}
+      </Box>
+    ) : null
     // Viewing a map other than the active one: say so, with the way back.
     const viewing =
       viewed === null || viewed === active ? null : (
@@ -500,58 +598,30 @@ export function registerMapPane(on: On) {
           />
         </Box>
       )
-
-    if (target === null) {
-      return (
-        <Box flexDirection="column" width={cols}>
-          {text('empty', dim, 'No active map. Run /trailhead:map to pick one.')}
-          {mapsGroup}
-        </Box>
-      )
-    }
-    const isCurrent = data.map?.number === target
-    const isLoading = !isCurrent && (data.isLoading || data.error === null)
-    // A pane the person opened (or that waited undrawn) has no data yet: fill it, once. Like the
-    // auto-open it leaves the render through a zero-delay timer; inside the floor it waits for
-    // the trailing refresh rather than the slow timer.
-    if (!isCurrent && !data.isLoading && data.error === null && !isFilling) {
-      isFilling = true
-      $.clock.after(0, () => {
-        isFilling = false
-        void requestRefresh($)
-      })
-    }
-
-    const map = isCurrent ? data.map : null
-    const heading = map === null ? `map #${target}` : fit(`#${map.number} ${map.title}`, cols)
-    const header = (
-      <Box key="header" flexDirection="column">
-        <Box key="map">
-          <Text {...accent}>{map === null ? heading : link(map.url, heading)}</Text>
-        </Box>
-        {map?.destination == null ? null : text('destination', dim, fit(map.destination, cols))}
+    // The dashboard's header: its title, and the `map` button back to the map shown before it.
+    const headerRow = (title: ReturnType<typeof text>) => (
+      <Box key="header-row" width={cols} justifyContent="space-between">
+        {title}
+        <Button key="to-map" label={MAP_LABEL} onPress={() => pressDashboard($, false)} />
+      </Box>
+    )
+    // The way into the whiteboard: a row above the maps list, its counts beside the name like a map row.
+    const wb = whiteboardRowLayout(data.whiteboard, cols)
+    const whiteboardRow = (
+      <Box key="whiteboard-row" marginTop={gap}>
+        {text('whiteboard-mark', {}, wb.mark)}
+        <Button key="open-whiteboard" label={wb.label} onPress={() => pressDashboard($, true)} />
+        {wb.aside === null ? null : text('whiteboard-aside', dim, wb.aside)}
       </Box>
     )
-    if (isLoading) {
-      return (
-        <Box flexDirection="column">
-          {header}
-          {viewing}
-          {text('loading', dim, 'Loading tickets…')}
-          {mapsGroup}
-        </Box>
-      )
-    }
-
-    const tickets = isCurrent ? data.tickets : []
-    const groups = groupTickets(tickets)
-    const isInPlay = (t: PaneTicket) => play !== null && !orphaned && play.ticket === t.number
 
+    // This session's own ticket survives a work-state file another session took over; without one, the file decides.
+    const isInPlay = (t: PaneTicket) => (own !== null ? t.number === own : play !== null && !orphaned && play.ticket === t.number)
     const row = (t: PaneTicket, hasMarkColumn: boolean) => {
       const r = rowLayout(t, { isInPlay: isInPlay(t), hasMarkColumn, pendingWork: pending, columns: cols })
       const style = r.isInPlay ? accent : r.isDim ? dim : {}
-      const holder = r.isInPlay ? { color: ACCENT } : r.isDim ? dim : {}
-      return (
+      const holder = r.isDim ? dim : {}
+      const line = (
         <Box key={`row-${t.number}`} width={cols} justifyContent="space-between">
           <Box>
             {r.mark === null ? null : text(`mark-${t.number}`, r.isInPlay ? accent : {}, r.mark)}
@@ -561,6 +631,7 @@ export function registerMapPane(on: On) {
             {r.type === null ? null : text(`type-${t.number}`, dim, r.type)}
           </Box>
           {r.aside?.kind === 'holder' ? text(`holder-${t.number}`, holder, r.aside.text) : null}
+          {r.aside?.kind === 'self' ? text(`self-${t.number}`, { color: ACCENT }, r.aside.text) : null}
           {r.aside?.kind === 'queued' ? text(`queued-${t.number}`, { color: AMBER }, r.aside.text) : null}
           {r.aside?.kind === 'work' ? (
             <Button
@@ -572,8 +643,16 @@ export function registerMapPane(on: On) {
           ) : null}
         </Box>
       )
+      const parent = uatParentLine(t, cols)
+      return parent === null ? (
+        line
+      ) : (
+        <Box key={`entry-${t.number}`} flexDirection="column">
+          {line}
+          {text(`uat-of-${t.number}`, dim, parent)}
+        </Box>
+      )
     }
-
     const group = (key: string, name: string, rows: readonly PaneTicket[]) => {
       if (rows.length === 0) return null
       const hasMarkColumn = rows.some(isInPlay)
@@ -589,15 +668,129 @@ export function registerMapPane(on: On) {
         </Box>
       )
     }
+    const ticketGroups = (tickets: readonly PaneTicket[]) => {
+      const groups = groupTickets(tickets)
+      return [
+        group('frontier', 'Frontier', groups.frontier),
+        group('in-progress', 'In progress', groups.inProgress),
+        group('uat', 'UAT', groups.uat),
+        group('paused', 'Paused', groups.paused),
+        group('blocked', 'Blocked', groups.blocked),
+      ]
+    }
+    const notes = (d: { unverifiedCount: number; isCapped: boolean }) => [
+      d.unverifiedCount === 0 ? null : (
+        <Box key="unverified" marginTop={gap}>
+          <Text {...dim}>{unverifiedLine(d.unverifiedCount)}</Text>
+        </Box>
+      ),
+      !d.isCapped ? null : (
+        <Box key="capped" marginTop={gap}>
+          <Text {...dim}>{`list capped at ${LIST_LIMIT}`}</Text>
+        </Box>
+      ),
+    ]
+    const footerOf = (d: { fetchedAt: number | null; error: string | null }) => {
+      const status =
+        d.error === null
+          ? `updated ${ageLabel(now - (d.fetchedAt ?? now))}`
+          : d.fetchedAt === null
+            ? `⚠ ${d.error}`
+            : `⚠ ${d.error} · list from ${ageLabel(now - d.fetchedAt)}`
+      const footer = footerStatus(status, cols)
+      return (
+        <Box key="footer" flexDirection="column">
+          {text('rule', dim, '─'.repeat(cols))}
+          <Box key="footer-row" width={cols} justifyContent="space-between">
+            <Box gap={1}>
+              <Button key="refresh" label="refresh" onPress={() => void requestRefresh($)} />
+              {footer.isInline ? text('age', dim, footer.text) : null}
+            </Box>
+            <Button
+              key="close"
+              label="close"
+              onPress={() => void closePane($).catch(err => debug($, `trailhead mod: close press failed: ${String(err)}`))}
+            />
+          </Box>
+          {footer.isInline ? null : <Box key="age-row">{text('age', dim, footer.text)}</Box>}
+        </Box>
+      )
+    }
+    // An empty view (a pane the person opened, or one that waited undrawn) asks for its first read,
+    // once. Like the auto-open it leaves the render through a zero-delay timer; inside the floor it
+    // waits for the trailing refresh rather than the slow timer.
+    const askFill = () => {
+      if (isFilling) return
+      isFilling = true
+      $.clock.after(0, () => {
+        isFilling = false
+        void requestRefresh($)
+      })
+    }
+
+    if (isBoard) {
+      const isLoaded = board.fetchedAt !== null
+      if (!isLoaded && !board.isLoading && board.error === null) askFill()
+      const heading = fit('Dashboard', headingRoom(cols, MAP_LABEL))
+      const title = (
+        <Box key="dashboard-title">
+          <Text {...accent}>{board.dashboard === null ? heading : link(board.dashboard.url, heading)}</Text>
+        </Box>
+      )
+      const isEmpty = isLoaded && board.error === null && board.tickets.length === 0
+      return (
+        <Box flexDirection="column" width={cols} {...(isDock ? { minHeight: e.props.scroll.bodyRows } : {})}>
+          {headerRow(title)}
+          {mapsGroup}
+          <Box key="whiteboard" marginTop={gap}>
+            {text('head-whiteboard', bold, whiteboardHeading(isLoaded ? board.tickets : null, board.isCapped))}
+          </Box>
+          {!isLoaded && board.error === null ? text('loading', dim, 'Loading dashboard…') : null}
+          {ticketGroups(board.tickets)}
+          {isEmpty ? text('no-tickets', dim, 'No open whiteboard tickets.') : null}
+          {notes(board)}
+          <Box key="spacer" flexGrow={1} />
+          {footerOf(board)}
+        </Box>
+      )
+    }
+
+    if (target === null) {
+      return (
+        <Box flexDirection="column" width={cols}>
+          {text('empty', dim, 'No active map. Run /trailhead:map to pick one.')}
+          {whiteboardRow}
+          {mapsGroup}
+        </Box>
+      )
+    }
+    const isCurrent = data.map?.number === target
+    const isLoading = !isCurrent && (data.isLoading || data.error === null)
+    if (!isCurrent && !data.isLoading && data.error === null) askFill()
 
-    const status =
-      data.error === null
-        ? `updated ${ageLabel(now - (data.fetchedAt ?? now))}`
-        : data.fetchedAt === null
-          ? `⚠ ${data.error}`
-          : `⚠ ${data.error} · list from ${ageLabel(now - data.fetchedAt)}`
-    const footer = footerStatus(status, cols)
+    const map = isCurrent ? data.map : null
+    const heading = map === null ? `map #${target}` : fit(`#${map.number} ${map.title}`, cols)
+    const header = (
+      <Box key="header" flexDirection="column">
+        <Box key="map">
+          <Text {...accent}>{map === null ? heading : link(map.url, heading)}</Text>
+        </Box>
+        {map?.destination == null ? null : text('destination', dim, fit(map.destination, cols))}
+      </Box>
+    )
+    if (isLoading) {
+      return (
+        <Box flexDirection="column">
+          {header}
+          {viewing}
+          {text('loading', dim, 'Loading tickets…')}
+          {whiteboardRow}
+          {mapsGroup}
+        </Box>
+      )
+    }
 
+    const tickets = isCurrent ? data.tickets : []
     const end = burndownEnd(data, now)
     const series = isCurrent && data.history !== null ? burndownSeries(data.history, end.at, cols) : null
     const burndown = (s: BurndownSeries, history: BurndownHistory) => (
@@ -621,42 +814,18 @@ export function registerMapPane(on: On) {
       <Box flexDirection="column" width={cols} {...(isDock ? { minHeight: e.props.scroll.bodyRows } : {})}>
         {header}
         {viewing}
+        {whiteboardRow}
         {mapsGroup}
-        {group('frontier', 'Frontier', groups.frontier)}
-        {group('in-progress', 'In progress', groups.inProgress)}
-        {group('blocked', 'Blocked', groups.blocked)}
+        {ticketGroups(tickets)}
         {isCurrent && data.error === null && tickets.length === 0 ? (
           <Box key="no-tickets" marginTop={gap}>
             <Text {...dim}>No open tickets. Fog may remain: /trailhead:map</Text>
           </Box>
         ) : null}
-        {!isCurrent || data.unverifiedCount === 0 ? null : (
-          <Box key="unverified" marginTop={gap}>
-            <Text {...dim}>{unverifiedLine(data.unverifiedCount)}</Text>
-          </Box>
-        )}
-        {!isCurrent || !data.isCapped ? null : (
-          <Box key="capped" marginTop={gap}>
-            <Text {...dim}>{`list capped at ${LIST_LIMIT}`}</Text>
-          </Box>
-        )}
+        {isCurrent ? notes(data) : null}
         {series === null || data.history === null ? null : burndown(series, data.history)}
         <Box key="spacer" flexGrow={1} />
-        <Box key="footer" flexDirection="column">
-          {text('rule', dim, '─'.repeat(cols))}
-          <Box key="footer-row" width={cols} justifyContent="space-between">
-            <Box gap={1}>
-              <Button key="refresh" label="refresh" onPress={() => void requestRefresh($)} />
-              {footer.isInline ? text('age', dim, footer.text) : null}
-            </Box>
-            <Button
-              key="close"
-              label="close"
-              onPress={() => void closePane($).catch(err => debug($, `trailhead mod: close press failed: ${String(err)}`))}
-            />
-          </Box>
-          {footer.isInline ? null : <Box key="age-row">{text('age', dim, footer.text)}</Box>}
-        </Box>
+        {footerOf(data)}
       </Box>
     )
   })

package/plugins/trailhead/hooks/mod/register.tsx

@@ -9,11 +9,13 @@ import type { EngineInterface, Register } from 'claude-code'
 import type { PromptSnapshot, WorkState } from '../../types'
 import { registerMapPane } from './map-pane'
 import { promptSection, repoSlug, snapshotKey } from './work-state-prompt'
-import { fit, isMissing, parseWorkState, pipeline, sameValue, statusLine } from './work-state-view'
+import { fit, isMissing, nextOwnTicket, parseWorkState, pipeline, sameValue, statusLine } from './work-state-view'
 import type { StageStatus } from './work-state-view'
 
 export const workState = atom({ plugin: 'trailhead', key: 'workState' } as const, null as WorkState | null)
 export const isOrphaned = atom({ plugin: 'trailhead', key: 'isOrphaned' } as const, false)
+// The ticket this session works, kept across a work-state file other sessions share.
+export const ownTicket = atom({ plugin: 'trailhead', key: 'ownTicket' } as const, null as number | null)
 export const promptSnapshot = atom({ plugin: 'trailhead', key: 'promptSnapshot' } as const, null as PromptSnapshot | null)
 
 const STATE_PATH = '.trailhead/work-state.json'
@@ -95,16 +97,27 @@ async function apply($: Dollar, state: WorkState | null, orphaned: boolean) {
   pin($, state, isStale)
 }
 
+// Decided from the state read before this refresh replaces it.
+async function setOwnTicket($: Dollar, next: WorkState | null) {
+  const prev = await read($, ownTicket)
+  const value = nextOwnTicket(prev, await read($, workState), next, await $.session.id())
+  if (value !== prev) await update($, ownTicket, () => value)
+}
+
 async function refresh($: Dollar) {
   let text: string
   try {
     text = (await $.fs.read(STATE_PATH)) as string
   } catch (err) {
     // A missing file means no ticket in play; any other failure is transient: keep the last state.
-    if (isMissing(err)) await apply($, null, false)
+    if (isMissing(err)) {
+      await setOwnTicket($, null)
+      await apply($, null, false)
+    }
     return
   }
   const state = parseWorkState(text)
+  await setOwnTicket($, state)
   if (state === null) return apply($, null, false)
   const session = await $.session.id()
   return apply($, state, state.session !== null && state.session !== session)