@sergeychuvayev/claude-fleet 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +377 -0
- package/archive.js +96 -0
- package/bin/claude-fleet.js +102 -0
- package/build/make-app.sh +110 -0
- package/catalog.js +117 -0
- package/fleet.js +450 -0
- package/managed.js +456 -0
- package/package.json +62 -0
- package/paths.js +64 -0
- package/permissions.js +73 -0
- package/public/app.js +369 -0
- package/public/ask.js +119 -0
- package/public/blocks.js +180 -0
- package/public/control.js +426 -0
- package/public/icons/fleet-192.png +0 -0
- package/public/icons/fleet-512.png +0 -0
- package/public/index.html +48 -0
- package/public/styles.css +454 -0
- package/public/vendor/libs.js +75 -0
- package/search.js +425 -0
- package/server.js +255 -0
- package/theme.js +89 -0
- package/update.js +183 -0
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="color-scheme" content="dark"><title>Fleet — Claude Code control room</title><link rel="manifest" href="/manifest.webmanifest"><link rel="icon" href="/icons/fleet-192.png" type="image/png"><link rel="apple-touch-icon" href="/icons/fleet-192.png"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-title" content="Fleet"><link rel="stylesheet" href="/theme.css"><link rel="stylesheet" href="/styles.css"><script src="/vendor/libs.js" defer></script><script src="/app.js" defer></script><script src="/blocks.js" defer></script><script src="/control.js" defer></script><script src="/ask.js" defer></script></head>
|
|
3
|
+
<body><header class="topbar"><a class="brand" href="/" aria-label="Fleet home"><span class="brandmark">✳</span> fleet <span class="brand-sub">/ CLAUDE CODE</span></a><div class="connection"><span id="connection-dot" class="dot busy"></span><span id="connection">Connecting</span><span class="local">LOCAL CONTROL ROOM</span></div><div class="refresh-info"><button id="update-pill" class="button update-pill" hidden></button><span id="updated">Waiting for first snapshot</span><button id="refresh" class="button">↻ Refresh</button><button id="ask-sessions" class="button" aria-expanded="false" aria-controls="ask-backdrop" title="Ask a question across every session on this machine">⌕ Ask <kbd id="ask-shortcut">⌘K</kbd></button><button id="new-session" class="button resume" aria-expanded="false" aria-controls="launch-backdrop">＋ New agent</button></div></header>
|
|
4
|
+
<main>
|
|
5
|
+
<div id="error" class="error" role="status" hidden></div>
|
|
6
|
+
<section class="workspace" aria-label="Sessions"><div class="sessions-pane"><div class="section-heading"><h2>Sessions <span id="shown-count">0</span></h2></div><div class="filters" id="filters" aria-label="Filter sessions by status"></div><div class="archive-bar" id="archive-bar" role="group" aria-label="Archive" hidden></div><div class="list-head"><span>SESSION / PROJECT</span><span>CONTEXT</span></div><div id="session-list" class="session-list"><div class="empty">Loading your sessions…</div></div></div><div id="splitter" class="splitter" role="separator" aria-orientation="vertical" aria-label="Resize the session inspector" aria-valuemin="25" aria-valuemax="75" aria-valuenow="58" tabindex="0" title="Drag to resize · double-click to reset"></div><aside id="detail" class="detail" aria-label="Session details"><section id="control-panel" aria-label="Agent controls"></section><button type="button" id="details-toggle" class="details-toggle" aria-expanded="true" aria-controls="detail-content" hidden><span class="details-chevron" aria-hidden="true">›</span>Session details</button><div id="detail-content"></div></aside></section>
|
|
7
|
+
</main>
|
|
8
|
+
<div class="modal-backdrop" id="ask-backdrop" hidden>
|
|
9
|
+
<section class="modal modal-ask" role="dialog" aria-modal="true" aria-labelledby="ask-title">
|
|
10
|
+
<header class="modal-head">
|
|
11
|
+
<div class="modal-heading"><span class="modal-spark" aria-hidden="true">✳</span><div><span class="modal-eyebrow">A LITTLE HELP REMEMBERING</span><h2 id="ask-title">Find the thread.</h2><p>Good ideas are somewhere in your sessions. Let’s find them.</p></div></div>
|
|
12
|
+
<button type="button" class="modal-close" data-close-modal aria-label="Close search">✕</button>
|
|
13
|
+
</header>
|
|
14
|
+
<form id="ask-form" class="ask-bar">
|
|
15
|
+
<div class="ask-input-wrap"><span class="ask-icon" aria-hidden="true">⌕</span><input id="ask-input" type="text" placeholder="What did we discuss?" maxlength="500" required autocomplete="off" aria-label="Search all sessions"></div>
|
|
16
|
+
<select id="ask-model" class="ask-model" aria-label="Model that reads the matches"><option value="haiku" selected>Haiku</option><option value="sonnet">Sonnet</option><option value="opus">Opus</option></select>
|
|
17
|
+
<button type="submit" id="ask-submit" class="button resume ask-go">Search ↗</button>
|
|
18
|
+
</form>
|
|
19
|
+
<div class="modal-body ask-content">
|
|
20
|
+
<div id="ask-welcome" class="ask-welcome"><div class="suggestion-heading"><span>START WITH A QUESTION</span><span>Across all your sessions</span></div>
|
|
21
|
+
<button type="button" class="ask-suggestion" data-question="What did we decide about "><span class="suggestion-symbol" aria-hidden="true">↳</span><span><strong>Pick up a thought</strong><small>What did we decide about…</small></span><span aria-hidden="true">↗</span></button>
|
|
22
|
+
<button type="button" class="ask-suggestion" data-question="How did we fix "><span class="suggestion-symbol" aria-hidden="true">⌘</span><span><strong>Find that fix</strong><small>How did we fix…</small></span><span aria-hidden="true">↗</span></button>
|
|
23
|
+
<button type="button" class="ask-suggestion" data-question="What is left to do on "><span class="suggestion-symbol" aria-hidden="true">⋯</span><span><strong>Remember what’s next</strong><small>What is left to do on…</small></span><span aria-hidden="true">↗</span></button>
|
|
24
|
+
</div>
|
|
25
|
+
<div id="ask-results" aria-live="polite" aria-busy="false"></div>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="modal-foot"><span><span class="modal-status-dot" aria-hidden="true"></span>Your sessions, a little easier to find.</span><span><kbd>↵</kbd> search <span class="shortcut-gap"><kbd>Esc</kbd> close</span></span></div>
|
|
28
|
+
</section>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="modal-backdrop" id="launch-backdrop" hidden>
|
|
31
|
+
<section class="modal modal-launch launch-panel" role="dialog" aria-modal="true" aria-labelledby="launch-title">
|
|
32
|
+
<header class="modal-head"><div class="modal-heading"><span class="modal-spark" aria-hidden="true">✳</span><div><span class="modal-eyebrow">A FRESH PAIR OF HANDS</span><h2 id="launch-title">Give your next task a home.</h2><p>A little context. A clear task. Off you go.</p></div></div><button type="button" id="close-launch" class="modal-close" data-close-modal aria-label="Close new agent form">✕</button></header>
|
|
33
|
+
<form id="launch-form" class="modal-body">
|
|
34
|
+
<div class="launch-layout">
|
|
35
|
+
<div class="launch-task"><label for="launch-prompt">What are we working on?</label><textarea id="launch-prompt" name="prompt" rows="8" placeholder="There’s something I’d love your help with… Describe the task, what a good result looks like, and anything your agent should know." required maxlength="16000"></textarea><p class="note launch-task-note">Big ideas, small fixes. Every task starts here.</p></div>
|
|
36
|
+
<div class="launch-fields">
|
|
37
|
+
<label>Project directory<input name="cwd" id="launch-cwd" placeholder="~/projects/my-project" required maxlength="4096" autocomplete="off"><span class="note">Where your agent will work.</span></label>
|
|
38
|
+
<label><span>Session name <span class="field-optional">optional</span></span><input name="name" placeholder="e.g. A smoother checkout" maxlength="100" autocomplete="off"></label>
|
|
39
|
+
<label>Model<select name="model" id="launch-model"><option value="">Project default</option></select><span class="note">You can switch models later.</span></label>
|
|
40
|
+
<label>Approvals<select name="approvalMode" id="launch-mode"><option value="auto" selected>Auto · ask for risky commands</option><option value="ask">Ask every time</option><option value="all">Approve everything</option></select><span class="note" id="launch-mode-note">Destructive or networked shell commands still stop for you.</span></label>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
<p id="launch-error" class="form-error" role="alert" hidden></p>
|
|
44
|
+
<div class="launch-footer"><p class="note"><span class="modal-status-dot" aria-hidden="true"></span>Uses your Claude account and project settings.</p><button type="submit" class="button resume" id="launch-submit">Launch agent ↗</button></div>
|
|
45
|
+
</form>
|
|
46
|
+
</section>
|
|
47
|
+
</div>
|
|
48
|
+
<div id="toast" class="toast" role="status" hidden></div></body></html>
|
|
@@ -0,0 +1,454 @@
|
|
|
1
|
+
:root{--bg:#111313;--panel:#181b1b;--raised:#202424;--line:#2d3332;--text:#edf0e9;--muted:#a0aaa5;--faint:#89958e;--accent:#deb68a;--busy:#9dccac;--idle:#a6bbd6;--stale:#e5bb78;--dead:#bf9696;color-scheme:dark;font:14px "Avenir Next","Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}.topbar{height:76px;border-bottom:1px solid var(--line);padding:0 3.6%;display:flex;align-items:center;justify-content:space-between;background:#151818}.brand{font-size:28px;letter-spacing:-1px;font-weight:700;display:flex;align-items:center;gap:12px}.brandmark{color:var(--accent);font-size:36px;font-weight:400}.brand-sub{font-size:10px;letter-spacing:1.8px;color:var(--muted);font-weight:500;margin-left:12px}.connection{display:flex;align-items:center;gap:9px;font-size:12px}.local{border-left:1px solid var(--line);margin-left:12px;padding-left:20px;font-size:10px;letter-spacing:1px;color:var(--muted)}main{max-width:1700px;margin:auto;padding:38px 3.6% 0}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:32px}.eyebrow{color:var(--accent);font-size:10px;letter-spacing:2px;font-weight:650}h1{font-size:clamp(26px,3vw,38px);letter-spacing:-1.3px;font-weight:550;margin:10px 0 8px}p{color:var(--muted);line-height:1.7;margin:0}.refresh-info{display:flex;align-items:center;gap:16px;font-size:11px;color:var(--muted)}.button{border:1px solid var(--line);background:var(--raised);padding:9px 13px;border-radius:6px;font-size:12px}.button:hover{background:#303634}.overview{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--line);border-radius:9px;background:var(--panel);margin-bottom:30px}.fleet-health,.pressure{padding:22px 26px}.pressure{border-left:1px solid var(--line)}.section-label{font-weight:600;display:flex;justify-content:space-between;gap:10px;font-size:12px}.section-label>span{font-weight:400;color:var(--faint);font-size:11px}.status-stats{display:flex;justify-content:space-between;gap:15px;margin:20px 0}.stat{border:0;padding:0;background:none;text-align:left}.stat strong{display:block;font-size:28px;font-weight:500;font-variant-numeric:tabular-nums;margin-bottom:3px}.stat span{font-size:11px;color:var(--muted)}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px}.busy{color:var(--busy)}.idle{color:var(--idle)}.stale{color:var(--stale)}.dead{color:var(--dead)}.distribution{height:5px;display:flex;gap:4px;border-radius:3px;overflow:hidden;background:var(--raised)}.distribution i{background:currentColor;min-width:3px}.pressure-chart{display:flex;align-items:end;gap:4px;height:73px;margin-top:14px;border-bottom:1px solid var(--line);position:relative;background:linear-gradient(to top,transparent 74%,#ffffff08 74%,#ffffff08 76%,transparent 76%)}.pressure-chart .column{flex:1;height:100%;display:flex;align-items:end;max-width:42px;border:0;padding:0;background:transparent}.column i{display:block;width:100%;background:#8fa997;border-radius:2px 2px 0 0;min-height:2px}.column:hover i{filter:brightness(1.25)}.chart-caption{display:flex;justify-content:space-between;font-size:10px;color:var(--faint);margin-top:8px}.workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);border:1px solid var(--line);border-radius:9px;overflow:hidden;min-height:510px}.sessions-pane{min-width:0;background:#151818}.section-heading{padding:21px 23px 16px;display:flex;align-items:center;justify-content:space-between}h2{font-size:15px;margin:0;font-weight:600}.section-heading h2 span{font-size:11px;background:var(--raised);border:1px solid var(--line);padding:2px 6px;border-radius:4px;margin-left:7px;color:var(--muted)}.subtle{color:var(--faint);font-size:10px}.toolbar{display:flex;gap:10px;padding:0 23px}.search{display:flex;align-items:center;gap:9px;flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:9px 11px;background:var(--bg);color:var(--muted)}.search input{width:100%;min-width:0;border:0;background:none;color:var(--text);font-size:12px;outline:none}.search:focus-within{border-color:var(--accent)}input::placeholder{color:var(--faint)}kbd{border:1px solid var(--line);padding:0 4px;border-radius:3px;font-size:10px}select{max-width:145px;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:0 9px;font-size:11px}.filters{display:flex;gap:5px;padding:17px 23px 15px;flex-wrap:wrap}.filter{border:1px solid transparent;background:transparent;color:var(--muted);border-radius:5px;padding:6px 9px;font-size:11px}.filter[aria-pressed=true]{color:var(--text);border-color:var(--line);background:var(--raised)}.filter span{opacity:.65;margin-left:6px}.filter:hover{color:var(--text)}.list-head{display:flex;justify-content:space-between;padding:10px 23px;border-block:1px solid var(--line);color:var(--faint);font-size:9px;letter-spacing:1px}.session-list{max-height:650px;overflow:auto;scrollbar-color:var(--line) transparent}.session{display:grid;grid-template-columns:minmax(0,1fr) 83px;gap:20px;width:100%;text-align:left;border:0;border-bottom:1px solid #272c2b;background:transparent;padding:19px 23px;position:relative}.session:hover{background:#1c2120}.session[aria-pressed=true]{background:#232b27;box-shadow:inset 2px 0 var(--busy)}.session-top{display:flex;gap:9px;align-items:center;margin-bottom:8px}.session-name{font-size:10px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.badge{font-size:9px;white-space:nowrap;background:color-mix(in srgb,currentColor 8%,transparent);padding:3px 6px;border-radius:4px}.session-title{font-size:13px;font-weight:550;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin-bottom:8px}.session-meta{display:flex;gap:9px;color:var(--faint);font-size:10px;min-width:0}.branch{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.session-context{text-align:right;align-self:center;font-size:12px;font-variant-numeric:tabular-nums}.mini-bar{display:block;height:3px;background:var(--line);margin:8px 0 7px;border-radius:2px;overflow:hidden}.mini-bar i{display:block;background:var(--busy);height:100%}.session-context small{color:var(--faint);font-size:10px}.detail{border-left:1px solid var(--line);background:var(--panel);padding:25px;min-width:0}.detail-empty{padding:85px 20px;text-align:center}.detail-empty p{font-size:12px;margin-top:10px}.empty-symbol{display:block;font-size:36px;color:var(--faint);margin-bottom:20px}.detail-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.detail h2{font-size:21px;line-height:1.4;letter-spacing:-.4px;overflow-wrap:anywhere}.detail-name{color:var(--muted);font-size:11px;margin:10px 0 23px}.detail-section{border-top:1px solid var(--line);padding-top:18px;margin-top:20px}.detail-section h3{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;font-weight:500;color:var(--muted);margin:0 0 12px;display:flex;justify-content:space-between;gap:10px}.detail-section h3 span{font-size:10px;letter-spacing:0;text-transform:none;color:var(--faint)}.response{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:12px;max-height:300px;overflow:auto;color:#cbd3cd}.response.missing{color:var(--faint);font-style:italic}.links{display:flex;gap:8px;flex-wrap:wrap}.work-link{padding:7px 10px;border:1px solid var(--line);border-radius:5px;font-size:11px;color:var(--accent)}.work-link:hover{border-color:var(--accent)}.note{font-size:11px;color:var(--faint);line-height:1.6}.facts{display:grid;grid-template-columns:80px minmax(0,1fr);gap:10px;font-size:11px}.facts dt{color:var(--faint)}.facts dd{margin:0;overflow-wrap:anywhere;color:var(--muted)}.context-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.detail .mini-bar{display:block;height:5px;margin:11px 0}.detail-actions{margin-top:23px;display:flex;justify-content:space-between;align-items:center}.resume{background:var(--accent);color:#201b16;border:0;font-weight:600}.resume:hover{background:#e9c49e}.empty{padding:65px 25px;text-align:center;color:var(--muted);font-size:12px;line-height:1.8}.error{border:1px solid #6b5032;background:#292217;padding:12px 16px;margin-bottom:20px;border-radius:6px;color:var(--stale);font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;padding:23px 0;color:var(--faint);font-size:10px}.tiny-dot{display:inline-block;width:5px;height:5px;background:var(--busy);border-radius:50%;margin-right:6px}.footer-divider{margin:0 8px;color:var(--line)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);border-radius:6px;padding:12px 20px;box-shadow:0 8px 30px #0005;font-size:12px;z-index:3}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.warn{color:var(--stale)}.hot{color:#e69a8e}.mini-bar i.warn,.column i.warn{background:var(--stale)}.mini-bar i.hot,.column i.hot{background:#e69a8e}@media(max-width:1000px){.brand-sub,.local{display:none}.workspace{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr)}.toolbar{flex-wrap:wrap}.sort-label{height:34px}.refresh-info{flex-direction:column;align-items:end}.session{gap:10px;padding-inline:16px}.detail{padding:20px}}@media(max-width:720px){main{padding:25px 16px 0}.topbar{padding:0 20px;height:65px}.intro{align-items:start;gap:10px}.intro p{font-size:12px;max-width:260px}.refresh-info #updated{display:none}.overview{grid-template-columns:1fr}.pressure{border-left:0;border-top:1px solid var(--line)}.fleet-health,.pressure{padding:20px}.workspace{grid-template-columns:1fr}.detail{border-left:0;border-top:1px solid var(--line)}.session-list{max-height:490px}.section-heading,.toolbar{padding-inline:16px}.filters{padding-inline:13px}.brand{font-size:24px}footer{flex-direction:column;gap:8px}.session-title{font-size:12px}.connection{font-size:10px}h1{font-size:27px}.button{white-space:nowrap}}@media(prefers-reduced-motion:no-preference){.session,.button,.work-link{transition:background .15s,border-color .15s}}
|
|
2
|
+
/* Managed conversations */
|
|
3
|
+
.launch-panel{border:1px solid #485045;background:var(--panel);border-radius:9px;margin-bottom:28px}.launch-panel .section-heading{padding:23px 26px}.launch-panel h2{font-size:20px;margin-top:9px}.launch-panel form{padding:0 26px 24px}.launch-fields{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-bottom:18px}.launch-panel label{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted)}.launch-panel input,.launch-panel textarea,.composer textarea,.other-answer input{border:1px solid var(--line);border-radius:6px;padding:12px;background:var(--bg);color:var(--text);width:100%;font:inherit;resize:vertical}.launch-panel input:read-only{color:var(--faint)}.launch-panel textarea,.composer textarea{min-height:95px;font-size:13px;line-height:1.6}.launch-footer{display:flex;justify-content:space-between;gap:24px;align-items:center;margin-top:16px}.launch-footer p{max-width:550px}.form-error{font-size:12px;line-height:1.6;color:#e6aa9c;overflow-wrap:anywhere;margin:12px 0 0}.refresh-info{flex-wrap:wrap;justify-content:end}.conversation-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:26px 0 16px;padding-top:22px;border-top:1px solid var(--line)}.conversation-header h3{font-size:13px;margin:0}.conversation{max-height:520px;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent;padding-right:8px}.chat-message{padding:17px 0;border-bottom:1px solid var(--line)}.chat-message:first-child{padding-top:0}.chat-message.user{color:var(--accent)}.chat-label{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:1px;margin-bottom:10px;color:var(--faint)}.chat-label time{letter-spacing:0;font-size:10px}.chat-message.user .chat-label{color:var(--accent)}.chat-text{font-size:12px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.chat-message.assistant .chat-text{color:#d3dad4}.composer{margin-top:20px}.composer textarea:focus{outline:1px solid var(--accent);outline-offset:0}.composer-footer{display:flex;gap:8px;align-items:center;justify-content:end;margin-top:9px}.composer-footer .note{margin-right:auto;font-size:10px;max-width:240px}.stop{color:var(--stale)}.external-note{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.external-note strong{font-size:12px;color:var(--muted)}.external-note p{font-size:12px;margin:8px 0 14px}.approval{background:#29271e;border:1px solid #61563c;border-radius:7px;padding:17px;margin-top:20px}.approval .eyebrow{color:var(--stale);font-size:9px}.approval h4{font-size:13px;font-weight:500;margin:12px 0;overflow-wrap:anywhere}.tool-input{white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto;font:11px/1.7 ui-monospace,monospace;background:#181a17;padding:12px;border-radius:5px}.approval-actions{display:flex;justify-content:end;gap:8px;margin-top:15px}.approval fieldset{border:0;padding:0;margin:18px 0}.approval legend{font-size:13px;line-height:1.6;margin-bottom:10px}.answer-option{display:flex;align-items:start;gap:8px;font-size:12px;padding:8px 0}.answer-option input{accent-color:var(--accent);margin-top:3px}.answer-option small{display:block;font-size:11px;color:var(--muted);line-height:1.6;margin-top:3px}.other-answer{display:block;font-size:11px;color:var(--muted);margin-top:8px}.other-answer input{margin-top:6px}.detail:has(#composer){display:flex;flex-direction:column}.detail:has(#composer) #control-panel{order:-1}.detail:has(#composer) #detail-content{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}.detail:has(#composer) .conversation-header{margin-top:0;padding-top:0;border:0}@media(max-width:720px){.launch-fields{grid-template-columns:1fr}.launch-footer{flex-direction:column;align-items:stretch;gap:14px}.launch-panel .section-heading{padding:20px}.launch-panel form{padding:0 20px 20px}.refresh-info{gap:8px}.intro .refresh-info .button{padding:8px 9px;font-size:11px}.conversation{max-height:460px}.composer-footer{flex-wrap:wrap}.composer-footer .note{max-width:170px}}
|
|
4
|
+
|
|
5
|
+
/* ── Warp console ─────────────────────────────────────────────────────────────
|
|
6
|
+
Everything below derives from /theme.css, which the server generates from the
|
|
7
|
+
local Warp theme. Surfaces and muted text are mixed from the terminal's own
|
|
8
|
+
background and foreground so any Warp theme produces a coherent dashboard. */
|
|
9
|
+
:root{--bg:var(--w-bg);--panel:color-mix(in oklab,var(--w-bg) 94%,var(--w-fg));--raised:color-mix(in oklab,var(--w-bg) 89%,var(--w-fg));--line:color-mix(in oklab,var(--w-bg) 80%,var(--w-fg));--text:color-mix(in oklab,var(--w-fg) 92%,white);--muted:color-mix(in oklab,var(--w-fg) 68%,var(--w-bg));--faint:color-mix(in oklab,var(--w-fg) 48%,var(--w-bg));--accent:var(--w-accent);--busy:var(--w-green);--idle:color-mix(in oklab,var(--w-cyan) 70%,var(--w-fg));--stale:var(--w-yellow);--dead:color-mix(in oklab,var(--w-red) 72%,var(--w-fg));--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;--code:var(--w-font-size,13px)}
|
|
10
|
+
.topbar{background:color-mix(in oklab,var(--w-bg) 96%,var(--w-fg))}
|
|
11
|
+
|
|
12
|
+
/* Console shell */
|
|
13
|
+
.conversation{max-height:min(62vh,680px);background:var(--w-bg);border:1px solid var(--line);border-radius:8px;padding:10px;font-family:var(--mono);font-feature-settings:"liga" 1,"calt" 1}
|
|
14
|
+
.conversation .note{font-family:inherit;padding:14px}
|
|
15
|
+
#agent-state{font-family:var(--mono);font-size:11px}
|
|
16
|
+
|
|
17
|
+
/* Blocks */
|
|
18
|
+
.block{position:relative;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--line);border-radius:6px;margin-bottom:8px;overflow:hidden}
|
|
19
|
+
.block:last-child{margin-bottom:0}
|
|
20
|
+
.block[data-role="user"]{border-left-color:var(--w-accent);background:color-mix(in oklab,var(--w-bg) 90%,var(--w-accent))}
|
|
21
|
+
.block[data-role="assistant"]{border-left-color:color-mix(in oklab,var(--w-cyan) 70%,var(--w-bg))}
|
|
22
|
+
.block[data-role="tool"]{border-left-color:color-mix(in oklab,var(--w-fg) 34%,var(--w-bg))}
|
|
23
|
+
.block[data-status="running"]{border-left-color:var(--w-yellow)}
|
|
24
|
+
.block[data-status="error"]{border-left-color:var(--w-red)}
|
|
25
|
+
.block-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:9px;padding:7px 10px;background:color-mix(in oklab,var(--panel) 88%,var(--w-bg));border-bottom:1px solid var(--line);backdrop-filter:blur(6px);font-size:11px;line-height:1.4}
|
|
26
|
+
.block-icon{color:var(--w-accent);width:13px;text-align:center;flex:none}
|
|
27
|
+
.block[data-role="tool"] .block-icon{color:color-mix(in oklab,var(--w-cyan) 75%,var(--w-fg))}
|
|
28
|
+
.block-tool{color:var(--text);font-weight:600;letter-spacing:.4px;flex:none}
|
|
29
|
+
.block[data-role="user"] .block-tool,.block[data-role="user"] .block-icon{color:var(--w-accent)}
|
|
30
|
+
.block-target{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}
|
|
31
|
+
.block-meta{color:var(--faint);font-size:10px;margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
|
|
32
|
+
.block-target+.block-meta{margin-left:0}
|
|
33
|
+
.block-state{font-size:9px;letter-spacing:.8px;text-transform:uppercase;flex:none}
|
|
34
|
+
.block-state:empty{display:none}
|
|
35
|
+
.block-state{background:none;border:0;padding:0;margin:0;border-radius:0}
|
|
36
|
+
.block-state.is-running{color:var(--w-yellow)}
|
|
37
|
+
.block-state.is-failed{color:color-mix(in oklab,var(--w-red) 70%,var(--w-fg))}
|
|
38
|
+
.block-state.is-interrupted{color:var(--faint)}
|
|
39
|
+
.block-actions{display:flex;gap:2px;flex:none;opacity:0;transition:opacity .12s ease}
|
|
40
|
+
.block:hover .block-actions,.block:focus-within .block-actions{opacity:1}
|
|
41
|
+
@media (hover:none){.block-actions{opacity:1}}
|
|
42
|
+
.block-button{background:none;border:0;padding:2px 5px;border-radius:4px;color:var(--faint);font-size:12px;line-height:1}
|
|
43
|
+
.block-button:hover{color:var(--text);background:var(--raised)}
|
|
44
|
+
.block-body{padding:2px 0}
|
|
45
|
+
.block.collapsed .block-body{display:none}
|
|
46
|
+
.block.collapsed .block-head{border-bottom:0}
|
|
47
|
+
.block.collapsed [data-collapse]{transform:rotate(-90deg)}
|
|
48
|
+
|
|
49
|
+
/* Code, results, prose */
|
|
50
|
+
.block-code{margin:0;padding:9px 12px;overflow:auto;max-height:420px;font:var(--code)/1.65 var(--mono);scrollbar-color:var(--line) transparent}
|
|
51
|
+
.block-code code{background:none;padding:0;font:inherit;white-space:pre}
|
|
52
|
+
.block-code.is-command code::before{content:"$ ";color:var(--w-green);user-select:none}
|
|
53
|
+
.block-plain{margin:0;padding:9px 12px;font:var(--code)/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text)}
|
|
54
|
+
.block-result{border-top:1px dashed var(--line)}
|
|
55
|
+
.block-result .block-code{color:var(--muted);max-height:360px}
|
|
56
|
+
.block-result.is-error .block-code{color:color-mix(in oklab,var(--w-red) 60%,var(--w-fg))}
|
|
57
|
+
.block-note{margin:0;padding:4px 12px 8px;font-size:10px;color:var(--faint)}
|
|
58
|
+
.block-todos{margin:0;padding:9px 14px;list-style:none;font:var(--code)/1.9 var(--mono)}
|
|
59
|
+
.block-todos li{display:flex;gap:8px;color:var(--muted)}
|
|
60
|
+
.block-todos li span{color:var(--faint);flex:none}
|
|
61
|
+
.block-todos .todo-completed{color:var(--faint);text-decoration:line-through}
|
|
62
|
+
.block-todos .todo-in_progress{color:var(--w-yellow)}
|
|
63
|
+
.block-todos .todo-in_progress span{color:var(--w-yellow)}
|
|
64
|
+
.block-prose{padding:10px 13px;font:var(--code)/1.75 var(--mono);color:var(--text);overflow-wrap:anywhere}
|
|
65
|
+
.block-prose>:first-child{margin-top:0}
|
|
66
|
+
.block-prose>:last-child{margin-bottom:0}
|
|
67
|
+
.block-prose p,.block-prose ul,.block-prose ol,.block-prose blockquote{margin:0 0 .75em}
|
|
68
|
+
.block-prose h1,.block-prose h2,.block-prose h3,.block-prose h4{margin:1.1em 0 .5em;font-size:1em;font-weight:700;color:var(--w-accent);letter-spacing:.3px}
|
|
69
|
+
.block-prose ul,.block-prose ol{padding-left:1.4em}
|
|
70
|
+
.block-prose li{margin:.15em 0}
|
|
71
|
+
.block-prose a{color:color-mix(in oklab,var(--w-cyan) 70%,var(--w-fg));text-decoration:underline;text-underline-offset:2px}
|
|
72
|
+
.block-prose code{background:var(--raised);padding:1px 5px;border-radius:3px;font-size:.94em;color:var(--w-yellow)}
|
|
73
|
+
.block-prose pre{margin:.7em 0;background:var(--w-bg);border:1px solid var(--line);border-radius:5px}
|
|
74
|
+
.block-prose pre code{background:none;padding:0;color:inherit}
|
|
75
|
+
.block-prose blockquote{border-left:2px solid var(--line);padding-left:12px;color:var(--muted)}
|
|
76
|
+
.block-prose hr{border:0;border-top:1px solid var(--line);margin:1em 0}
|
|
77
|
+
.block-prose table{border-collapse:collapse;font-size:.94em;margin:.6em 0;display:block;overflow:auto}
|
|
78
|
+
.block-prose th,.block-prose td{border:1px solid var(--line);padding:4px 9px;text-align:left}
|
|
79
|
+
.block-prose th{color:var(--w-accent);font-weight:600}
|
|
80
|
+
.block-prose img{max-width:100%}
|
|
81
|
+
|
|
82
|
+
/* Syntax theme, mixed from the terminal palette so it follows the active Warp theme. */
|
|
83
|
+
.hljs{color:var(--text);background:none}
|
|
84
|
+
.hljs-comment,.hljs-quote{color:var(--faint);font-style:italic}
|
|
85
|
+
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag,.hljs-name{color:color-mix(in oklab,var(--w-green) 80%,var(--w-fg))}
|
|
86
|
+
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:var(--w-yellow)}
|
|
87
|
+
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-selector-attr,.hljs-template-variable{color:color-mix(in oklab,var(--w-magenta) 45%,var(--w-fg))}
|
|
88
|
+
.hljs-title,.hljs-section,.hljs-title.function_,.hljs-title.class_{color:color-mix(in oklab,var(--w-cyan) 62%,var(--w-fg))}
|
|
89
|
+
.hljs-type,.hljs-class .hljs-title,.hljs-built_in,.hljs-builtin-name{color:color-mix(in oklab,var(--w-cyan) 80%,var(--w-fg))}
|
|
90
|
+
.hljs-attr,.hljs-variable,.hljs-property,.hljs-selector-id,.hljs-selector-class{color:color-mix(in oklab,var(--w-blue) 40%,var(--w-fg))}
|
|
91
|
+
.hljs-params{color:var(--text)}
|
|
92
|
+
.hljs-meta,.hljs-tag{color:var(--muted)}
|
|
93
|
+
.hljs-emphasis{font-style:italic}
|
|
94
|
+
.hljs-strong{font-weight:700}
|
|
95
|
+
.hljs-addition{color:var(--w-green);background:color-mix(in oklab,var(--w-bg) 88%,var(--w-green));display:inline-block;width:100%}
|
|
96
|
+
.hljs-deletion{color:color-mix(in oklab,var(--w-red) 70%,var(--w-fg));background:color-mix(in oklab,var(--w-bg) 88%,var(--w-red));display:inline-block;width:100%}
|
|
97
|
+
|
|
98
|
+
/* Composer reads as a prompt line rather than a comment box. */
|
|
99
|
+
.composer textarea{font:var(--code)/1.6 var(--mono);background:var(--w-bg);border-color:var(--line);color:var(--text)}
|
|
100
|
+
.composer textarea:focus{border-color:var(--w-accent);outline:none;box-shadow:0 0 0 1px color-mix(in oklab,var(--w-accent) 40%,transparent)}
|
|
101
|
+
#composer-hint{font-family:var(--mono);font-size:10px}
|
|
102
|
+
.tool-input{font-family:var(--mono);background:var(--w-bg);border:1px solid var(--line)}
|
|
103
|
+
@media (prefers-reduced-motion:reduce){.block-actions{transition:none}}
|
|
104
|
+
|
|
105
|
+
/* ── Resizable inspector ──────────────────────────────────────────────────── */
|
|
106
|
+
.workspace{grid-template-columns:var(--split,58%) 6px minmax(0,1fr)}
|
|
107
|
+
.splitter{background:var(--line);cursor:col-resize;position:relative;touch-action:none}
|
|
108
|
+
.splitter::before{content:"";position:absolute;inset:0 -5px;z-index:1}
|
|
109
|
+
.splitter::after{content:"";position:absolute;top:50%;left:50%;translate:-50% -50%;width:2px;height:26px;border-radius:2px;background:var(--faint);opacity:0;transition:opacity .12s ease}
|
|
110
|
+
.splitter:hover::after,.splitter:focus-visible::after,.splitter[data-dragging]::after{opacity:1}
|
|
111
|
+
.splitter:hover,.splitter[data-dragging]{background:var(--w-accent)}
|
|
112
|
+
.splitter:focus-visible{outline:2px solid var(--w-accent);outline-offset:-1px}
|
|
113
|
+
.detail{border-left:0}
|
|
114
|
+
body[data-resizing]{cursor:col-resize;user-select:none}
|
|
115
|
+
.conversation{height:var(--conv-height,min(62vh,680px));max-height:none;min-height:200px;resize:vertical}
|
|
116
|
+
@media(max-width:1000px){.workspace{grid-template-columns:var(--split,52%) 6px minmax(0,1fr)}}
|
|
117
|
+
@media(max-width:720px){.workspace{grid-template-columns:1fr}.splitter{display:none}.conversation{height:var(--conv-height,460px);resize:none}}
|
|
118
|
+
@media(prefers-reduced-motion:reduce){.splitter::after{transition:none}}
|
|
119
|
+
|
|
120
|
+
/* Approval mode */
|
|
121
|
+
.mode-picker{margin-left:auto;margin-right:10px}
|
|
122
|
+
.mode-picker select{font-family:var(--mono);font-size:10px;padding:3px 6px;height:auto;max-width:none;background:var(--raised)}
|
|
123
|
+
.mode-picker select[data-mode="all"]{color:var(--w-yellow);border-color:color-mix(in oklab,var(--w-yellow) 50%,var(--line))}
|
|
124
|
+
.block-auto{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--faint);flex:none;border:1px solid var(--line);border-radius:3px;padding:0 4px}
|
|
125
|
+
.approval-reason{font-size:11px;color:var(--stale);margin:0 0 12px;overflow-wrap:anywhere}
|
|
126
|
+
#launch-mode-note{min-height:1.4em}
|
|
127
|
+
|
|
128
|
+
/* Slash picker */
|
|
129
|
+
.composer{position:relative}
|
|
130
|
+
.slash-picker{position:absolute;bottom:100%;left:0;right:0;margin:0 0 6px;padding:4px;list-style:none;max-height:300px;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 34px #0009;z-index:4;font-family:var(--mono);scrollbar-color:var(--line) transparent}
|
|
131
|
+
.slash-picker li{display:grid;grid-template-columns:auto auto 1fr;gap:4px 10px;align-items:baseline;padding:6px 9px;border-radius:5px;cursor:pointer}
|
|
132
|
+
.slash-picker li.is-picked{background:var(--raised)}
|
|
133
|
+
.slash-name{color:var(--w-accent);font-size:12px;white-space:nowrap}
|
|
134
|
+
.slash-kind{font-size:9px;color:var(--faint);letter-spacing:.6px;white-space:nowrap}
|
|
135
|
+
.slash-hint{font-size:10px;color:var(--w-yellow);white-space:nowrap}
|
|
136
|
+
.slash-desc{grid-column:1/-1;font-size:10px;color:var(--muted);line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
137
|
+
.slash-picker li.is-picked .slash-desc{color:var(--text);white-space:normal}
|
|
138
|
+
|
|
139
|
+
/* ── Density: the app fills the viewport and only the panes scroll ────────── */
|
|
140
|
+
html,body{height:100%}
|
|
141
|
+
body{display:flex;flex-direction:column;overflow:hidden}
|
|
142
|
+
.topbar{height:46px;flex:none}
|
|
143
|
+
.brand{font-size:19px;gap:8px}
|
|
144
|
+
.brandmark{font-size:22px}
|
|
145
|
+
main{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;padding:12px 2.2% 14px;gap:12px}
|
|
146
|
+
.intro{margin:0;flex:none}
|
|
147
|
+
.refresh-info{margin-left:auto}
|
|
148
|
+
.workspace{flex:1;min-height:0;margin:0}
|
|
149
|
+
.sessions-pane{display:flex;flex-direction:column;min-height:0}
|
|
150
|
+
.section-heading{padding:13px 18px 10px}
|
|
151
|
+
.toolbar,.section-heading,.filters{flex:none}
|
|
152
|
+
.toolbar{padding-inline:18px}
|
|
153
|
+
.filters{padding:10px 18px 9px}
|
|
154
|
+
.list-head{flex:none;padding:7px 18px}
|
|
155
|
+
.session-list{flex:1;min-height:0;max-height:none}
|
|
156
|
+
.session{padding:13px 18px}
|
|
157
|
+
.session-top{margin-bottom:5px}
|
|
158
|
+
.session-title{margin-bottom:5px}
|
|
159
|
+
.detail{overflow:auto;min-height:0;padding:18px;scrollbar-color:var(--line) transparent}
|
|
160
|
+
.detail h2{font-size:16px}
|
|
161
|
+
.detail-name{margin:6px 0 14px}
|
|
162
|
+
.detail-section{padding-top:14px;margin-top:15px}
|
|
163
|
+
.launch-panel{flex:none;max-height:46vh;overflow:auto;margin:0}
|
|
164
|
+
.conversation{height:var(--conv-height,46vh)}
|
|
165
|
+
#error{flex:none;margin:0}
|
|
166
|
+
@media(max-width:720px){
|
|
167
|
+
body{overflow:auto;display:block}
|
|
168
|
+
main{display:block;padding:14px 16px}
|
|
169
|
+
.workspace{min-height:520px}
|
|
170
|
+
.session-list{max-height:420px}
|
|
171
|
+
.detail{overflow:visible}
|
|
172
|
+
}
|
|
173
|
+
.intro{display:flex;align-items:center;gap:18px;padding:0}
|
|
174
|
+
.intro .refresh-info{flex:none;gap:10px}
|
|
175
|
+
@media(max-width:720px){.intro{flex-direction:column;align-items:stretch}.intro .refresh-info{justify-content:end}}
|
|
176
|
+
/* Full-bleed: the cap and the percentage gutters left dead space on a wide display. */
|
|
177
|
+
main{max-width:none;margin:0;padding:10px 12px 12px}
|
|
178
|
+
.topbar{padding:0 14px}
|
|
179
|
+
@media(max-width:720px){main{padding:12px 12px 14px}.topbar{padding:0 14px}}
|
|
180
|
+
.close-agent{padding:3px 8px;font-size:10px;font-family:var(--mono);margin-left:auto;color:var(--muted)}
|
|
181
|
+
.close-agent:hover{color:var(--text)}
|
|
182
|
+
.close-agent[data-armed="1"]{color:color-mix(in oklab,var(--w-red) 70%,var(--w-fg));border-color:color-mix(in oklab,var(--w-red) 50%,var(--line))}
|
|
183
|
+
.close-agent+.mode-picker{margin-left:8px}
|
|
184
|
+
/* Controls live in the header now; the row they used to occupy is gone. */
|
|
185
|
+
.topbar{gap:16px}
|
|
186
|
+
.topbar .connection{margin-left:auto}
|
|
187
|
+
.topbar .refresh-info{flex:none;gap:10px;margin:0;font-size:11px;border-left:1px solid var(--line);padding-left:16px}
|
|
188
|
+
.topbar .refresh-info .button{padding:6px 10px}
|
|
189
|
+
.intro{display:none}
|
|
190
|
+
@media(max-width:900px){.topbar #updated{display:none}}
|
|
191
|
+
@media(max-width:720px){.topbar{gap:10px;height:auto;padding:8px 12px;flex-wrap:wrap}.topbar .refresh-info{border-left:0;padding-left:0}}
|
|
192
|
+
|
|
193
|
+
/* ── The terminal is the pane; the facts fold away underneath it ──────────── */
|
|
194
|
+
.detail:has(#composer){display:flex;flex-direction:column;overflow:hidden;padding:0}
|
|
195
|
+
.detail:has(#composer) #control-panel{order:0;flex:1;min-height:0;display:flex;flex-direction:column;padding:14px 16px 0}
|
|
196
|
+
.detail:has(#composer) .conversation-header{margin:0 0 10px;padding:0;border:0;flex:none}
|
|
197
|
+
/* The console takes whatever is left, until it is dragged to an explicit height. */
|
|
198
|
+
.detail:has(#composer) .conversation{flex:1;min-height:180px;height:auto}
|
|
199
|
+
/* A dragged height is a preference, not a floor: when the composer grows (an image
|
|
200
|
+
tray, an approval card) the console yields rather than pushing the footer offscreen. */
|
|
201
|
+
.detail:has(#composer) .conversation[style*="height"]{flex:0 1 auto}
|
|
202
|
+
.detail:has(#composer) .conversation{min-height:120px}
|
|
203
|
+
.detail:has(#composer) .composer,.detail:has(#composer) #approvals,.detail:has(#composer) #agent-error{flex:none}
|
|
204
|
+
.detail:has(#composer) .composer{margin:10px 0 14px}
|
|
205
|
+
.detail:has(#composer) #approvals{max-height:34vh;overflow:auto}
|
|
206
|
+
.detail:has(#composer) #detail-content{order:2;flex:none;margin:0;padding:0 16px 16px;border:0}
|
|
207
|
+
.detail:has(#composer) #detail-content[hidden]{display:none!important}
|
|
208
|
+
.details-toggle{order:1;flex:none;display:flex;align-items:center;gap:7px;width:100%;text-align:left;border:0;border-top:1px solid var(--line);background:none;color:var(--faint);font:10px/1 var(--mono);letter-spacing:1.1px;text-transform:uppercase;padding:11px 16px}
|
|
209
|
+
.details-toggle:hover{color:var(--muted);background:color-mix(in oklab,var(--panel) 92%,var(--w-fg))}
|
|
210
|
+
.details-chevron{display:inline-block;transition:transform .12s ease;font-size:12px}
|
|
211
|
+
.details-toggle[aria-expanded="true"] .details-chevron{transform:rotate(90deg)}
|
|
212
|
+
.detail:has(#composer) .detail-top{margin:14px 0 10px}
|
|
213
|
+
.context-chip{font-family:var(--mono);font-variant-numeric:tabular-nums}
|
|
214
|
+
.context-chip:empty{display:none}
|
|
215
|
+
.conversation-header{flex-wrap:wrap}
|
|
216
|
+
@media(prefers-reduced-motion:reduce){.details-chevron{transition:none}}
|
|
217
|
+
@media(max-width:720px){.detail:has(#composer){display:block;overflow:visible}.detail:has(#composer) .conversation{height:var(--conv-height,460px)}}
|
|
218
|
+
|
|
219
|
+
/* Sessions a program started, rather than a person */
|
|
220
|
+
.spawn-badge{font-size:9px;color:var(--faint);border:1px solid var(--line);border-radius:3px;padding:1px 4px;white-space:nowrap}
|
|
221
|
+
.spawn-owner{font-size:9px;color:var(--faint);letter-spacing:.4px;white-space:nowrap}
|
|
222
|
+
.session:has(.spawn-owner){opacity:.72}
|
|
223
|
+
.session:has(.spawn-owner):hover,.session:has(.spawn-owner)[aria-pressed=true]{opacity:1}
|
|
224
|
+
.session:has(.spawn-owner) .session-title{font-weight:400;color:var(--muted)}
|
|
225
|
+
.filter[data-filter="background"]{color:var(--faint)}
|
|
226
|
+
|
|
227
|
+
/* Unseen output: shape and colour, never motion alone. */
|
|
228
|
+
.unseen{width:5px;height:5px;border-radius:50%;background:var(--w-accent);flex:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--w-accent) 18%,transparent)}
|
|
229
|
+
|
|
230
|
+
/* Full bleed: no outer gutter, no rounded card. The panes meet the window edges. */
|
|
231
|
+
main{padding:0;gap:0}
|
|
232
|
+
.workspace{border:0;border-radius:0}
|
|
233
|
+
.launch-panel{border-radius:0;border-inline:0;border-top:0}
|
|
234
|
+
#error{border-radius:0;border-inline:0}
|
|
235
|
+
@media(max-width:720px){main{padding:0}.workspace{min-height:520px}}
|
|
236
|
+
|
|
237
|
+
|
|
238
|
+
/* ── Turn pipeline ────────────────────────────────────────────────────────────
|
|
239
|
+
Third line of a row: the latest turn as a CI-style steps bar, the step in
|
|
240
|
+
progress in words, and elapsed time. Colour marks the family of work; the
|
|
241
|
+
words carry the meaning, so the bar is aria-hidden and the row is labelled. */
|
|
242
|
+
.turn{display:flex;align-items:center;gap:10px;margin-top:8px;min-width:0;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
|
|
243
|
+
.steps{display:inline-flex;gap:2px;flex:none;height:6px;max-width:132px;overflow:hidden;border-radius:3px}
|
|
244
|
+
.steps:empty{display:none}
|
|
245
|
+
.steps i{display:block;flex:0 0 auto;width:5px;height:100%;border-radius:1.5px;background:var(--faint);opacity:.85}
|
|
246
|
+
.steps i.k-inspect{background:color-mix(in oklab,var(--w-fg) 42%,var(--w-bg))}
|
|
247
|
+
.steps i.k-change{background:var(--w-accent)}
|
|
248
|
+
.steps i.k-run{background:color-mix(in oklab,var(--w-cyan) 72%,var(--w-fg))}
|
|
249
|
+
.steps i.k-delegate{background:color-mix(in oklab,var(--w-magenta) 45%,var(--w-fg))}
|
|
250
|
+
.steps i.k-ask{background:var(--w-yellow)}
|
|
251
|
+
.steps i.k-other{background:var(--faint)}
|
|
252
|
+
.steps i.k-failed{background:color-mix(in oklab,var(--w-red) 78%,var(--w-fg));opacity:1}
|
|
253
|
+
.step-now{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto;overflow:hidden;white-space:nowrap;color:var(--muted)}
|
|
254
|
+
.step-now .step-icon{flex:none;color:var(--faint);width:10px;text-align:center}
|
|
255
|
+
.step-now.is-live{color:var(--text)}
|
|
256
|
+
.step-now.is-live .step-icon{color:var(--w-accent)}
|
|
257
|
+
.step-target{overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
|
|
258
|
+
.step-now.is-live .step-target{color:var(--muted)}
|
|
259
|
+
.step-when{flex:none;color:var(--faint);font-variant-numeric:tabular-nums}
|
|
260
|
+
.turn:has(.is-live) .step-when{color:var(--w-accent)}
|
|
261
|
+
/* The live dot is the only motion, it is decorative, and it holds still on request. */
|
|
262
|
+
.step-now.is-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--w-accent);flex:none;animation:fleet-live 1.4s ease-in-out infinite}
|
|
263
|
+
@keyframes fleet-live{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
|
|
264
|
+
@media(prefers-reduced-motion:reduce){.step-now.is-live::before{animation:none;opacity:1}}
|
|
265
|
+
.session[aria-pressed=true] .turn{color:var(--text)}
|
|
266
|
+
@media(max-width:1100px){.steps{max-width:80px}}
|
|
267
|
+
|
|
268
|
+
/* ── Ask your sessions ────────────────────────────────────────────────────────
|
|
269
|
+
One question across every transcript. Keyword cards land first; the written
|
|
270
|
+
answer arrives a few seconds later and reorders them. Mono like the console. */
|
|
271
|
+
.ask-panel{max-height:62vh}
|
|
272
|
+
.ask-form{display:flex;gap:10px;padding:0 26px;align-items:stretch}
|
|
273
|
+
.ask-search{flex:1}
|
|
274
|
+
.ask-search input{font-family:var(--mono);font-size:13px}
|
|
275
|
+
.ask-form .sort-label select{max-width:none;height:100%}
|
|
276
|
+
.ask-note{padding:10px 26px 0;max-width:820px}
|
|
277
|
+
.ask-results{padding:14px 26px 22px;font-family:var(--mono)}
|
|
278
|
+
.ask-results:empty{display:none}
|
|
279
|
+
.ask-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:10px}
|
|
280
|
+
.ask-question{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
|
|
281
|
+
.ask-stats{color:var(--faint);font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
|
|
282
|
+
.ask-status{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin:0 0 12px}
|
|
283
|
+
.ask-status.is-live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--w-accent);flex:none;animation:fleet-live 1.4s ease-in-out infinite}
|
|
284
|
+
.ask-status.is-failed{color:color-mix(in oklab,var(--w-red) 70%,var(--w-fg))}
|
|
285
|
+
.ask-answer{border:1px solid color-mix(in oklab,var(--w-accent) 45%,var(--line));border-left:2px solid var(--w-accent);background:color-mix(in oklab,var(--w-bg) 90%,var(--w-accent));border-radius:6px;padding:12px 14px;margin-bottom:14px}
|
|
286
|
+
.ask-answer-label{display:block;font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--w-accent);margin-bottom:6px}
|
|
287
|
+
.ask-answer p{color:var(--text);font-size:12.5px;line-height:1.75}
|
|
288
|
+
.ask-section{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
|
|
289
|
+
.ask-hit{background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--line);border-radius:6px;padding:11px 13px;margin-bottom:8px}
|
|
290
|
+
.ask-hit[data-relevance="high"]{border-left-color:var(--w-green)}
|
|
291
|
+
.ask-hit[data-relevance="medium"]{border-left-color:var(--w-yellow)}
|
|
292
|
+
.ask-hit[data-relevance="low"]{border-left-color:var(--faint)}
|
|
293
|
+
.ask-hit-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;margin-bottom:6px}
|
|
294
|
+
.ask-hit-title{font-size:12.5px;font-weight:600;color:var(--text)}
|
|
295
|
+
.ask-rel{font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 5px}
|
|
296
|
+
.ask-hit[data-relevance="high"] .ask-rel{color:var(--w-green);border-color:color-mix(in oklab,var(--w-green) 50%,var(--line))}
|
|
297
|
+
.ask-hit-meta{font-size:10px;color:var(--faint);margin-left:auto;white-space:nowrap}
|
|
298
|
+
.ask-live{color:var(--w-green)}
|
|
299
|
+
.ask-context{font-size:12px;line-height:1.7;color:var(--text);margin:0 0 6px}
|
|
300
|
+
.ask-quote{margin:0 0 8px;padding:4px 10px;border-left:2px solid color-mix(in oklab,var(--w-cyan) 60%,var(--w-bg));color:var(--muted);font-size:11px;line-height:1.6;font-style:italic;overflow-wrap:anywhere}
|
|
301
|
+
.ask-snippets{margin:4px 0 6px}
|
|
302
|
+
.ask-snippets summary,.ask-rest summary{cursor:pointer;font-size:10px;color:var(--faint);letter-spacing:.3px}
|
|
303
|
+
.ask-snippets summary:hover,.ask-rest summary:hover{color:var(--muted)}
|
|
304
|
+
.ask-snippet{font-size:11px;line-height:1.65;color:var(--muted);margin:7px 0 0;overflow-wrap:anywhere}
|
|
305
|
+
.ask-role{display:inline-block;font-size:9px;letter-spacing:.8px;text-transform:uppercase;color:var(--w-accent);margin-right:8px;min-width:44px}
|
|
306
|
+
.ask-hit-actions{display:flex;justify-content:end;margin-top:6px}
|
|
307
|
+
.ask-open{padding:4px 9px;font-size:10px;font-family:var(--mono)}
|
|
308
|
+
.ask-rest{margin-top:12px}
|
|
309
|
+
.ask-rest>summary{padding:6px 0}
|
|
310
|
+
.ask-rest .ask-hit{opacity:.8;margin-top:8px}
|
|
311
|
+
.ask-empty{color:var(--muted);font-size:12px}
|
|
312
|
+
#ask-sessions kbd{margin-left:6px;color:var(--faint)}
|
|
313
|
+
@media(prefers-reduced-motion:reduce){.ask-status.is-live::before{animation:none}}
|
|
314
|
+
@media(max-width:720px){.ask-form{flex-wrap:wrap;padding:0 20px}.ask-search{flex-basis:100%}.ask-note,.ask-results{padding-inline:20px}.ask-hit-meta{margin-left:0}}
|
|
315
|
+
|
|
316
|
+
/* ── Image attachments ────────────────────────────────────────────────────── */
|
|
317
|
+
.attach-tray{display:flex;gap:10px;flex-wrap:wrap;padding:8px 0 10px}
|
|
318
|
+
.attach-thumb{position:relative;margin:0;width:112px;font-family:var(--mono);font-size:9px;color:var(--faint)}
|
|
319
|
+
.attach-thumb img{display:block;width:112px;height:80px;object-fit:cover;border-radius:5px;border:1px solid var(--line);background:var(--w-bg)}
|
|
320
|
+
.attach-thumb figcaption{margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
321
|
+
.attach-remove{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;border:0;background:color-mix(in oklab,var(--w-bg) 80%,transparent);color:var(--text);font-size:13px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}
|
|
322
|
+
.attach-remove:hover{background:color-mix(in oklab,var(--w-red) 60%,var(--w-bg))}
|
|
323
|
+
.composer.is-dropping textarea{border-color:var(--w-accent);box-shadow:0 0 0 1px color-mix(in oklab,var(--w-accent) 45%,transparent);background:color-mix(in oklab,var(--w-bg) 92%,var(--w-accent))}
|
|
324
|
+
.block-attachments{display:flex;gap:8px;flex-wrap:wrap;padding:10px 13px 0}
|
|
325
|
+
.block-attachments a{display:block;border-radius:5px;overflow:hidden;border:1px solid var(--line);background:var(--w-bg)}
|
|
326
|
+
.block-attachments img{display:block;max-width:280px;max-height:200px;object-fit:contain}
|
|
327
|
+
.block-attachments+.block-prose{padding-top:8px}
|
|
328
|
+
|
|
329
|
+
/* A Fleet conversation currently driven by a terminal */
|
|
330
|
+
.badge.elsewhere{color:var(--stale)}
|
|
331
|
+
.badge.elsewhere.busy{color:var(--busy)}
|
|
332
|
+
#composer-hint.is-held{color:var(--stale);max-width:none}
|
|
333
|
+
|
|
334
|
+
/* Shared dialogs: a quiet, friendly layer above the control room. */
|
|
335
|
+
body[data-modal]{overflow:hidden}
|
|
336
|
+
.modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:32px;background:color-mix(in oklab,var(--bg) 72%,transparent);backdrop-filter:blur(5px)}
|
|
337
|
+
.modal{width:min(960px,100%);max-height:min(820px,calc(100dvh - 64px));display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--panel);border:1px solid color-mix(in oklab,var(--line) 70%,var(--accent));border-radius:20px;box-shadow:0 32px 100px #0007,0 2px 8px #0003;color:var(--text)}
|
|
338
|
+
.modal-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:32px 32px 25px}
|
|
339
|
+
.modal-heading{display:flex;align-items:flex-start;gap:18px;min-width:0}
|
|
340
|
+
.modal-spark{color:var(--accent);font-size:42px;line-height:1;margin-top:14px;transform:rotate(-12deg)}
|
|
341
|
+
.modal-eyebrow{display:block;color:var(--accent);font-size:9px;font-weight:650;letter-spacing:1.8px;margin-bottom:9px}
|
|
342
|
+
.modal h2{font-size:27px;font-weight:550;letter-spacing:-.8px;line-height:1.25;margin:0}
|
|
343
|
+
.modal-heading p{font-size:12px;margin-top:8px;line-height:1.6}
|
|
344
|
+
.modal-close{flex:none;width:36px;height:36px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);font-size:15px}
|
|
345
|
+
.modal-close:hover{background:var(--raised);border-color:var(--line);color:var(--text)}
|
|
346
|
+
.modal-body{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--line) transparent}
|
|
347
|
+
.modal :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
|
|
348
|
+
.modal .button{border-radius:8px;min-height:40px;padding:10px 17px;white-space:nowrap}
|
|
349
|
+
.modal .resume{color:var(--bg);background:var(--accent)}
|
|
350
|
+
.modal .resume:hover{background:color-mix(in oklab,var(--accent) 82%,var(--text))}
|
|
351
|
+
.modal-foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:10px;background:color-mix(in oklab,var(--bg) 35%,var(--panel))}
|
|
352
|
+
.modal-foot kbd{padding:2px 5px;margin-right:4px;color:var(--muted);background:var(--panel)}
|
|
353
|
+
.shortcut-gap{margin-left:12px}
|
|
354
|
+
.modal-status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);vertical-align:middle;margin-right:8px}
|
|
355
|
+
.ask-bar{flex:none;display:flex;align-items:center;gap:12px;margin:0 32px 20px;padding:9px 10px 9px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
|
|
356
|
+
.ask-bar:focus-within{border-color:color-mix(in oklab,var(--accent) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 9%,transparent)}
|
|
357
|
+
.ask-input-wrap{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
|
|
358
|
+
.ask-icon{color:var(--accent);font-size:28px;line-height:1}
|
|
359
|
+
#ask-input{width:100%;min-width:0;padding:10px 0;background:none;border:0;color:var(--text);font-family:inherit;font-size:14px;line-height:1.5}
|
|
360
|
+
#ask-input:focus-visible{outline:0}
|
|
361
|
+
.modal .ask-model{height:36px;max-width:100px;background:transparent;border:0;font-size:11px;padding:0 8px;color:var(--muted)}
|
|
362
|
+
.ask-content{padding:0 32px 24px;min-height:260px}
|
|
363
|
+
.suggestion-heading{display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:1.2px;color:var(--muted);padding:7px 2px 12px}
|
|
364
|
+
.suggestion-heading>span+span{letter-spacing:0;font-size:10px}
|
|
365
|
+
.ask-suggestion{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:17px 12px;border-radius:8px;color:var(--muted)}
|
|
366
|
+
.ask-suggestion:last-child{border-bottom-color:transparent}
|
|
367
|
+
.ask-suggestion:hover{background:var(--raised);color:var(--text)}
|
|
368
|
+
.ask-suggestion>span:last-child{margin-left:auto;color:var(--faint)}
|
|
369
|
+
.suggestion-symbol{width:26px;text-align:center;font-size:22px;color:var(--accent)}
|
|
370
|
+
.ask-suggestion strong{display:block;font-size:13px;font-weight:550;color:var(--text);margin-bottom:5px}
|
|
371
|
+
.ask-suggestion small{display:block;font-size:11px;color:var(--muted)}
|
|
372
|
+
.modal-ask .ask-head{flex-wrap:wrap;padding:6px 0 12px;margin:0}
|
|
373
|
+
.modal-ask .ask-stats{white-space:normal}
|
|
374
|
+
.modal-ask .ask-answer{border:0;border-radius:10px;padding:20px 22px;margin:8px 0 16px;background:color-mix(in oklab,var(--accent) 8%,var(--panel))}
|
|
375
|
+
.modal-ask .ask-answer p{font-size:14px;line-height:1.8}
|
|
376
|
+
.modal-ask .ask-hit{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:20px 4px;margin:0;background:transparent}
|
|
377
|
+
.modal-ask .ask-hit-title{font-size:14px}
|
|
378
|
+
.modal-ask .ask-hit-meta{white-space:normal}
|
|
379
|
+
.modal-ask .ask-hit-actions{margin-top:12px}
|
|
380
|
+
.modal-ask .ask-open{min-height:34px;font-family:inherit;font-size:11px;padding:7px 11px}
|
|
381
|
+
.modal-ask .ask-empty{padding:32px 0}
|
|
382
|
+
.modal-launch{max-height:min(820px,calc(100dvh - 64px));margin:0;overflow:hidden;border:1px solid color-mix(in oklab,var(--line) 70%,var(--accent));border-radius:20px}
|
|
383
|
+
.modal-launch form{padding:0}
|
|
384
|
+
.launch-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px;padding:3px 32px 28px}
|
|
385
|
+
.modal-launch .launch-task{display:flex;flex-direction:column;min-width:0}
|
|
386
|
+
.modal-launch label{font-size:12px;font-weight:500;color:var(--text);gap:8px}
|
|
387
|
+
.modal-launch .launch-task>label{margin-bottom:12px}
|
|
388
|
+
.modal-launch .launch-task textarea{flex:1;min-height:240px;resize:vertical;border-radius:12px;padding:18px;font-family:inherit;font-size:14px;line-height:1.8}
|
|
389
|
+
.modal-launch textarea::placeholder{color:var(--muted)}
|
|
390
|
+
.modal-launch .launch-task-note{margin-top:12px;color:var(--muted);font-weight:400}
|
|
391
|
+
.modal-launch .launch-fields{grid-template-columns:minmax(0,1fr);gap:19px;margin:0;padding-left:26px;border-left:1px solid var(--line)}
|
|
392
|
+
.modal-launch .launch-fields input,.modal-launch .launch-fields select{max-width:none;width:100%;height:42px;padding:10px 12px;border-radius:8px;background:var(--bg);font-size:12px;color:var(--text)}
|
|
393
|
+
.modal-launch .note{color:var(--muted);font-weight:400;font-size:10px;line-height:1.6}
|
|
394
|
+
.field-optional{float:right;color:var(--muted);font-size:10px;font-weight:400}
|
|
395
|
+
.modal-launch .launch-footer{margin:0;padding:18px 32px;gap:16px;border-top:1px solid var(--line);background:color-mix(in oklab,var(--bg) 35%,var(--panel))}
|
|
396
|
+
.modal-launch .form-error{margin:0;padding:0 32px 18px}
|
|
397
|
+
@media(prefers-reduced-motion:no-preference){
|
|
398
|
+
.modal{animation:modal-arrive .2s cubic-bezier(.16,1,.3,1)}
|
|
399
|
+
.modal-backdrop{animation:modal-reveal .15s ease-out}
|
|
400
|
+
.modal button{transition:background .15s,color .15s}
|
|
401
|
+
@keyframes modal-arrive{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
|
|
402
|
+
@keyframes modal-reveal{from{opacity:0}to{opacity:1}}
|
|
403
|
+
}
|
|
404
|
+
@media(max-width:720px){
|
|
405
|
+
.modal-backdrop{padding:12px}
|
|
406
|
+
.modal,.modal-launch{max-height:calc(100dvh - 24px);border-radius:16px}
|
|
407
|
+
.modal-head{padding:24px 20px 20px;gap:8px}
|
|
408
|
+
.modal-heading{gap:12px}
|
|
409
|
+
.modal-spark{font-size:30px;margin-top:18px}
|
|
410
|
+
.modal h2{font-size:23px}
|
|
411
|
+
.modal-heading p{font-size:11px}
|
|
412
|
+
.modal-eyebrow{font-size:8px;letter-spacing:1.2px}
|
|
413
|
+
.ask-bar{margin:0 20px 16px;gap:6px;padding:8px;flex-wrap:wrap}
|
|
414
|
+
.ask-input-wrap{flex-basis:100%;padding:0 5px}
|
|
415
|
+
.modal .ask-model{margin-right:auto}
|
|
416
|
+
.ask-content{padding:0 20px 20px;min-height:220px}
|
|
417
|
+
.suggestion-heading>span+span{display:none}
|
|
418
|
+
.modal-foot{padding:14px 20px;flex-wrap:wrap;gap:10px}
|
|
419
|
+
.launch-layout{grid-template-columns:minmax(0,1fr);padding:0 20px 24px;gap:24px}
|
|
420
|
+
.modal-launch .launch-task textarea{min-height:180px}
|
|
421
|
+
.modal-launch .launch-fields{padding:22px 0 0;border-left:0;border-top:1px solid var(--line);gap:18px}
|
|
422
|
+
.modal-launch .launch-footer{padding:16px 20px;flex-direction:row;flex-wrap:wrap}
|
|
423
|
+
.modal-launch .launch-footer .button{margin-left:auto}
|
|
424
|
+
.modal-launch .form-error{padding-inline:20px}
|
|
425
|
+
}
|
|
426
|
+
|
|
427
|
+
/* ── The archive ──────────────────────────────────────────────────────────────
|
|
428
|
+
A strip between the filters and the list, present only where putting sessions
|
|
429
|
+
away is the thing you came to do: under Offline, and inside Archived itself. */
|
|
430
|
+
.archive-bar{flex:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 18px;border-top:1px solid var(--line);background:color-mix(in oklab,var(--panel) 80%,var(--bg));font-size:11px;color:var(--muted)}
|
|
431
|
+
.archive-text{min-width:0}
|
|
432
|
+
.archive-days{max-width:96px;height:26px;padding:0 6px;font-size:11px}
|
|
433
|
+
.archive-bar .button{padding:5px 10px;font-size:11px}
|
|
434
|
+
.archive-none{color:var(--faint)}
|
|
435
|
+
.archive-auto{display:flex;align-items:center;gap:6px;margin-left:auto;color:var(--faint);white-space:nowrap;cursor:pointer}
|
|
436
|
+
.archive-auto:hover{color:var(--muted)}
|
|
437
|
+
.archive-auto input{accent-color:var(--accent);margin:0}
|
|
438
|
+
.filter[data-filter="archived"]{color:var(--faint)}
|
|
439
|
+
/* An archived row is legible but visibly set aside, the way Background rows are. */
|
|
440
|
+
.session:has(.archived-tag){opacity:.7}
|
|
441
|
+
.session:has(.archived-tag):hover,.session:has(.archived-tag)[aria-pressed=true]{opacity:1}
|
|
442
|
+
.archived-tag{font-size:9px;color:var(--faint);border:1px solid var(--line);border-radius:3px;padding:1px 4px;white-space:nowrap}
|
|
443
|
+
.archived-note{margin-top:14px}
|
|
444
|
+
.detail-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:end}
|
|
445
|
+
@media(max-width:720px){.archive-bar{padding-inline:12px}.archive-auto{margin-left:0}}
|
|
446
|
+
|
|
447
|
+
/* ---- Update pill -------------------------------------------------------- */
|
|
448
|
+
/* Shown only when npm has a newer Fleet. Accent-tinted so it reads as an offer
|
|
449
|
+
sitting next to Refresh, never as an error. */
|
|
450
|
+
.topbar .update-pill{border-color:color-mix(in oklab,var(--accent) 55%,var(--line));background:color-mix(in oklab,var(--accent) 14%,var(--raised));color:color-mix(in oklab,var(--accent) 72%,var(--text));font-weight:600;font-variant-numeric:tabular-nums}
|
|
451
|
+
.topbar .update-pill:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 24%,var(--raised))}
|
|
452
|
+
.topbar .update-pill:disabled{opacity:.72;cursor:default}
|
|
453
|
+
@media(prefers-reduced-motion:no-preference){.update-pill:not([hidden]){animation:update-pill-in .3s ease-out}}
|
|
454
|
+
@keyframes update-pill-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
|