@shardflux/desktop-linux-arm64 0.0.0-stage → 0.1.0-next.4

package/app/ui/style.css

@@ -0,0 +1,212 @@
+@font-face{font-family:Funnel Sans;src:url(assets/FunnelSans.ttf)}@font-face{font-family:Funnel Display;src:url(assets/FunnelDisplay.woff2);font-weight:300 800}@font-face{font-family:Fragment Mono;src:url(assets/FragmentMono.ttf)}
+:root{color-scheme:dark;--ob-bg:#000;--ob-tile:#0a0a0b;--ob-ink:#f5f3ef;--ob-muted:#8f8f95;--ob-dim:#5b5b61;--ob-line:rgba(255,255,255,.08);--ob-edge:rgba(255,255,255,.14)}
+*{box-sizing:border-box}body{margin:0;background:var(--ob-bg);color:var(--ob-ink);font:14px/1.5 'Funnel Sans',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--ob-edge);background:transparent;border-radius:999px;padding:9px 18px;white-space:nowrap}button:hover{background:rgba(255,255,255,.07)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--ob-ink);border-color:var(--ob-ink);color:#000;font-weight:500}button.primary:hover{background:#fff}button.link{border:0;color:var(--ob-muted);padding:4px 8px}button.small{font-size:12.5px;padding:6px 16px}button.icon{padding:5px 10px}a{color:inherit}input,textarea{color:inherit;background:rgba(255,255,255,.03);border:1px solid var(--ob-edge);border-radius:12px;padding:10px 16px;outline:none}input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--sf-success);outline-offset:3px}h1,h2,h3,p{margin:0}h1,h2{font-family:'Funnel Display';font-weight:400;line-height:1.1;letter-spacing:-.045em}h1{font-size:34px}h2{font-size:26px}p{color:var(--ob-muted)}.row{display:flex;align-items:center;gap:12px}.spread{justify-content:space-between}.column{display:flex;flex-direction:column;gap:16px}.muted{color:var(--ob-muted)}.mono,kbd{font-family:'Fragment Mono';font-variant-numeric:tabular-nums}.error{color:var(--sf-warning);font-size:13px;padding:8px 0}.onboarding{height:100vh;min-height:520px;display:flex;flex-direction:column;gap:12px;padding:12px 20px 20px}.top{height:36px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.brand{display:flex;gap:10px;align-items:center;font:600 17px 'Funnel Display';letter-spacing:-.03em}.brand img{height:19px;width:19px}.rail{display:flex;align-items:center;border:1px solid var(--ob-edge);border-radius:999px;padding:3px;font-size:12.5px;gap:2px;color:var(--ob-dim)}.rail span{padding:4px 10px;border-radius:999px;white-space:nowrap}.rail span.active{background:rgba(255,255,255,.08);color:var(--ob-ink)}.rail span.done{color:var(--ob-muted)}.tile{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--ob-tile);border:1px solid var(--ob-line);border-radius:24px;padding:28px;display:flex;flex-direction:column}.tile:before{content:'';position:absolute;bottom:-75px;right:-90px;width:190px;height:190px;background:url(assets/onboarding-wash-warm.webp) center/cover;border-radius:50%;pointer-events:none}.tile>*{position:relative}.subtitle{font-size:15.5px;line-height:1.6;max-width:520px;margin-top:12px}.stage{flex:1;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:16px;min-height:0}.foot{display:flex;align-items:center;justify-content:space-between;min-height:46px;gap:12px}.foot .hint{font-size:12.5px;color:var(--ob-dim)}.signin{flex:1;background:url(assets/onboarding-silk.jpg) center/cover;display:flex;align-items:center;padding:40px 20px}.signin>div{max-width:430px}.signin h1{font-size:44px}.signin p{margin-top:16px;font-size:15.5px;max-width:420px}.signin .actions{margin-top:28px}.signin .terms{font-size:12.5px;line-height:1.4}.connectors{display:flex;flex-direction:column;gap:12px;margin-top:28px}.connector{display:flex;align-items:center;gap:16px;min-height:70px;padding:14px 20px;border:1px solid var(--ob-edge);border-radius:12px;background:rgba(255,255,255,.025)}.connector img{width:28px;height:28px;border-radius:6px}.connector .name{font-weight:500;font-size:15px}.connector .fact{font-size:12.5px;color:var(--ob-muted)}.connector .status{margin-left:auto;font-size:12.5px;white-space:nowrap}.connector.connected .status{color:var(--sf-success);font-weight:500}.onboarding .connector.connected{border-color:var(--sf-success);box-shadow:0 0 0 3px rgba(139,202,161,.55),0 0 30px rgba(139,202,161,.25)}.copy-task{display:flex;gap:18px;align-items:center;border:1px solid var(--ob-edge);border-radius:12px;background:rgba(255,255,255,.03);padding:14px;max-width:560px}.copy-task button{flex-shrink:0}.keycaps{display:flex;gap:12px}.keycaps kbd{border:1px solid var(--ob-edge);border-bottom-width:4px;border-radius:10px;padding:12px 18px;font-size:26px;background:rgba(255,255,255,.03)}.keycaps kbd.held{transform:translateY(3px);border-bottom-width:1px;background:rgba(255,255,255,.12)}.screen{overflow:hidden;border:1px solid var(--ob-edge);border-radius:12px;background:#000;position:relative;min-height:200px}.screen iframe,.screen img{width:100%;height:100%;border:0;object-fit:cover;pointer-events:none}.live-layout{display:grid;grid-template-columns:1fr 240px;gap:24px;flex:1;min-height:0;margin-top:20px}.feed{font-size:13px;display:flex;flex-direction:column;gap:12px;overflow:auto}.phone{padding:16px;border:1px solid var(--ob-edge);border-radius:12px;margin-top:14px}.phone .mono{font-size:20px}.empty{padding:28px;text-align:center}.enter{animation:enter .24s ease-out}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(max-width:640px){.onboarding{padding:12px}.top .rail span{padding:4px 6px;font-size:11px}.tile{padding:24px 18px}.title-row{flex-wrap:wrap}.live-layout{grid-template-columns:1fr}.signin{padding:28px 16px}.signin h1{font-size:34px}.foot .hint{display:none}}
+/* Match the Mac title rail and the small ribbon crop without drawing platform chrome. */
+.top{position:relative}.top>.rail{position:absolute;left:50%;transform:translateX(-50%)}.top>.link{margin-left:auto}.brand img{filter:invert(1)}.signin>div{transform:translateY(12px)}.signin .terms{margin-top:0}.tile:before{width:340px;height:240px;bottom:-80px;right:-60px;background-position:bottom right;border-radius:0}
+.agent-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.agent-icon.claude{background:var(--sf-molten)}.agent-icon.claude img{filter:brightness(0) invert(1);width:23px;height:23px}.connector .agent-icon img{border-radius:4px}.tile:before{mix-blend-mode:screen}.own-shortcut{border:1px solid var(--ob-edge);border-radius:14px;padding:14px 18px;margin-top:28px;max-width:600px}.own-shortcut .keycaps{gap:6px}.own-shortcut kbd{font-size:16px;padding:6px 12px;border-bottom-width:2px}.desktop-result .top{display:none}.desktop-result .tile{border:0;background:transparent;padding:28px 10px}.desktop-result .tile:before{display:none}.desktop-result h1{font-size:30px}.desktop-result .subtitle{max-width:none}.desktop-result .live-layout{grid-template-columns:260px 1fr;align-items:center;gap:28px}.desktop-result .screen{grid-column:2;grid-row:1;width:100%;height:320px}.desktop-result .feed{grid-column:1;grid-row:1;align-self:start;padding-top:20px}.screen svg{width:100%;height:100%;display:block}
+.settings{height:100vh;display:grid;grid-template-columns:190px 1fr;background:var(--sf-bg)}.settings aside{background:var(--sf-raise);border-right:1px solid var(--sf-line);padding:28px 12px}.sidebar-brand{display:flex;gap:10px;align-items:center;font:600 20px 'Funnel Display';margin:0 10px 24px}.sidebar-brand img{width:24px;height:32px}.settings nav{display:flex;flex-direction:column;gap:4px}.settings nav button{text-align:left;border:0;border-radius:6px;padding:10px 14px;color:var(--sf-muted)}.settings nav button.selected{background:var(--sf-overlay);color:var(--sf-ink)}.settings-content{overflow:auto;padding:28px 24px;display:flex;flex-direction:column;gap:16px}.pane-description{margin-top:-8px;font-size:13px}.setting-group{border:1px solid var(--sf-line);border-radius:8px;background:rgba(255,255,255,.035);overflow:hidden}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px;font-size:13px}.setting-row+.setting-row{border-top:1px solid var(--sf-line)}.setting-row b{font-weight:500}.setting-row p{font-size:12.5px;margin-top:4px}.setting-row>div:last-child{flex-shrink:0}.settings select{background:var(--sf-overlay);color:var(--sf-ink);border:1px solid var(--sf-line-2);border-radius:6px;padding:6px 10px;font:13px 'Funnel Sans';max-width:180px}.setting-row input[role=switch]{appearance:none;width:32px;height:19px;border-radius:20px;padding:0;background:var(--sf-dim);position:relative;border:0;cursor:pointer}.setting-row input[role=switch]:after{content:'';position:absolute;left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:var(--sf-ink);transition:left .12s}.setting-row input[role=switch]:checked{background:var(--sf-success)}.setting-row input[role=switch]:checked:after{left:15px}.account-heading{display:flex;align-items:center;gap:18px;padding:16px}.account-heading img{width:44px;height:52px}.account-heading h2{font:500 20px 'Funnel Sans';letter-spacing:0}.account-plan{padding:0 16px 16px}.settings-cards{display:flex;flex-direction:column;gap:14px}.settings .connector{border:0;background:transparent;padding:16px 12px}.settings .setting-note{font-size:12.5px}.settings a{font-size:12.5px;text-decoration:none}
+.permission,.files-window{padding:30px;display:flex;flex-direction:column;gap:18px;min-height:100vh;background:var(--sf-bg)}.permission{max-width:700px;margin:auto}.permission h2{font-size:26px}.permission-details{border:1px solid var(--sf-line);border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:16px;background:var(--sf-raise)}.permission pre{white-space:pre-wrap;word-break:break-word;font:13px/1.6 'Fragment Mono';margin:0}.permission-path{display:flex;flex-direction:column;gap:6px}.permission-path small{color:var(--sf-muted)}.permission-path code{font:13px 'Fragment Mono';overflow-wrap:anywhere}.permission-always{display:flex;align-items:center;gap:10px;font-size:13px}.permission footer{margin-top:auto}.permission label{display:flex;flex-direction:column;gap:8px}.permission .permission-always{flex-direction:row}.permission select{padding:10px;color:var(--sf-ink);background:var(--sf-overlay);border:1px solid var(--sf-line-2);border-radius:6px}.files-window code{color:var(--sf-muted);font:12.5px 'Fragment Mono';overflow-wrap:anywhere}.files-window h3{font-size:14px;font-weight:500;margin-top:16px}
+/* Shared geometry follows AgentAppIcon, AgentConnectorCard and LauncherResultRow. */
+:root{--system-accent:#0a84ff}.ui-icon{display:inline-block;vertical-align:-.16em;flex-shrink:0}.app-mark{display:inline-block;object-fit:contain;border-radius:22%;vertical-align:middle;flex-shrink:0}.missing-mark{width:36px;height:36px;background:#ffffff14}.connector .app-mark{width:36px;height:36px}.connector{gap:12px;padding:16px;background:#101011;position:relative;isolation:isolate}.connector .status{display:flex;align-items:center;gap:5px;font-size:13px}.onboarding .connector.connected{border-color:rgba(139,202,161,.7);box-shadow:0 0 26px rgba(139,202,161,.35)}.onboarding .connector.connected:before,.onboarding .connector.connected:after{content:'';position:absolute;inset:-4px;border-radius:10px;z-index:-1;pointer-events:none}.onboarding .connector.connected:before{background:rgba(139,202,161,.42);filter:blur(22px);z-index:-2}.onboarding .connector.connected:after{border:3px solid rgba(139,202,161,.9);filter:blur(5px)}.onboarding .connector.connected{background:#111614}.settings .connector{box-shadow:none}.settings .connector:before,.settings .connector:after{display:none}.rail span{display:flex;align-items:center;gap:5px}.foot>div:empty{flex:1}.foot button{display:inline-flex;align-items:center;gap:8px}.title-row{justify-content:flex-start;gap:18px}.title-row .rail{flex-shrink:0}button .ui-icon{pointer-events:none}
+.permission{padding:24px;gap:20px;min-height:100vh;background:#1d1d20}.permission-heading{display:flex;gap:12px;align-items:flex-start}.permission-heading h2{font:500 20px/1.2 'Funnel Sans';letter-spacing:0}.permission-heading p{font-size:12.5px;margin-top:6px}.permission-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sf-warning);background:#e8bd6b14;border-radius:8px}.permission-details{padding:12px;gap:12px;background:#ffffff09}.permission pre{padding:12px;background:var(--sf-bg);border-radius:8px;font-size:13px}.permission p{font-size:12.5px}.permission small{display:block;font-size:12.5px;color:var(--sf-muted)}.permission footer{border-top:1px solid var(--sf-line);padding-top:20px}.permission button{border-radius:6px;font-size:13px}
+
+/* Keep the bloom outside the opaque tile, as the Mac card's background layers do. */
+.onboarding .connector.connected{background:#111213;box-shadow:0 0 6px 2px rgba(139,202,161,.55),0 0 26px 6px rgba(139,202,161,.30)}.onboarding .connector.connected:before,.onboarding .connector.connected:after{display:none}
+
+.permission{min-height:0}.permission footer{margin-top:0}.update-notice{display:flex;align-items:center;gap:10px;padding:12px}
+/* AgentAppIcon: a tile on 82% of the frame (the macOS icon grid), 22.5% corner radius. */
+.app-mark{width:var(--mark,16px);height:var(--mark,16px);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;vertical-align:middle;border-radius:0;object-fit:initial}
+.app-mark>i,.app-mark>img{width:82%;height:82%;border-radius:22.5%;display:block}
+.app-mark.claude>i{background:#d97757;position:relative}
+.app-mark.claude>i:after{content:'';position:absolute;inset:19%;background:#fff;-webkit-mask:url(assets/claude-mark.png) center/contain no-repeat;mask:url(assets/claude-mark.png) center/contain no-repeat}
+.app-mark.codex>img{box-shadow:inset 0 0 0 .5px #0000001f}
+.connector .app-mark{width:36px;height:36px}
+.ui-spinner{animation:spin .9s steps(8) infinite;flex-shrink:0;vertical-align:middle}
+@keyframes spin{to{transform:rotate(360deg)}}
+/* LiveCard: the window becomes the agent's computer, with its own navigation (no rail, no Back). */
+.live-layout-window{padding:46px 24px 20px;gap:0}
+.live-card{flex:1;display:flex;flex-direction:column;min-height:0}
+.live-card h1{font-size:28px;letter-spacing:-.04em;white-space:nowrap}
+.live-card .subtitle{font-size:14px;margin-top:8px;max-width:none}
+.live-screen{flex:1;margin-top:16px;border-radius:14px;min-height:0}
+.live-screen .empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ob-muted);font-size:13px}
+.activity-line{margin-top:12px;font-size:13px;color:var(--ob-muted);min-height:20px}
+.recap{display:flex;gap:18px;margin-top:16px;align-items:flex-start;flex:1;min-height:0}
+.recap-lines{width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;padding-top:4px}
+.recap-line{display:flex;align-items:baseline;gap:10px;font-size:14.5px;color:var(--ob-ink);animation:enter .32s ease-out both;animation-delay:calc(var(--i)*70ms)}
+.recap-line .ui-icon{stroke-width:2.2;flex-shrink:0;transform:translateY(1px)}
+.recap-lines p{font-size:13px;margin-top:6px}
+.recap-shot{flex:1;aspect-ratio:1.3;max-height:100%;border-radius:14px;border:1px solid var(--ob-edge);animation:enter .32s ease-out .12s both}
+.live-foot{display:flex;align-items:center;gap:14px;margin-top:8px;font-size:13px;min-height:40px}
+.live-foot .grow{flex:1}
+.live-foot .report{margin-left:-8px;display:inline-flex;align-items:center;gap:6px;color:var(--ob-muted);font-size:13px}
+.live-foot .primary{display:inline-flex;align-items:center;gap:7px;font-size:14px;padding:8px 16px}
+/* DoneStep and sign-in: homepage moments on the silk. */
+.onboarding.hero{background:url(assets/onboarding-silk.jpg) center/cover}
+.onboarding.hero .signin{background:none}
+.finale{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:0 30px 96px 24px}
+.finale h1{font-size:50px;max-width:380px}
+.finale .subtitle{max-width:380px;margin-top:16px}
+.finale .primary{align-self:flex-start;margin-top:30px;display:inline-flex;align-items:center;gap:9px}
+/* Shared by the bar and the top-bar panel: the Mac's solid surface (ShardfluxGlass .solid: sf-overlay, a 16% ink
+   edge), its secondary ink, and native selection in the system accent. */
+:root{--glass-secondary:rgba(255,255,255,.78);--surface:#1b1c1f;--accent-text:#fff}
+body:has(.launcher),body:has(.menu-panel){background:transparent;overflow:hidden}
+.state-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;background:var(--sf-dim)}
+.state-dot.working{background:var(--sf-molten)}
+.state-dot.needs-you{background:var(--sf-ink)}
+.state-dot.sign-in{background:var(--sf-warning)}
+.state-dot.parked{background:var(--sf-muted)}
+.state-dot.quiet,.state-dot.done{background:var(--sf-dim)}
+.menu-rule{height:1px;background:var(--sf-line);margin:3px 12px}
+/* LauncherView: 620 wide, 12 px corners, rows of 34 px. */
+.launcher{width:620px;margin:15px;background:var(--surface);border:1px solid var(--sf-line-2);border-radius:12px;box-shadow:0 18px 40px -18px #000c,0 2px 10px #0006;color:var(--sf-ink);overflow:hidden;cursor:default;user-select:none}
+.launcher button{border:0;border-radius:6px;padding:0;background:transparent;color:inherit;font:inherit;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
+.launcher button:disabled{opacity:.45;cursor:default}
+.launcher button:focus-visible,.launcher input:focus,.launcher textarea:focus{outline:none}
+.prompt-row{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 16px}
+.prompt-row .lead{height:24px;display:flex;align-items:center;color:var(--glass-secondary)}
+.prompt-row textarea{flex:1;min-height:24px;height:24px;max-height:96px;padding:0;margin:0;border:0;border-radius:0;background:transparent;resize:none;font:17px/24px 'Funnel Sans';color:var(--sf-ink);overflow:auto;user-select:text}
+.prompt-row textarea::placeholder{color:var(--sf-muted)}
+.prompt-row .progress{height:24px;display:flex;align-items:center;color:var(--glass-secondary)}
+.prompt-row .add{width:28px;height:26px;margin:-1px 0 0}
+.launcher .control{height:26px;padding:0 8px;gap:6px;font-size:13px;color:var(--sf-ink)}
+.launcher .control:hover:not(:disabled),.launcher .control.active{background:rgba(237,235,231,.10)}
+.launcher .control:active:not(:disabled){background:rgba(237,235,231,.18)}
+.launcher .control.icon-only{width:28px;padding:0}
+.launcher .control.chosen{background:var(--system-accent);color:var(--accent-text)}
+.launcher .control.chosen:hover{background:var(--system-accent)}
+.launcher .control .ui-icon[width="9"]{margin-top:1px}
+.launcher-controls{display:flex;align-items:center;padding:0 20px 16px}
+.launcher-controls .grow{flex:1;min-width:12px}
+.launcher .project{margin-left:-8px;color:var(--sf-muted);min-width:0;max-width:230px}
+.launcher .project.empty{color:var(--sf-ink)}
+.launcher .project-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
+.launcher .dropdowns{display:flex;gap:2px;margin-right:8px}
+.launcher .pill.secondary{color:var(--glass-secondary)}
+.launcher .pill.dimmed{opacity:.45}
+.launcher .tools{display:flex;gap:4px;margin-right:8px}
+.launcher .start{height:28px;padding:0 12px;gap:7px;border-radius:7px;background:var(--sf-ink);color:#15161a;font-size:12.5px;font-weight:500;box-shadow:inset 0 1px 0 #fff8,0 1px 2px #0005}
+.launcher .start:hover:not(:disabled){background:#fff}
+.launcher .start.off,.launcher .start:disabled{opacity:1;background:rgba(237,235,231,.03);color:rgba(237,235,231,.45);box-shadow:inset 0 0 0 1px var(--sf-line-2)}
+.launcher .key-hint{display:inline-flex;align-items:center;gap:1px;opacity:.65;font-size:12px}
+.launcher .start .app-mark{margin-right:-1px}
+.launcher .branch{margin:0 20px 12px;width:calc(100% - 40px);height:28px;padding:0;border:0;background:transparent;font-size:13px;color:var(--sf-ink)}
+.launcher .attachments{display:flex;gap:8px;padding:0 20px 12px;overflow-x:auto}
+.launcher .attachments.with-images{padding-top:6px}
+.context-chip{gap:5px;height:22px;padding:0 8px!important;border-radius:4px!important;background:rgba(237,235,231,.06)!important;color:var(--glass-secondary)!important;font-size:11px!important}
+.context-chip:hover{background:rgba(237,235,231,.10)!important}
+.image-chip{position:relative;flex-shrink:0;width:56px;height:40px}
+.image-chip img{width:56px;height:40px;object-fit:cover;border-radius:6px;box-shadow:inset 0 0 0 1px var(--sf-line-2);outline:1px solid var(--sf-line-2);outline-offset:-1px;cursor:pointer;display:block}
+.image-chip.selected img{outline:1.5px solid rgba(237,235,231,.85)}
+.image-chip .image-remove{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--sf-overlay);box-shadow:inset 0 0 0 1px var(--sf-line-2);color:var(--sf-ink);display:none}
+.image-chip:hover .image-remove,.image-chip.selected .image-remove{display:inline-flex}
+.image-preview{padding:0 20px 14px;display:flex;justify-content:center;cursor:pointer}
+.image-preview img{max-width:580px;max-height:240px;border-radius:6px;outline:1px solid var(--sf-line-2)}
+.launcher .separator{height:1px;background:var(--sf-line)}
+.menu-list,.project-section{padding:8px;display:flex;flex-direction:column;gap:2px}
+.project-section .project-field{height:35px;padding:0 8px;margin:0;border:0;border-radius:0;background:transparent;font-size:14px;color:var(--sf-ink);user-select:text}
+.project-section .project-field::placeholder{color:var(--sf-muted)}
+.project-rows{overflow-y:auto;display:flex;flex-direction:column;gap:2px;position:relative}
+.project-rows .no-match{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--glass-secondary)}
+.result-row{width:100%;min-height:34px;flex-shrink:0;justify-content:flex-start!important;gap:10px;padding:0 12px!important;text-align:left;color:var(--sf-ink)}
+.result-row .row-icon{width:16px;display:inline-flex;justify-content:center;color:var(--glass-secondary)}
+.result-row .result-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis}
+.result-row .result-detail{margin-left:auto;font-size:12.5px;color:var(--glass-secondary);overflow:hidden;text-overflow:ellipsis;max-width:62%;padding-left:12px}
+.result-row .row-check{width:14px;display:inline-flex;justify-content:center;margin-left:0}
+.result-row .result-detail:empty+.row-check{margin-left:auto}
+.result-row .row-check.hidden{visibility:hidden}
+.result-row.selected{background:var(--system-accent);color:var(--accent-text)}
+.result-row.selected .row-icon{color:rgba(255,255,255,.9)}
+.result-row.selected .result-detail,.result-row.selected .thread-state{color:rgba(255,255,255,.82)}
+.result-row.selected .state-dot{background:#fff}
+.result-row:active{box-shadow:inset 0 0 0 100px rgba(0,0,0,.18)}
+.computer-row{align-items:flex-start!important;padding:7px 12px!important}
+.computer-row .row-icon{height:20px;align-items:center}
+.computer-row .threads{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
+.thread-line{display:flex;align-items:center;gap:8px;height:20px}
+.thread-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;flex:1}
+.thread-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--glass-secondary);margin-left:8px}
+.thread-more{font-size:12.5px;color:var(--glass-secondary);height:18px}
+.computer-row .row-check{height:20px;align-items:center}
+.menu-note{display:flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;font-size:12.5px;color:var(--glass-secondary)}
+.launcher-note{display:flex;align-items:center;gap:8px;padding:16px;font-size:13px;color:var(--glass-secondary)}
+.launcher-error{padding:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
+.launcher-error p{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:18px;color:var(--sf-danger)}
+.launcher-error p .ui-icon{margin-top:2px}
+.launcher-error .error-actions{display:flex;gap:8px}
+.launcher button.bordered,.menu-panel button.bordered{height:24px;padding:0 10px;border-radius:5px;background:rgba(237,235,231,.16);box-shadow:inset 0 0.5px 0 rgba(255,255,255,.18);font-size:13px}
+.launcher button.bordered:hover{background:rgba(237,235,231,.22)}
+/* AgentMenu: the top-bar panel, 420 wide with 36 px rows; menus open over it at its bottom right. */
+.menu-panel{position:relative;width:420px;margin:12px;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--sf-line-2);border-radius:12px;box-shadow:0 18px 40px -18px #000c,0 2px 10px #0006;color:var(--sf-ink);font-size:13px;overflow:hidden;user-select:none;cursor:default}
+.menu-panel.with-overflow{min-height:calc(215px + var(--placeholders) * 30px)}
+.menu-panel.with-actions{min-height:232px}
+.menu-panel button{border:0;background:transparent;color:inherit;font:inherit;padding:0;border-radius:4px;display:flex;align-items:center;white-space:nowrap}
+.menu-panel button:focus-visible{outline:2px solid var(--system-accent);outline-offset:-2px}
+.menu-panel .new-conversation{height:36px;margin:4px;padding:0 16px;gap:8px;color:var(--glass-secondary);font-size:14px}
+.menu-panel .new-conversation .ui-icon{width:16px}
+.menu-panel .new-conversation:hover,.menu-panel .menu-item:hover,.menu-panel .menu-item:focus-visible{background:rgba(237,235,231,.07)}
+.menu-panel .new-conversation .menu-title{flex:1;text-align:left}
+.menu-panel .menu-shortcut{font-size:12.5px;color:var(--glass-secondary)}
+.menu-panel>.menu-rule{margin:0 12px}
+.session-list{padding:4px 0;overflow-y:auto}
+.session-row{height:36px;margin:0 4px;padding:0 4px 0 12px;display:flex;align-items:center;gap:4px;border-radius:6px}
+.session-row:hover,.session-row.actions-open{background:rgba(237,235,231,.06)}
+.session-open{flex:1;min-width:0;height:100%;gap:8px}
+.session-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
+.session-title.done{color:var(--sf-muted)}
+.session-project{max-width:92px;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--glass-secondary)}
+.session-age{width:34px;text-align:right;font:11px 'Fragment Mono';font-variant-numeric:tabular-nums;color:var(--glass-secondary)}
+.row-tool{width:24px;height:28px;justify-content:center;color:var(--glass-secondary);opacity:0;pointer-events:none}
+.session-row:hover .row-tool,.row-tool.pressed{opacity:1;pointer-events:auto}
+.row-tool.pressed{background:rgba(237,235,231,.10)!important}
+.done-toggle{width:100%;height:36px;padding:0 16px!important;gap:8px;color:var(--glass-secondary);font-size:12.5px}
+.done-toggle .ui-icon{width:10px;stroke-width:2.6}
+.menu-empty{padding:24px 16px;font-size:13px;color:var(--glass-secondary)}
+.menu-error{display:flex;align-items:flex-start;gap:8px;padding:12px;color:var(--glass-secondary);font-size:12.5px}
+.menu-error>.ui-icon{color:var(--sf-danger);margin-top:2px}
+.menu-error p{color:inherit;font-size:12.5px}
+.menu-error .plain{margin-top:4px;color:var(--sf-ink)}
+.menu-panel .grow{flex:1}
+.menu-foot{display:flex;justify-content:flex-end;padding:0 8px 4px}
+.overflow-toggle{position:relative;width:32px;height:28px;justify-content:center;color:var(--glass-secondary)}
+.overflow-toggle .ui-icon{stroke-width:2.4}
+.update-dot{width:4px;height:4px;border-radius:50%;background:var(--sf-ink);display:inline-block}
+.overflow-toggle .update-dot{position:absolute;top:4px;right:4px}
+.menu-dismiss{position:absolute;inset:0}
+.menu-popover{position:absolute;right:8px;bottom:36px;width:236px;padding:6px;background:var(--surface);border:1px solid var(--sf-line-2);border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.24);display:flex;flex-direction:column}
+.menu-popover.row-actions{width:252px}
+.menu-popover .menu-heading{font-size:11.5px;color:var(--glass-secondary);padding:2px 6px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.menu-popover .menu-rule{margin:4px 6px}
+.menu-item{height:30px;width:100%;padding:0 6px!important;gap:8px;font-size:13px}
+.menu-item>.ui-icon{width:16px;color:var(--glass-secondary)}
+.menu-item .menu-title{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis}
+.menu-item .menu-shortcut{font-size:11px}
+.menu-item .update-dot{margin-right:8px}
+.approval-card{margin:8px;padding:12px;display:flex;gap:12px;align-items:flex-start;border:1px solid var(--sf-line);border-radius:8px;background:rgba(237,235,231,.04)}
+.approval-icon{width:24px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--glass-secondary)}
+.approval-body{flex:1;min-width:0}
+.approval-body b{font-weight:500;font-size:13px}
+.approval-body p{margin:4px 0 8px;font-size:12.5px;color:var(--glass-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.approval-actions{display:flex;align-items:center;gap:12px;font-size:12.5px}
+.approval-actions .grow{flex:1}
+.approval-actions .glass-button{height:22px;padding:0 9px!important;border-radius:5px!important;background:rgba(237,235,231,.14)!important;box-shadow:inset 0 0.5px 0 rgba(255,255,255,.2);font-size:12px!important}
+.approval-actions .plain{color:var(--glass-secondary)}
+.approval-actions .more{width:20px;justify-content:center;color:var(--glass-secondary)}
+/* ProgressRail: 28 px segments, 13 px type; RailSegment colours (current ink on a 7% pill, done muted, ahead dim). */
+.rail{padding:3px;gap:2px}
+.rail .rail-step{display:flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:0;border-radius:999px;background:transparent;font-size:13px;color:var(--ob-dim);white-space:nowrap}
+.rail .rail-step.active{background:rgba(255,255,255,.07);color:var(--ob-ink)}
+.rail .rail-step.done,.rail .rail-step.reachable{color:var(--ob-muted)}
+.rail button.rail-step:hover{color:var(--ob-ink);background:rgba(255,255,255,.04)}
+.rail .rail-step .ui-icon{stroke-width:2}
+/* AgentConnectorCard: 10 px corners, a near-black tile; connected cards in the first run are lit, a wide soft
+   bloom and a tighter bright edge of brand success outside the card (Settings keeps them plain). */
+.connector{border-radius:10px;background:linear-gradient(rgba(237,235,231,.035),rgba(237,235,231,.035)),#0f0f11;border:1px solid var(--sf-line)}
+.connector .name{font-size:15px;font-weight:500}
+.connector .status{gap:6px;font-size:13px;font-weight:500}
+.connector.connected .status{color:var(--sf-success)}
+.onboarding .connector.connected{border-color:rgba(123,198,138,.7);background:linear-gradient(rgba(237,235,231,.035),rgba(237,235,231,.035)),#0f0f11;box-shadow:0 0 5px 1.5px rgba(123,198,138,.85),0 0 22px 5px rgba(123,198,138,.40),0 0 34px 6px rgba(123,198,138,.22)}
+.settings .connector,.settings .connector.connected{box-shadow:none;border-color:transparent}
+.menu-panel .session-title,.menu-panel .new-conversation,.menu-item{font-weight:450}
+.menu-error .bordered{margin-top:6px;height:22px;font-size:12.5px}

package/app/ui/surfaces.mjs

@@ -0,0 +1,219 @@
+// LauncherView.swift and LauncherController.swift: the floating bar. A prompt row (search glass, the task, + for
+// context), then the project button, the app/model/effort dropdowns, the computer and capture buttons and Start. One
+// menu opens under the bar at a time (the project list, a dropdown or the computer menu); the one highlight follows
+// the pointer and the arrow keys, Return picks and the current choice has a checkmark.
+import {icon,appMark,spinner} from './icons.mjs';
+import {commands,recordStart,reference,composePrompt,modelEfforts,validChoice,matches,escape as e,t3Failure,failureReference,t3Remedy,t3RemedyTitle,t3EffortLine,effortNotApplied,effortKey,openTarget,barEffort,projectEntry} from './core.mjs';
+const visibleRows=5,rowHeight=34,rowSpacing=2,fieldHeight=35;
+export function installSurfaces({model,host,cli,save,savePrefs,render,button,registerActions,openConversation}) {
+  const L={prompt:'',path:model.prefs.detectProject===false?'':model.prefs.lastProject||model.p.sample_path||'',app:model.prefs.app||'claude',selection:0,picker:null,query:'',projects:[...(model.prefs.projects||[])],images:[],files:[],branch:'',showBranch:false,link:'',on:null,targets:null,computers:[],computersLoading:false,computersError:null,stage:null,note:null,remedy:null,created:null,error:'',selectedImage:null,preview:null};
+  model.launcherState=L;
+  const app=document.querySelector('#app');
+  const catalog=()=>L.targets?.models?.[L.app];
+  const choices=()=>validChoice((model.prefs.choices||{})[L.app]||{},catalog());
+  const target=()=>openTarget(L.targets,L.app);
+  // AppModel.startConversationTask: a new thread goes to T3 Code when that is where this app's threads open; the
+  // first run's sample starts as before, so its live view has the VM's key.
+  const handoff=()=>target()==='t3'&&L.path!==model.p.sample_path;
+  const effortNote=()=>target()==='t3'?(model.prefs.t3EffortReasons||{})[effortKey(L.app,choices().model)]:null;
+  const canStart=()=>!!L.prompt.trim()&&!!L.path&&!L.stage&&!L.created;
+  const clean=title=>(title||'New conversation').replace(/^(\[SF\]\s*|Shardflux · )/,'').split('\n')[0].trim()||'New conversation';
+  const efforts=()=>modelEfforts(catalog(),choices().model).filter(m=>m.id!=='default');
+  const conversations=()=>{const q=L.prompt.trim();return !q||L.picker?[]:(model.rows||[]).filter(r=>r.state!=='done'&&matches(`${r.title} ${r.project}`,q)).slice(0,5);};
+  const projectRows=()=>L.projects.filter(p=>matches(p,L.query)).map(projectEntry);
+  function items(){
+    const c=catalog(),chosen=choices();
+    if(L.picker==='project')return [...projectRows().map(p=>({label:p.name,detail:p.detail,value:p.path,icon:'folder'})),{label:'Choose folder…',value:'choose-folder',icon:'folder-plus'}];
+    if(L.picker==='app')return [{label:'Claude',value:'claude',app:'claude',checked:L.app==='claude'},{label:'Codex',value:'codex',app:'codex',checked:L.app==='codex'}];
+    if(L.picker==='model'){const d=c?.models?.find(m=>m.id===c.default?.model)?.label;return [{label:d?`Default (${d})`:'Default',value:null,checked:!chosen.model,rule:true},...(c?.models||[]).filter(m=>m.id!=='default').map(m=>({label:m.label||m.id,detail:m.description||'',value:m.id,checked:chosen.model===m.id}))];}
+    if(L.picker==='effort'){const d=c?.efforts?.find(m=>m.id===c.default?.effort)?.label;return [{label:d?`Default (${d})`:'Default',value:null,checked:!chosen.effort,rule:true},...efforts().map(m=>({label:m.label||m.id,value:m.id,checked:chosen.effort===m.id}))];}
+    if(L.picker==='computer')return [{label:'New computer',value:null,icon:'plus',checked:!L.on},...L.computers.map(c=>({computer:c,value:c.workspace_id,checked:L.on===c.workspace_id}))];
+    if(!L.picker)return conversations().map(r=>({label:r.title,detail:r.project,app:r.app,value:r.reference,conversation:true}));
+    return [];
+  }
+  const sel=i=>i===L.selection?'selected':'';
+  function resultRow(m,i){
+    const lead=m.app?appMark(m.app,16):m.icon?`<span class="row-icon">${icon(m.icon,13)}</span>`:'';
+    return `<button class="result-row ${sel(i)}" data-action="pick:${i}" data-index="${i}" role="option" aria-selected="${!!m.checked}">${lead}<span class="result-title">${e(m.label)}</span><span class="result-detail">${e(m.detail||'')}</span>${m.checked!==undefined&&m.checked?`<span class="row-check">${icon('check',13)}</span>`:''}</button>${m.rule?'<div class="menu-rule"></div>':''}`;
+  }
+  // LauncherComputerRow: a computer named by the threads already on it, each with its app, title and state.
+  function computerRow(m,i){
+    const threads=m.computer.conversations||[],label={working:'working',needs_you:'needs you',waiting:'needs you',unresolved:'unresolved'};
+    const lines=threads.slice(0,3).map(t=>`<span class="thread-line">${t.harness||t.app?appMark(t.harness||t.app,14):`<span class="row-icon small">${icon('message-circle',11)}</span>`}<span class="thread-title">${e(clean(t.title))}</span>${label[t.state]?`<span class="thread-state"><span class="state-dot ${t.state==='working'?'working':t.state==='unresolved'?'quiet':'needs-you'}"></span>${label[t.state]}</span>`:''}</span>`).join('')+(threads.length>3?`<span class="thread-more">${threads.length-3} more</span>`:'');
+    return `<button class="result-row computer-row ${sel(i)}" data-action="pick:${i}" data-index="${i}" title="${e(clean(m.computer.label||threads[0]?.title))}" aria-selected="${!!m.checked}"><span class="row-icon">${icon('desktop',13)}</span><span class="threads">${lines||`<span class="thread-line"><span class="thread-title">${e(clean(m.computer.label||m.computer.workspace_key))}</span></span>`}</span><span class="row-check ${m.checked?'':'hidden'}">${icon('check',13)}</span></button>`;
+  }
+  function menu(){
+    if(L.picker==='project'){
+      const rows=projectRows(),visible=Math.min(visibleRows,L.projects.length),list=items();
+      const height=visible===0?0:visible*rowHeight+(visible-1)*rowSpacing;
+      return `<div class="separator"></div><section class="project-section"><input class="project-field" name="project-search" placeholder="Find a project…" value="${e(L.query)}" autocomplete="off" spellcheck="false"><div class="project-rows" style="height:${height}px">${rows.length?list.slice(0,-1).map(resultRow).join(''):visible?'<p class="no-match">No matching projects</p>':''}</div>${resultRow(list.at(-1),list.length-1)}</section>`;
+    }
+    if(L.picker==='computer'){const list=items();return `<div class="separator"></div><section class="menu-list">${resultRow(list[0],0)}${list.slice(1).map((m,i)=>computerRow(m,i+1)).join('')}${list.length===1||L.computersError?`<p class="menu-note">${L.computersLoading?spinner(13):''}${e(L.computersLoading?'Finding this project’s computers…':L.computersError||'This project has no other computers yet.')}</p>`:''}</section>`;}
+    const list=items();if(!list.length)return '';
+    return `<div class="separator"></div><section class="menu-list ${L.picker?'':'results'}">${list.map(resultRow).join('')}</section>`;
+  }
+  // The pills: content then a small chevron; the one whose menu is open keeps the pressed fill.
+  const pill=(key,content,{cls='',title='',label=''}={})=>`<button class="control pill ${L.picker===key?'active':''} ${cls}" data-action="picker:${key}" title="${e(title)}" aria-label="${e(label)}" ${L.stage?'disabled':''}>${content}${icon('chevron-down',9)}</button>`;
+  function controls(){
+    const c=catalog(),chosen=choices(),t3=target()==='t3',note=effortNote();
+    const model_=c?.models?.find(m=>m.id===chosen.model),fallback=c?.models?.find(m=>m.id===c?.default?.model);
+    const effort_=c?.efforts?.find(m=>m.id===chosen.effort),effortDefault=c?.efforts?.find(m=>m.id===c?.default?.effort);
+    const name=L.path?L.path.replace(/\/+$/,'').split('/').at(-1):'Choose project';
+    const place={terminal:'your terminal',web:'your browser',t3:'T3 Code'}[target()]||'your terminal';
+    const t3Glyph=t3&&model.appIcons?.t3?appMark('t3',13,model.appIcons.t3):'';
+    const title=L.stage==='starting'?'Starting…':L.stage==='opening'?'Opening…':'Start';
+    return `<div class="launcher-controls">
+      <button class="control project ${L.picker==='project'?'active':''} ${L.path?'':'empty'}" data-action="picker:project" title="${e(L.path?L.path:'Choose a project (Tab)')}" ${L.stage?'disabled':''}>${icon('folder',13)}<span class="project-name">${e(name)}</span>${icon('chevron-down',9)}</button>
+      <span class="grow"></span>
+      <span class="dropdowns">${pill('app',appMark(L.app,14),{title:`${L.app==='codex'?'Codex':'Claude'} conversations ${t3?'start':'open'} in ${place}`,label:'Agent app'})}${c?.models?.length?pill('model',`<span>${e(model_?.short||fallback?.short||'Default')}</span>`,{cls:model_?'':'secondary',title:`${model_?'Model':'Default model'} (Ctrl+Shift+M)`,label:'Model'}):''}${c&&efforts().length?pill('effort',`<span>${e(effort_?barEffort(effort_):effortDefault?barEffort(effortDefault):'Default')}</span>`,{cls:`${effort_?'':'secondary'} ${note?'dimmed':''}`,title:note?t3EffortLine[note]:`${effort_?'Effort':'Default effort'} (Ctrl+Shift+E)`,label:'Effort'}):''}</span>
+      <span class="tools">${L.targets?.computers===false?'':`<button class="control icon-only computer ${L.picker==='computer'?'active':''} ${L.on?'chosen':''}" data-action="picker:computer" title="${e((L.on?clean(L.computers.find(c=>c.workspace_id===L.on)?.label):'New computer. Choose one of this project’s computers')+' (Ctrl+Shift+C)')}" aria-label="${L.on?'Chosen computer':'New computer'}" ${L.stage||!L.path?'disabled':''}>${icon('desktop',15)}</button>`}<button class="control icon-only" data-action="capture" title="${L.images.length>=5?'Up to five captures':'Capture part of the screen (Ctrl+Shift+S)'}" aria-label="Capture part of the screen" ${L.stage||L.images.length>=5?'disabled':''}>${icon('capture',15)}</button></span>
+      <button class="start ${canStart()?'':'off'}" data-action="start" title="${t3?'Start in T3 Code (Ctrl+Return)':'Start conversation (Ctrl+Return)'}" aria-label="${t3?'Start in T3 Code':'Start conversation'}" ${canStart()?'':'disabled'}>${t3Glyph}<span>${title}</span>${L.stage?'':`<span class="key-hint">Ctrl${icon('corner-down-left',11)}</span>`}</button>
+    </div>`;
+  }
+  function attachments(){
+    if(!L.images.length&&!L.files.length&&!L.link&&!L.branch.trim())return '';
+    const chip=(label,name,action)=>`<button class="context-chip" data-action="${action}" title="Remove ${e(label)}">${icon(name,11)}<span>${e(label)}</span></button>`;
+    return `<div class="attachments ${L.images.length?'with-images':''}">${L.images.map((im,i)=>`<div class="image-chip ${L.selectedImage===i?'selected':''}" title="Screenshot ${i+1}"><img data-action="preview:${i}" src="${im.data}" alt="Screenshot ${i+1}"><button class="image-remove" data-action="remove-image:${i}" aria-label="Remove screenshot ${i+1}">${icon('x',8)}</button></div>`).join('')}${L.files.map((f,i)=>chip(f.path.split('/').at(-1),'file',`remove-file:${i}`)).join('')}${L.link?chip((()=>{try{return new URL(L.link).host;}catch{return 'Link';}})(),'link','remove-link'):''}${L.branch.trim()?chip(L.branch.trim(),'git-branch','remove-branch'):''}</div>`;
+  }
+  function footerLines(){
+    let html='';
+    if(L.note)html+=`<div class="separator"></div><p class="launcher-note">${icon('info',14)}<span>${e(L.note)}</span></p>`;
+    const message=L.error;
+    if(message){
+      const mode=L.targets?.t3?.mode,title=L.remedy?t3RemedyTitle(L.remedy,mode):null;
+      html+=`<div class="separator"></div><div class="launcher-error"><p role="alert">${icon('circle-alert',14)}<span>${e(message)}</span></p>${title||(L.created&&!L.remedy?.threadID)?`<div class="error-actions">${title?`<button class="bordered" data-action="remedy" ${L.stage?'disabled':''}>${e(title)}</button>`:''}${L.created&&!L.remedy?.threadID?'<button class="bordered" data-action="open-created">Open created conversation</button>':''}</div>`:''}</div>`;
+    }
+    return html;
+  }
+  function renderLauncher(){
+    const area=document.activeElement?.name;
+    app.innerHTML=`<section class="launcher" aria-label="Launcher"><div class="prompt-row"><span class="lead">${icon('search',17)}</span><textarea name="prompt" aria-label="What should the agent do?" placeholder="What should the agent do?" rows="1" ${L.stage?'disabled':''}>${e(L.prompt)}</textarea>${L.stage?`<span class="progress">${spinner(14)}</span>`:''}<button class="control icon-only add" data-action="add" title="Add context" aria-label="Add context" ${L.stage?'disabled':''}>${icon('plus',14)}</button></div>${controls()}${L.showBranch?`<input class="branch" name="branch" aria-label="Branch context" placeholder="Branch context" value="${e(L.branch)}">`:''}${attachments()}${L.preview!==null&&L.images[L.preview]?`<div class="image-preview" data-action="close-preview" title="Click or press Esc to close the preview"><img src="${L.images[L.preview].data}" alt="Screenshot ${L.preview+1} preview"></div>`:''}<div class="results-slot">${menu()}</div>${footerLines()}</section>`;
+    fit();
+    if(area==='project-search'||L.picker==='project'){const input=app.querySelector('[name=project-search]');if(input&&document.activeElement!==input){input.focus();input.setSelectionRange(input.value.length,input.value.length);}}
+    else if(area==='prompt'||!area){const t=app.querySelector('[name=prompt]');if(t&&!L.stage){t.focus();t.setSelectionRange(t.value.length,t.value.length);}}
+  }
+  function fit(){requestAnimationFrame(()=>{const t=app.querySelector('textarea');if(t){t.style.height='auto';t.style.height=Math.min(96,t.scrollHeight)+'px';}const bar=app.querySelector('.launcher');if(bar)void host('resize',{height:Math.ceil(bar.getBoundingClientRect().height)+30});const s=app.querySelector('.result-row.selected');s?.scrollIntoView({block:'nearest'});});}
+  // A keystroke in the prompt updates only what it changes (Start, and the matching conversations), never the field.
+  function promptChanged(){
+    const start=app.querySelector('[data-action=start]');if(start){start.disabled=!canStart();start.classList.toggle('off',!canStart());}
+    const slot=app.querySelector('.results-slot');if(slot&&!L.picker){L.selection=0;slot.innerHTML=menu();}fit();
+  }
+  window.renderSurface=()=>{if(model.view==='launcher')renderLauncher();else app.innerHTML=`<div class="empty"><h2>${e(model.view)}</h2></div>`;};
+  async function refreshComputers(){
+    if(!L.path){L.computers=[];return;}L.computersLoading=true;L.computersError=null;
+    try{const r=await cli(['agents','computers','--path',L.path,'--json']);L.computers=(r.computers||[]).filter(c=>c.workspace_id);if(L.on&&!L.computers.some(c=>c.workspace_id===L.on))L.on=null;}
+    catch(err){L.computers=[];L.on=null;if(!/unknown (command|option)/i.test(err.message))L.computersError='Couldn’t list this project’s computers. Try again.';}
+    finally{L.computersLoading=false;}
+  }
+  async function load(){
+    try{L.targets=await cli(['agents','targets','--json']);}catch{L.targets={};}
+    for(const a of ['claude','codex'])(model.prefs.choices??={})[a]=validChoice((model.prefs.choices||{})[a]||{},L.targets.models?.[a]);
+    if(model.p.step===2&&model.p.sample_path)L.path=model.p.sample_path;
+    if(model.prefs.pendingComputer){const pending=model.prefs.pendingComputer;L.on=pending.id;const path=pending.path||L.projects.find(p=>p.split('/').at(-1)===pending.project);if(path)L.path=path;else {L.path='';L.error='Choose the local project folder for this computer.';}delete model.prefs.pendingComputer;await savePrefs();}
+    L.projects=[...new Set([...(model.p.sample_path?[model.p.sample_path]:[]),...L.projects])];
+    render();void refreshComputers();
+    try{const found=await host('projects');L.projects=[...new Set([...L.projects,...found])];model.prefs.projects=L.projects.slice(0,2000);await savePrefs();}catch{}
+    if(L.picker==='project')render();
+  }
+  // The project scan reports in batches as it walks the home folder, so the list grows while it is open.
+  window.addEventListener('sf-projects',ev=>{L.projects=[...new Set([...L.projects,...ev.detail])];if(model.view==='launcher'&&L.picker==='project'){const slot=app.querySelector('.results-slot');if(slot){slot.innerHTML=menu();fit();}}});
+  window.addEventListener('sf-view',ev=>{if(ev.detail==='launcher'){L.picker=null;void load();}});
+  window.addEventListener('sf-state',ev=>{if(ev.detail.name==='onboarding.json')model.p=ev.detail.value;if(ev.detail.name==='desktop-linux.json')model.prefs=ev.detail.value;if(model.view!=='launcher')render();});
+  window.addEventListener('sf-launcher-visible',ev=>{model.launcher=ev.detail;if(model.view==='onboarding')render();});
+  app.addEventListener('input',ev=>{if(model.view!=='launcher')return;
+    if(ev.target.name==='prompt'){L.prompt=ev.target.value;if(L.error){L.error='';L.remedy=null;L.created=null;render();return;}promptChanged();}
+    if(ev.target.name==='branch')L.branch=ev.target.value;
+    if(ev.target.name==='project-search'){L.query=ev.target.value;L.selection=0;const slot=app.querySelector('.results-slot');if(slot){slot.innerHTML=menu();const input=slot.querySelector('[name=project-search]');input.focus();input.setSelectionRange(L.query.length,L.query.length);fit();}}});
+  // Dragging from anywhere that is not a control moves the bar; a double-click there returns it to its default spot.
+  app.addEventListener('pointerdown',ev=>{if(model.view!=='launcher'||ev.button!==0||ev.detail>1)return;if(ev.target.closest('.launcher')&&!ev.target.closest('textarea,input,button,img,.result-row'))void host('drag',{x:Math.round(ev.screenX),y:Math.round(ev.screenY)});});
+  app.addEventListener('dblclick',ev=>{if(model.view==='launcher'&&!ev.target.closest('textarea,input,button,img'))void host('reset-position');});
+  function setPicker(key){if(L.stage)return;if(key==='model'&&!catalog()?.models?.length)return;if(key==='effort'&&!efforts().length)return;L.picker=L.picker===key?null:key;L.query='';const list=items();L.selection=Math.max(0,list.findIndex(m=>m.checked));if(key==='project')L.selection=Math.max(0,list.findIndex(m=>m.value===L.path));if(L.picker==='computer')void refreshComputers().then(()=>{if(L.picker==='computer')render();});render();}
+  document.addEventListener('keydown',ev=>{if(model.view!=='launcher')return;const list=items();
+    if(list.length&&['ArrowDown','ArrowUp'].includes(ev.key)&&!ev.shiftKey){ev.preventDefault();L.selection=(L.selection+(ev.key==='ArrowDown'?1:-1)+list.length)%list.length;app.querySelectorAll('[data-index]').forEach(r=>r.classList.toggle('selected',Number(r.dataset.index)===L.selection));app.querySelector('.result-row.selected')?.scrollIntoView({block:'nearest'});return;}
+    // As LauncherController: Ctrl+Return starts; Return accepts the highlighted row (Shift+Return is a new line).
+    if(ev.key==='Enter'&&(ev.ctrlKey||ev.metaKey)){ev.preventDefault();void perform('start');return;}
+    if(ev.key==='Enter'&&!ev.shiftKey){ev.preventDefault();if(list.length)void pick(L.selection);return;}
+    if(ev.key==='Escape'){ev.preventDefault();if(L.preview!==null)L.preview=null;else if(L.picker)L.picker=null;else if(L.selectedImage!==null)L.selectedImage=null;else{void host('hide');return;}render();return;}
+    if(ev.key==='Tab'&&!ev.shiftKey){ev.preventDefault();setPicker('project');return;}
+    if((ev.key==='Delete'||ev.key==='Backspace')&&L.selectedImage!==null&&document.activeElement?.name!=='prompt'){L.images.splice(L.selectedImage,1);L.selectedImage=null;L.preview=null;render();return;}
+    if(ev.ctrlKey&&ev.shiftKey){const k=ev.key.toLowerCase(),key={m:'model',e:'effort',c:'computer'}[k];if(key){ev.preventDefault();setPicker(key);}else if(k==='s'){ev.preventDefault();void perform('capture');}}});
+  app.addEventListener('pointermove',ev=>{if(model.view!=='launcher')return;const row=ev.target.closest('[data-index]');if(row&&Number(row.dataset.index)!==L.selection){L.selection=Number(row.dataset.index);app.querySelectorAll('[data-index]').forEach(r=>r.classList.toggle('selected',r===row));}});
+  async function capture(){
+    if(L.images.length>=5)throw new Error('Attach up to five captures.');
+    await host('hide');
+    try{const path=await host('capture');if(path){L.images.push({path,data:path.startsWith('data:')?path:await host('image',{path})});L.selectedImage=null;}}
+    finally{await host('view',{name:'launcher'});}
+  }
+  async function start(){
+    if(!canStart())return;
+    const handOff=handoff(),appName=L.app,chosen=choices(),images=L.images.slice();let promptFile;
+    L.error='';L.remedy=null;L.note=null;L.picker=null;L.stage='starting';model.error='';render();
+    try{
+      promptFile=await host('prompt',{text:composePrompt(L.prompt,L.branch.trim(),L.link,L.files)});
+      const doc=await cli(commands.create({app:appName,path:L.path,promptFile,computer:L.path===model.p.sample_path,on:L.on,...chosen,t3:handOff,images:images.length?['-']:[]}),{timeout:540,...(images.length?{images:images.map(i=>i.data.split(',')[1])}:{})});
+      L.images=L.images.filter(i=>!images.includes(i));L.preview=null;L.selectedImage=null;
+      let ref;
+      if(handOff){if(typeof doc.opened!=='boolean'&&doc.target!=='t3')throw new Error('shard returned no response.');ref=doc.workspace?.workspace_key||(/^conv_[a-z0-9]{26}$/.test(doc.conversation_id||doc.conversation?.id||'')?doc.conversation_id||doc.conversation.id:null);if(doc.t3_link)model.phone=doc.t3_link;}
+      else ref=reference(doc,!!L.on);
+      if(L.on)L.on=null;
+      if(ref){L.created=ref;const kind=recordStart(model.p,ref,L.path,appName);if(kind==='otherProject')L.error=`That one started in ${L.path.split('/').at(-1)}. For this demo, pick Daylight (sample).`;await save();}
+      model.prefs.lastProject=L.path;model.prefs.app=appName;await savePrefs();
+      if(handOff){
+        if(!doc.opened){if(!ref)throw new Error('shard returned no response.');L.stage='opening';render();await cli(['agents','open','t3',ref,'--json']);}
+        // A picked effort T3 Code did not take: said once, quietly, and that pill dims from then on.
+        const reason=effortNotApplied(doc,chosen.effort);
+        if(chosen.effort){const reasons=model.prefs.t3EffortReasons??={},key=effortKey(appName,chosen.model);if(reason)reasons[key]=reason;else delete reasons[key];await savePrefs();}
+        if(reason){L.stage='opening';L.note=t3EffortLine[reason]+'.';render();await new Promise(r=>setTimeout(r,2200));}
+        return finish();
+      }
+      L.stage='opening';render();
+      await openConversation(ref);
+      finish();
+    }catch(err){
+      const failure=t3Failure(err.detail);
+      if(failure){L.remedy=t3Remedy(failure,L.targets?.t3?.mode)?failure:null;if(failure.threadID)L.created=failureReference(failure)??`t3:${failure.threadID}`;else if(failure.conversation)L.created=failure.conversation;}
+      else if(err.detail?.details?.workspace_key)L.created=err.detail.details.workspace_key;
+      L.error=err.message;
+    }finally{L.stage=null;if(promptFile)await host('remove-prompt',{path:promptFile});render();}
+  }
+  async function finish(){L.created=null;L.note=null;L.prompt='';L.files=[];L.link='';L.branch='';L.showBranch=false;await host('hide');}
+  // The refused hand-off's one action: open the started thread (never a second start), T3 Code, or Settings.
+  async function remedy(){
+    const f=L.remedy,kind=t3Remedy(f,L.targets?.t3?.mode);if(!kind)return;
+    if(kind==='openThread'){const ref=failureReference(f);if(!ref){await host('open-app',{app:'t3'});L.remedy=null;await finish();return;}
+      L.error='';L.stage='opening';render();try{await cli(['agents','open','t3',ref,'--json']);L.remedy=null;await finish();}catch(err){const next=t3Failure(err.detail);if(next&&t3Remedy(next,L.targets?.t3?.mode))L.remedy=next;L.error=err.message;}finally{L.stage=null;render();}return;}
+    if(kind==='openT3'){await host('open-app',{app:'t3'});return;}
+    model.prefs.settingsPane=kind==='settings'?'Agents':'Updates';await savePrefs();await host('view',{name:'settings'});
+  }
+  async function pick(index){const m=items()[index];if(!m)return;
+    if(m.conversation){await openConversation(m.value);await host('hide');return;}
+    if(L.picker==='project'){if(m.value==='choose-folder')return perform('choose-project');L.path=m.value;L.picker=null;render();await refreshComputers();}
+    else if(L.picker==='app'){L.app=m.value;model.prefs.app=m.value;await savePrefs();}
+    else if(L.picker==='computer')L.on=m.value;
+    else if(L.picker){(model.prefs.choices??={})[L.app]=validChoice({...choices(),[L.picker]:m.value},catalog());await savePrefs();}
+    L.picker=null;L.selection=0;render();}
+  const actions={start,capture,remedy,
+    add:async(b)=>{const r=b.getBoundingClientRect();await host('popup',{x:Math.round(r.right),y:Math.round(r.bottom+4),width:1,height:1,align:'right',items:[{label:'Add files…',action:'add-files'},{label:'Add clipboard link',action:'add-link'},{label:'Add branch…',action:'add-branch'}]});},
+    'open-created':()=>openConversation(L.created),
+    'choose-project':async()=>{L.picker=null;const path=await host('choose',{kind:'folder',path:L.path});if(path){L.path=path;L.projects=[path,...L.projects.filter(p=>p!==path)];await refreshComputers();}},
+    'add-files':async()=>{if(L.files.length>=5)throw new Error('Add up to five context files.');const paths=await host('choose',{kind:'file',multiple:true,path:L.path});if(paths){if(L.files.length+paths.length>5)throw new Error('Add up to five context files.');for(const path of paths)L.files.push({path,text:await host('text-file',{path})});}},
+    'add-link':async()=>{const link=await host('clipboard');if(!/^https?:\/\//.test(link||''))throw new Error('Copy a web link, then add it as context.');L.link=link;},
+    'add-branch':()=>{L.showBranch=!L.showBranch;},'remove-link':()=>{L.link='';},'remove-branch':()=>{L.branch='';L.showBranch=false;},'close-preview':()=>{L.preview=null;}};
+  async function perform(action,b){
+    try{
+      if(action.startsWith('picker:'))return setPicker(action.slice(7));
+      if(action.startsWith('pick:'))return await pick(Number(action.slice(5)));
+      if(action.startsWith('remove-image:')){L.images.splice(Number(action.slice(13)),1);L.selectedImage=null;L.preview=null;}
+      else if(action.startsWith('preview:')){const i=Number(action.slice(8));L.selectedImage=i;L.preview=L.preview===i?null:i;}
+      else if(action.startsWith('remove-file:'))L.files.splice(Number(action.slice(12)),1);
+      else if(actions[action])await actions[action](b);
+      else return;
+    }catch(err){L.error=err.message;}
+    render();
+  }
+  // Native menu items (+) arrive as actions on this page.
+  window.addEventListener('sf-action',ev=>{if(model.view==='launcher'&&['add-files','add-link','add-branch'].includes(ev.detail)){ev.stopImmediatePropagation();void perform(ev.detail);}});
+  app.addEventListener('click',ev=>{if(model.view!=='launcher')return;const b=ev.target.closest('[data-action]');if(!b)return;ev.stopImmediatePropagation();void perform(b.dataset.action,b);},true);
+  registerActions({});
+  if(model.view==='launcher')void load();
+}