From 85d33e0fb018a90dac182b7fa83e8c8fa9d02d20 Mon Sep 17 00:00:00 2001 From: Karen Lai <7976322+karkarl@users.noreply.github.com> Date: Wed, 8 Jul 2026 12:22:32 -0700 Subject: [PATCH 1/6] Seed design system for OpenClaw Windows Hub 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> --- .agents/design/components.jsx | 66 +++++++++++++++++++++++++ .agents/design/design.json | 92 +++++++++++++++++++++++++++++++++++ .agents/design/principles.md | 38 +++++++++++++++ 3 files changed, 196 insertions(+) create mode 100644 .agents/design/components.jsx create mode 100644 .agents/design/design.json create mode 100644 .agents/design/principles.md diff --git a/.agents/design/components.jsx b/.agents/design/components.jsx new file mode 100644 index 000000000..0d3e7a4c2 --- /dev/null +++ b/.agents/design/components.jsx @@ -0,0 +1,66 @@ +// components.jsx — Pseudocode React that documents your UI patterns. +// +// These render live in the Design System canvas. Keep them small and honest: +// one component = one decision your team has already made. Style with the +// `ds-*` classes and CSS variables the design system generates from design.json +// (e.g. var(--color-accent), var(--space-4), var(--radius-md), var(--font-display)). +// +// Copilot reads this file to match the house style when it builds new UI. + +// Primary action. One per view — it's where the eye should land. +export function Button({ children = "Save changes", variant = "primary" }) { + return ; +} + +// Text input with a label sitting above it. Labels are quiet; the field is the subject. +export function Field({ label = "Gateway address", placeholder = "127.0.0.1:18789" }) { + return ( + + ); +} + +// Content card. Flat by default — a hairline border, not a drop shadow. +// Never nest a card inside another card. +export function Card({ title = "Windows node", body = "Paired · 6 capabilities exposed over MCP." }) { + return ( +
+

{title}

+

{body}

+ Open report → +
+ ); +} + +// Status pill. Uses semantic color tokens, never a raw hex. +export function Badge({ children = "Connected", tone = "positive" }) { + return {children}; +} + +// A representative screen composed from the pieces above. This is the +// "does it hang together" check for the whole system. +export function ExampleScreen() { + return ( +
+
+
+

Connection

+

OpenClaw Windows Hub

+
+ Connected +
+ +
+ + +
+ +
+ + +
+
+ ); +} diff --git a/.agents/design/design.json b/.agents/design/design.json new file mode 100644 index 000000000..e3cf534f6 --- /dev/null +++ b/.agents/design/design.json @@ -0,0 +1,92 @@ +{ + "$schema": "https://agents.design/schema/v1", + "meta": { + "version": 1, + "updatedBy": "scan+xaml", + "note": "Derived from the repo's WinUI 3 / XAML surfaces. This app themes off Windows Fluent system resources (SystemAccentColor, Mica, Segoe UI Variable), so tokens below map to Fluent theme resources rather than a bespoke hex palette. Edit in the Design System canvas or directly." + }, + "brand": { + "name": "OpenClaw Windows Hub", + "tagline": "A calm native Windows companion for your AI assistant.", + "description": "OpenClaw Windows Hub is a native Windows companion suite for OpenClaw, the AI-powered personal assistant. Built on WinUI 3 as a system-tray app, it pairs your PC to an OpenClaw gateway, exposes allowlisted Windows node capabilities over MCP, and guides first-run pairing through a setup wizard. Its interface follows Windows Fluent design conventions — Mica surfaces, the user's system accent, and Segoe UI Variable type — so it feels like a quiet, native extension of the OS rather than a bolted-on dashboard.", + "surface": "product", + "voice": "Clear, respectful, and native to Windows. Explain pairing, permissions, and security plainly. State what will happen and why; never alarmist, never hype.", + "personality": ["native", "trustworthy", "calm", "precise"], + "antiReferences": [ + "custom-skinned controls that fight the OS theme", + "neon gradients and glassmorphism overload", + "ignoring the user's system accent or light/dark preference", + "cramming a web dashboard into a desktop window", + "hard-coded hex that breaks in dark or high-contrast mode" + ] + }, + "colors": [ + { "name": "ink", "value": "#1b1b1b", "usage": "Primary text, headings. Fluent TextFillColorPrimary on light." }, + { "name": "paper", "value": "#f3f3f3", "usage": "App / page background. Mica base / ApplicationPageBackground (light)." }, + { "name": "surface", "value": "#fbfbfb", "usage": "Cards, flyouts, inputs. Fluent CardBackgroundFillColorDefault." }, + { "name": "muted", "value": "#5d5d5d", "usage": "Secondary text, captions. Fluent TextFillColorSecondary/Tertiary." }, + { "name": "line", "value": "#e5e5e5", "usage": "Borders, dividers. Fluent CardStrokeColorDefault / DividerStroke." }, + { "name": "accent", "value": "#0067c0", "usage": "Primary actions, links, selection, focus. Follows SystemAccentColor (default AccentDark1 on light)." }, + { "name": "accentInk", "value": "#ffffff", "usage": "Text/glyphs on accent fills." }, + { "name": "positive", "value": "#0f7b0f", "usage": "Success / connected states. Fluent SystemFillColorSuccess." }, + { "name": "warning", "value": "#9d5d00", "usage": "Warnings / attention. Fluent SystemFillColorCaution." }, + { "name": "critical", "value": "#c42b1c", "usage": "Errors, disconnected, destructive. Fluent SystemFillColorCritical." } + ], + "typography": { + "display": { + "family": "\"Segoe UI Variable Display\", \"Segoe UI Variable\", \"Segoe UI\", system-ui, sans-serif", + "weights": [400, 600], + "usage": "Page and section titles. Segoe UI Variable Display optical size." + }, + "body": { + "family": "\"Segoe UI Variable Text\", \"Segoe UI Variable\", \"Segoe UI\", system-ui, sans-serif", + "weights": [400, 600], + "usage": "Body copy, UI labels, buttons. Segoe UI Variable Text optical size." + }, + "mono": { + "family": "\"Cascadia Mono\", \"Cascadia Code\", Consolas, \"SFMono-Regular\", monospace", + "weights": [400], + "usage": "Commands, endpoints, tokens, logs, timestamps. Used heavily across setup and diagnostics surfaces." + }, + "scale": [ + { "name": "display", "size": "40px", "lineHeight": "50px", "weight": 600, "role": "display", "tracking": "-0.01em" }, + { "name": "title", "size": "28px", "lineHeight": "36px", "weight": 600, "role": "display" }, + { "name": "heading", "size": "20px", "lineHeight": "28px", "weight": 600, "role": "body" }, + { "name": "body", "size": "14px", "lineHeight": "20px", "weight": 400, "role": "body" }, + { "name": "small", "size": "13px", "lineHeight": "18px", "weight": 400, "role": "body" }, + { "name": "caption", "size": "12px", "lineHeight": "16px", "weight": 400, "role": "body" } + ] + }, + "spacing": { + "unit": 4, + "scale": [ + { "name": "1", "value": "4px" }, + { "name": "2", "value": "8px" }, + { "name": "3", "value": "12px" }, + { "name": "4", "value": "16px" }, + { "name": "5", "value": "24px" }, + { "name": "6", "value": "32px" }, + { "name": "7", "value": "48px" }, + { "name": "8", "value": "64px" } + ] + }, + "radii": [ + { "name": "sm", "value": "4px", "usage": "Buttons, inputs, small controls. Fluent ControlCornerRadius." }, + { "name": "md", "value": "8px", "usage": "Cards, dialogs, flyouts. Fluent OverlayCornerRadius." }, + { "name": "lg", "value": "12px", "usage": "Large panels and grouped surfaces." }, + { "name": "pill", "value": "999px", "usage": "Status pills, badges, toggles." } + ], + "shadows": [ + { "name": "sm", "value": "0 1px 2px rgba(0,0,0,0.10)" }, + { "name": "md", "value": "0 4px 16px rgba(0,0,0,0.12)" }, + { "name": "lg", "value": "0 12px 40px rgba(0,0,0,0.16)" } + ], + "principles": [ + "Defer to Windows. Theme off SystemAccentColor and Fluent resources so the app follows the user's accent, light/dark, and high-contrast choices.", + "One accent, and it means \"act here\". Selection, focus, and primary actions share the system accent; don't spend it on decoration.", + "Hierarchy over decoration — size, weight, and space do the work before color does.", + "State must be legible: connected, pairing, and error states read clearly via positive/warning/critical, never color alone.", + "No hard-coded hex in UI. Use tokens/theme resources so dark and high-contrast modes stay correct.", + "Motion is a cue, not a garnish: 120-200ms ease-out, no bounce." + ] +} diff --git a/.agents/design/principles.md b/.agents/design/principles.md new file mode 100644 index 000000000..29a7375c7 --- /dev/null +++ b/.agents/design/principles.md @@ -0,0 +1,38 @@ +# Design principles — OpenClaw Windows Hub + +> This is the prose companion to `design.json`. Designers write here; developers +> and Copilot read here. Keep it short enough that people actually read it. + +## The one-line brief +A calm native Windows companion for your AI assistant. It should feel like a +quiet, trustworthy extension of Windows — Fluent surfaces, the user's own +accent color — not a web dashboard wearing a desktop window. + +## Voice +- Clear, respectful, and native to Windows. Say what will happen and why. +- Explain pairing, permissions, and security plainly — never alarmist, never hype. +- No hype words ("supercharge", "seamless", "revolutionary", "effortless"). + +## Information hierarchy +1. **One subject per screen.** Decide what the screen is *for* and let that element win. +2. **Size and weight before color.** Establish the hierarchy in grayscale first; color is the last 10%. +3. **One accent.** `accent` = "act here" (selection, focus, primary action). If everything is accented, nothing is. +4. **Generous vertical rhythm.** Prefer the `space-5`/`space-6` steps between groups; let content breathe. + +## Do +- Defer to Windows: theme off `SystemAccentColor` and Fluent resources so the app + follows the user's accent, light/dark, and high-contrast settings. +- Use Segoe UI Variable for text and Cascadia Mono for commands, endpoints, tokens, and logs. +- Make connection state legible: connected/pairing/error read via `positive`/`warning`/`critical`. +- Keep motion to 120–200ms ease-out. Animate to explain, not to impress. + +## Don't +- Don't hard-code hex in UI — it breaks in dark and high-contrast modes. Use tokens/theme resources. +- Don't put gray text on a colored background. +- Don't nest cards inside cards, or wrap every block in a card. +- Don't reach for bounce/elastic easing; it reads as dated and AI-generated. +- Don't fight the OS theme with custom-skinned controls or glassmorphism overload. + +## Anti-references +If a mock could be mistaken for a neon-gradient SaaS landing page, or ignores the +user's system accent and light/dark preference — start over. From 7c457b2379335a8fe19ca770b580438d85cbea6d Mon Sep 17 00:00:00 2001 From: Karen Lai <7976322+karkarl@users.noreply.github.com> Date: Wed, 8 Jul 2026 12:50:26 -0700 Subject: [PATCH 2/6] Refine design system components and add chat patterns 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> --- .agents/design/components.jsx | 109 ++++++++++++++++++++++++++++++++-- .agents/design/design.json | 1 + 2 files changed, 105 insertions(+), 5 deletions(-) diff --git a/.agents/design/components.jsx b/.agents/design/components.jsx index 0d3e7a4c2..8beee6b03 100644 --- a/.agents/design/components.jsx +++ b/.agents/design/components.jsx @@ -8,25 +8,42 @@ // Copilot reads this file to match the house style when it builds new UI. // Primary action. One per view — it's where the eye should land. +// Padding mirrors WinUI's default ButtonPadding (Thickness 11,5,11,6 → CSS 5px 11px 6px); +// MinWidth 100px keeps short labels (OK / Connect) from looking cramped and gives +// side-by-side buttons a consistent footprint. export function Button({ children = "Save changes", variant = "primary" }) { - return ; + return ( + + ); } // Text input with a label sitting above it. Labels are quiet; the field is the subject. +// Input padding mirrors WinUI's TextControlThemePadding (Thickness 10,5,6,6 → CSS 5px 6px 6px 10px) +// with TextControlThemeMinHeight 32px, so a field lines up with a Button on the same row. export function Field({ label = "Gateway address", placeholder = "127.0.0.1:18789" }) { return ( ); } -// Content card. Flat by default — a hairline border, not a drop shadow. -// Never nest a card inside another card. +// Content card. Flat by default — a 1px hairline border, not a drop shadow. +// Padding mirrors the WinUI Gallery card (Padding 16,12 → CSS 12px 16px) with the +// `md` radius (8px) and a `line`-colored border. Never nest a card inside a card. export function Card({ title = "Windows node", body = "Paired · 6 capabilities exposed over MCP." }) { return ( -
+

{title}

{body}

Open report → @@ -39,6 +56,88 @@ export function Badge({ children = "Connected", tone = "positive" }) { return {children}; } +// Chat bubble. User messages sit on the right on the accent (white text); assistant +// messages sit on the left on a subtle surface with a hairline border. The `bubble` +// radius (16px) is intentionally friendlier than the 8/12px control radii, padding is 12/16, and the +// bubble caps at 720px. Mirrors the native timeline (OpenClawChatTimeline: +// CornerRadius 16, Thickness 16,12; user = AccentFillColorSecondary + TextOnAccent, +// assistant = SubtleFillColorSecondary + ControlStroke). One accent, and it still +// means "you" — the user's own words ride the system accent. +export function ChatBubble({ role = "assistant", children = "Paired to the gateway — 6 Windows node capabilities are live." }) { + const isUser = role === "user"; + return ( +
+
+ {children} +
+
+ ); +} + +// Chat input. A rounded surface (md radius / 8px) with a 1px hairline border wrapping a +// borderless, transparent, auto-growing textarea (min-height 56 → max-height 200, then it +// scrolls) and a primary Send button pinned bottom-right. Mirrors OpenClawComposer: +// CornerRadius 8, transparent TextBox chrome, MinHeight 56 / MaxHeight 200. +export function ChatComposer({ placeholder = "Message OpenClaw…" }) { + return ( +
+