feat(desktop): rewrite chain (chat + comment + status + topbar) end-to-end

[hqhq1025]

Why

Day-zero users hit four chain-level problems on first use (full audit in docs/research/23-chain-audit.md):

1. Empty ```html ``` fence rendered as a placeholder assistant bubble right under the user message — the artifact had been extracted but the empty fence was left behind in collected.text.
2. Sidebar mixes tooling (attach files / link design system / reference URL field) and chat history in one column. The tools block ate ~30% of vertical space.
3. "Click any element to comment" was rendered as a floating overlay inside the iframe, so it covered the design's nav on every preview.
4. No visible iterate / regenerate / branch entry point. No model / token info anywhere.

Two screenshots from a follow-up review surfaced three more issues addressed in round 2:

5. Edit p: 重写 user message + 已应用。 assistant bubble polluted the chat for every inline comment.
6. The inline comment composer floated bottom-right with a raw XPath header and a 50%-opacity 'Applying...' button that looked broken.
7. The TopBar still surfaced 'Generating your design...' as the breadcrumb, taking over the design's identity even though the PreviewToolbar already owns that progress signal.

What changed

┌────────────────────────────────────────────────────────────────────┐
│ TopBar  Logo "Open CoDesign" preview / Untitled  · provider · model│
│                                            [Regen][Reuse][Branch]   │
├──────────────┬─────────────────────────────────────────────────────┤
│ ToolsPanel   │ PreviewToolbar                                      │
│ [📎][🗂][🔗]  │ [stage pill]  click-to-comment hint  …  [Export ▾]  │
│              ├─────────────────────────────────────────────────────┤
│ ChatHistory  │           iframe preview                            │
│  user        │   ┌──────────────────────────────────────────────┐  │
│  assistant   │   │ clicked element                              │  │
│   • text     │   ├──────────────────────────────────────────────┤  │
│   • [💬 chip]│   │ InlineCommentPopover (anchored, auto-flip)   │  │
│   • [redo]   │   │  Editing heading · "Pricing"                  │  │
│     [copy]   │   │  [textarea]                                   │  │
│     [snap]   │   │            [Cancel]   [⟳ Applying…]          │  │
├──────────────┤   └──────────────────────────────────────────────┘  │
│ Composer     │                                                     │
└──────────────┴─────────────────────────────────────────────────────┘

Commits in this PR

SHA	Subject
cb6d7b4	fix(artifacts): drop empty code fences after artifact extraction
8aaf310	fix(desktop): suppress system status text as assistant message
92d37d5	feat(desktop): element-label util + friendly comment target
278e5ee	refactor(desktop): split Sidebar into ToolsPanel + ChatHistory + Composer
28e21b6	feat(desktop): generation-stage pill, preview-hint relocation, TopBar iterate row
e4ba2ff	feat(desktop): anchored InlineCommentPopover with positioning + highlight
ec1eccb	fix(ui): InlineCommentPopover a11y polish — semantic section + ref-based focus
8ecf51f	refactor(desktop): TopBar layout — brand cluster + design name breadcrumb

Comment & TopBar fixes (added round 2)

Driven by two new screenshots from the user review:

• A. Empty-fence assistant bubble + 'Applied.' system text → cb6d7b4 strips orphan ```html\n``` pairs in runModel; 8aaf310 skips pushing the assistant bubble in applyInlineComment when the model returned no prose. Success now shows a transient toast (notifications.inlineCommentApplied).
• B. Edit p: 重写 synthesized user message → store applyInlineComment no longer pushes user/assistant messages. Instead appliedComments records (per-message anchor + getElementLabel + comment) render as small chips inside the assistant bubble (AssistantMessage). The chat stays clean.
• C. Bottom-right floater with XPath → new InlineCommentPopover anchors to the clicked rect via computeAnchoredPosition (auto-flip above when below would overflow, clamp to safe left margin). Header now reads Editing heading · "…" instead of /main[1]/section[3]/.../p[1].
• D. Element-label util → apps/desktop/src/renderer/src/lib/element-label.ts maps tag → role (heading / paragraph / button / image / icon / list / section / …) plus a 30-char text preview. Six unit tests cover roles, fallback, whitespace, truncation, missing-text, and combined display.
• E. Loading button + scroll/highlight → spinner + 'Applying…' + min-width 112px so it never reflows; disabled colour is the muted token (not opacity-40); cancel is now a clear ghost button. On success the previous rect is highlighted with a 1.2s pulsing accent ring drawn over the iframe.
• F. TopBar redesign → Wordmark size="lg" (20px mark to feel close to the requested 24px in a 44px header); breadcrumb shows Untitled / 未命名设计 instead of the generation status, so the design's identity stays visible while the PreviewToolbar pill carries progress.

i18n

New keys in en.json + zh-CN.json:

• comment.{chip, target, applyButton, applyButtonBusy, cancel}
• notifications.inlineCommentApplied
• topbar.{brandBadge, designUntitled}

Test plan

• pnpm --filter @open-codesign/artifacts test — stripEmptyCodeFences cases (empty / real content / no language tag / mixed orphans)
• pnpm --filter @open-codesign/desktop test — 140/140 (added applyInlineComment no-bubble case, getElementLabel coverage, computeAnchoredPosition flip/clamp/centre cases)
• pnpm typecheck — clean across workspace
• pnpm lint — 0 errors (8 pre-existing cognitive-complexity warnings, untouched)
• Manual: click element → popover anchors below (or above near bottom) → submit → spinner → close → 1.2s ring on the original rect → assistant bubble shows [💬 heading · "Pricing" — make it bolder] chip; no Edit p: user bubble appears.

PRINCIPLES checklist

• Compatibility — no IPC schema changes; appliedComments is renderer-only state; existing chat history shape unchanged.
• Upgradeability — getElementLabel and computeAnchoredPosition are exported pure functions for future reuse (mobile preview, snapshot diff).
• No bloat — no new deps. @floating-ui/react was considered (mentioned in scope) but rejected: a 30-line computeAnchoredPosition covers the auto-flip + clamp need and saves the install-size budget.
• Elegance — comments anchor to the assistant bubble that owns them instead of fabricating user turns; the canvas update IS the confirmation, surfaced by a 1.2s ring + a quiet toast.

Deferred

• Real @floating-ui/react integration. The simple anchor handles the current single-popover-on-iframe use case; introduce floating-ui when (a) the popover needs portaling outside the iframe-clip container, or (b) middleware like arrow / shift add real value.
• Sending a HIGHLIGHT message into the iframe to flash the actual element. The current implementation draws the ring over the previous rect, which is correct for the same selection in the same render but won't survive an artifact swap. A parent→iframe overlay extension is a separate change.
• Per-design names (the breadcrumb shows 'Untitled' / '未命名设计' until naming lands).

[github-actions]

Findings

• [Blocker] Removed translation keys break existing UI copy at runtime — the diff deletes key groups still referenced across the app (packages/i18n/src/locales/en.json:1, packages/i18n/src/locales/zh-CN.json:1; consumers include apps/desktop/src/renderer/src/components/ThemeToggle.tsx:12, apps/desktop/src/renderer/src/components/Settings.tsx:376, apps/desktop/src/renderer/src/views/hub/ExamplesTab.tsx:52, apps/desktop/src/renderer/src/components/Toast.tsx:76). This will surface raw i18n keys in shipped UI.
  Suggested fix:

  {
    "common": {
      "dismissNotification": "Dismiss notification"
    },
    "theme": {
      "toggleAria": "Toggle theme",
      "switchToLight": "Switch to light",
      "switchToDark": "Switch to dark"
    },
    "disabledReason": {
      "typePromptToSend": "..."
    },
    "examples": {
      "title": "..."
    }
  }

• [Major] Hardcoded hex colors violate token-only UI constraint — stage pill colors are literal hex values instead of packages/ui tokens (apps/desktop/src/renderer/src/components/PreviewToolbar.tsx:22). This conflicts with the project’s hard constraint and will fragment theming.
  Suggested fix:

  const STAGE_TONE: Record<GenerationStage, string> = {
    parsing:
      'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
    rendering:
      'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
    done:
      'bg-[var(--color-success-soft)] text-[var(--color-success)] border-[var(--color-success-muted)]',
    error:
      'bg-[var(--color-danger-soft)] text-[var(--color-danger)] border-[var(--color-danger-muted)]',
  };

• [Major] Inline comment popover can render off-screen on the right edge — horizontal positioning only clamps left and never caps right (apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:153). Users clicking elements near the iframe’s right edge can lose access to the composer controls.
  Suggested fix:

  export function computeAnchoredPosition(rect: ElementSelectionRect, cardHeight: number, containerHeight: number | null): AnchoredPosition {
    const elementBottom = rect.top + rect.height;
    const flipBelowToAbove =
      containerHeight !== null && elementBottom + cardHeight + POPOVER_GAP > containerHeight;
    const top = flipBelowToAbove
      ? Math.max(POPOVER_GAP, rect.top - cardHeight - POPOVER_GAP)
      : elementBottom + POPOVER_GAP;
  
    const desiredLeft = rect.left + rect.width / 2 - POPOVER_WIDTH / 2;
    const maxLeft = Math.max(POPOVER_GAP, rect.left + rect.width - POPOVER_GAP - POPOVER_WIDTH);
    const left = Math.min(maxLeft, Math.max(POPOVER_GAP, desiredLeft));
    return { top, left };
  }

Summary

• Review mode: initial
• 3 issues found: 1 blocker (i18n key removals causing runtime key leakage), 2 majors (token-constraint violation, right-edge popover overflow).
• Residual risk: no added coverage for i18n key integrity across locales.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

en.json now removes several pre-existing key groups (common.dismissNotification, theme.*, disabledReason.*, examples.*) that are still referenced in renderer code. This introduces visible raw i18n keys at runtime. Please restore the removed keys (and mirror in zh-CN.json) until all call sites are migrated.

{
  "common": { "dismissNotification": "Dismiss notification" },
  "theme": {
    "toggleAria": "Toggle theme",
    "switchToLight": "Switch to light",
    "switchToDark": "Switch to dark"
  },
  "disabledReason": { "typePromptToSend": "..." },
  "examples": { "title": "..." }
}

[github-actions]

This introduces hardcoded hex values (#FFF4E0, #9A6A1B, etc.) in renderer UI. Project constraints require token-driven values from packages/ui. Please switch these to semantic CSS tokens.

parsing:
  'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
rendering:
  'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
done:
  'bg-[var(--color-success-soft)] text-[var(--color-success)] border-[var(--color-success-muted)]',
error:
  'bg-[var(--color-danger-soft)] text-[var(--color-danger)] border-[var(--color-danger-muted)]',

[github-actions]

computeAnchoredPosition clamps only the left boundary; it never clamps the right edge. For elements near the right side, popover content can render partially outside the preview container.

const desiredLeft = rect.left + rect.width / 2 - POPOVER_WIDTH / 2;
const maxLeft = Math.max(POPOVER_GAP, rect.left + rect.width - POPOVER_GAP - POPOVER_WIDTH);
const left = Math.min(maxLeft, Math.max(POPOVER_GAP, desiredLeft));

[github-actions]

Findings

• [Major] Stage pill still uses hardcoded hex colors, violating token-only UI constraint — PreviewToolbar introduces literal #... values for parsing/rendering/done/error states (apps/desktop/src/renderer/src/components/PreviewToolbar.tsx:22). This breaks the project-wide token contract and can drift from theme tokens.
  Suggested fix:

  const STAGE_TONE: Record<GenerationStage, string> = {
    idle: 'bg-[var(--color-surface)] text-[var(--color-text-muted)] border-[var(--color-border-muted)]',
    sending: 'bg-[var(--color-accent-soft)] text-[var(--color-accent)] border-[var(--color-accent-muted)] animate-pulse',
    thinking: 'bg-[var(--color-accent-soft)] text-[var(--color-accent)] border-[var(--color-accent-muted)] animate-pulse',
    streaming: 'bg-[var(--color-accent-soft)] text-[var(--color-accent)] border-[var(--color-accent-muted)] animate-pulse',
    parsing: 'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
    rendering: 'bg-[var(--color-warning-soft)] text-[var(--color-warning)] border-[var(--color-warning-muted)]',
    done: 'bg-[var(--color-success-soft)] text-[var(--color-success)] border-[var(--color-success-muted)]',
    error: 'bg-[var(--color-error-soft)] text-[var(--color-error)] border-[var(--color-error-muted)]',
  };

• [Major] Inline comment popover can still overflow the right edge — horizontal positioning clamps only the left side and never caps left against container width (apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:153). This reproduces the same right-edge accessibility regression in follow-up commits.
  Suggested fix:

  export function computeAnchoredPosition(
    rect: ElementSelectionRect,
    cardHeight: number,
    containerHeight: number | null,
    containerWidth: number | null,
  ): AnchoredPosition {
    const elementBottom = rect.top + rect.height;
    const flipBelowToAbove =
      containerHeight !== null && elementBottom + cardHeight + POPOVER_GAP > containerHeight;
    const top = flipBelowToAbove
      ? Math.max(POPOVER_GAP, rect.top - cardHeight - POPOVER_GAP)
      : elementBottom + POPOVER_GAP;
  
    const desiredLeft = rect.left + rect.width / 2 - POPOVER_WIDTH / 2;
    const maxLeft = containerWidth === null
      ? Number.POSITIVE_INFINITY
      : Math.max(POPOVER_GAP, containerWidth - POPOVER_WIDTH - POPOVER_GAP);
    const left = Math.min(maxLeft, Math.max(POPOVER_GAP, desiredLeft));
    return { top, left };
  }

• [Major] Applied-comment chips can attach to the wrong assistant bubble after regenerate — chips are keyed by assistantMessageIndex, but regenerateLast() mutates messages by popping assistant/user items without remapping or clearing appliedComments (apps/desktop/src/renderer/src/store.ts:542). This can make historical edit chips appear under unrelated future responses.
  Suggested fix:

  async regenerateLast() {
    if (get().isGenerating) return;
    const lastPromptInput = get().lastPromptInput;
    if (!lastPromptInput) return;
  
    const messages = [...get().messages];
    while (messages.length > 0 && messages.at(-1)?.role === 'assistant') messages.pop();
    if (messages.at(-1)?.role === 'user' && messages.at(-1)?.content === lastPromptInput.prompt) {
      messages.pop();
    }
  
    // Drop chips anchored to removed assistant messages to prevent index drift.
    const maxAssistantIndex = messages.length - 1;
    set({
      messages,
      appliedComments: get().appliedComments.filter((c) => c.assistantMessageIndex <= maxAssistantIndex),
      errorMessage: null,
    });
  
    await get().sendPrompt(lastPromptInput);
  }

Summary

• Review mode: follow-up after new commits
• 3 issues found (all Major).
• Context docs check: docs/VISION.md and docs/PRINCIPLES.md are Not found in repo/docs in this checkout, so review used CLAUDE.md + current diff/files only.

Testing

• Not run (automation)
• Suggested additions: Vitest case for right-edge clamp in InlineCommentPopover.test.ts, and store test asserting appliedComments remains consistent after regenerateLast().

open-codesign Bot

[github-actions]

Hardcoded #... colors here violate the token-only UI constraint. Please switch these tones to semantic packages/ui CSS variables (warning/success/error families) so theme and design-system consistency is preserved.

[github-actions]

computeAnchoredPosition still clamps only the left edge. For right-side selections, left can push the popover out of bounds. Please clamp against container width (max left = containerWidth - popoverWidth - gap) and add a right-edge test case.

[github-actions]

regenerateLast() rewrites messages but does not update appliedComments (which are keyed by assistantMessageIndex). That index can drift and reattach chips to unrelated bubbles after regeneration. Please remap/remove stale chip entries when pruning message history.

[github-actions]

Findings

• [Major] Applied-comment chips can attach to the wrong assistant bubble after regenerate — regenerateLast() removes trailing messages but never remaps or prunes appliedComments indices, so chips can drift to unrelated future responses, evidence apps/desktop/src/renderer/src/store.ts:542 and render path apps/desktop/src/renderer/src/components/Sidebar/AssistantMessage.tsx:28.
  Suggested fix:

  async regenerateLast() {
    if (get().isGenerating) return;
    const lastPromptInput = get().lastPromptInput;
    if (!lastPromptInput) return;
  
    const messages = [...get().messages];
    while (messages.length > 0 && messages.at(-1)?.role === 'assistant') messages.pop();
    if (messages.at(-1)?.role === 'user' && messages.at(-1)?.content === lastPromptInput.prompt) {
      messages.pop();
    }
  
    const survivingAssistantIndexes = new Set<number>();
    for (let i = 0; i < messages.length; i++) if (messages[i]?.role === 'assistant') survivingAssistantIndexes.add(i);
  
    set({
      messages,
      appliedComments: get().appliedComments.filter((c) => c.assistantMessageIndex === -1 || survivingAssistantIndexes.has(c.assistantMessageIndex)),
      errorMessage: null,
    });
  
    await get().sendPrompt(lastPromptInput);
  }

• [Major] Silent fallback on clipboard copy hides runtime errors, violating the no-silent-fallback constraint — copy failures are swallowed with an empty catch and no surfaced error, evidence apps/desktop/src/renderer/src/components/Sidebar/AssistantMessage.tsx:36.
  Suggested fix:

  const pushToast = useCodesignStore((s) => s.pushToast);
  
  async function copyArtifact(): Promise<void> {
    if (!previewHtml) return;
    try {
      await navigator.clipboard.writeText(previewHtml);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1500);
    } catch (err) {
      const msg = err instanceof Error ? err.message : t('errors.unknown');
      pushToast({
        variant: 'error',
        title: t('notifications.copyFailed'),
        description: msg,
      });
    }
  }

• [Major] New renderer UI introduces hardcoded values instead of UI tokens, violating the token-only constraint — examples include fixed text-[12px], text-[13px], w-[360px], and text-white, evidence apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:70, apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:76, apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:101, apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:116.
  Suggested fix:

  <section className="absolute z-10 w-[var(--size-stage-min)] max-w-[calc(100%-3rem)] ...">
  ...
  <div className="... text-[var(--text-xs)] ...">
  ...
  <textarea className="... text-[var(--text-sm)] leading-[var(--leading-body)] ..." />
  ...
  <button className="... text-[var(--text-xs)] text-[var(--color-on-accent)] ..." />

Summary

• Review mode: follow-up after new commits
• 3 issues found (all Major), all attributable to added/modified lines in this diff.
• Context note: docs/VISION.md and docs/PRINCIPLES.md are Not found in repo/docs in this checkout.

Testing

• Not run (automation)
• Suggested tests: add a store test that validates appliedComments stays correctly anchored after regenerateLast(), and a component test for clipboard failure surfacing an error toast.

open-codesign Bot

[github-actions]

regenerateLast() prunes trailing chat messages but leaves appliedComments untouched. Because chips are keyed by assistantMessageIndex, index drift can reattach chips to unrelated assistant bubbles after regenerate. Please prune/remap appliedComments to surviving assistant indices before sendPrompt() runs.

[github-actions]

This catch silently swallows clipboard failures. Project constraints require no silent fallbacks; please surface an error toast (or throw with context) so copy failures are visible to the user.

[github-actions]

Token-only UI constraint: this introduces hardcoded values (text-[12px] and text-white) in new renderer UI. Please replace with tokenized values (for example text-[var(--text-xs)] and text-[var(--color-on-accent)]), and apply the same tokenization pattern to nearby hardcoded sizes in this component.

[github-actions]

Findings

• [Major] Silent fallback on clipboard copy hides runtime errors, violating the no-silent-fallback constraint. Evidence apps/desktop/src/renderer/src/components/Sidebar/AssistantMessage.tsx:37.
  Suggested fix:

  const pushToast = useCodesignStore((s) => s.pushToast);
  
  async function copyArtifact(): Promise<void> {
    if (!previewHtml) return;
    try {
      await navigator.clipboard.writeText(previewHtml);
      setCopied(true);
      window.setTimeout(() => setCopied(false), 1500);
    } catch (err) {
      const msg = err instanceof Error ? err.message : t('errors.unknown');
      pushToast({
        variant: 'error',
        title: t('notifications.copyFailed'),
        description: msg,
      });
    }
  }

• [Major] New renderer UI introduces non-tokenized/hardcoded values (w-[360px], text-[12px], text-[13px], text-white), violating the token-only UI constraint for newly added UI. Evidence apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:70.
  Suggested fix:

  <section className="absolute z-10 w-[var(--size-inline-comment-popover)] max-w-[calc(100%-3rem)] ...">
  ...
  <div className="... text-[var(--text-xs)] ...">
  ...
  <textarea className="... text-[var(--text-sm)] leading-[var(--leading-body)] ..." />
  ...
  <button className="... text-[var(--text-xs)] text-[var(--color-on-accent)] ..." />

Summary

• Review mode: follow-up after new commits
• 2 issues found (both Major), each on added/modified lines in this diff.
• Context note: docs/VISION.md and docs/PRINCIPLES.md are Not found in repo/docs in this checkout.

Testing

• Not run (automation)
• Suggested tests: add a UI test for clipboard write rejection surfacing an error toast; add a static/token-lint assertion (or snapshot) to prevent new hardcoded typography/color values in renderer components.

open-codesign Bot

[github-actions]

This catch silently swallows clipboard failures. The project constraint says no silent fallbacks; copy failures need to surface in UI (toast) or throw with context.

Suggested fix:

} catch (err) {
  const msg = err instanceof Error ? err.message : t('errors.unknown');
  pushToast({
    variant: 'error',
    title: t('notifications.copyFailed'),
    description: msg,
  });
}

[github-actions]

Token-only UI constraint: this new component still hardcodes sizing/typography/color (w-[360px], text-[12px], text-[13px], text-white in nearby lines). Please switch to semantic tokens (and add missing token(s) in packages/ui/tokens.css if needed).

Suggested fix:

<section className="... w-[var(--size-inline-comment-popover)] ...">
  ...
  <div className="... text-[var(--text-xs)] ...">
  ...
  <textarea className="... text-[var(--text-sm)] leading-[var(--leading-body)] ..." />
  ...
  <button className="... text-[var(--text-xs)] text-[var(--color-on-accent)] ..." />
</section>

[github-actions]

Findings

• [Major] Inline comment flow treats a no-artifact response as success, leaving a chip that implies the edit landed while the canvas remains unchanged. This is a silent failure mode and can mislead users about data state, evidence apps/desktop/src/renderer/src/store.ts:705.
  Suggested fix:

  const firstArtifact = result.artifacts[0];
  if (!firstArtifact) {
    throw new Error('Inline comment returned no artifact');
  }
  set((s) => ({
    messages: shouldPushBubble
      ? [...s.messages, { role: 'assistant', content: trimmedMessage, id: newId() }]
      : s.messages,
    previewHtml: firstArtifact.content,
    isGenerating: false,
    selectedElement: null,
    highlightSelector: selection.selector,
  }));

• [Major] New UI still introduces hardcoded non-token values (w-[360px], text-[12px], text-[13px], text-white) in renderer code, violating the token-only UI constraint for newly added UI, evidence apps/desktop/src/renderer/src/components/InlineCommentPopover.tsx:70.
  Suggested fix:

  <section className="... w-[var(--size-inline-comment-popover)] ...">
  <div className="... text-[var(--text-xs)] ...">
  <textarea className="... text-[var(--text-sm)] leading-[var(--leading-body)] ..." />
  <button className="... text-[var(--text-xs)] text-[var(--color-on-accent)] ..." />

• [Minor] Chat bubbles use index-based keys, which can reuse component-local UI state across regenerate/trim operations and show stale affordance state on a different message, evidence apps/desktop/src/renderer/src/components/Sidebar/ChatHistory.tsx:27.
  Suggested fix:

  messages.map((m, i) => (
    <Bubble key={m.id ?? `${m.role}-${i}-${m.content.slice(0, 24)}`} index={i} message={m} />
  ))

Summary

• Review mode: follow-up after new commits
• 3 issues found on added/modified lines (2 Major, 1 Minor).
• Not found in repo/docs in this checkout: docs/VISION.md, docs/PRINCIPLES.md, docs/ARCHITECTURE.md, docs/RESEARCH_QUEUE.md.

Testing

• Not run (automation)
• Suggested tests: add a store test for applyInlineComment() when result.artifacts is empty (should surface error + remove pending chip), and a React test asserting chat bubble state does not leak across regenerate when message IDs change.

open-codesign Bot

[github-actions]

result.artifacts[0] can be undefined, but this path still exits the loading state without surfacing a failure and keeps the pending chip. Please treat this as an error (or explicitly surface it) so users don't see a phantom applied edit.

Suggested fix:

const firstArtifact = result.artifacts[0];
if (!firstArtifact) {
  throw new Error('Inline comment returned no artifact');
}

[github-actions]

Token-only UI constraint: this new component still hardcodes sizing/typography/color (w-[360px], text-[12px], text-[13px], text-white). Please switch to semantic tokens and add missing tokens in packages/ui/src/tokens.css if needed.

Suggested fix:

<section className="... w-[var(--size-inline-comment-popover)] ...">

[github-actions]

Using index in the key can reuse AssistantMessage local state (copied/snapped) across regenerate/trim flows. Prefer a stable message id when available.

Suggested fix:

<Bubble key={m.id ?? `${m.role}-${i}-${m.content.slice(0, 24)}`} ... />

[hqhq1025]

Closing — 1321-line rewrite of chat/comment/status/topbar that's been DIRTY + carrying a Major finding for many cycles. Conflicts cascade with every UI change. The work is valuable but should be split into smaller follow-ups: (1) inline comment chip queue (per docs/research/30 §13 — Claude Design pattern), (2) status pill polish, (3) topbar refactor. Each small PR will land cleanly. Reopen as smaller scoped PRs in v0.2.