Skip to content

Seed design system for OpenClaw Windows Hub - #962

Draft
karkarl wants to merge 9 commits into
openclaw:mainfrom
karkarl:karkarl-seed-design-system
Draft

Seed design system for OpenClaw Windows Hub#962
karkarl wants to merge 9 commits into
openclaw:mainfrom
karkarl:karkarl-seed-design-system

Conversation

@karkarl

@karkarl karkarl commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Seeds a design system under .agents/design/ for the OpenClaw Windows Hub (WinUI 3 tray app), named Windows Fluent UI for OpenClaw. No application code is changed — this only adds files under .agents/design/.

Built with Colophon

Authored and previewed with the Colophon Copilot plugin — an experimental design-system canvas that treats .agents/design/ as the source of truth and renders design.json + components.jsx live (and feeds them back to Copilot when it builds UI). The tokens here were seeded from the app's own WinUI/Fluent surfaces and refined in the canvas.

image image image

What's included

  • design.json — token source of truth: colors, typography, spacing, radii, shadows, brand metadata. Tokens are derived from the app's real Fluent/WinUI usage (SystemAccentColor, Card/Subtle fill colors, Segoe UI Variable, Cascadia Mono) via manual XAML/C# inspection (the CSS scanner finds 0 files in a XAML repo).
  • components.jsx — living component patterns rendered in the Design System canvas: Button, Field, Card, Badge, plus chat patterns (ChatBubble, ChatComposer, ChatThread) grounded in the native chat code.
  • principles.md — prose companion: voice, personality, and Fluent-first principles ("defer to Windows", one-accent, no hard-coded hex).

Chat components

  • ChatBubble — user (right, accent, no chrome) vs assistant (left, surface + 1px line, 36px avatar), muted timestamp footer; assistant footer adds usage string + inline copy button. Mirrors OpenClawChatTimeline metrics.
  • ChatComposer — GitHub-Copilot-style toolbar: Add(+) / model / reasoning pickers on the left, mic + accent Send on the right, using WinUI SubtleButton hover/pressed tokens.

Tokens of note

  • radii: added bubble (16px) matching the native chat bubble corner radius.
  • colors: added subtleHover / subtlePressed for subtle/transparent controls (Fluent SubtleFillColorSecondary/Tertiary).

Validation

  • All 8 canvas exports transpile and render through the extension's Babel (classic runtime) + new Function pipeline.
  • design.json validated as JSON.

Stacked work

A follow-up branch applies the ChatComposer pattern to the real app chat UI (stacked on this branch): karkarl#1.

Co-authored-by: Copilot App 223556219+Copilot@users.noreply.github.com

karkarl and others added 4 commits July 8, 2026 12:22
@karkarl
Seed design system for OpenClaw Windows Hub
85d33e0 
Add .agents/design/ (design.json, components.jsx, principles.md) with tokens derived from the WinUI 3/XAML surfaces. The app themes off Windows Fluent system resources, so color/type/radius tokens map to Fluent (SystemAccentColor, Segoe UI Variable, Cascadia Mono) rather than a bespoke palette. No application code changed.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl
Refine design system components and add chat patterns
7c457b2 
Refine control padding to WinUI defaults (Button 11,5,11,6 with 100px
min-width; Field TextControlThemePadding 10,5,6,6, min-height 32; Card
Gallery padding 16,12) and add reusable chat components grounded in the
native timeline and composer: ChatBubble, ChatComposer, ChatThread.

Add a 'bubble' (16px) radius token mirroring OpenClawChatTimeline
CornerRadius and point ChatBubble at var(--radius-bubble).

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl
Refine ChatBubble: avatar, roles, timestamp, usage, copy
f7086b0 
Distinguish user vs assistant bubbles and enrich the assistant footer to
match the native timeline (OpenClawChatTimeline):
- Add a 36x36 circular assistant avatar (subtle fill + 1px line border,
  top-aligned, 8px gap) left of the agent bubble; user bubbles show none,
  mirroring showUserAvatar=false. Sparkle glyph stands in for the app logo.
- Give every bubble a muted timestamp footer; assistant footer also shows
  the context-usage readout (ChatUsageFormatter's used/context (pct%)) with
  a subtle inline Copy affordance right of the usage text.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl
Rework ChatComposer toolbar with WinUI subtle controls
1b2b6bf 
Mirror the GitHub Copilot composer layout: left cluster = Add, model
picker, reasoning-effort picker; right cluster = mic + Send. Only Send
carries the accent; every other control is subtle chrome.

Give the icon buttons and inline pickers WinUI SubtleButtonStyle
interaction states — SubtleFillColorSecondary on hover, the lighter
SubtleFillColorTertiary on press, glyph/label darkening to primary text,
120ms ease-out. Add subtleHover / subtlePressed tokens (Fluent subtle
fills) so no hex is hard-coded in the component.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl karkarl mentioned this pull request Jul 10, 2026
Open
@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. P2 Normal priority bug or improvement with limited blast radius. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 10, 2026
@clawsweeper

clawsweeper Bot commented Jul 10, 2026 •
edited
Loading

Copy link
Copy Markdown

Codex review: needs real behavior proof before merge. Reviewed August 4, 2026, 7:09 AM ET / 11:09 UTC.

ClawSweeper review

What this changes

The PR adds 474 lines of non-shipping Fluent design tokens, JSONC component examples, and agent-facing UI guidance under .agents/design.

Merge readiness

⛔ Blocked until stronger real behavior proof is added - 13 items remain

Keep this draft PR open. Its current head still establishes the catalog as a parallel design authority, retains references to the retired JSX catalog, and lacks current-head repository-owned validation and theme proof.

Priority: P2
Reviewed head: d03a4ffcda603e12fc6a75bfadf731dec6e21b55
Owner decision: Required. See Decision needed.

Review scores

Measure Result What it means
Overall readiness 🦪 silver shellfish (2/6) The catalog is a useful seed, but unresolved authority and validation blockers plus stale proof leave it below merge-ready quality.
Proof confidence 🦪 silver shellfish (2/6) Needs stronger real behavior proof before merge: The screenshots and Babel validation claim target the retired JSX catalog, not the current JSONC head; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery or live-output proof, with private details redacted. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
Patch quality 🦪 silver shellfish (2/6) 5 actionable review findings remain.

Verification

Check Result Evidence
Real behavior Needs proof Needs stronger real behavior proof before merge: The screenshots and Babel validation claim target the retired JSX catalog, not the current JSONC head; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery or live-output proof, with private details redacted. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
Evidence reviewed 5 items Native semantic resources: Current main uses WinUI ThemeResource brushes for the native chat surface, so fixed preview values must remain derived guidance rather than a competing implementation authority.
Production chat owner: Current main mounts a Reactor root as the production chat surface; the root owns attachments, muted speaker state, and the provider-backed chat tree.
Retired catalog reference remains: Current main’s composer documentation still links to .agents/design/components.jsx; this PR migrates the catalog to JSONC, so the migration must update the surviving reference as part of the change.
Findings 5 actionable findings [P1] Keep native UI behavior canonical
[P2] Update retired JSX catalog references
[P2] State that chat catalog examples are partial
Security None None.

How this fits together

The Windows Hub ships as a native WinUI tray application, with the chat surface mounted through Reactor. The proposed catalog feeds future agent and contributor UI decisions, so it must accurately defer to the shipping app’s semantic resources and complete interaction contracts.

flowchart LR
A[Native WinUI and Reactor UI] --> B[Fluent resource and behavior contracts]
B --> C[Design reference catalog]
C --> D[Agent and contributor guidance]
D --> E[Future native UI changes]
Loading

Decision needed

Question Recommendation
Should this repository accept an upstream design-reference catalog, provided that native WinUI and Reactor behavior remain the sole canonical shipping contract? Adopt a derived catalog: Keep the catalog as non-shipping reference material after it defers to native resource keys, Reactor behavior, and explicit coverage limits.

Why: The PR creates a lasting authority model for agent-driven UI work; published review notes oppose a parallel source of truth, but maintainers must affirm the intended repository contract.

Before merge

  • Add real behavior proof - Needs stronger real behavior proof before merge: The screenshots and Babel validation claim target the retired JSX catalog, not the current JSONC head; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery or live-output proof, with private details redacted. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
  • Keep native UI behavior canonical (P1) - The catalog says it is the source of truth for design and directs contributors to add uncovered values here first, while its own synchronization process derives values from the app. This leaves future work with two authorities. Reframe the catalog as a derived reference and make native WinUI resources and Reactor behavior canonical.
  • Update retired JSX catalog references (P2) - This migration replaces the JSX catalog with components.jsonc, but the added design metadata still names components.jsx and current composer documentation links to it. Update both sides of the migration so merged guidance does not point to a missing artifact.
  • State that chat catalog examples are partial (P2) - The static catalog does not represent the current composer’s attachment, queued-message, voice, speaker-mute, and Send/Stop state contracts. Mark these as partial visual references and link to the native owner so future work does not treat them as complete implementations.
  • Remove em dashes from agent-facing guidance (P2) - This agent-facing catalog uses em dashes, which conflicts with the repository copy policy. Replace them throughout the added catalog files with supported punctuation.
  • Add repository-owned catalog verification (P2) - The PR relies on an external Colophon validator, but this repository has no parse or component-reference-resolution guard for the JSONC artifacts it would carry. Add a focused smoke check so a later edit cannot silently break the catalog.
  • Resolve merge risk (P1) - Merged as written, the catalog can steer future features toward a separate visual authority that drifts from semantic WinUI resources and the complete Reactor chat contract.
  • Resolve merge risk (P1) - The supplied screenshots and prior Babel claim predate the JSONC migration, so they do not prove current-head parsing, reference resolution, or Light, Dark, and High Contrast output.
  • Complete next step (P2) - A maintainer must settle the catalog’s authority boundary, and the contributor must provide current-head proof before this draft can proceed.
  • Improve patch quality - Make native WinUI and Reactor behavior canonical and update all retired JSX references.
  • Improve patch quality - Add a repository-owned JSONC parse and component-reference-resolution test.
  • Improve patch quality - Post redacted current-head Light, Dark, and High Contrast proof in the PR body, then request a fresh review if it does not trigger automatically.

Findings

  • [P1] Keep native UI behavior canonical — .agents/design/principles.md:8-10
  • [P2] Update retired JSX catalog references — .agents/design/design.json:6
  • [P2] State that chat catalog examples are partial — .agents/design/components.jsonc:18-22
Agent review details

Security

None.

Review metrics

Metric Value Why it matters
Catalog scope 3 files added, 474 lines The PR affects only agent-facing design artifacts, not shipping application code.
Validation coverage 0 repository-owned tests added The JSONC migration and component references have no in-repository regression guard.

Merge-risk options

Maintainer options:

  1. Reframe and verify the catalog (recommended)
    Make the shipping UI canonical, repair stale catalog references, state that chat samples are partial, add a repository-owned smoke check, and post current-head themed proof before merge.
  2. Pause the design catalog
    Keep the draft paused if maintainers do not want a separately versioned design-reference authority in this repository.

Technical review

Best possible solution:

Make native WinUI resources and observed Reactor behavior canonical, keep the catalog explicitly derived and partial, update all JSONC references, and add a repository-owned parse/reference smoke check with current-head themed gallery proof.

Do we have a high-confidence way to reproduce the issue?

Not applicable: this is a non-shipping design-reference PR, not a report of broken runtime behavior. The relevant check is current-head catalog parsing and themed rendering proof.

Is this the best way to solve the issue?

No. The current authority framing remains broader than the shipping app contract; a derived catalog with semantic resource mappings and explicit coverage limits is the safer maintainable path.

Full review comments:

  • [P1] Keep native UI behavior canonical — .agents/design/principles.md:8-10
    The catalog says it is the source of truth for design and directs contributors to add uncovered values here first, while its own synchronization process derives values from the app. This leaves future work with two authorities. Reframe the catalog as a derived reference and make native WinUI resources and Reactor behavior canonical.
    Confidence: 0.96
  • [P2] Update retired JSX catalog references — .agents/design/design.json:6
    This migration replaces the JSX catalog with components.jsonc, but the added design metadata still names components.jsx and current composer documentation links to it. Update both sides of the migration so merged guidance does not point to a missing artifact.
    Confidence: 0.99
  • [P2] State that chat catalog examples are partial — .agents/design/components.jsonc:18-22
    The static catalog does not represent the current composer’s attachment, queued-message, voice, speaker-mute, and Send/Stop state contracts. Mark these as partial visual references and link to the native owner so future work does not treat them as complete implementations.
    Confidence: 0.91
  • [P2] Remove em dashes from agent-facing guidance — .agents/design/components.jsonc:1
    This agent-facing catalog uses em dashes, which conflicts with the repository copy policy. Replace them throughout the added catalog files with supported punctuation.
    Confidence: 0.99
  • [P2] Add repository-owned catalog verification — .agents/design/components.jsonc:23-24
    The PR relies on an external Colophon validator, but this repository has no parse or component-reference-resolution guard for the JSONC artifacts it would carry. Add a focused smoke check so a later edit cannot silently break the catalog.
    Confidence: 0.94

Overall correctness: patch is incorrect
Overall confidence: 0.94

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against 6e225e4758e1.

Labels

Label justifications:

  • P2: The patch does not change the running app, but it can influence future UI implementation across the Windows Hub.
  • merge-risk: 🚨 compatibility: A parallel design authority or stale catalog link can cause future native UI changes to diverge from existing Fluent and Reactor behavior.
  • rating: 🦪 silver shellfish: Overall readiness is 🦪 silver shellfish; proof is 🦪 silver shellfish and patch quality is 🦪 silver shellfish.
  • status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs stronger real behavior proof before merge: The screenshots and Babel validation claim target the retired JSX catalog, not the current JSONC head; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery or live-output proof, with private details redacted. After adding proof, update the PR body; ClawSweeper should re-review automatically. If it does not, the PR author or someone with repository write access can comment @clawsweeper re-review.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The screenshots and Babel validation claim target the retired JSX catalog, not the current JSONC head; add redacted current-head parse/reference output and Light, Dark, and High Contrast gallery or live-output proof, with private details redacted.

Evidence

What I checked:

Likely related people:

  • karkarl: Authored the proposed catalog and the recent main-branch chat polish that owns the composer being represented. (role: recent chat-surface contributor and catalog author; confidence: high; commits: d03a4ffcda60, 4d09797; files: .agents/design/design.json, src/OpenClaw.Tray.WinUI/Chat/OpenClawComposer.cs)
  • kenehong: Current main history attributes the Reactor chat migration to this contributor, establishing the current shipping owner boundary. (role: production chat migration contributor; confidence: high; commits: 9acafa6; files: src/OpenClaw.Tray.WinUI/Chat/OpenClawReactorChatRoot.cs, src/OpenClaw.Tray.WinUI/Chat/ReactorChatHostExtensions.cs)
  • shanselman: The collaborator review specifically identified the need to keep native behavior canonical and make the catalog’s derived status explicit. (role: authority-boundary reviewer; confidence: high; commits: 2779365; files: .agents/design/principles.md, .agents/design/design.json)

Rating scale

Score Internal tier Crab rank Meaning
6/6 S 🦀 challenger crab Exceptional readiness
5/6 A 🦞 diamond lobster Very strong readiness
4/6 B 🐚 platinum hermit Good normal PR; ordinary maintainer review
3/6 C 🦐 gold shrimp Useful, but confidence is limited
2/6 D 🦪 silver shellfish Proof or implementation needs work
1/6 F 🧂 unranked krab Not merge-ready
N/A NA 🌊 off-meta tidepool Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (24 earlier review cycles; latest 8 shown)
  • reviewed 2026-08-02T17:58:26.981Z sha d03a4ff :: needs real behavior proof before merge. :: [P2] Replace obsolete JSX catalog references | [P2] Mark static chat patterns as partial references | [P2] Remove em dashes from agent-facing catalog copy
  • reviewed 2026-08-02T21:29:25.938Z sha d03a4ff :: needs real behavior proof before merge. :: [P2] Replace obsolete JSX catalog references | [P2] Mark chat patterns as partial reference examples | [P2] Remove em dashes from agent-facing catalog copy
  • reviewed 2026-08-02T23:04:52.275Z sha d03a4ff :: needs real behavior proof before merge. :: [P2] Update obsolete JSX catalog references | [P2] Mark static chat patterns as partial references | [P2] Remove em dashes from agent-facing catalog copy
  • reviewed 2026-08-03T08:00:31.735Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Remove obsolete JSX catalog references | [P2] Mark chat patterns as partial references | [P2] Replace em dashes in agent-facing catalog copy | [P2] Add a repository-owned catalog smoke check
  • reviewed 2026-08-03T12:51:40.343Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Make native UI behavior canonical | [P2] Update obsolete JSX catalog references | [P2] Mark chat patterns as partial references | [P2] Replace em dashes in agent-facing catalog copy | [P2] Add a repository-owned catalog smoke check
  • reviewed 2026-08-03T14:56:07.816Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep observed native behavior canonical | [P2] Replace retired JSX catalog references | [P2] Label static chat examples as partial | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-03T21:16:45.482Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native UI behavior canonical | [P2] Mark the chat catalog as partial | [P2] Remove em dashes from agent-facing catalog copy | [P2] Add repository-owned catalog verification
  • reviewed 2026-08-04T03:15:21.528Z sha d03a4ff :: needs real behavior proof before merge. :: [P1] Keep native WinUI and Reactor behavior canonical | [P2] Replace retired JSX catalog references | [P2] Label chat catalog patterns as partial | [P2] Remove em dashes from agent-facing guidance | [P2] Add repository-owned catalog verification

@karkarl
karkarl marked this pull request as draft July 10, 2026 19:46
karkarl and others added 2 commits July 10, 2026 12:58
@karkarl
Rename design system to Windows Fluent UI for OpenClaw
c95ed9c 
Rename the design system's brand from the product name (OpenClaw Windows
Hub) to Windows Fluent UI for OpenClaw, reflecting its basis in Windows
Fluent design conventions. Clarify that it is the design system for the
OpenClaw Windows Hub app in design.json and principles.md.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl
Correct design.json meta provenance
536aa36 
The CSS/JSX scanner finds no files in this XAML repo; every token was
derived by manual inspection of the WinUI 3 XAML and C# surfaces. Update
meta.updatedBy and meta.note to reflect that accurately.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@clawsweeper clawsweeper Bot added rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 10, 2026
@karkarl
karkarl marked this pull request as ready for review July 10, 2026 20:23
@clawsweeper clawsweeper Bot added proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. and removed rating: 🧂 unranked krab Not merge-ready due to missing proof or serious correctness/safety concerns. labels Jul 10, 2026
@clawsweeper clawsweeper Bot mentioned this pull request Jul 13, 2026
Merged
@shanselman

shanselman commented Jul 15, 2026

Copy link
Copy Markdown
Collaborator

🤖 Copilot assistant note, posted on Scott's behalf — this is not Scott writing personally.

I was initially confused about the intended authority boundary here. I inferred that the JSX was a non-shipping visual reference derived from the native WinUI app, but the current wording sends mixed signals:

  • design.json says the tokens were derived from the repository's native XAML/C# surfaces.
  • principles.md calls this “the design system” and says designers write here while developers and Copilot read it.
  • The PR description calls .agents/design/ a “source of truth.”

Because this is a native WinUI application, I suggest making the boundary explicit for future agents and contributors:

Native WinUI XAML/C# and observed product behavior are canonical. The JSX and design files are non-shipping, derived visual examples for Colophon and Copilot. When they differ, native wins.

It would also help to qualify or remove “source of truth,” and name who is responsible for synchronizing these derived examples after native UI changes. That clarity would have prevented my initial misreading and should keep future bots from treating the JSX as a parallel product authority.

Adopt Colophon port-target authority model in seed
ed110a1 
Design files are the source of truth for design (framework-agnostic);
components.jsx is design intent for the canvas preview, not shipping code.
Record how the design ships via authority.port targets:
- default: Native WinUI 3 / C# (Windows Fluent), ported via win-dev-skills
- chat surface (ChatBubble, ChatComposer, ChatThread): Reactor
  (microsoft-ui-reactor); no dedicated porting agent yet (WIP)

Updates meta.note, components.jsx header, and principles.md to match.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl

karkarl commented Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Pushed an update that reworks the authority framing in response to @scott's note about .agents/design/ being described as "the source of truth".

The seed now uses Colophon's new port-target model instead of a flat source-of-truth claim:

  • The design files stay the source of truth for design (tokens, component intent, principles) and are framework-agnostic. components.jsx is design intent for the canvas preview — explicitly not shipping code.
  • How a design ships is now recorded per-surface in design.json under authority:
    • Default: ships as Native WinUI 3 / C#, ported via win-dev-skills.
    • Chat surface (ChatBubble, ChatComposer, ChatThread): ships via Reactor (no dedicated porting agent yet — WIP).

So the boundary Scott asked for is now explicit: native XAML/C# (and Reactor for chat) is what ships; the JSX/design files are the upstream design intent that gets ported into it, and the syncSource/helperAgent name how and who. components.jsx and principles.md say the same thing in prose.

@karkarl
karkarl marked this pull request as draft July 16, 2026 20:53
@shanselman

shanselman commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator

GitHub Copilot maintainer-assistant review — this is automated feedback, not a comment written personally by Scott.

Reviewed head: ed110a1c21c6065de3398f84d88fcdda4b2429e5

This should remain draft. The design-system idea is useful, but the current artifacts are not yet safe as authoritative guidance for a native WinUI app.

The main issues from the paired review:

  1. Theme/high-contrast contract: design.json contains fixed light-theme hex/rgba values while the shipping app relies on semantic ThemeResource/system brushes. Please either model Light/Dark/HighContrast variants or mark every color as preview-only and map it to the WinUI resource key agents must use. Raw preview hex must not become implementation guidance.
  2. Native remains canonical: the repository’s native WinUI behavior is the source of truth. JSX/catalog artifacts should be described as derived visual examples, not a parallel upstream authority. Please revise the authority block and principles accordingly, and name an owner/sync process for keeping examples aligned.
  3. Component parity: the catalog composer omits shipping controls/state such as channel/session routing, speaker mute, send/stop behavior, pending attachments/queue state, and additional action slots. The assistant footer also omits Read Aloud and its state. Either represent the complete shipping contract or label these examples explicitly partial with links to the canonical native owners.
  4. Proof/validation: add current-head gallery proof for every exported component, including Light, Dark, and High Contrast behavior where applicable. Add a schema/parse/render smoke check for .agents/design/* so future drift is caught automatically.

Recommended framing: keep native XAML/C# behavior canonical; use this catalog to explain visual intent and reusable patterns, with semantic resource mappings and explicit coverage limits. That would preserve the value of the design artifacts without teaching future agents to hard-code colors or omit native functionality.

@karkarl karkarl mentioned this pull request Jul 20, 2026
Merged
karkarl and others added 2 commits July 20, 2026 12:18
@karkarl
Complete authority model for current colophon validation
dc55060 
The seed adopted the port-target authority model, but the latest colophon
validator now requires more once a port is set. Add the missing pieces so
design.json passes cleanly (0 errors / 0 warnings):

- authority.owner + authority.syncProcess (required when a port exists)
- per-color `resource` (WinUI Fluent ThemeResource brush keys) so agents bind
  system brushes instead of the preview-only hex
- per-color `themes` (dark + highContrast) for dark/high-contrast previews,
  matching the brand's stated "never hard-code hex that breaks in dark or
  high-contrast" principle

Keeps the existing port authoritySource (Native WinUI 3 / Windows Fluent),
win-dev-skills syncSource/helperAgent, and the chat -> Reactor portOverride.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl
Migrate design system components to components.jsonc
d03a4ff 
Colophon replaced the pseudocode-React components.jsx format with a structured,
framework-agnostic components.jsonc element tree (rendered by a pure JSON->DOM
interpreter, no React/Babel). Port the seed's components over faithfully:

- Button, Field, Card, Badge, ChatBubble, ChatComposer, ChatThread, ExampleScreen
  translated to the element-tree schema at their rest state, keeping the ds-* classes,
  CSS-variable styling, WinUI-derived metrics, and SVG glyphs (send/mic/add/copy/chevron/
  sparkle) intact. ComposerPicker factored out as a reusable component.
- Interactive hover/press JS (not expressible in the static scene graph) is dropped;
  the preview shows the documented rest state.

Validates clean (0 errors / 0 warnings); all prototypes.jsonc component references
resolve.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@karkarl karkarl mentioned this pull request Jul 21, 2026
Open
@clawsweeper clawsweeper Bot added rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. and removed rating: 🦐 gold shrimp Decent PR readiness signal, but merge confidence is limited. merge-risk: 🚨 other 🚨 Merging this PR has meaningful risk outside the owned taxonomy. labels Jul 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

merge-risk: 🚨 compatibility 🚨 Merging this PR could break existing users, config, migrations, defaults, or upgrades. P2 Normal priority bug or improvement with limited blast radius. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🦪 silver shellfish Thin PR readiness signal; proof, validation, or implementation needs work. status: 📣 needs proof The PR needs real behavior proof before ClawSweeper can clear the contributor ask.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@karkarl @shanselman