FE-578: UI refinements; design adaptations & alignments by lunelson · Pull Request #42 · hashintel/brunch

lunelson · 2026-04-12T14:12:04Z

feat: knowledge card components + shadcn primitives for slice 17

Add card-within-card pattern components (KnowledgeGroupCard,
KnowledgeDetailCard, KnowledgeRow) with Figma design tokens,
status badges (KindBadge, ReviewBadge, CountBadge), and
MetadataRow. Add scroll-area, resizable, and skeleton shadcn
primitives. All patterns verified via Ladle stories.

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

feat: integrate card-within-card pattern into KnowledgeWorkspace

Replace basic list view with KnowledgeGroupCard (white header / tinted
edges body), kind badges, review badges, count badges, progress bars,
and empty-state cards for kinds with no items. Edge labels resolve to
content text via content map. ScrollArea wraps the workspace.

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

feat: resizable panels, skeleton loading, and route integration

InterviewWorkspace conversation + entity sidebar now use
ResizablePanelGroup (65/35 default split, adjustable via handle).
Route transitions show skeleton loading for interview and knowledge
workspaces via TanStack Router pendingComponent. KnowledgeWorkspace
edge labels resolve to content text and show only outgoing edges.

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

chore: mark slice 17 done in PLAN.md

Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com

test: characterize workspace and transport seams

refactor: add explicit shared transport contracts

refactor: parse workspace transport payloads through shared contracts

refactor: make turn-response and review payloads explicit

refactor: add explicit boundary return types

refactor: reset chat state at the project boundary

refactor: make route transitions own entity hydration

refactor: make workspace contracts readonly

feat: remove debug route, decouple shiki from production bundle

Tool JSON now renders via plain

 instead of CodeBlock with shiki

highlighting. The /debug showcase route is replaced by a Ladle story for

AI Elements components. shiki is eliminated from all production build chunks.
Co-Authored-By: Claude Opus 4.6 (1M context) noreply@anthropic.com
retire docs from react/ts refactoring

linear · 2026-04-12T14:12:08Z

FE-578 UI refinements; design adaptations & alignments

Port design tokens, layout primitives, card patterns, and component iteration environment from the parallel brunch-ui prototype. Foundation: Inter Variable font (replacing Geist), Figma-precise color ramp (ink/sub/hint/rule/wash/tint), shadow tokens (card/ring/card-ring), fine-grained typography scale (xxs 10px–sm 16px), font weight discipline (regular/medium/semi-bold only). Layout shell: AppHeader, StageSidebar/PhaseSidebar with working collapse/expand toggle, resizable main+right panels via react-resizable-panels, AppFooter spanning full width. Components: card-within-card pattern (white header / tinted body) for knowledge group cards and question cards; collapsible question card (V2 with inline why grounding, answered cards collapse to read-only summary, re-answering routes through revisit model not casual toggle); empty-state vocabulary (6 patterns: text-only, with icon, with CTA, centered hero, inline within list, attention/warning); metadata rows (label-over-value flex columns); badge refinement (mono font, no black-on-color, no all-caps); mandatory skeleton loading for all pending states. Infrastructure: Ladle story environment (.ladle/ config with theme provider, @source directives, stories as living component reference), shadcn CLI + components.json. Dependencies: @fontsource-variable/inter, react-resizable-panels, @ladle/react, shadcn.

lunelson · 2026-04-12T14:12:45Z

This stack of pull requests is managed by Graphite. Learn more about stacking.

augmentcode · 2026-04-12T16:05:44Z

🤖 Augment PR Summary

Summary: Implements slice-17 UI refinements and transport hardening across the knowledge/interview workspaces.

Changes:

Added knowledge card-within-card pattern components (with Ladle stories) and integrated them into KnowledgeWorkspace with empty states and a ScrollArea container.
Added shadcn-style primitives (scroll-area, resizable, skeleton) and wired route-level pendingComponent skeletons for workspace transitions.
Removed the /debug route and decoupled shiki from production by rendering tool JSON via plain <pre><code>; updated build/capability boundary tests accordingly.
Introduced shared Zod transport schemas in src/shared/api-types.ts and updated loaders/mutations to parse server responses and model turn-response requests explicitly.
Refactored chat hydration to use project-scoped useChat ids and adjusted workspace entity refresh behavior on observer results; expanded characterization tests.
Updated PLAN/SPEC slice status/invariants and removed prior React/TypeScript review docs.

Technical Notes: Most client/server JSON boundaries are now validated via shared Zod schemas; observer-driven entity refresh is now handled via an explicit fetch + local state instead of React Query invalidation.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 5 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-04-12T16:05:45Z

@@ -28,47 +35,90 @@ async function fetchWorkspaceEntities(projectId: number): Promise<EntitiesData>
  return response.json();


src/client/workspace/workspace-data.ts:35 — fetchWorkspaceEntities() returns response.json() without validating against entitiesDataSchema, so a malformed entities payload could slip past the new transport contracts and break downstream assumptions. Consider parsing this refresh response the same way the route loader does so observer-triggered refreshes get the same safety guarantees.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

augmentcode · 2026-04-12T16:05:45Z

+export const requirementEntitySchema = z.object({
+  id: z.number().int().positive(),
+  project_id: z.number().int().positive(),
+  kind: knowledgeItemKindSchema,


src/shared/api-types.ts:108 — requirementEntitySchema.kind currently accepts any KnowledgeKind, which means a server regression could return the wrong kind and still pass validation. Other locations where this applies: src/shared/api-types.ts:118.

Severity: low

Other Locations

src/shared/api-types.ts:118

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

augmentcode · 2026-04-12T16:05:45Z

+  relationships: z.array(entityRelationshipSchema),
+});
+
+export const exportLoaderDataSchema = z.object({


src/shared/api-types.ts:171 — exportLoaderDataSchema allows { ready: true } with no markdown, which can let an inconsistent export payload through validation and force every consumer to defensively check both fields. Consider modeling this as a discriminated union so validation fails fast if ready: true ever arrives without markdown.

Severity: low

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

augmentcode · 2026-04-12T16:05:45Z

+                const displayLabel = edgeLabel.charAt(0).toUpperCase() + edgeLabel.slice(1);
+                const targetText = edge.targetLabel ?? `item #${edge.targetId}`;
+                return (
+                  <div key={i} className="rounded-lg bg-white p-3 text-sm shadow-[var(--shadow-card-ring)]">


src/client/components/knowledge-card.tsx:182 — Using the array index (key={i}) for edges can lead to React reconciliation bugs if the edges list ever reorders or inserts, causing connection rows to display stale data. Other locations where this applies: src/client/components/knowledge-card.tsx:249.

Severity: low

Other Locations

src/client/components/knowledge-card.tsx:249

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

augmentcode · 2026-04-12T16:05:45Z

-    - Invariants to respect: → SPEC.md §Invariants I24, I44, I48
-    - Acceptance: Inter font renders across all routes; color ramp matches Figma reference values; StageSidebar collapses to PhaseSidebar and back; resizable panels work in interview and knowledge workspaces; at least one Ladle story renders with shared design tokens; question card shows inline `why` with collapsible answered state; empty states appear for all unpopulated sections; skeleton loading renders during route transitions
-    - **Verification approach**: inner — Ladle stories as visual regression surface; existing workspace seam tests pass after layout migration. Outer — manual walkthrough comparing rendered UI against Figma reference screens.
+17. **UI refinement + design-system alignment** `done`


PR metadata: the PR title doesn’t match the repo naming convention for stacked slice branches (it should be {ISSUE-ID}: {Linear title} per (Rule: AGENTS.md)). Consider renaming the PR title to the expected FE-* format so it stays traceable to Linear.

Severity: low

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

lunelson · 2026-04-12T17:03:49Z

Merge activity

Apr 12, 5:03 PM UTC: A user started a stack merge that includes this pull request via Graphite.
Apr 12, 5:05 PM UTC: Graphite rebased this pull request as part of a merge.
Apr 12, 5:05 PM UTC: @lunelson merged this pull request with Graphite.

Add card-within-card pattern components (KnowledgeGroupCard, KnowledgeDetailCard, KnowledgeRow) with Figma design tokens, status badges (KindBadge, ReviewBadge, CountBadge), and MetadataRow. Add scroll-area, resizable, and skeleton shadcn primitives. All patterns verified via Ladle stories. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Replace basic list view with KnowledgeGroupCard (white header / tinted edges body), kind badges, review badges, count badges, progress bars, and empty-state cards for kinds with no items. Edge labels resolve to content text via content map. ScrollArea wraps the workspace. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

InterviewWorkspace conversation + entity sidebar now use ResizablePanelGroup (65/35 default split, adjustable via handle). Route transitions show skeleton loading for interview and knowledge workspaces via TanStack Router pendingComponent. KnowledgeWorkspace edge labels resolve to content text and show only outgoing edges. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Tool JSON now renders via plain <pre><code> instead of CodeBlock with shiki highlighting. The /debug showcase route is replaced by a Ladle story for AI Elements components. shiki is eliminated from all production build chunks. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

lunelson mentioned this pull request Apr 12, 2026

FE-543: Expanded rich fixture scenarios + reviews + replannings #41

Merged

lunelson marked this pull request as ready for review April 12, 2026 15:59

This was referenced Apr 12, 2026

FE-545: Local-first storage; npx distribution #43

Merged

FE-579: Greenfield/brownfield first-screen + exploration #44

Merged

augmentcode Bot reviewed Apr 12, 2026

View reviewed changes

lunelson mentioned this pull request Apr 12, 2026

FE-580: Collapse remaining shared transport and review-status type duplication #45

Merged

lunelson changed the title ~~feat: knowledge card components + shadcn primitives for slice 17~~ FE-578: UI refinements; design adaptations & alignments Apr 12, 2026

lunelson changed the base branch from ln/fe-543-scenarios-reviews-replannings to graphite-base/42 April 12, 2026 17:03

lunelson changed the base branch from graphite-base/42 to main April 12, 2026 17:04

lunelson and others added 14 commits April 12, 2026 17:04

chore: mark slice 17 done in PLAN.md

ef321ce

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

test: characterize workspace and transport seams

538f497

refactor: add explicit shared transport contracts

c8710bf

refactor: parse workspace transport payloads through shared contracts

1d79d90

refactor: make turn-response and review payloads explicit

a9e8424

refactor: add explicit boundary return types

8f31eec

refactor: reset chat state at the project boundary

bc5bae5

refactor: make route transitions own entity hydration

5ff36fd

refactor: make workspace contracts readonly

d58412b

retire docs from react/ts refactoring

09d47d7

lunelson force-pushed the ln/fe-578-ui-refine-expand branch from 415deb1 to 09d47d7 Compare April 12, 2026 17:04

lunelson merged commit 6970383 into main Apr 12, 2026
2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FE-578: UI refinements; design adaptations & alignments#42

FE-578: UI refinements; design adaptations & alignments#42
lunelson merged 14 commits into
mainfrom
ln/fe-578-ui-refine-expand

lunelson commented Apr 12, 2026

Uh oh!

linear Bot commented Apr 12, 2026

Uh oh!

lunelson commented Apr 12, 2026 •

edited

Loading

Uh oh!

augmentcode Bot commented Apr 12, 2026

Uh oh!

augmentcode Bot left a comment

Uh oh!

augmentcode Bot Apr 12, 2026

Uh oh!

augmentcode Bot Apr 12, 2026

Uh oh!

augmentcode Bot Apr 12, 2026

Uh oh!

augmentcode Bot Apr 12, 2026

Uh oh!

augmentcode Bot Apr 12, 2026

Uh oh!

lunelson commented Apr 12, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		@@ -28,47 +35,90 @@ async function fetchWorkspaceEntities(projectId: number): Promise<EntitiesData>
		return response.json();

Conversation

lunelson commented Apr 12, 2026

Uh oh!

linear Bot commented Apr 12, 2026

Uh oh!

lunelson commented Apr 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

augmentcode Bot commented Apr 12, 2026

Uh oh!

augmentcode Bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode Bot Apr 12, 2026

Choose a reason for hiding this comment

Uh oh!

lunelson commented Apr 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

lunelson commented Apr 12, 2026 •

edited

Loading

lunelson commented Apr 12, 2026 •

edited

Loading