feat: session transcript calm-surface redesign - #271

web/src/systems/session/components/thinking-block.tsx (2)

101-102: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Custom comparator is now equivalent to the default. With updateCount gone, the props are exactly thinking and thinkingComplete, so plain memo(...) gives the same behavior with less to maintain.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/thinking-block.tsx` around lines 101 -
102, Remove the redundant custom comparator from the memoized thinking block
component, identified by the comparator comparing prev.thinking and
next.thinkingComplete. Use plain memo(...) now that the component only receives
thinking and thinkingComplete props.

---

41-87: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

The two trigger branches duplicate the same button contract.

Both branches share type, data-testid, aria-expanded, and the same onClick; only the inner content and classes differ. Extracting a single button with a conditional body would keep the two states from drifting (e.g. one branch gaining a handler the other lacks).

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/thinking-block.tsx` around lines 41 - 87,
The live and non-live branches in the thinking trigger duplicate the same button
contract. Refactor the conditional around a single button element, keeping type,
data-testid, aria-expanded, onClick, and shared structural behavior on that
button; conditionally render the existing live or completed inner content and
retain each state’s distinct classes.

web/src/systems/session/components/__tests__/tool-call-card.test.tsx (1)

151-164: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Prefer the data-status/aria-label contract over class-literal assertions.

getAttribute("class")).toContain("text-subtle") couples the suite to a Tailwind literal that any token rename breaks, while the row already exposes data-status and the accessible label as the real contract. If "no signal hue" must be gated, consider asserting the absence of text-success/text-danger instead of the presence of a specific utility.

As per coding guidelines, "Avoid CSS-literal, snapshot, generated, or prose tests unless they are the product contract and no stronger gate exists."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/__tests__/tool-call-card.test.tsx` around
lines 151 - 164, Update the assertions in the running and success cases of the
tool-call card tests to rely on the existing data-status and aria-label contract
instead of asserting the text-subtle CSS class. If verifying the absence of a
signal hue is necessary, assert that text-success and text-danger are not
present while preserving the current status and accessible-label checks.

Source: Coding guidelines

web/src/systems/session/components/__tests__/thinking-block.test.tsx (1)

81-96: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Alignment test pins Tailwind literals rather than a behavioral invariant.

ml-[25px]/pl-[11px] will break on any rail retune even when the layout stays correct. If the 25px rail is the contract, consider expressing it as a token/utility class (or a data-* rail marker) that the test can assert stably.

As per coding guidelines, "Avoid CSS-literal, snapshot, generated, or prose tests unless they are the product contract and no stronger gate exists."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/__tests__/thinking-block.test.tsx` around
lines 81 - 96, Update the ThinkingBlock alignment test around the “Should align
the reasoning body…” case to assert a stable rail token, utility class, or data
attribute instead of the literal ml-[25px] and pl-[11px] Tailwind values. Add or
reuse the corresponding semantic marker in ThinkingBlock so the test verifies
the shared detail-rail alignment contract while retaining the existing border
and visual-style assertions.

Source: Coding guidelines

web/src/systems/session/components/session-resume-failure.tsx (1)

46-66: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Two copies of the same session-level danger banner. Both files hand-roll an identical shell (border-danger/28 bg-danger/4, icon + bold title + text-[12px] text-muted body) with the same ad-hoc font size instead of a token, so any retune must be applied twice.

• web/src/systems/session/components/session-resume-failure.tsx#L46-L66: extract the banner shell (icon, title, body slot) into a reusable component and replace text-[12px] with the matching typography token.
• web/src/systems/session/components/goal/session-goal-header.tsx#L25-L39: render that shared banner instead of re-declaring the wrapper/icon/title/body markup.

As per coding guidelines, "Use design tokens from packages/ui/src/tokens.css and generated DESIGN.md".

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/session-resume-failure.tsx` around lines
46 - 66, The session-level danger banner is duplicated and uses an ad-hoc body
font size. In
web/src/systems/session/components/session-resume-failure.tsx#L46-L66, extract
the shared icon, title, and body banner shell into a reusable component and
replace text-[12px] with the matching typography token from the design system;
in web/src/systems/session/components/goal/session-goal-header.tsx#L25-L39,
render that shared component instead of duplicating the wrapper markup.

Source: Coding guidelines

web/src/systems/session/components/runtime-activity-notice.tsx (1)

214-219: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Use tone instead of data-marker-tone for the progress marker.

Marker exposes data-tone={tone} and its icon styling is keyed on MarkerTone, whose union is neutral | danger | warning | info. The progress branch is leaving tone at "neutral" while setting a non-contract data-marker-tone="progress", so the glyph will render as neutral; pass a valid tone value if this is meant to affect styling.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/runtime-activity-notice.tsx` around lines
214 - 219, Update the progress Marker in the runtime activity notice to use its
supported tone prop instead of data-marker-tone. Pass a valid MarkerTone value,
such as info, so the marker and Activity icon receive the intended styling;
leave the existing role, test ID, and icon unchanged.

web/src/systems/runtime/components/runtime-selector/provider-chips.tsx (1)

62-70: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Home/End rely on wrap-around instead of moving directly.

Home passes the last chip and steps forward, End passes the first and steps back, so both depend on the modulo wrap to land on the intended edge. A direct edge move is easier to read and cannot break if wrapping ever changes.

♻️ Optional: explicit edge focus

+  const focusChip = (target: RailFilter) => {
+    onRail(target);
+    groupRef.current
+      ?.querySelector<HTMLButtonElement>(`[data-rail="${CSS.escape(String(target))}"]`)
+      ?.focus();
+  };
+
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
     if (searching) return;
     if (event.key === "ArrowRight" || event.key === "ArrowDown") {
       event.preventDefault();
       moveFocus(railFilter, 1);
     } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
       event.preventDefault();
       moveFocus(railFilter, -1);
     } else if (event.key === "Home") {
       event.preventDefault();
-      const order = getChipOrder(providers);
-      moveFocus(order[order.length - 1] ?? railFilter, 1);
+      const order = getChipOrder(providers);
+      if (order[0] !== undefined) focusChip(order[0]);
     } else if (event.key === "End") {
       event.preventDefault();
-      const order = getChipOrder(providers);
-      moveFocus(order[0] ?? railFilter, -1);
+      const order = getChipOrder(providers);
+      const last = order[order.length - 1];
+      if (last !== undefined) focusChip(last);
     }
   };

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/runtime/components/runtime-selector/provider-chips.tsx`
around lines 62 - 70, Update the Home and End handlers in the provider-chips
keyboard navigation logic to move directly to the corresponding edge: Home
should focus the first chip and End should focus the last chip, using the
appropriate non-wrapping direction or edge-focus behavior. Preserve the
railFilter fallback when no providers exist.

web/src/systems/runtime/components/runtime-selector/selector-footer.tsx (1)

26-34: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Tighten mode to the reasoning-mode union.

mode: string lets any value reach data-reasoning-mode, which tests and CSS treat as a contract.

♻️ Optional typing tweak

-  mode: string;
+  mode: RuntimeReasoningState["mode"];

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/runtime/components/runtime-selector/selector-footer.tsx`
around lines 26 - 34, Update the FooterNote mode prop to use the existing
reasoning-mode union type instead of string, ensuring only supported values
reach data-reasoning-mode. Reuse the established union symbol from the
surrounding runtime selector types and preserve the component’s existing
behavior.

web/src/components/assistant-ui/session-composer-queued-prompts.tsx (1)

15-98: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Native <button>s replace the shared Button primitive.

The Steer/Edit/Remove controls were previously built on @compozy/ui's Button and are now hand-rolled <button> elements with a bespoke ICON_BUTTON_CLASS, duplicating hover/focus/disabled treatment that the shared primitive already centralizes.

♻️ Suggested direction

-import { CornerDownRight, ListPlus, Pencil, Trash2 } from "lucide-react";
+import { Button } from "`@compozy/ui`";
+import { CornerDownRight, ListPlus, Pencil, Trash2 } from "lucide-react";

Then reintroduce Button (with an icon-only size/variant if one doesn't already exist) for Edit/Remove/Steer instead of raw <button> + manual class strings.

As per coding guidelines, "Reuse primitives exported by packages/ui/src/index.ts and import them from @compozy/ui; generic primitives belong in packages/ui, while domain composites belong in web/src/systems/<domain>/."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/session-composer-queued-prompts.tsx` around
lines 15 - 98, The SessionComposerQueuedPrompts controls currently duplicate
shared button styling with native buttons and ICON_BUTTON_CLASS. Reintroduce the
Button primitive from `@compozy/ui` for the Steer, Edit, and Remove actions, using
existing icon-only sizing and variants where available; remove the bespoke
class-based button styling while preserving their labels, icons, disabled state,
test IDs, and callbacks.

Source: Coding guidelines

web/src/components/assistant-ui/session-message-parts.tsx (1)

21-27: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Stale name and dead data prop.

The component no longer renders a card (it renders a one-line Marker) and data is now required-but-unread while both callers (session-timeline-render.tsx Line 69, session-user-message.tsx Line 22) still pass it. Renaming to SessionDataEventMarker and dropping data in the same change keeps the contract honest.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/session-message-parts.tsx` around lines 21 -
27, The component name and props no longer match its marker-only implementation.
Rename SessionDataEventCard to SessionDataEventMarker, remove the unused
required data prop from its parameter type, and update both callers in the
session timeline and user message components to use the renamed component
without passing data.

web/src/components/assistant-ui/__tests__/session-timeline.logic.test.ts (1)

650-658: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add coverage for the turn-boundary split of marker clusters.

deriveBaseRows splits marker clusters on either a kind change or a turnId change (session-timeline.logic.ts Line 271), but only the kind-change branch is exercised. A same-kind pair across two turns is a cheap extra case.

♻️ Suggested extra test

   it("Should split marker clusters when the kind changes", () => {
     const rows = deriveSessionRows([
       markerEvent("m1", "provider-retry"),
       markerEvent("m2", "compaction"),
     ]);
 
     expect(rows).toHaveLength(2);
     expect(rows.map(row => (row.kind === "data" ? row.count : row.kind))).toEqual([1, 1]);
   });
+
+  it("Should split same-kind markers that belong to different turns", () => {
+    const first = markerEvent("m1", "provider-retry");
+    const second = { ...markerEvent("m2", "provider-retry"), turnId: "turn-2" };
+    const rows = deriveSessionRows([first, second]);
+
+    expect(rows).toHaveLength(2);
+    expect(rows.map(row => (row.kind === "data" ? row.count : row.kind))).toEqual([1, 1]);
+  });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/__tests__/session-timeline.logic.test.ts`
around lines 650 - 658, Add a test alongside the existing “Should split marker
clusters when the kind changes” case that passes two same-kind marker events
with different turnId values to deriveSessionRows, then assert they produce two
separate single-item rows. This should exercise the turnId-change boundary in
deriveBaseRows while preserving the existing kind-change coverage.

web/src/components/assistant-ui/session-timeline-render.tsx (1)

122-172: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

One disclosure grammar, three copies. The summary row, the changed-files roll-up, and the turn fold each hand-roll the same button shell plus rotating chevron; the shared root cause is that no disclosure component owns this shape, so the calm-surface grammar now has to be kept in sync by hand.

• web/src/components/assistant-ui/session-timeline-render.tsx#L122-L172: extract the button shell + chevron into a local TranscriptDisclosure (props: expanded, onToggle, icon, label, trailing) and use it for SessionWorkSummaryRow and SessionTurnFoldRowView.
• web/src/components/assistant-ui/session-changed-files-row.tsx#L63-L107: replace the inline button/chevron markup with the same TranscriptDisclosure, keeping DiffStat as the trailing slot.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/session-timeline-render.tsx` around lines 122
- 172, The disclosure button and rotating chevron are duplicated across three
transcript surfaces. In
web/src/components/assistant-ui/session-timeline-render.tsx:122-172, add a local
TranscriptDisclosure component accepting expanded, onToggle, icon, label, and
trailing, then use it in SessionWorkSummaryRow and SessionTurnFoldRowView; in
web/src/components/assistant-ui/session-changed-files-row.tsx:63-107, replace
the inline disclosure markup with TranscriptDisclosure while passing DiffStat as
trailing.

web/src/components/assistant-ui/session-changed-files-row.tsx (1)

63-107: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff

Ad-hoc typography and spacing literals instead of design tokens. These rows introduce a new family of hand-picked values (text-[11.5px], text-[13.5px], text-[12px], gap-[7px], min-h-[22px], ml-[25px], pl-[11px], size-[18px]) rather than tokens; the shared root cause is that the calm-surface transcript scale was never added to packages/ui/src/tokens.css. As per coding guidelines, "Use design values from packages/ui/src/tokens.css and DESIGN.md; do not invent colors, typography, radius, spacing, or motion values."

• web/src/components/assistant-ui/session-changed-files-row.tsx#L63-L107: replace the text-[11px]/text-[11.5px]/gap-[7px]/ml-[25px]/pl-[11px] literals with the transcript scale tokens.
• web/src/components/assistant-ui/session-timeline-render.tsx#L103-L172: replace the text-[11.5px], text-[12px], gap-[7px], size-[18px], ml-[25px] literals with the same tokens.
• web/src/components/assistant-ui/session-working-row.tsx#L62-L83: replace text-[11.5px], min-h-[22px], gap-[3px] with tokens.
• web/src/components/assistant-ui/session-user-message.tsx#L51-L74: replace text-[13.5px], text-[11px], py-[7px] with tokens, and align USER_CLAMP_MAX_PX with the max-h-44 token rather than two parallel constants.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/session-changed-files-row.tsx` around lines
63 - 107, Replace the ad-hoc typography and spacing values with shared
calm-surface transcript tokens, adding the missing scale to
packages/ui/src/tokens.css as needed. In
web/src/components/assistant-ui/session-changed-files-row.tsx lines 63-107,
update the ChangedFiles row layout; in
web/src/components/assistant-ui/session-timeline-render.tsx lines 103-172,
update the timeline row styles; and in
web/src/components/assistant-ui/session-working-row.tsx lines 62-83, update the
working row styles. In web/src/components/assistant-ui/session-user-message.tsx
lines 51-74, replace the listed text and padding literals and align
USER_CLAMP_MAX_PX with the max-h-44 token.

Source: Coding guidelines

web/src/components/assistant-ui/session-working-row.tsx (1)

34-38: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Reuse TypingDots instead of forking the dot animation here.

TypingDots is still exported from @compozy/ui, but this component renders three working dots with local .session-working-dot styling and custom delay delays. Use the shared primitive, or extend TypingDots with the required styling/delay props instead of duplicating the pattern.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/session-working-row.tsx` around lines 34 -
38, Replace the locally defined WORKING_DOT_DELAYS and duplicated working-dot
rendering in the session working row with the exported TypingDots component from
`@compozy/ui`. Reuse TypingDots directly, or extend it with the required styling
and animation-delay props so the existing appearance is preserved without local
dot-animation logic.

Source: Coding guidelines

web/src/systems/session/lib/pending-permissions.ts (2)

33-49: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Recomputed over the whole transcript on every render.

SessionDecisionDock calls this unmemoized (session-decision-dock.tsx Line 33), so every render walks all messages and all parts. On a long live-tailing transcript this is avoidable work; wrap the call in useMemo keyed on messages at the call site.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/lib/pending-permissions.ts` around lines 33 - 49, The
derivePendingPermissions call in SessionDecisionDock should be memoized with
useMemo, using messages as its dependency so permission derivation only reruns
when the transcript changes. Keep derivePendingPermissions unchanged and update
the call site in SessionDecisionDock.

---

66-82: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Duplicated subject derivation.

permissionReceiptSubject in web/src/systems/session/components/permission-data-part.tsx (Lines 22-29) repeats the command→resource branches verbatim, differing only by omitting the JSON fallback. Extract a shared helper with a flag/variant so the two stay in sync.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/lib/pending-permissions.ts` around lines 66 - 82,
Extract the duplicated command→resource subject derivation from
permissionSubject and permissionReceiptSubject into a shared helper, supporting
the JSON fallback only where needed. Update both functions to use this helper so
their subject-selection logic remains synchronized.

web/src/systems/session/hooks/use-session-goal-header.ts (1)

31-39: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Fourth positional parameter forces undefined placeholders at call sites.

useSessionGoalHeader(WORKSPACE_ID, SESSION_ID, undefined, { stream: false }) (see web/src/systems/session/components/__tests__/session-goal-header.test.tsx Line 118) shows the cost. Folding onPrefillComposer into the options object keeps the signature stable as more flags appear.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/hooks/use-session-goal-header.ts` around lines 31 -
39, Update the useSessionGoalHeader hook signature to move onPrefillComposer
into the existing options object, alongside stream, and adjust all call sites
and related tests to pass it by name without undefined positional placeholders.
Preserve the current callback behavior and stream option semantics.

web/src/systems/session/components/goal/session-goal-strip.tsx (1)

119-128: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Scope aria-live to the status facts, not the whole disclosure.

The section wraps both the trigger and the expandable body, so every expand/collapse announces the full body (contract, run, context, node rows) as a live update. Move aria-live="polite" onto the facts span (Line 149-154) so only the changing state text is announced.

♻️ Proposed change

       aria-label="Goal status"
-      aria-live="polite"
       data-testid="session-goal-strip"

         <span
           data-testid="goal-strip-facts"
+          aria-live="polite"
           className="shrink-0 font-mono text-badge text-subtle tabular-nums"
         >

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/goal/session-goal-strip.tsx` around lines
119 - 128, Move aria-live="polite" from the section element to the facts span
around the status text (the span near lines 149-154). Keep the section’s
existing data attributes and disclosure structure unchanged so only changing
status facts are announced, not expandable content.

web/src/systems/session/components/__tests__/session-decision-dock.test.tsx (1)

154-155: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace the arbitrary setTimeout(10) waits with a deterministic flush.

Both negative assertions (Lines 154-155 and 181-182) rely on a 10 ms sleep, which is flaky on loaded CI and adds real wall time. Awaiting a microtask flush (await Promise.resolve()) or an await waitFor on an observable post-condition is deterministic.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/__tests__/session-decision-dock.test.tsx`
around lines 154 - 155, Replace the arbitrary 10 ms setTimeout waits in the
negative assertion cases with deterministic synchronization, such as awaiting
Promise.resolve() or waitFor on an observable post-condition. Update both
assertion blocks involving approveSession while preserving their existing
not.toHaveBeenCalled expectations.

web/src/systems/session/components/__tests__/session-goal-strip.test.tsx (1)

128-141: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Only the draft affordance is covered; the replace branch is untested.

prefillCommand's replace path builds /goal replace <expectedRunId> <objective> — a format regression there silently stages a wrong command. Add a case asserting the replace string and the "Draft replacement" label.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/systems/session/components/__tests__/session-goal-strip.test.tsx`
around lines 128 - 141, The session goal strip tests only cover the draft
affordance; add a test for the replace branch in SessionGoalStrip. Render with a
replace composerAffordance containing an expectedRunId and objective, assert the
button is labeled “Draft replacement,” and verify clicking it calls
onPrefillComposer with `/goal replace <expectedRunId> <objective>`.

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

packages/ui/src/components/custom/dock-key.tsx (1)

10-13: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace the ad-hoc spacing and typography values.

ml-[3px] and text-[9px] bypass the shared design system in this public primitive. Use documented token-backed utilities instead.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/custom/dock-key.tsx` around lines 10 - 13, Update
the kbd element in the dock-key primitive to replace the arbitrary ml-[3px] and
text-[9px] utilities with documented, token-backed spacing and typography
utilities from the shared design system, while preserving the existing className
composition and props.

Source: Coding guidelines

packages/ui/src/components/custom/dock-actions.tsx (1)

7-15: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Replace arbitrary pixel utilities with shared design tokens.

The new Dock primitives encode spacing, typography, and sizing directly in arbitrary Tailwind values instead of using the repository’s token system.

• packages/ui/src/components/custom/dock-actions.tsx#L7-L15: replace gap-[7px].
• packages/ui/src/components/custom/dock-count.tsx#L7-L16: replace text-[10px].
• packages/ui/src/components/custom/dock-deadline.tsx#L7-L16: replace text-[10px].
• packages/ui/src/components/custom/dock-meta.tsx#L7-L19: replace mt-[5px] and text-[11px].
• packages/ui/src/components/custom/dock-pre.tsx#L7-L21: replace max-h-[130px] and text-[11px].
• packages/ui/src/components/custom/dock-status.tsx#L13-L26: replace mt-[7px] and text-[11px].

As per coding guidelines, design values must come from packages/ui/src/tokens.css and DESIGN.md.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/ui/src/components/custom/dock-actions.tsx` around lines 7 - 15,
Replace the arbitrary Tailwind values in DockActions, DockCount, DockDeadline,
DockMeta, DockPre, and DockStatus with the corresponding shared design-token
utilities defined by tokens.css and DESIGN.md: gap-[7px], text-[10px], mt-[5px],
text-[11px], max-h-[130px], and mt-[7px]. Apply the required changes in
packages/ui/src/components/custom/dock-actions.tsx (lines 7-15), dock-count.tsx
(7-16), dock-deadline.tsx (7-16), dock-meta.tsx (7-19), dock-pre.tsx (7-21), and
dock-status.tsx (13-26), preserving each component’s existing layout and
behavior.

Source: Coding guidelines

web/src/components/assistant-ui/transcript-disclosure.tsx (1)

49-56: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Arbitrary size value instead of a scale/token step.

size-[11px] doesn't correspond to a spacing/size scale step (nearest are size-2.5/size-3). Coding guidelines call for using tokens/scale values rather than inventing sizing values, though similar bracketed pixel values already exist elsewhere in the codebase.

♻️ Suggested tweak

-          className={cn(
-            "size-[11px] shrink-0 text-faint transition-transform duration-slow ease-out motion-reduce:transition-none",
-            expanded ? "rotate-90" : null
-          )}
+          className={cn(
+            "size-3 shrink-0 text-faint transition-transform duration-slow ease-out motion-reduce:transition-none",
+            expanded ? "rotate-90" : null
+          )}

Based on coding guidelines: "Use design values from packages/ui/src/tokens.css and DESIGN.md; do not invent colors, typography, radius, spacing, or motion values."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@web/src/components/assistant-ui/transcript-disclosure.tsx` around lines 49 -
56, Replace the arbitrary `size-[11px]` class on the `ChevronRight` in the
transcript disclosure with the nearest approved size token, using `size-2.5` or
`size-3` according to the intended icon dimensions; leave the remaining classes
and rotation behavior unchanged.

Source: Coding guidelines

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes