Skip to content

Standalone AgentMirror UI preview (dark-theme clickable frontend) - #88

Open
Florious95 wants to merge 3 commits into
mainfrom
cursor/ui-preview-clickable-a8cc
Open

Standalone AgentMirror UI preview (dark-theme clickable frontend)#88
Florious95 wants to merge 3 commits into
mainfrom
cursor/ui-preview-clickable-a8cc

Conversation

@Florious95

@Florious95 Florious95 commented Sep 6, 2026

Copy link
Copy Markdown
Owner

What this is

A self-contained, clickable frontend under ui-preview/ so look and interaction can be judged in a browser. No backend. No Kotlin/app/server edits (git diff main -- app/ is empty).

Default personality is 终端深夜. Tokens come from DesignTokens DarkPalette: screen #070B14, list #0D1422, card #0F1725, one accent #77A6FF (send button and selected font chips now use this too — #3B7BF6 is gone), busy teal #4FD1C0 / #5FDCC9, unknown #F0879F. Sheets share the same dark scale as the shell (no light card over a dark session).

How to run

cd ui-preview
npm install
npm run dev

Open the printed URL (default http://localhost:5173). Desktop shows a ~390×844 phone frame.

npm run build    # static assets in dist/
npm run preview
npm test         # path truncation

Flows to click

  1. Bottom nav: 收藏 / 会话 / 设置 — selected state is a top indicator rail, not a circular pill.
  2. 会话 → 远程Agent安卓 → a session (e.g. 远控 leader / claude_code).
  3. Terminal 查看 opens a dark switcher sheet; tap a row to switch, tap the scrim to dismiss; stars toggle.
  4. Type in the input and send — fake terminal lines append. Keycaps (Esc / arrows / Ctrl-C) also append.
  5. 设置 → 外观: 深色 / 浅色 / 跟随系统. 字体大小 applies to the terminal.
  6. Favorites star toggle; offline row 归档席 is labeled 不在线 (not 空闲) and will not open.

Design notes

  • Path subtitles keep root + last segment (/Volumes/nvme/…/远程Agent安卓).
  • Input bar + keycaps are one dark console block, radii ~10–14dp.
  • Chinese UI copy only.
  • P1 follow-up: dark sendEnabledBg and chipSelectedBg are #77A6FF. Tracked ui-preview/ has no #3B7BF6.
Open in Web Open in Cursor 

cursoragent and others added 2 commits September 6, 2026 15:20
Interactive Vite+React phone-frame preview under ui-preview/ so look and
interaction can be judged in a browser without a backend or Kotlin changes.

Co-authored-by: Florious95 <Florious95@users.noreply.github.com>
Position the top indicator with left (percent of the bar), not transform,
so the rail tracks the selected tab. Use widely available › glyphs for
paths and prompts so they render in the browser preview.

Co-authored-by: Florious95 <Florious95@users.noreply.github.com>
@Florious95
Florious95 marked this pull request as ready for review September 6, 2026 15:26
Drop the leftover #3B7BF6 filled primary so sendEnabledBg and
chipSelectedBg match DarkPalette accent. Busy teal unchanged.

Co-authored-by: Florious95 <Florious95@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants