feat(session): impeccable pass + tasklane keyboard flow #158

chihlasm · 2026-05-01T21:03:09Z

chihlasm commented

2026-05-01 21:03:09 +00:00

Summary

Impeccable session-screen pass — heuristic score moved 24/40 → 33/40 across five passes (distill, quieter, layout, typeset, polish), removing the duplicate "Suggested checks" chip strip in favor of the TaskLane as the single source of truth, dropping every banned decoration (side stripes, gradient surfaces, backdrop blur, accent borderTop), consolidating the session header to two visible primary actions plus a kebab, anchoring the messages column to match the composer width, and unifying 14 distinct text sizes into a 5-step scale.
TaskLane keyboard-first answer flow — Enter submits + auto-advances to the next pending task, Shift+Enter inserts a newline, Esc cancels, and after the last task focus jumps to Send Responses so the engineer can fire the whole batch with one more keystroke. Mouse path also auto-advances.
Linked banner + script-panel lifecycle, collapsible "What we know" — the ProposalBanner and the InlineNoTemplateDialog / TemplateMatchPanel are now one logical surface (collapse hides both, dismiss closes both), and the WhatWeKnow section is collapsible with sessionStorage memory and an auto-collapse-at-5-facts heuristic so Questions and Diagnostic Checks stay above the fold on busy sessions.
Side fix: ParameterizationPreview no longer over-highlights short parameter values like "D" (a drive letter would have lit up every capital D in Get-ADUser, Add-Type, etc.) — added a word-boundary check that's conditional on whether the value itself starts/ends with a word character, so multi-char values with leading punctuation ("D:\Folder") still match cleanly when adjacent to whitespace or punctuation.

What's not in this PR

Two backlog entries logged in .ai/TODO.md for follow-up:

ConcludeSessionModal paused/escalated step still forces a single-artifact choice (Ticket Notes / Client Update / Email Draft) — real escalations almost always need at least two of the three. Recommended shape: multi-select with smart pre-checks per outcome, parallel generation, per-result Copy / Post / Send actions. Real feature work, deferred.
bg-card-hover Tailwind class doesn't resolve in CommandPalette (Tailwind v4 generates bg-bg-card-hover from --color-bg-card-hover, not bg-card-hover). Other call sites use the explicit var(...) form that works. Two-line fix, but outside the session-screen scope.

Test plan

Distill — chat region

Open /pilot/:sessionId on a session with active questions/checks
Verify the Next steps · N pending in Tasks cue shows above the latest AI bubble and disappears when all tasks are handled
Verify there is no chip strip between the messages and the composer
Apply a suggested fix that opens the InlineNoTemplateDialog → click the banner's collapse chevron → both the banner and the script dialog should hide; uncollapse → both should return
Apply a fix → Dismiss the banner → both surfaces should disappear

Quieter — decoration

No 3px side stripes anywhere (TaskLane done states, ProposalBanner modes, WhatWeKnow fact rows)
No gradient backgrounds on WhatWeKnow or any ProposalBanner mode
No backdrop blur on the handoff-context overlay
TaskLane header has no orange/red accent borderTop
Done question/check cards in the lane are quiet — leading green check + muted text, no green-tinted background

Layout

Session header on desktop: only Resolve · Escalate · ⋯ visible during active session; Context, New Ticket, Update Ticket, Pause live in the kebab
Mobile (<sm:) header: single kebab with feature parity (now includes Context + New Ticket too)
Messages column is centered to max-w-3xl on wide viewports
Chat bubbles are rounded-xl, matching the composer

Typeset

No visible regressions from the size sweep — text reads at consistent weight/scale; uppercase section labels still micro-cap (10px)

WhatWeKnow collapsible

Open a session with 0–4 facts → section is expanded by default
Open a session with 5+ facts → section is collapsed by default
Toggle the section header → state persists across page reloads on the same session
Switch to a different session → the new session uses its own preference (or the auto-heuristic if no preference exists yet)

TaskLane keyboard flow

Click Answer on the first question → textarea focuses
Type → Enter → marks done, focus jumps to the next pending task's textarea
Shift+Enter inserts a newline (does not submit)
Esc clears the input and reverts the task to pending
On the last pending task, Enter marks it done and focus moves to Send Responses — Enter there fires the batch
Mouse-only flow still works: clicking Answer/Done auto-advances too
Action textareas behave the same as question textareas (Enter to submit, paste-then-Enter still works since paste doesn't fire keydown)

ParameterizationPreview

Trigger a suggested fix that includes a script with parameters
A short parameter value like "D" (or any single-char letter that appears inside identifiers) does not light up every capital D in the body — only matches at word boundaries
Multi-char values with leading punctuation (e.g. a path) still match cleanly when surrounded by whitespace

Polish

TaskLane question Answer button shows a Pencil icon; per-check Explain toggle shows a HelpCircle icon (no longer the same icon for both jobs)
Keyboard hint (⏎ submit · ⇧⏎ newline) under open inputs reads at full muted contrast — legible at a glance
No visible regression from the font-sans audit (sites where it was redundant should look identical to before)

Build / CI

docker exec -w /app resolutionflow_frontend npx tsc -b clean
docker exec -w /app resolutionflow_frontend npm run lint clean
docker exec -w /app resolutionflow_frontend npm run build clean (existing Vite large-chunk warning only)

🤖 Generated with Claude Code

## Summary - **Impeccable session-screen pass** — heuristic score moved 24/40 → 33/40 across five passes (distill, quieter, layout, typeset, polish), removing the duplicate "Suggested checks" chip strip in favor of the TaskLane as the single source of truth, dropping every banned decoration (side stripes, gradient surfaces, backdrop blur, accent borderTop), consolidating the session header to two visible primary actions plus a kebab, anchoring the messages column to match the composer width, and unifying 14 distinct text sizes into a 5-step scale. - **TaskLane keyboard-first answer flow** — Enter submits + auto-advances to the next pending task, Shift+Enter inserts a newline, Esc cancels, and after the last task focus jumps to Send Responses so the engineer can fire the whole batch with one more keystroke. Mouse path also auto-advances. - **Linked banner + script-panel lifecycle, collapsible "What we know"** — the ProposalBanner and the InlineNoTemplateDialog / TemplateMatchPanel are now one logical surface (collapse hides both, dismiss closes both), and the WhatWeKnow section is collapsible with sessionStorage memory and an auto-collapse-at-5-facts heuristic so Questions and Diagnostic Checks stay above the fold on busy sessions. - **Side fix**: ParameterizationPreview no longer over-highlights short parameter values like `"D"` (a drive letter would have lit up every capital D in `Get-ADUser`, `Add-Type`, etc.) — added a word-boundary check that's conditional on whether the value itself starts/ends with a word character, so multi-char values with leading punctuation (`"D:\Folder"`) still match cleanly when adjacent to whitespace or punctuation. ## What's not in this PR Two backlog entries logged in `.ai/TODO.md` for follow-up: - `ConcludeSessionModal` paused/escalated step still forces a single-artifact choice (Ticket Notes / Client Update / Email Draft) — real escalations almost always need at least two of the three. Recommended shape: multi-select with smart pre-checks per outcome, parallel generation, per-result Copy / Post / Send actions. Real feature work, deferred. - `bg-card-hover` Tailwind class doesn't resolve in CommandPalette (Tailwind v4 generates `bg-bg-card-hover` from `--color-bg-card-hover`, not `bg-card-hover`). Other call sites use the explicit `var(...)` form that works. Two-line fix, but outside the session-screen scope. ## Test plan ### Distill — chat region - [ ] Open `/pilot/:sessionId` on a session with active questions/checks - [ ] Verify the **Next steps · N pending in Tasks** cue shows above the latest AI bubble and disappears when all tasks are handled - [ ] Verify there is **no** chip strip between the messages and the composer - [ ] Apply a suggested fix that opens the InlineNoTemplateDialog → click the banner's collapse chevron → both the banner and the script dialog should hide; uncollapse → both should return - [ ] Apply a fix → Dismiss the banner → both surfaces should disappear ### Quieter — decoration - [ ] No 3px side stripes anywhere (TaskLane done states, ProposalBanner modes, WhatWeKnow fact rows) - [ ] No gradient backgrounds on WhatWeKnow or any ProposalBanner mode - [ ] No backdrop blur on the handoff-context overlay - [ ] TaskLane header has no orange/red accent borderTop - [ ] Done question/check cards in the lane are quiet — leading green check + muted text, no green-tinted background ### Layout - [ ] Session header on desktop: only **Resolve · Escalate · ⋯** visible during active session; Context, New Ticket, Update Ticket, Pause live in the kebab - [ ] Mobile (`<sm:`) header: single kebab with feature parity (now includes Context + New Ticket too) - [ ] Messages column is centered to `max-w-3xl` on wide viewports - [ ] Chat bubbles are `rounded-xl`, matching the composer ### Typeset - [ ] No visible regressions from the size sweep — text reads at consistent weight/scale; uppercase section labels still micro-cap (10px) ### WhatWeKnow collapsible - [ ] Open a session with 0–4 facts → section is expanded by default - [ ] Open a session with 5+ facts → section is collapsed by default - [ ] Toggle the section header → state persists across page reloads on the same session - [ ] Switch to a different session → the new session uses its own preference (or the auto-heuristic if no preference exists yet) ### TaskLane keyboard flow - [ ] Click Answer on the first question → textarea focuses - [ ] Type → Enter → marks done, focus jumps to the next pending task's textarea - [ ] Shift+Enter inserts a newline (does not submit) - [ ] Esc clears the input and reverts the task to pending - [ ] On the **last** pending task, Enter marks it done and focus moves to **Send Responses** — Enter there fires the batch - [ ] Mouse-only flow still works: clicking Answer/Done auto-advances too - [ ] Action textareas behave the same as question textareas (Enter to submit, paste-then-Enter still works since paste doesn't fire keydown) ### ParameterizationPreview - [ ] Trigger a suggested fix that includes a script with parameters - [ ] A short parameter value like `"D"` (or any single-char letter that appears inside identifiers) does **not** light up every capital D in the body — only matches at word boundaries - [ ] Multi-char values with leading punctuation (e.g. a path) still match cleanly when surrounded by whitespace ### Polish - [ ] TaskLane question Answer button shows a **Pencil** icon; per-check Explain toggle shows a **HelpCircle** icon (no longer the same icon for both jobs) - [ ] Keyboard hint (`⏎ submit · ⇧⏎ newline`) under open inputs reads at full muted contrast — legible at a glance - [ ] No visible regression from the `font-sans` audit (sites where it was redundant should look identical to before) ### Build / CI - [ ] `docker exec -w /app resolutionflow_frontend npx tsc -b` clean - [ ] `docker exec -w /app resolutionflow_frontend npm run lint` clean - [ ] `docker exec -w /app resolutionflow_frontend npm run build` clean (existing Vite large-chunk warning only) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

chihlasm added 7 commits 2026-05-01 21:03:09 +00:00

wip(handoff): audit TODO and Gitea issue validity 595844de0b

Co-Authored-By: Codex <noreply@openai.com>

wip(handoff): clean stale TODOs and plan issue cleanup a21fe93454

Co-Authored-By: Codex <noreply@openai.com>

wip(handoff): start issue cleanup plan sections 1 and 2 4d8b107121

Co-Authored-By: Codex <noreply@openai.com>

feat(session): impeccable session-screen pass + tasklane keyboard flow 0156aae684

Multi-step UX refactor of the assistant chat session screen, run via the
$impeccable skill. Heuristic score moved 24/40 → 33/40 (+9), with the biggest
gains on Aesthetic & Minimalist (1→3), Consistency & Standards (1→3), and
Recognition Rather Than Recall (2→4).

Distill — chat region:
- Remove the "Suggested checks" chip strip + selected-chip detail card; the
  TaskLane is the single canonical home for "what to do next"
- Add an inline Next steps · N pending cue above the latest action-bearing
  AI bubble (anchors attention without duplicating the lane's items)
- Link banner ↔ script-panel lifecycle: collapsing or dismissing the
  ProposalBanner now also hides the InlineNoTemplateDialog / TemplateMatchPanel
- Drop backdrop-blur on the handoff-context overlay (DESIGN-SYSTEM hard rule)

Quieter — drop decoration overshoot:
- Remove 3px side stripes on TaskLane done cards, all 6 ProposalBanner modes,
  WhatWeKnowItem fact rows
- Drop bg-gradient surfaces on WhatWeKnow + every ProposalBanner mode
- Drop 2px accent borderTop on the TaskLane header
- Replace bordered avatar boxes in banners with inline state-colored icons
- Each surface now uses a single decoration channel (top border + inline icon)

Layout:
- Header consolidates to Resolve + Escalate + ⋯ kebab; Context, New Ticket,
  Update Ticket, Pause now live behind the kebab on desktop, with feature
  parity in the existing mobile overflow menu
- Messages column anchors to max-w-3xl mx-auto to match the composer
- Chat bubbles drop from rounded-2xl to rounded-xl for vocabulary alignment

Typeset:
- Unify text sizing from 14 distinct sizes (with sub-pixel oddities and
  rem/px duplicates) to a 5-step scale: 10px / 11px / text-xs / 13px / text-sm

WhatWeKnow collapsible:
- Header is now a toggle; section body hides when collapsed
- Auto-collapses on first render when facts ≥ 5 so Questions / Diagnostic
  Checks stay above the fold
- Engineer's choice persists in sessionStorage per session and beats the
  auto-collapse heuristic on subsequent renders
- key=activeChatId on both render sites resets state cleanly across sessions

Polish:
- Split MessageCircleQuestion into Pencil (question Answer CTA, write
  affordance) + HelpCircle (per-check Explain toggle, universal help icon) —
  same icon for two different jobs was a discoverability bug
- Drop redundant text-xs from font-sans text-[0.625rem] / text-[0.6875rem]
  double-class definitions; the more-specific size always wins

TaskLane keyboard flow:
- Enter submits and auto-advances to the next pending task; Shift+Enter
  inserts a newline (consistent across question and action textareas — paste
  events don't fire keydown, so paste-then-Enter still works as expected)
- Esc cancels (same as the Cancel button)
- After the last pending task is submitted, focus moves to the Send Responses
  button so the engineer can fire the whole batch with one more keystroke
- Subtle hint row under each open input teaches the shortcut

Type-check, lint, and build all clean.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

fix(parameterization): word-boundary check prevents over-eager value match 8b0358af3b

ParameterizationPreview.tokenize() matched highlight values via raw
seg.text.startsWith(value, cursor) with no word-boundary check and no
minimum length. A param value like "D" (e.g. a drive letter) lit up every
capital D in the script body — Get-ADUser, Add-Type, Disable- all rendered
as proposed-parameter pills.

Add a word-boundary guard: a candidate match is only accepted if either
side of the match either falls at start/end of the segment, OR the
adjacent character is non-alphanumeric. The guard is conditional on
whether the value itself starts/ends with a word char, so values that
begin or end in punctuation (e.g. "D:\\Folder") still match cleanly when
they sit next to whitespace or punctuation.

Surfaced 2026-05-01 while testing the suggested-fix flow with a real
PowerShell script.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

chore(ai): log followup TODOs surfaced during impeccable pass 708e8b977f

Two backlog entries surfaced while polishing the session screen:

- ConcludeSessionModal paused/escalated step forces a single-artifact
  choice (Ticket Notes / Client Update / Email Draft). Real escalations
  often need at least two of the three. Recommended shape: multi-select
  with smart pre-checks per outcome, parallel generation, per-result
  Copy / Post / Send actions. Feature work, deferred.

- bg-card-hover Tailwind class doesn't resolve in CommandPalette. The
  --color-bg-card-hover token generates bg-bg-card-hover (Tailwind v4
  takes the full token name minus --color-). Other call sites use the
  explicit hover:bg-[var(--color-bg-card-hover)] form that works; the
  CommandPalette classes silently produce nothing. Fix is two lines —
  swap to the explicit form, or add a --color-card-hover semantic
  mapping in index.css.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

chore(session): bump keyboard hint contrast + drop redundant font-sans

Mirror to GitHub / mirror (push) Successful in 12s

Details

CI / frontend (pull_request) Successful in 5m33s

Details

CI / backend (pull_request) Successful in 10m57s

Details

CI / e2e (pull_request) Successful in 13m21s

Details

d3a9031e23

Two small ergonomic fixes after the impeccable pass:

- TaskLane keyboard hints (⏎ submit · ⇧⏎ newline) under each open input
  were rendered at text-muted-foreground/70, just shy of legible at a
  glance. Drop the /70 opacity modifier so they read at full muted weight
  on first look without becoming visually loud.

- 12 sites across the session screen had explicit font-sans utilities,
  but the body default is already IBM Plex Sans (via --font-sans in
  index.css and Tailwind v4's default-sans binding). None of the call
  sites sit inside a font-heading or font-mono cascade, so every
  font-sans there was a no-op. Drop them. ConcludeSessionModal also had
  three "text-xs font-sans text-xs" triplets — drop both the redundant
  font-sans and the doubled text-xs in one pass.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

chihlasm merged commit 5e10005276 into main

2026-05-01 21:53:14 +00:00

chihlasm deleted branch feat/session-distill-quieter

2026-05-01 21:53:14 +00:00

chihlasm referenced this issue from a commit

2026-05-01 21:53:16 +00:00

Merge pull request 'feat(session): impeccable pass + tasklane keyboard flow' (#158) from feat/session-distill-quieter into main

chihlasm referenced this issue from a commit

2026-05-05 05:21:14 +00:00

refactor(sidebar): collapse rail/sections to single-IA, log docs

Sign in to join this conversation.