Seed design system for OpenClaw Windows Hub

[karkarl]

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.

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

[clawsweeper]

Codex review: needs real behavior proof before merge. Reviewed July 20, 2026, 3:21 PM ET / 19:21 UTC.

Summary
The PR adds three non-shipping .agents/design files that define Fluent design tokens, principles, and eight JSX canvas-preview patterns for the Windows Hub.

Reproducibility: not applicable. This PR introduces contributor-facing design artifacts rather than reporting a runtime defect. The relevant verification is comparison against the current shipping UI contract and current-head canvas rendering.

Review metrics: 2 noteworthy metrics.

• Catalog surface: 3 files added; 571 lines added. The entire change is a new persistent contributor-guidance surface rather than an isolated UI implementation.
• Preview coverage: 8 declared exports; 3 supplied screenshots. Current visual proof does not demonstrate every exported pattern or the claimed theme behavior.

Merge readiness
Overall: 🦐 gold shrimp
Proof: 🦐 gold shrimp
Patch quality: 🦐 gold shrimp
Result: blocked until stronger real behavior proof is added.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

• Resolve the authority decision and label or complete the chat examples accordingly.
• Post redacted current-head evidence for all eight exports in Light, Dark, and High Contrast.

Proof guidance:

• [P1] Needs stronger real behavior proof before merge: Three screenshots show selected previews, but they do not demonstrate every current-head export or Light, Dark, and High Contrast behavior; add redacted current-head gallery evidence before merge. 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.

Risk before merge

• [P1] Merging an incomplete catalog as upstream design guidance can create a competing source of truth that teaches future contributors to omit current WinUI and Reactor controls or states.
• [P1] The supplied screenshots do not prove the current revision renders all eight exports under the claimed Light, Dark, and High Contrast coverage.

Maintainer options:

1. Align catalog coverage before merge (recommended)
   Make the examples complete for the current chat contract or explicitly partial with canonical native implementation links, then provide current-head Light, Dark, and High Contrast gallery proof.
2. Sponsor a separate design authority
   Accept the long-term synchronization burden by naming an owner and review contract for design-first changes that intentionally precede native implementation.

Next step before merge

• [P1] A maintainer must settle the catalog's long-term authority model, and the contributor must provide current-head proof before normal merge review can continue.

Maintainer decision needed

• Question: Should this repository accept .agents/design as an upstream design-authority surface, or keep it explicitly derived from canonical native WinUI and Reactor implementations?
• Rationale: The branch's port-target model is a long-lived contributor workflow choice; current automated review feedback recommends native behavior remain canonical, but no human maintainer decision in the supplied discussion confirms the permanent authority model.
• Likely owner: shanselman — The available review record centers the authority-boundary decision on feedback posted on this review surface.
• Options:
  • Keep native implementations canonical (recommended): Reframe the catalog as derived non-shipping guidance, explicitly link partial examples to native owners, and require future catalog updates to follow shipping behavior.
  • Sponsor the design-upstream model: Accept the catalog as upstream design intent only with a named human owner, an explicit synchronization process, and complete coverage expectations for shipping patterns.

Security
Cleared: The diff adds design metadata, Markdown, and JSX preview examples only; it does not add dependencies, workflows, package resolution, secrets access, or executable shipping code.

Review findings

• [P2] Mark the composer example as partial or model its full contract — .agents/design/components.jsx:267-323
• [P2] Document the omitted assistant-footer actions and states — .agents/design/components.jsx:193-237

Review details

Best possible solution:

Keep native WinUI and Reactor behavior canonical, then either model the complete chat contract in the catalog or label each example's coverage limits and link it directly to its shipping owner before adding current-head gallery proof.

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

Not applicable: this PR introduces contributor-facing design artifacts rather than reporting a runtime defect. The relevant verification is comparison against the current shipping UI contract and current-head canvas rendering.

Is this the best way to solve the issue?

No. The branch improves theme semantics, but its chat examples still omit current shipping actions and states, while the durable authority model needs explicit maintainer sponsorship.

Full review comments:

• [P2] Mark the composer example as partial or model its full contract — .agents/design/components.jsx:267-323
  The catalog presents this as a native-grounded pattern, but the current merged composer also has session routing, speaker mute, queued-send state, and a single Send/Stop slot. Model those behaviors or explicitly mark the example partial and link the canonical native owner so future ports do not regress them.
  Confidence: 0.91
• [P2] Document the omitted assistant-footer actions and states — .agents/design/components.jsx:193-237
  The assistant example exposes usage and Copy only, while the shipping timeline includes additional Read Aloud behavior and state. Keep the example in sync or state that it is intentionally incomplete with a link to the canonical implementation.
  Confidence: 0.87

Overall correctness: patch is incorrect
Overall confidence: 0.84

AGENTS.md: found and applied where relevant.

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

Label changes

Label justifications:

• P2: This is a bounded contributor-guidance and UI-contract consistency concern, not a runtime emergency.
• merge-risk: 🚨 other: A parallel design authority can cause future implementation drift even though this PR changes no shipping application code.
• rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🦐 gold shrimp and patch quality is 🦐 gold shrimp.
• status: 📣 needs proof: The PR needs real behavior proof before ClawSweeper can clear the contributor ask. Needs stronger real behavior proof before merge: Three screenshots show selected previews, but they do not demonstrate every current-head export or Light, Dark, and High Contrast behavior; add redacted current-head gallery evidence before merge. 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. Three screenshots show selected previews, but they do not demonstrate every current-head export or Light, Dark, and High Contrast behavior; add redacted current-head gallery evidence before merge.

Evidence reviewed

What I checked:

• Latest design revision adds semantic theme mappings: The current branch adds per-color WinUI resource keys plus dark and high-contrast variants, addressing the prior fixed-light-palette concern. (.agents/design/design.json:10, dc55060db3ee)
• Catalog remains upstream design guidance: The branch describes JSX as non-shipping design intent, but also directs contributors to add uncovered values to the design catalog before porting them into product implementations; that makes the authority boundary a maintainership decision rather than ordinary documentation. (.agents/design/principles.md:7, dc55060db3ee)
• Merged native composer establishes a broader current contract: The related merged implementation at Apply design-system composer to app chat UI #984 documents session selection, speaker mute, Send/Stop switching, queued sends, and preserved composer identity, while this catalog's composer example remains narrower. (47e4e6496a2d)
• Prior review feedback remains materially applicable: The automated reviewer explicitly requested complete shipping parity or clear partial-coverage labels for the composer and assistant footer; the latest branch commit changes design.json validation fields, not those JSX patterns. (.agents/design/components.jsx:1, dc55060db3ee)
• Proof is not current-head comprehensive: The PR contains three preview screenshots, but the latest revision arrived afterward and there is no evidence covering all eight exports across Light, Dark, and High Contrast on the current head. (dc55060db3ee)

Likely related people:

• karkarl: Authored the current catalog branch and the merged native composer work that defines the relevant shipping contract. (role: recent area contributor; confidence: high; commits: 47e4e6496a2d, dc55060db3ee; files: .agents/design/components.jsx, .agents/design/design.json, src/OpenClaw.Tray.WinUI)
• shanselman: The review comments on this PR identify the authority boundary, theme semantics, catalog parity, and proof standard that remain relevant to merge acceptance. (role: reviewer; confidence: medium; files: .agents/design/components.jsx, .agents/design/design.json, .agents/design/principles.md)

What the crustacean ranks mean

• 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
• 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
• 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
• 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
• 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
• 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
• 🌊 off-meta tidepool: rating does not apply to this item.

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.

How this review workflow works

• 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.

Review history (6 earlier review cycles)

• reviewed 2026-07-10T18:34:13.018Z sha 1b2b6bf :: needs real behavior proof before merge. :: [P2] Model Windows theme semantics instead of a fixed light palette | [P2] Match the composer pattern to the native control layout | [P2] Preserve the native assistant footer metadata
• reviewed 2026-07-10T20:14:11.864Z sha 536aa36 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed light palette | [P2] Match the composer pattern to the native control contract | [P2] Preserve the native assistant footer actions
• reviewed 2026-07-10T20:23:13.021Z sha 536aa36 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed light palette | [P2] Match the composer pattern to the native control contract | [P2] Preserve the native assistant footer actions
• reviewed 2026-07-10T20:30:27.954Z sha 536aa36 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed light palette | [P2] Match the composer pattern to the native control contract | [P2] Preserve the native assistant footer actions
• reviewed 2026-07-16T20:30:43.017Z sha ed110a1 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed palette | [P2] Match the composer example to the shipping control contract | [P2] Preserve the native assistant footer actions and states
• reviewed 2026-07-16T21:12:15.981Z sha ed110a1 :: needs real behavior proof before merge. :: [P2] Model semantic Windows themes instead of a fixed palette | [P2] Match the composer to the current shipping control contract | [P2] Preserve the shipping assistant footer actions

[shanselman]

🤖 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.

[karkarl]

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.

[shanselman]

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.

[clawsweeper]

ClawSweeper status: review started.

I am starting a fresh review of this pull request: Seed design system for OpenClaw Windows Hub This is item 1/1 in the current shard. Shard 0/1.

This placeholder means the worker is alive and reading the current context. I will edit this same comment with the actual review when the claws are done clicking.

Crustacean status: shell secured, claws on keyboard, evidence pebbles being sorted.