AgentHub Desktop Design Demo

This repository is the design demo and visual contract workspace for the new AgentHub Desktop experience.

Goal

Build a polished, implementation-ready Desktop UI demo for D:\Code\TokenDance\AgentHub.

The current production Desktop code in D:\Code\TokenDance\AgentHub\app\desktop is not the visual source of truth. It is the migration target. Its existing frontend structure and styling should be treated as legacy implementation debt, not as the design reference.

Source Of Truth

• design-system-v3.html is the active design system reference.
• desktop/ is the live Vite demo used to iterate on the future AgentHub Desktop UI.
• The demo should feel like a modern IM-style desktop app: clear global rail, conversation list, chat transcript, right-side task/artifact inspector, and a lightweight desktop window chrome.

Design Rules

• Use the v3 tokens for color, surface, border, radius, and shadow.
• Cards should be border-based and visually consistent in width.
• Composer is the primary floating element and may use --e-3.
• Avoid ad hoc gradients, oversized shadows, colored left borders, and random one-off inline styles.
• Use real AgentHub/TokenDance assets from D:\Code\TokenDance\AgentHub or the TokenDance brand assets, not placeholder letters, when representing the product logo.

Interaction Expectations

The demo is not just a static screenshot. It should include enough interaction to validate the desktop concept:

• Rail items should switch between meaningful sub-pages.
• Sidebar conversations/projects should update the active chat context.
• Inspector tabs should remain usable.
• Composer send behavior should preserve the visual language.

Development

Run the local preview from this directory:

corepack.cmd pnpm dev

Current preview target:

http://127.0.0.1:5176/desktop/