docs GitHub

Design systemDraft

Glass frame

Glass shows an agent's computer live. The frame holds the screen, says it is live and how good the link is, and carries the take-over states: who holds the keyboard, how long, and when it goes back. Watching changes nothing; taking over asks for no proof. Drawn on "Agents and their computers" and "Glass · take-over and hand-back states".

SurfaceImplementing fileStatus
Deckdeck/glass/index.js, deck/glass/takeover.js, deck/glass/phone.js, deck/glass/glass.css (main)partial
Appnone in apps/app (work/mobile)not built
Lumennot used ("glass kit" opens the Deck)not used

Anatomy

  1. Frame. Fill --code-bg, 1 px --rule-strong, radius 8, overflow: hidden, position relative. The screen draws to a canvas, never as images in the DOM, letterboxed to its resolution (1440 by 900 by default).
  2. Address bar, 26 tall, padding 0 10, bottom 1 px --rule: the page address in mono 12 --label, truncating from the end.
  3. Agent cursor. A --focus pointer with a tag (meta size on --hover) naming the agent, shown while the agent acts.
  4. Live badge. 22 tall, padding 0 8, radius 11, --panel, 1 px --rule-strong, 12/16 600 --text: a 6 px --focus dot and "Live" (sentence case, like every label; the board draws "LIVE" and is superseded). Beside the frame on desktop, next to "Watching kit's screen. Nothing you do here reaches it until you take over." (13 --text-2); on the phone it overlays the frame 8 from the bottom right.
  5. Link pill (same shape, 400): "direct · 30 fps" or "relayed · 5 fps", at the right of the phone's nav row.
  6. Take-over bar (you hold the keyboard). Fill --signal-wash, inset 1 px --focus, radius 12 on the phone (10 on desktop), padding 8 8 8 14, gap 10: the keyboard icon, "You have control" (17/600 phone, 13/600 desktop) and "from phone · 2:14" (13 --text-2; desktop shows the timer in mono 12). Phone: "Hand back" (outline, 44, fill --panel). Desktop: a note field (--panel fill, hint "Note for kit (optional)") and "Hand back to kit" primary with ⌃⏎.
  7. Read-only banner (someone else holds it). banner: --hover, radius 10, min height 40: the icon, "Your phone has the keyboard · 2:14" 13/600, "kit is paused and this view is read-only." 12 --text-2. Take over is disabled with the tooltip "Your phone has control".
  8. Idle chip (role="status"), last 10 s before the idle hand-back: padding 8 12, radius 10, 1 px --rule-strong, --panel, clock icon, 13 --text: "Handing back to kit in 8 s. Type or move to keep control." It sits in the strip above the screen.
  9. Handed-back notice. banner with "You handed back to kit (2m 14s). Your note is in its thread." and Dismiss (ghost, 28).

Variants

  • Watch (default, read only), Take over (the page's one primary, key T), Sign in privately (a shielded take-over: bar reads "Signing in privately" and "kit sees nothing · 0:41"; only here does "Fill a login" appear), Files.

States

StateFrame shows
Startingthe canvas keeps its last frame or --code-bg; spinner, "Starting kit's computer · 12 s", three check rows (Container up, Desktop and Chrome, Screen stream); Take over and Sign in privately disabled, title "Starting"
Failed to startcard with the crossed circle in --text, "Exited on boot · code 137", plain words, Limits, Restart (primary) and Stop (ghost)
Screens full"Waiting for a screen · 30 s", then "Every screen is in use: kit (taken over by you), ledger (watched by 1)" and Try again
WatchingLive badge; Take over enabled
You hold ittake-over bar; the agent is paused
Another screen holds itread-only banner; Take over disabled
Idle warningidle chip; any typing, click or pointer move clears it
Agent paused by you"kit is paused. Resume it before its hands can act." and Resume kit
Relayedlink pill "relayed · 5 fps"; frames drop, never freeze

None of these is violet: nothing here needs you. Errors are neutral text and the failed glyph.

Keyboard and touch

  • Desktop: T takes over, ⌃⏎ hands back. Esc does not hand back.
  • Phone: tap clicks, long press right-clicks, two fingers scroll, pinch zooms; "Keyboard" raises the keyboard. Hand back is a 44 button.
  • Control returns on Hand back, after the idle time (Off, 2, 5 or 15 min; 5 by default), or when the screen stays hidden past the 90 s lease. The take-over follows the lease from laptop to phone.

Motion

Every state swaps in the strip above the screen, so the screen never moves. The countdown ticks only while the page is visible. Hand-back shows its notice on commit. Bars fade in over --motion-reveal (150).

Copy

  • Owner copy says "your": "Your phone has control", "Your phone has the keyboard · 2:14". For another person, their name and surface: "Sam has control from phone".
  • Thread lines say why it ended, never what was typed: "The keyboard went back to kit (2m 14s) · note: …", "Handed back to kit after 5 min idle.", "Your take-over lapsed after 90 s without a signal (from phone)."
  • Never "Remote control", "Session hijack", or a passkey prompt for take-over.

Accessibility

  • The canvas has role="img" and aria-label="kit's screen, live"; while you hold it, it becomes focusable and passes keys through.
  • The take-over bar is a group named "You have control"; the idle chip is aria-live="polite".
  • A disabled Take over keeps its tooltip readable (aria-describedby on the reason).

Gaps

Deck (main)

  • The idle chip uses --beacon-ink text, border and --beacon-wash; spec is neutral.
  • Read-only and hold banners use --beacon-wash (.gl-banner, .gl-notice-hold).
  • Copy says "Someone has control from <surface>", not "Your phone has control".
  • Error rows and messages tint violet (.gl-msg-err, .gl-tr-err, .gl-danger).
  • Accent reads the raw --signal variable instead of --focus.

App (work/mobile)

  • No Glass view.