create-pmos 0.124.0 → 0.125.0

package/workspace/public/pm/console3-lift.md

@@ -0,0 +1,220 @@
+---
+type: Reference
+title: console3 lift note for Work, Briefing and Calendar
+timestamp: 2026-10-10
+---
+
+# console3 lift note
+
+Source: `prototype/pmos-console-handoff/mockups/console3.html` (git ref `feat/console3-merge`, 5,241 lines). The mockup is the
+UI for the Work, Briefing and Calendar views (PM instruction, reconciliation R4a). This note says what came from where. Line
+numbers are lines of that file.
+
+## The stylesheet: `pm/console3.css`
+
+Generated from the mockup's `<style>` block (lines 5 to 966), not hand-copied.
+
+- Lifted: every rule the three views use. Each selector is prefixed with `.c3`, so a view's root (class `c3`) is the only scope.
+  The mockup's `.ph` phone class becomes `.c3.ph`; the views toggle it under 640px (`c3Phone` in `pm-work-view.js`).
+- Colours: the mockup's own variables map to D38 tokens (`--bg` background, `--fg` foreground, `--mfg` muted-foreground, `--ok`
+  success, `--warn` warning, `--bad` destructive, `--opp` purple, `--acc` brand-mark). `--card`, `--muted`, `--border`, `--ring`,
+  `--mono`, `--sans` already share their names with `tokens.css`. The sizes (`--fs-1..6`, `--sp-1..5`), the soft accent
+  (`--accw`) and the shadows (`--sh1..3`, `--hi`) are declared on `.c3`, with a light variant under `[data-pm-theme="light"]`.
+- Kept as written: `#fff` text on the blue accent, shadow and scrim alphas, mask gradients (no token exists).
+- Keyframes are renamed `c3-NAME`.
+- Left out: the shell, dock, sheets, palette, toast, banner (fixed), phone tray and one-screen phone layout (`.ph1`, `.cph`,
+  `.tray`, `.tickrow`), and the Initiatives, Reports and Releases classes. None of the three views draws them.
+- Added (marked "console3.css addition" at the end of the file): a disabled look for `.slt` and `.pill`, `.xp:not(.open)` content
+  hidden, and `touch-action:pan-x` on `.fc` so a vertical swipe on a card does not scroll the page.
+
+Loaded by `ensureC3Css()` in `pm-work-view.js`, called from each of the three view modules (a `<link data-c3>` appended to
+`document.head` once, the way `primitives.js` links `components.css`). `index.html` is not edited. The same call places the
+mockup's icon sprite (lines 970 to 1026, ids renamed `c3i-*`, plus the `edit` and `trash` symbols of line 4515) in the body.
+
+## Work: `pm/pm-work-view.js`
+
+Lifted (markup and behaviour):
+- Lens bar: `.calbar > .seg` with icon, label and `.bdg.g` count, the group toggle as `.ib` (lines 3207, 3281).
+- Add line: `.c3add > .form` plus `.chips2` with the live chips: "adds to", `.tag`, `.chip2`, `.fl pN`, `.st.warn` (lines 4573 to 4578).
+- Rows: `li.nrow.wrow` with `.rv.l`, `.rv.r`, `.ki(.hot)`, `.nb > .tt + .chips + .xp > .xi`, and `.qa` quick actions (lines 3258 to 3261).
+- Swipe: the 8px start, the `--dx` follow, the `.rv` reveal and the 90px commit (lines 2425 to 2438); the `e` and `n` keys (line 2467).
+- Case file: `.case > .sit`, `.c3jf` fields, `.c3steps` (`.c3sh`, `li > .c3sg .c3stt .chips2`), `.cft` footer (lines 4595 to 4605, 4651).
+- Lens header `.lh`, list `section.card.sect > .sh2`, group-by-job cards, `.fold` empty state, `.brief.sbb > .bcols > .bcol.l/.r` (lines 3262 to 3281, 3348).
+- Jobs card: `section.card.sect`, `.nrow` with `.pbar` and a case file (lines 4667 to 4671).
+- Undo toast: the mockup's toast-with-Undo, on the real `toast()` primitive and the real `/undo` route.
+
+Adapted: the data (every row comes from `GET /api/pm-items`, writes go through `pmPost`); the case file fields are the real
+edit fields (title, due, priority, waiting on, job) in the `.c3jf` grid; actions are `.pill` buttons; the case file is drawn
+only while a row is open and opens in place so the `.xp` transition plays; the lens header has no ring (the API gives no
+done count per lens).
+
+Not lifted: the card deck above the list (`workCards`, `WC`, lines 3283 to 3340) and the hero graphics (lines 3366 to 3405):
+their text and numbers are invented sample data. The flow card (line 3344): its counts are not served. The microphone button
+of the add line (line 4636): nothing real transcribes. The slide-to-confirm: Work has no outward send. The `Options` pill stays
+disabled as before. The phone one-screen layout (line 3411).
+
+## Briefing: `pm/briefing-deck.js` (and `pm/briefing-model.js`)
+
+Lifted:
+- Stance bar with the day-part switch: `.stance`, `.ki`, `.seg.dp` (lines 2206, 2332).
+- Running line: `.tick > .tkt > .tki`, drawn twice for the loop (lines 539 to 545).
+- Banner: the mockup's `.incident` block (line 99) for a pinned Critical, since the mockup's `.banner` is a fixed toast.
+- Deck: `.deck`, `.fc` with `.ff`, `.cf` (`.cfa`, `.cfh .hero`, `.cfk .kp`, `.cff .cfx .cfr`), `.flipg`, `.fb` (`.fh`, `.case`), dots `.dk .dkd` (lines 2324 to 2331, 3088, 764 to 768).
+- Heroes: `.hn` (line), `.hr` with the ring (ring), `.hbs .hbr` (bars), `.hrw .hrr` (text kinds) (lines 3095 to 3101).
+- Case file: `.sit`, `.chgl`, `.opts .opt(.rec)`, `.slt`, `.cft` (lines 2275 to 2294).
+- Behaviour: flip with `.fl-out`/`.fl-in` (line 2403), tilt (line 2414), `deckSync` and the dots (line 2163), arrow keys and Escape (lines 2198, 2463).
+
+Adapted: the cards, ticker, banner and tags come from `GET /api/briefing` through `cardView`; tags map to the mockup's tag
+table by `TAG_STYLE` in `briefing-model.js` (line 2207, real token colours), the lens blurb by `PART_STYLE` (line 2206).
+`data-tag` carries the mockup's lowercase key (`critical`, `justin`, `opp`, `small`, `big`); the engine's label is in
+`data-tag-label`. The swipe is vertical (up opens the case file, down closes it, `swipeDir`), as the mockup's help text says,
+on top of the mockup's horizontal scroll deck. The case-file options are read-only text; the slide is a disabled placeholder.
+
+Not lifted: the clock-driven `PARTS` times and the invented `CARDC` and `focusCards2` content (lines 2206 to 2322, 2306 to 2323);
+the needs, review and handled-for-you sections, the time-lens ribbon, the notification sheet and bell (lines 2342 to 2361,
+2472 onwards): other data, other views. The `.cfr` rows use only the engine's suggested move.
+
+## Calendar: `pm/calendar-views.js`
+
+Lifted:
+- Zoom bar: `.calbar > .lens > .ib + .seg + .ib`, prev and next `.ib`, the `.tdy` Today chip (lines 2584, 2790 to 2800).
+- Lens header `.lh` (line 2582), animation classes `.zi .zo .sn .sp` (lines 558 to 563).
+- Day: `.vday` with `.hr`, `.vb`, `.vnow` placed by time (line 1400). Week and quarter or year rows: the `.nrow` day list (line 2620). Month: `.cal > .dh/.cd` with `.heat` (line 1555).
+- Gantt: the `svg.pg` chart and `.pgl` legend, rebuilt from `progSVG` (lines 2712 to 2735): label column, day ticks, today column, status text, promised diamond.
+- Strategy lens: the direction card `.fc.solo.on.dir` with `.dial` and `.sevs` (lines 2958 to 2966), the key-result rows `.krg`, `.krt`, `.chip-s` (line 2863), and the `.fold` notes.
+- Gestures: sideways swipe over 80px, `+` and `-`, `t`, arrow keys (lines 2689 to 2698).
+
+Adapted: all values come from `GET /api/calendar-views`. The mockup's gantt draws actual progress and a forecast overrun from
+sample data; here the planned bar, the forecast bar (coloured by the server's status), the promised date and the slip in days
+are drawn, and nothing else. The `.krt` bar shows how far a KR is behind its expected line (the only measure the server
+sends), not a position between baseline and target. The dial is derived by the lens's own rules: pivot signal, else early
+warning, else (when something is scored) persevere, else no highlight.
+
+Not lifted: the meeting card, prep pack, stage switch and notes (lines 2586 to 2597): meetings carry no prep or stage data;
+the week SVG of meeting hours (line 2606): events have no hours except an optional start; the summary and focus cards (lines
+2762 to 2784): invented text; early signals, synergy, maturity and bets cards (lines 2884 to 2960): no source; pinch zoom and
+the ctrl-wheel zoom (lines 2683, 2693).
+
+# R4b: the remaining views
+
+Same source (`console3.html`, ref `feat/console3-merge`, 5,241 lines) and the same method. The stylesheet grew by an appended block
+("R4b" in `console3.css`): the same generator run over the mockup's `<style>` block (lines 5 to 966) with only the shell dropped, and
+only the rules these views draw added (`.lc` (nine columns), `.lkrow`, `.hx`, `.mk`, `.dpn .dsec .dfi`, `.sntrack .snh`, `.c3rel .c3dt`,
+`.c3ag .c3res2 .c3strip .c3mv`). That block supersedes the header's "left out: the Initiatives, Reports and Release classes". Three
+deliberate differences: the mockup's `.sn` (a timeline point) is scoped as `.sntrack .sn`, because `.calbody.sn` is the Calendar's animation
+class; `.c3.c3e` (an embedded root: block layout, no page-level grid or container) for the views that mount where no `.c3` root exists
+(the document rail, the outbox, the slide, the sessions panel, the sheet body); and a few small additions marked "console3.css addition".
+Every view calls `ensureC3Css()`. Where a view has its own root (lifecycle, releases, forecast, reports) it carries `c3` and `c3Phone`.
+No `innerHTML` is used with real data: the mockup's string templates are `el()` calls. Every `data-*` hook the views already emitted stays.
+Press controls stay presses (Allow, Deny, Accept, Revise, Reject, Add, Save, Create): the mockup turns some into slides, but the routes and
+tests assume a press, and no outbound channel exists.
+
+## Lifecycle lens: `pm/lifecycle-lens.js` (and `lifecycle-lens-model.js`, unchanged)
+
+Lifted: view bar `.calbar` with the nine stages as `.seg` buttons (icon, label, `.bdg.g` count) and the scope as `.chips2 .pill` (iniHead,
+3576; icons from ILI 3437 and 4686); `.lh` (3579); `.calwrap > .calbody > .brief.sbb > .bcols` (3600); `.cdeck > .deck > .fc` with the dots
+`.dk .dkd` (iniDeck 3580; the card is the Briefing's `.ff > .cf > .cfa .cfh .cff`); the lifecycle line `.lc` (3487, nine cells); the stage
+list `section.card.sect > .sh2 + ul.list > li.nrow` with a case file in `.xp > .xi` (c3needs 4714, c3parkRow 4719: Park and Kill with a reason).
+Adapted: data is the Initiatives ctx rows; the deck has one card per initiative at the stage (five at most, none invented), a ring of
+done stages over signalled stages; the lens header says "no signal yet" or "skipped by the lane" from `stageNote`; Park and Kill are `.pill`s
+that call `setLifecycle`. Not lifted: the five invented cards per stage (3490 to 3562), the hypothesis, idea, score and chart lists and the
+right-hand charts, the case file's "have the agent draft it" options with slides, the Build and Deliver ticket and release lists (4730 to
+4760; Releases is its own view), the phone one-screen layout (3604).
+
+## Releases: `pm/releases-view.js`
+
+Lifted: `.lh` (4941), `.bcols`, the list with a "New release" row (`.ki` with the soft accent and plus) and one `li.nrow` per release with
+initiative chips, `.tag` tags, date chips, `.st` flags and the case file `.case > .sit + .c3rel` (c3relRow 4867, c3relList 4869,
+C3.cases.rl 4880, c3wizard 4903); the create form as `.c3rel` with initiative pills, type pills and `.c3dt` date and time labels; tag
+detection and gap flags as a tag row and `.chgl` rows; the summary lines as `.form.row` (text and source select) with a refused line
+flagged. Adapted: all from `GET /api/releases`; "accepted by the PM" replaces the mockup's "shipped" (acceptance is not shipping); the open
+rules card says no freeze rule is set and no Jira tag is created from here. Not lifted: the invented releases and Jira tags (C3.REL, C3.JV,
+4851 to 4862), the ticket table `.tbl` (no tickets in the payload), ready-to-ship checks, the freeze chip and its example rule, sync from
+Jira and the demo button, the outward options (tag, person update, calendar hold: each needs the slide and an outbox), the promises card,
+the "Jira release tags" bars.
+
+## Timeline and forecast: `pm/timeline-forecast-view.js`
+
+Lifted: `.lh`, `.bcols`, the Timeline card `section.card > h3 + .snh + .sntrack + svg.pg + .pgl` (timeLeft 4036, scrubHtml 4015); the Gantt
+redrawn from ganttTix (4016): label column with the critical-path dot, Monday ticks, the today column, dependency elbows with arrowheads
+(red when both ends are critical), planned bar with the thin forecast bar under it, the red dot where the forecast passes the plan, the status
+text on the right; the "what changed" `ul.hx` (4038); capacity as `.hbr` bars (capCard 4442). Adapted: the time machine has five points
+(today and four earlier days) instead of the mockup's named plan checks, and Replay steps through them; a point lists the plan as it stood
+(`/api/forecast/at` returns items, not forecasts, so the Gantt does not redraw for a past day); the slider of the earlier view is the track.
+Apply stays disabled with its title. Not lifted: the dashed "where it was before" ghost bars (no earlier forecast is served), the promised
+line (no promise is served), progress fill (none served; a done item is filled), calendar sync, scope-creep and drift charts (4038 to 4040,
+invented), the forecast matrix (4042).
+
+## Reports: `pm/report-families-view.js`
+
+Lifted: the family switch `.calbar > .seg` and variant pills (r2head 4320); `.lh` (4330) and the facts row `.lkrow > .chip2` (4324);
+`.bcols`; the report card with one `li.nrow` per section (rsRow 4285: `.ki`, `.tt`, traced, stale and needs-input chips, `.xp` for where
+the claims come from) ending in the send row with the slide (r2composer 4334); the claims check as `.hbs > .hbr` (r2claims 4341); the
+who-holds-what list as `ul.hx` (r2right 4343). Adapted: families, variants and the claims check are the real routes; the send slide is the
+disabled placeholder used on Briefing, with `SEND_WHY` as its title. Not lifted: the invented reports, sections and sources (R2R, pjSecs,
+pdSecs, 4224 to 4258), audience pills, the card deck (rp1 to pe4), swipe to approve or cut a section (no approve record), the
+communications queue (the outbox panel is that), the sent history, the document button, benchmark and portfolio cards.
+
+## Slide: `pm/slide-confirm.js`
+
+Lifted: the markup `.slt > span.lb + button.th` (caseHtml 2290) and the drag (2439 to 2447: thumb follows the pointer, `--p` fills the track,
+a short drag nudges and says a tap is not enough). Kept from before: the hash binding, hold Enter and four ArrowRights, `role=slider`,
+reduced motion. The control sets `--tc` itself (a bare slide has no `.case`).
+
+## Outbox: `pm/outbox-panel.js`
+
+Lifted: `section.card.sect > .sh2 + ul.list > li.nrow` with `.ki`, `.tt`, `.chips` and the case file `.case > .sit + textarea + .chgl +
+.slt` (cmRow 4280, r2queue 4338). Claim check rows are `.chgl`. Not lifted: the swipe on a message row, the draft, held and sent
+states and the "external, you approve" chip (the entry carries none of them).
+
+## Document panel: `pm/doc-health-panel.js`
+
+Lifted: `.dpn` with the shield and "N of M checks pass", `ul.chgl` rows (`li.ok` or `li.bad`), the revision list `ul.hx`, the diff as
+`.dpn.dfi > .dsec > p` with `ins` and `del` (docPanel 4090 to 4104, diffHtml 4075, history 4102). Fixed on the way: "Fix with the agent" and
+"Accept" were built with `disabled: ''`, which leaves a button enabled; they are now truly disabled, with their titles. Not lifted: the
+Read, Edit and Relations modes (the rail has its own), per-check fix chips, section flags, the document graph (no relations data here).
+
+## New initiative: `pm/new-initiative-sheet.js`
+
+Lifted: the one-line add `.c3add > .form` with the spark button, the suggestion as `section.card.sect` with `.case > .sit + .chgl` rows
+(lane guess, anchor, prior rejection with `.tag`), fields as `.c3jf` label rows (c3niLine 4786, c3niCard 4787). The dialog is still the
+real `sheet()`; Cancel and Add stay in its footer. Not lifted: the microphone, "try" example pills, the four-step progress list, the lane
+options with slides, anchor pills (the anchor stays a `select`, which the page and its tests set by value), the phone bottom sheet.
+
+## Sessions and the agent card: `pm/sessions-panel.js`, `pm/run-card.js`
+
+Lifted: `section.card.sect > .sh2` with `.bdg.g` counts, `li.nrow > .ki > .mk` (w, n, b) with the agent block in `.xp.open > .xi`, the Automatic
+switch as a `.pill` with `aria-pressed` (c3sessList 5183); the agent block `.c3ag` with the working strip `.fold.a` and `.c3spin`, the result
+`.c3res2` with claims as `.chgl` plus a `.tag` for the basis, the moves as `.chips2.c3mv` pills with the mockup's icons, the revise and
+reject chips, the permission as a case file with the command in `.term` (agBlock 5100, agResultHtml 5082, agMoves 5076, agWorkHtml 5054).
+Moves, revise options and reject reasons come from the card, not the mockup's lists. Not lifted: the invented runs and results (AM, table,
+deck, diagram, file), the reply tray text field and voice (the host's `onReply`), the Rules and "demo" cards, past-run timelines and
+"Continue" (not served), the step strip and helpers (the card has no steps), undo.
+
+# E2b: the shell strip, bell, banner, recording group, read-aloud, haptics and phone tiles
+
+Same source and method. Files: `pm/shell-model.js` (pure logic, tested by `scripts/tests/shell-model.test.js`), `shell-ticker.js` (also the one
+shared read of `GET /api/briefing`, kept 60 s), `shell-bell.js` (bell, list, banner, popup, `buzz`), `shell-recording.js`, `shell-readaloud.js`,
+`shell-phone.js` (the strip and the four tiles). `app.js` has one added line in `setupFrame`: a lazy `import('./shell-phone.js')` that calls
+`mountShell({ parent: root, after: bar.node, go })`. The CSS is the "E2b" block at the end of `console3.css`.
+
+Lifted: ticker `.tick > .tkt > .tki` (lines 539 to 545, 2478 to 2484); bell and `.nbdg` (2476, 2477, 490); the notification list as `.sheet.bs` with
+`.scrim`, `.grab`, `.sh2` and `.nli` rows (2503 to 2506, 489 to 505); `.banner` (492, 2507); `.eq` and the speaker control (512, 2518 to 2530);
+`.recg`, `.recdot` (916 to 924, 4385 to 4400); `.tickrow`, `.tray`, tile `button.tl` (539 to 552, 2486 to 2492).
+
+Rewritten (el() calls, never innerHTML): all of it. Data: ticker lines and banner are the route's `ticker` and `banner`; the bell counts cards
+(`bellCount`); read-aloud says `readText(card)`: the card's own tag, headline, facts and deadline text, nothing added. Haptics are
+`hapticFor(kind, reduced)` and a guarded `navigator.vibrate`. The recording group reads `note-dock.js recordState()` and calls its
+`highlightNow`, `pauseNow`, `resumeNow`, `stopNow` and `openDock`; it never starts a recording (that stays the Record control's job).
+
+Differences, on purpose:
+- The strip sits directly under the top bar, not inside it: `topbar.js` rebuilds its children on every update, which would remove a slot
+  added there. The tools (recording group, speaker, bell) are at the right end of the strip.
+- Under prefers-reduced-motion the ticker shows its lines one at a time, the recording dot is static, and haptics are off.
+- The phone tiles are Briefing, Calendar, Work and More (the places the phone has), not the mockup's Needs you, Review, Next and Handled, whose
+  counts are sample data. Calendar and Briefing both open Today. A tile count appears only where a real number exists (cards, My work).
+- The tile class `.tl` is scoped `.tray .tl` (the mockup also uses `.tl` for the timeline).
+- The red dot is placed on the Notes tab (`[data-fr-dest="notes"]`); this app has no Calendar tab, and the phone's tab bar has no Notes tab, so
+  on a phone the recording group (in the strip) is the indicator.
+- Not lifted: the mockup's invented notifications and timed live arrival; the spoken day-part intro. The read-aloud button reads the top
+  card of the briefing, because the deck exposes no "open card" hook.