Seed v3 Colophon design system for OpenClaw Windows Hub

[karkarl]

Summary

Seeds a fresh v3-schema Colophon design system into .agents/design/ for the OpenClaw Windows Hub app, carrying over the design decisions from the earlier v1 seed (PR #962, closed/unmerged) and re-expressing the component patterns in the updated v3 schema. Branches off main.

This PR is design-system seeding only. It adds .agents/design/* and the idempotent Colophon pointer block in repo-root AGENTS.md. No application code, tests, or build files are modified.

What's here

• design.json — carried over from the v1 seed (tokens format is unchanged in v3): Fluent color tokens (each with its resource ThemeResource key + light/dark/highContrast themes), authority port targets, brand, typography, spacing, radii, shadows, principles. Preview hex is preview-only; shipping code binds the Fluent resource keys. Now carries 15 color tokens (12 from the v1 seed + control / controlLine / accentSubtle for inputs/chat) and a WinAppCli entry in the port authority (see below).
• principles.md — carried over verbatim from the v1 seed.
• components.jsonc — 10 components authored to v3 (meta.version: 3): Button, Field, Card, Badge, ComposerPicker, ComposerPickerOptions, ChatBubble, ChatComposer, ChatThread, ExampleScreen. Every raw-CSS attrs.style string is replaced with semantic, token-bound layout / position / appearance. Every object node has a stable unique id. WinUI-provenance and Reactor-port notes are preserved; ExampleScreen uses a v3 freeform status board to exercise absolute positioning alongside Auto Layout.
• colophon.jsonc — new v3 presentation profile (schemaVersion: 1, extends: "colophon/default") mapping OpenClaw tokens to theme roles for light + dark, brand, navigation, and component template config.
• AGENTS.md — idempotent Colophon pointer block; em dashes removed so the repo doc validator (no em dashes in user-facing docs) passes.

Chat components reconciled to the shipping Reactor UI (design data only)

The chat entries in components.jsonc describe what the app actually ships today, so the design stays in sync with the implementation:

• ComposerPicker — the subtle inline dropdown the composer's session / model / reasoning selectors use: borderless, transparent resting fill (SubtleFillColorTransparent), hover subtleHover / press subtlePressed, muted value text with a trailing muted chevron, sm radius, gap/padding tokens 1/2. Opens a flyout of single-select options in-app (Reactor port note).
• ChatComposer — toolbar matches the implemented layout (session picker + Attach/Model/Reasoning/Voice/Speaker/Settings/Send), container binds control / controlLine with a 12px margin; note documents the Send↔Stop toggle.
• ChatThread / ChatBubble — user bubble uses the softer accentSubtle with a hover Copy; assistant bubble uses subtleHover fill + controlLine border with a Read-aloud footer and max-width 720.
• 3 new tokens the system didn't previously cover (preview hex are approximations; shipping code binds the resource keys): control → ControlFillColorDefaultBrush, controlLine → ControlStrokeColorDefaultBrush, accentSubtle → AccentFillColorSecondaryBrush.

Composer input + pickers use the colophon #16 interaction model (design data only)

The composer's input, subtle buttons, and picker flyout are expressed with the schema-pure interaction keys (control / states / on) from the colophon #16 components schema, so the preview matches Windows Fluent (not Fluent-web) behavior with no raw CSS:

• Borderless, typeable input — chat-composer-input (a contenteditable textbox) sets control.chrome: none to drop the web button/input border and control.focus: { kind: underline, color: accent } for a Windows accent underline on focus instead of a web focus ring. It stays selectable and editable in the canvas.
• Real subtle buttons with WinUI states — ComposerPicker and the four composer icon buttons (add context, dictate, read aloud, chat settings) are real button elements with a transparent rest state ($none), control.chrome: none + control.focus outline, and states carrying subtleHover / subtlePressed (hover / pressed / hoverPressed). ComposerPicker also gets a disabled shade for single-choice selectors.
• Click-to-open flyout — ComposerPicker's on: { click: { open: "ComposerPickerOptions" } } opens the new ComposerPickerOptions component, a WinUI RadioMenuItem-style single-select flyout on a surface sheet with md radius/shadow. Flyout targets take no props, so it is a representative shared model list; the real per-picker option sets are a Reactor port note.
• Notes were refreshed to describe the real button + control model and to drop the obsolete combobox-div and web-focus-ring caveats.

WinAppCli in the port authority (design data)

Per the maintainer, XAML and Reactor now build/package through winapp (WinAppCli, https://github.com/microsoft/WinAppCli). design.json's authority gains a tooling descriptor and a toolingSource on the default WinUI 3 port and the Reactor chat override. This is design-system metadata about how the design ports to code; it changes no code. The design→code syncSource references (win-dev-skills / microsoft-ui-reactor) are unchanged.

px → token approximations (worth a human eye)

Raw WinUI pixel padding snapped to the nearest 4px token, each recorded in the component note: Button ButtonPadding 11,5,11,6 → 3/1 (MinWidth 100 = port note); Field TextControlThemePadding 10,5,6,6 → 2/1 (MinHeight 32 = port note); Card 16,12 → 4/3 (exact). Chat bubble/composer max-width/min-height growth values have no token equivalent and remain Reactor port notes. The 3 input/chat tokens' preview hex are approximations of the real Fluent brushes; shipping code binds the resource keys, so the hex is preview-only.

Required proof pools

none — this PR only adds framework-agnostic design-system data files under .agents/design/ plus the AGENTS.md pointer. No shipping UI, MCP, node, setup, pairing, or gateway code changes, so the app-behavior proof pools in docs/PROOF_POOLS.md don't apply.

Validation

Validated against the Colophon extension's own read-only validators (componentsio.mjs, profileio.mjs, validate.mjs):

• components.jsonc parses at meta.version: 3; validateComponentsDoc(doc, { tokens }) passes (all appearance / states / control token refs, including the 3 new tokens, resolve against design.json; every on.click.open target resolves to a defined component); all 10 components expandInstance successfully; guard confirms no raw "style" attrs remain.
• colophon.jsonc $schema matches PROFILE_SCHEMA_URL; validatePresentationProfile passes.
• Aggregate validateDesignDir('.agents/design') → ok: true, 0 errors, 0 warnings.
• Against the main merge-base, this branch changes only .agents/design/* and AGENTS.md (verified via git diff --stat). No C#, test, or build files are touched, so repo build/test suites are not applicable to this change.

Real behavior proof

The design system renders in the Colophon canvas from these files; the extension validators above exercise the same parse/validate/expand path the canvas uses. No runtime app behavior changes in this PR.

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

[clawsweeper]

🦞👀
ClawSweeper picked this up.

Pull request received. I will update this pull request when review starts.

ClawSweeper review complete

ClawSweeper finished reviewing this revision. The review result is being finalized.

View the workflow run.

[clawsweeper]

Codex review: blocked before merge. Reviewed September 24, 2026, 9:00 PM ET / September 25, 2026, 01:00 UTC (Revision 16).

ClawSweeper review

What this changes

The branch adds a Colophon design catalog, canvas profile, Fluent design guidance, and root instructions for agents building the Windows UI.

Merge readiness

⛔ Blocked before merge - 9 items remain

Current main and the latest release lack this catalog, and the earlier seed closed unmerged. The new canvas screenshot supports the visible layout, while supported Colophon behavior and repository guidance still expose merge blockers. A maintainer also needs to confirm the catalog’s authority boundary.

Priority: P3
Reviewed head: 9a11bdf7ac3f88dc70239c1c1998226c949a62cd
Owner decision: Required. See Decision needed.

Review scores

Measure	Result	What it means
Overall readiness	🦐 gold shrimp (3/6)	The visible catalog has useful signal, but supported-preview defects and inaccurate implementation guidance limit merge readiness.
Proof confidence	🌊 off-meta tidepool	Not applicable: This collaborator-authored design-only PR is exempt from the ordinary contributor runtime-proof gate. The supplied canvas screenshot shows the migrated composer and thread at rest; it does not prove picker selection or profile consumption. The final commit changed prose punctuation. No existing application stored-data contract changes, and this read-only review ran no build or tests.
Patch quality	🦐 gold shrimp (3/6)	6 actionable review findings remain.

Verification

Check	Result	Evidence
Real behavior	Not applicable	Not applicable: This collaborator-authored design-only PR is exempt from the ordinary contributor runtime-proof gate. The supplied canvas screenshot shows the migrated composer and thread at rest; it does not prove picker selection or profile consumption. The final commit changed prose punctuation. No existing application stored-data contract changes, and this read-only review ran no build or tests.
Evidence reviewed	16 items	Introduced scope: The pinned branch delta adds four design and guidance files with 1,671 inserted lines and no application or test changes. Still absent from main and release: The fetched main tree and v2026.9.4 release tree contain AGENTS.md but no DESIGN.md or .agents/design catalog. Release check: The v2026.9.4 tree has no design catalog.
Findings	6 actionable findings	[P2] Use functional radio controls in the picker preview [P2] Preserve generated styles on the selected checkmark [P2] Use a supported Colophon profile contract
Security	None	None.

How this fits together

The catalog records visual patterns derived from the shipping WinUI and Reactor chat surfaces. Colophon renders those patterns for preview, and agents use the guidance when implementing future UI changes.

flowchart LR
  A[Shipping Windows UI] --> B[Fluent resource inspection]
  B --> C[Design guidance and tokens]
  C --> D[Component patterns]
  D --> E[Colophon canvas]
  C --> F[Agent UI guidance]
  F --> G[Future Windows UI]

Loading

Decision needed

Question	Recommendation
Should this repository adopt the Colophon catalog as maintained agent-facing design guidance when native WinUI and Reactor behavior remain canonical?	Adopt as derived guidance: Approve the catalog after its instructions consistently defer to shipping native behavior and name who keeps the examples synchronized.

Why: The prior seed closed over parallel design authority; accepting a repository-wide agent workflow and its synchronization obligation requires maintainer intent.

Before merge

• Use functional radio controls in the picker preview (P2) - The flyout rows are labels with fixed aria-checked values. Colophon closes the overlay only when a radio input changes, so choosing another row cannot update selection or dismiss the flyout, and the rows are not keyboard-focusable. Use supported radio controls while retaining the intended checkmark.
• Preserve generated styles on the selected checkmark (P2) - The raw attrs.style font declaration replaces Colophon's generated inline style, dropping the checkmark's token-bound accent color, width, and alignment. Represent the icon without overriding its generated styles.
• Use a supported Colophon profile contract (P2) - The cited Colophon revision has no declared profile schema or profile loader, and its directory validator reads the design tokens and components without this file. Remove the unused profile or identify and validate against a consumer revision that supports it.
• Correct the Windows build-tool authority (P2) - This calls WinAppCLI the single build and packaging tool for both UI ports. The repository build invokes dotnet build, CI uses dotnet and MSBuild, and WinAppCLI is an optional local launch path. Future agents would receive the wrong build instructions.
• Point design guidance at files this branch provides (P3) - The metadata still names components.jsx, the Components section points to an absent prototypes.jsonc, and the picker note names the removed design.json. Update those references and the PR body to match the DESIGN.md migration.
• Remove em dashes from the remaining canvas copy (P3) - Late discovery: the component file was unchanged since the prior reviewed head, and its preview text still contains em dashes after the root guidance was corrected. The repository's user-facing copy rule also covers this displayed sample text.
• Resolve merge risk (P1) - Root agent instructions could make a derived Colophon catalog a competing design authority for future UI work. The earlier seed was closed over that boundary, so adoption and synchronization ownership need an explicit maintainer decision.
• Complete next step (P2) - Repair the preview and guidance findings, update the PR body, report the repository-required validation results, and obtain maintainer direction on catalog authority before merge.
• Resolve maintainer decision - Resolve the maintainer decision shown above before merge.

Findings

• [P2] Use functional radio controls in the picker preview — .agents/design/components.jsonc:248-250
• [P2] Preserve generated styles on the selected checkmark — .agents/design/components.jsonc:253
• [P2] Use a supported Colophon profile contract — .agents/design/colophon.jsonc:2-4

Agent review details

Security

None.

Review metrics

Metric	Value	Why it matters
Introduced lines	design and guidance +1,671; production +0; tests +0	The substantial catalog growth adds maintenance obligations without changing the shipping app.

Root-cause cluster

Relationship: canonical
Canonical: #1395
Summary: This live v3 seed succeeds an earlier v1 seed that closed without merging.

Members:

• superseded: Seed design system for OpenClaw Windows Hub #962 - The earlier design seed closed unmerged, and this branch carries its central idea into the newer catalog format.

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Merge-risk options

Maintainer options:

1. Keep native UI canonical (recommended)
   Revise the root instructions so the catalog is explicitly derived from shipping UI, then assign synchronization ownership before merge.
2. Accept a design-first workflow
   A maintainer may sponsor the new authority model and take responsibility for conflicts between the catalog and shipping UI.
3. Pause repository adoption
   Keep the preview in the Colophon project if the ongoing repository maintenance cost is not justified.

Technical review

Best possible solution:

Maintain a keyboard-accessible, validated preview as derived guidance from native WinUI and Reactor behavior, with accurate resource mappings and build instructions.

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

Yes, source gives a high-confidence picker check: open the Colophon model flyout and choose another row. The rows have no radio inputs, while the inspected Colophon runtime closes only on radio-input changes; this review did not execute the interaction.

Is this the best way to solve the issue?

No, not yet. The preview needs supported controls and a supported profile contract, while the guidance must describe the repository’s real build path and the maintainer-approved native authority boundary.

Full review comments:

• [P2] Use functional radio controls in the picker preview — .agents/design/components.jsonc:248-250
  The flyout rows are labels with fixed aria-checked values. Colophon closes the overlay only when a radio input changes, so choosing another row cannot update selection or dismiss the flyout, and the rows are not keyboard-focusable. Use supported radio controls while retaining the intended checkmark.
  Confidence: 0.97
• [P2] Preserve generated styles on the selected checkmark — .agents/design/components.jsonc:253
  The raw attrs.style font declaration replaces Colophon's generated inline style, dropping the checkmark's token-bound accent color, width, and alignment. Represent the icon without overriding its generated styles.
  Confidence: 0.94
• [P2] Use a supported Colophon profile contract — .agents/design/colophon.jsonc:2-4
  The cited Colophon revision has no declared profile schema or profile loader, and its directory validator reads the design tokens and components without this file. Remove the unused profile or identify and validate against a consumer revision that supports it.
  Confidence: 0.9
• [P2] Correct the Windows build-tool authority — DESIGN.md:80-83
  This calls WinAppCLI the single build and packaging tool for both UI ports. The repository build invokes dotnet build, CI uses dotnet and MSBuild, and WinAppCLI is an optional local launch path. Future agents would receive the wrong build instructions.
  Confidence: 0.97
• [P3] Point design guidance at files this branch provides — DESIGN.md:75
  The metadata still names components.jsx, the Components section points to an absent prototypes.jsonc, and the picker note names the removed design.json. Update those references and the PR body to match the DESIGN.md migration.
  Confidence: 0.98
• [P3] Remove em dashes from the remaining canvas copy — .agents/design/components.jsonc:286
  Late discovery: the component file was unchanged since the prior reviewed head, and its preview text still contains em dashes after the root guidance was corrected. The repository's user-facing copy rule also covers this displayed sample text.
  Confidence: 0.84
  Late finding: first raised on code an earlier review cycle already covered.

Overall correctness: patch is incorrect
Overall confidence: 0.93

AGENTS.md: found and applied where relevant.

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

Labels

Label changes:

• add merge-risk: 🚨 other: Repository-wide agent guidance could drift from, or compete with, the canonical native UI design contract.
• add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. This collaborator-authored design-only PR is exempt from the ordinary contributor runtime-proof gate. The supplied canvas screenshot shows the migrated composer and thread at rest; it does not prove picker selection or profile consumption. The final commit changed prose punctuation. No existing application stored-data contract changes, and this read-only review ran no build or tests.

Label justifications:

• P3: This is a non-shipping design and contributor-workflow addition with no current user-facing runtime regression.
• merge-risk: 🚨 other: Repository-wide agent guidance could drift from, or compete with, the canonical native UI design contract.
• rating: 🦐 gold shrimp: Overall readiness is 🦐 gold shrimp; proof is 🌊 off-meta tidepool and patch quality is 🦐 gold shrimp.
• status: ⏳ waiting on author: ClawSweeper has contributor-facing work open and is waiting for author action. Not applicable: This collaborator-authored design-only PR is exempt from the ordinary contributor runtime-proof gate. The supplied canvas screenshot shows the migrated composer and thread at rest; it does not prove picker selection or profile consumption. The final commit changed prose punctuation. No existing application stored-data contract changes, and this read-only review ran no build or tests.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. This collaborator-authored design-only PR is exempt from the ordinary contributor runtime-proof gate. The supplied canvas screenshot shows the migrated composer and thread at rest; it does not prove picker selection or profile consumption. The final commit changed prose punctuation. No existing application stored-data contract changes, and this read-only review ran no build or tests.

Evidence

What I checked:

• Introduced scope: The pinned branch delta adds four design and guidance files with 1,671 inserted lines and no application or test changes. (9a11bdf7ac3f)
• Still absent from main and release: The fetched main tree and v2026.9.4 release tree contain AGENTS.md but no DESIGN.md or .agents/design catalog. (273b0182745a)
• Release check: The v2026.9.4 tree has no design catalog. (3c43751b2bac)
• Picker options: The three option rows are labels with fixed aria-checked values and no radio inputs. (.agents/design/components.jsonc:248, 9a11bdf7ac3f)
• Colophon selection contract: At the cited Colophon revision, the flyout closes on change from an input[type=radio] and focuses the first focusable child. The proposed labels satisfy neither path. (extensions/colophon/components-interactions.js:94, cca8a719af5c)
• Selected glyph style: The checkmark combines generated layout and accent appearance with a raw style attribute setting its font family. (.agents/design/components.jsonc:253, 9a11bdf7ac3f)

Likely related people:

• shanselman: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)
• karkarl: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)
• Dallin Romney: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)

Rank-up moves

Optional improvements that raise the rating; they are not merge blockers.

• Make picker selection functional and retain token styling on its checkmark.
• Remove the unsupported profile or validate it against an identified Colophon consumer revision.
• Correct build and file references, update the PR body, and report the repository-required validation results.

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 (15 earlier review cycles; latest 8 shown)

• reviewed 2026-09-11T18:08:54.851Z sha ada5a62 :: needs changes before merge. :: [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from the new agent-facing prose
• reviewed 2026-09-14T17:47:48.923Z sha 3b62bbf :: needs changes before merge. :: [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from the new agent-facing prose
• reviewed 2026-09-14T18:39:19.799Z sha c59d186 :: needs changes before merge. :: [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from the new agent-facing prose
• reviewed 2026-09-15T18:02:14.753Z sha 9aded00 :: needs changes before merge. :: [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from the new agent-facing prose
• reviewed 2026-09-15T23:43:55.677Z sha 3752e58 :: needs changes before merge. :: [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from the new agent-facing prose
• reviewed 2026-09-17T05:43:41.539Z sha 5b0fcdf :: needs changes before merge. :: [P2] Preserve functional radio controls in the picker preview | [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from agent-facing prose
• reviewed 2026-09-17T05:49:37.211Z sha 5a12399 :: needs changes before merge. :: [P2] Preserve functional radio controls in the picker preview | [P2] Preserve token styles when applying the icon font | [P2] Use an available Colophon presentation-profile contract | [P2] Describe WinAppCLI as the optional launcher it currently is | [P3] Replace references to the nonexistent JSX catalog | [P3] Remove prohibited em dashes from agent-facing prose
• reviewed 2026-09-23T19:41:00.392Z sha 146fe47 :: needs changes before merge. :: [P2] Restore functional radio controls in the picker preview | [P2] Preserve token styling on the selected checkmark | [P2] Use a supported Colophon presentation profile | [P2] Correct the Windows build-tool authority | [P3] Remove references to missing design files | [P2] Replace em dashes in maintained design guidance

[karkarl]

[karkarl]

Global triage: HOLD_FOR_AUTHOR. Take confidence 15%; recommendation confidence 97%; effort medium; risk medium.

Reviewed exact head 9a11bdf7. The catalog does not match the cited Colophon runtime:

• Picker rows are static menuitemradio labels with no selectable input, keyboard behavior, or state transition.
• Raw attrs.style replaces the generated checkmark styling.
• Border-color-only avatar, bubble, and composer nodes render no border because no width is supplied.
• The composer placeholder is editable content rather than placeholder state.
• The pinned Colophon implementation does not load the added colophon.jsonc, and its schema URL is unavailable.
• DESIGN.md incorrectly describes WinAppCli as the exclusive build and packaging authority and still references nonexistent design files.

Please repair those contracts and provide pinned Colophon interaction and computed-style proof for picker selection, focus restoration, first-keystroke composer behavior, borders, and light/dark rendering. No shipping-app proof pool is required unless production WinUI changes are added.

The three failed E2E lanes also fail at the same setup step on current main; CI Gate is derivative. They are not attributed to this design-only patch.