agenter-app 0.0.0-stage → 1.0.0

package/public/style.css

@@ -0,0 +1,551 @@
+/* Warm charcoal neutrals with a soft pastel accent. The accent is a fill color
+   (buttons, toggles) with dark text on it; --accent-ink is the same hue tuned
+   to be readable as text on the page background. */
+:root {
+  --sans: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
+  --mono: "Geist Mono", "Cascadia Code", "Cascadia Mono", ui-monospace, Consolas, monospace;
+
+  /* accent presets (picker in the sidebar) */
+  --accent: #b7d4a6;
+  --accent-deep: #4c7a38;
+
+  --bg: #f4f3ef;
+  --sidebar: #ecebe6;
+  --panel: #fbfbf9;
+  --panel-2: #f0efea;
+  --hover: rgba(30, 28, 20, .05);
+  --border: #e0ded7;
+  --border-strong: #cbc8bf;
+  --text: #1c1c1a;
+  --text-2: #4b4a45;
+  --muted: #7d7b74;
+  --accent-ink: var(--accent-deep);
+  --accent-soft: color-mix(in srgb, var(--accent) 28%, transparent);
+  --accent-text: #161813;
+  --warn: #a8640a;
+  --warn-soft: rgba(214, 140, 30, .13);
+  --danger: #c2413f;
+  --danger-soft: rgba(194, 65, 63, .1);
+  --ok: #3d7f45;
+  --ok-soft: rgba(61, 127, 69, .12);
+  --work: #2f6fbf;
+  --work-soft: rgba(47, 111, 191, .11);
+  --code-bg: #efeee9;
+  --del-bg: #f8e4e1;
+  --add-bg: #e3efdc;
+  --shadow-sm: 0 1px 2px rgba(30, 28, 20, .06);
+  --shadow: 0 1px 3px rgba(30, 28, 20, .06), 0 8px 24px rgba(30, 28, 20, .06);
+  --radius: 10px;
+  --avatar-l: 40%;
+  color-scheme: light;
+}
+:root[data-theme="dark"] {
+  --bg: #1c1c1c;
+  --sidebar: #1f1f1f;
+  --panel: #252525;
+  --panel-2: #2b2b2b;
+  --hover: rgba(255, 255, 255, .045);
+  --border: #303030;
+  --border-strong: #3d3d3d;
+  --text: #ededea;
+  --text-2: #bdbcb7;
+  --muted: #8c8b86;
+  --accent-ink: var(--accent);
+  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
+  --warn: #e9b45c;
+  --warn-soft: rgba(233, 180, 92, .13);
+  --danger: #ea7a72;
+  --danger-soft: rgba(234, 122, 114, .12);
+  --ok: #8ccf8a;
+  --ok-soft: rgba(140, 207, 138, .12);
+  --work: #79b0f2;
+  --work-soft: rgba(121, 176, 242, .12);
+  --code-bg: #1f1f1f;
+  --del-bg: #3a2322;
+  --add-bg: #253222;
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
+  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 12px 32px rgba(0, 0, 0, .3);
+  --avatar-l: 70%;
+  color-scheme: dark;
+}
+:root[data-accent="clay"] { --accent: #dc9474; --accent-deep: #a2522f; }
+:root[data-accent="teal"] { --accent: #73cfcb; --accent-deep: #1d7a76; }
+:root[data-accent="rose"] { --accent: #e58aa6; --accent-deep: #ad3a61; }
+:root[data-accent="lavender"] { --accent: #b8acf2; --accent-deep: #6450c4; }
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 14px/1.55 var(--sans);
+  -webkit-font-smoothing: antialiased;
+  overflow: hidden;
+}
+code, pre, kbd, .mono { font-family: var(--mono); font-size: 12.5px; }
+pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
+button { font: inherit; color: inherit; }
+a { color: var(--accent-ink); }
+kbd {
+  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 5px; text-align: center;
+  border: 1px solid var(--border-strong); border-bottom-width: 2px; background: var(--panel);
+  color: var(--text-2); font-size: 11px; line-height: 16px;
+}
+.ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
+
+/* ---------- shell ---------- */
+.app { display: flex; height: 100vh; }
+.sidebar {
+  width: 300px; flex: none; display: flex; flex-direction: column; gap: 6px;
+  background: var(--sidebar); border-right: 1px solid var(--border); padding: 14px 10px 10px; min-height: 0;
+}
+.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 8px; }
+.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
+.logo { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); position: relative; }
+.logo::after { content: ""; position: absolute; inset: 6px; background: var(--accent-text); transform: rotate(45deg); border-radius: 2px; }
+.conn { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+.conn.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
+.conn.bad { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
+
+.nav-item {
+  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
+  background: transparent; cursor: pointer; font-weight: 600; text-align: left;
+}
+.nav-item:hover { background: var(--hover); }
+.nav-item.active { background: var(--panel); box-shadow: var(--shadow-sm); }
+.count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--warn); color: #fff; font-size: 11.5px; font-weight: 700; text-align: center; line-height: 19px; }
+
+.search { position: relative; display: flex; align-items: center; margin: 4px 0 2px; }
+.search .ic { position: absolute; left: 10px; color: var(--muted); width: 14px; height: 14px; }
+.search input {
+  width: 100%; padding: 7px 34px 7px 31px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--panel); color: var(--text); font: inherit; font-size: 13px;
+}
+.search input:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; }
+.search input::-webkit-search-cancel-button { display: none; }
+.search kbd { position: absolute; right: 8px; }
+
+.session-list { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
+.group-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 10px 4px; display: flex; justify-content: space-between; }
+.s-item {
+  display: grid; grid-template-columns: 32px 1fr auto; gap: 0 10px; align-items: center;
+  padding: 7px 8px; border-radius: 9px; cursor: pointer; position: relative;
+}
+.s-item:hover { background: var(--hover); }
+.s-item.selected { background: var(--panel); box-shadow: var(--shadow-sm); }
+.s-item.dim .avatar, .s-item.dim .s-name { opacity: .6; }
+.s-main { min-width: 0; }
+.s-name { font-weight: 600; font-size: 13.5px; display: flex; align-items: center; min-width: 0; }
+.s-name .s-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.s-name .agent-tag { flex: none; }
+.s-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.s-sub.needs { color: var(--warn); font-weight: 600; }
+.s-when { font-size: 11px; color: var(--muted); align-self: start; padding-top: 2px; }
+
+.avatar {
+  --h: 240;
+  width: 32px; height: 32px; border-radius: 9px; flex: none; position: relative;
+  display: grid; place-items: center; font-weight: 700; font-size: 12.5px; letter-spacing: -.02em;
+  color: hsl(var(--h) 70% var(--avatar-l)); background: hsl(var(--h) 70% 50% / .14);
+}
+.avatar.lg { width: 40px; height: 40px; border-radius: 11px; font-size: 15px; }
+.avatar .st { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--sidebar); background: var(--muted); }
+.s-item.selected .avatar .st { border-color: var(--panel); }
+.st.working { background: var(--work); }
+.st.waiting { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
+.st.vscode { background: var(--warn); }
+.st.idle { background: var(--ok); }
+.st.dormant, .st.ended { background: var(--border-strong); }
+@keyframes pulse { 50% { opacity: .35; } }
+
+/* plan usage */
+.usage { border-top: 1px solid var(--border); padding: 10px 6px 4px; display: flex; flex-direction: column; gap: 10px; }
+.usage-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
+.usage-head .plan { text-transform: none; letter-spacing: 0; font-weight: 500; padding: 0 6px; border-radius: 99px; background: var(--panel-2); }
+.usage-head button { margin-left: auto; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 5px; display: grid; }
+.usage-head button:hover { color: var(--text); background: var(--hover); }
+.usage-head button.spin .ic { animation: spin .8s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+.meter { --c: var(--accent-ink); }
+.meter.warn { --c: var(--warn); }
+.meter.crit { --c: var(--danger); }
+.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: var(--text-2); }
+.meter-top b { font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
+.meter.warn .meter-top b, .meter.crit .meter-top b { color: var(--c); }
+.bar { height: 6px; border-radius: 99px; background: var(--panel-2); margin: 5px 0 4px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
+.bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); transition: width .4s ease; }
+.meter-sub { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
+.usage-note { font-size: 11.5px; color: var(--muted); }
+.usage-block { display: flex; flex-direction: column; gap: 10px; }
+.usage-head .usage-toggle {
+  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 2px; margin: -2px; border: 0; border-radius: 5px;
+  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; text-align: left;
+}
+.usage-head .usage-toggle:hover { color: var(--text); background: none; }
+.usage-sum { margin-left: auto; display: flex; gap: 5px; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.usage-sum i { font-style: normal; color: var(--muted); font-weight: 400; }
+.usage-sum .warn { color: var(--warn); }
+.usage-sum .crit { color: var(--danger); }
+.usage-head .usage-toggle + button { margin-left: 4px; }
+.usage-block + .usage-block { border-top: 1px dashed var(--border); padding-top: 10px; }
+.agent-tag {
+  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 5px; vertical-align: 1px;
+  font-size: 10px; font-weight: 600; letter-spacing: .02em; line-height: 16px;
+  background: var(--panel-2); color: var(--text-2); border: 1px solid var(--border);
+}
+.head-title .agent-tag { flex: none; margin-left: 0; }
+.usage-note.err { color: var(--warn); }
+
+.usage-banner { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: var(--radius); margin-bottom: 22px; border: 1px solid var(--warn); background: var(--warn-soft); }
+.usage-banner.crit { border-color: var(--danger); background: var(--danger-soft); }
+.usage-banner .ic { color: var(--warn); width: 18px; height: 18px; }
+.usage-banner.crit .ic { color: var(--danger); }
+.usage-banner b { display: block; }
+.usage-banner span { font-size: 13px; color: var(--text-2); }
+
+.sidebar-foot { border-top: 1px solid var(--border); padding: 10px 6px 2px; display: flex; flex-direction: column; gap: 8px; }
+.settings > summary {
+  list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
+  font-size: 13px; font-weight: 500; color: var(--text-2); padding: 4px 6px; margin: 0 -6px; border-radius: 7px;
+}
+.settings > summary::-webkit-details-marker { display: none; }
+.settings > summary:hover { background: var(--hover); color: var(--text); }
+.settings > summary .ic { width: 14px; height: 14px; }
+.settings > summary .chev { margin-left: auto; transition: transform .15s; transform: rotate(180deg); }
+.settings[open] > summary .chev { transform: none; }
+.settings-body { display: flex; flex-direction: column; gap: 9px; padding: 8px 0 4px; }
+.select-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
+.select-row span { margin-right: auto; }
+.select-row select {
+  font: inherit; font-size: 12.5px; color: var(--text); background: var(--panel); cursor: pointer;
+  border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px 6px;
+}
+.select-row select:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.card-head .countdown { color: var(--warn); font-variant-numeric: tabular-nums; }
+.theme-row { display: flex; align-items: center; font-size: 13px; color: var(--text-2); }
+.theme-row > span { margin-right: auto; }
+.segmented { display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--border); }
+.segmented button {
+  display: grid; place-items: center; width: 28px; height: 22px; border: 0; border-radius: 6px;
+  background: transparent; color: var(--muted); cursor: pointer;
+}
+.segmented button:hover { color: var(--text); }
+.segmented button[aria-checked="true"] { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
+.segmented button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
+.segmented .ic { width: 14px; height: 14px; }
+.accent-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-2); }
+.accent-row span { margin-right: auto; }
+.accent-row button {
+  width: 16px; height: 16px; border-radius: 4px; border: 0; padding: 0; cursor: pointer;
+  background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
+}
+.accent-row button[aria-checked="true"] { outline: 2px solid var(--text-2); outline-offset: 2px; }
+.accent-row button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.foot-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 -8px; }
+
+.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 13px; color: var(--text-2); }
+.switch input { position: absolute; opacity: 0; pointer-events: none; }
+.switch .track { width: 30px; height: 18px; border-radius: 9px; background: var(--border-strong); position: relative; transition: background .15s; flex: none; }
+.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
+.switch input:checked + .track { background: var(--accent-ink); }
+.switch input:checked + .track::after { transform: translateX(12px); }
+.switch input:focus-visible + .track { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+
+/* ---------- buttons ---------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
+  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text);
+  padding: 6px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 500;
+  transition: background .12s, border-color .12s, transform .05s;
+}
+.btn:hover { background: var(--panel-2); }
+.btn:active { transform: translateY(1px); }
+.btn:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
+.btn.primary:hover { filter: brightness(1.08); }
+.btn.danger { color: var(--danger); }
+.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
+.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
+.btn.ghost:hover { background: var(--hover); color: var(--text); }
+.btn.small { padding: 4px 8px; font-size: 12px; }
+.btn.icon { padding: 6px; }
+.btn:disabled { opacity: .5; pointer-events: none; }
+.btn kbd { margin-left: 2px; }
+.btn.primary kbd { background: transparent; color: inherit; border-color: currentColor; opacity: .7; }
+
+/* ---------- main ---------- */
+.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.main-head {
+  display: flex; align-items: center; gap: 12px; padding: 12px 24px; min-height: 64px;
+  border-bottom: 1px solid var(--border); background: var(--panel);
+}
+.head-text { min-width: 0; flex: 1; }
+.head-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
+.head-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.head-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.head-actions { display: flex; align-items: center; gap: 8px; flex: none; }
+.menu-btn { display: none; }
+.path-chip { cursor: pointer; border: 0; background: none; padding: 0; color: var(--muted); font-size: 12px; }
+.path-chip:hover { color: var(--text); text-decoration: underline; }
+
+.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--panel-2); color: var(--muted); white-space: nowrap; flex: none; }
+.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.pill.working { background: var(--work-soft); color: var(--work); }
+.pill.waiting, .pill.vscode { background: var(--warn-soft); color: var(--warn); }
+.pill.idle { background: var(--ok-soft); color: var(--ok); }
+.pill.plain::before { display: none; }
+
+.split { flex: 1; display: flex; min-height: 0; }
+.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
+.scroll { flex: 1; overflow-y: auto; }
+.content { max-width: 920px; margin: 0 auto; padding: 22px 28px 28px; }
+
+.dock { flex: none; background: linear-gradient(to bottom, transparent, var(--bg) 18px); padding: 0 28px 18px; max-height: 62vh; overflow-y: auto; }
+.dock:empty { display: none; }
+.dock > * { max-width: 864px; margin-left: auto; margin-right: auto; }
+
+/* ---------- new session ---------- */
+dialog.new-dialog { max-width: 520px; }
+.new-dialog form { text-align: left; } /* dialogs right-align their form for the lone button */
+.new-dialog h2 { margin: 0; font-size: 17px; }
+.new-dialog .new-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
+.new-dialog .segmented button { width: auto; padding: 0 12px; height: 26px; font-family: inherit; font-size: 12.5px; font-weight: 600; }
+.new-dialog .dlg-sub { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
+.new-dialog .field-label { display: block; font-size: 12.5px; font-weight: 600; margin: 12px 0 6px; color: var(--text-2); }
+.new-dialog textarea.field { resize: vertical; font: inherit; }
+.new-dialog .dlg-error { margin-top: 12px; font-size: 13px; color: var(--danger); }
+.new-dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
+
+/* ---------- steering ---------- */
+.kind-steer .reply-row .hint { white-space: normal; }
+.link { border: 0; background: none; padding: 0; font: inherit; color: var(--accent-ink); text-decoration: underline; cursor: pointer; }
+.drive { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
+.drive .segmented button { width: auto; padding: 0 9px; font-family: inherit; font-size: 12px; font-weight: 500; }
+.queued { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
+.queued .q-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
+
+/* ---------- app preview ---------- */
+.splitter { flex: none; width: 6px; margin: 0 -3px; z-index: 2; cursor: col-resize; position: relative; }
+.splitter::after { content: ""; position: absolute; inset: 0 2px; background: var(--border); transition: background .12s; }
+.splitter:hover::after, .split.resizing .splitter::after { background: var(--accent); }
+.split.resizing { cursor: col-resize; user-select: none; }
+.split.resizing iframe { pointer-events: none; } /* or the iframe swallows the drag */
+.preview { flex: none; width: var(--preview-w, 50%); min-width: 280px; max-width: calc(100% - 320px); display: flex; flex-direction: column; background: var(--panel); }
+.preview[hidden], .splitter[hidden] { display: none; }
+.pv-bar { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
+.pv-url {
+  flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
+  background: var(--bg); color: var(--text); font-size: 12.5px;
+}
+.pv-url:focus { outline: none; border-color: var(--accent-ink); }
+.pv-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted); }
+.pv-apps:empty { display: none; }
+.pv-chip {
+  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; cursor: pointer;
+  border: 1px solid var(--border-strong); background: var(--panel); color: var(--text-2); font: inherit; font-size: 12px;
+}
+.pv-chip:hover { background: var(--panel-2); }
+.pv-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
+.pv-chip .mono { font-weight: 600; }
+.pv-apps .scan { margin-left: auto; }
+.pv-body { flex: 1; min-height: 0; position: relative; display: flex; }
+.pv-body iframe { flex: 1; width: 100%; border: 0; background: #fff; }
+.pv-empty { margin: auto; max-width: 340px; padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }
+.pv-empty b { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; }
+.pv-empty code { background: var(--panel-2); padding: 1px 5px; border-radius: 5px; }
+.pv-empty .btn { margin-top: 12px; }
+.pv-warn { position: absolute; left: 10px; right: 10px; bottom: 10px; }
+.btn.on { background: var(--accent-soft); border-color: var(--accent); }
+
+/* ---------- conversation ---------- */
+.convo { display: flex; flex-direction: column; gap: 10px; }
+.msg-user { align-self: flex-end; max-width: 78%; background: var(--accent-soft); border: 1px solid transparent; padding: 9px 14px; border-radius: 14px 14px 4px 14px; white-space: pre-wrap; word-break: break-word; }
+.msg-user.from-dash { border-color: var(--accent-ink); }
+.msg-claude { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
+.claude-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--panel); border: 1px solid var(--border); display: grid; place-items: center; color: var(--accent-ink); }
+.claude-mark .ic { width: 14px; height: 14px; }
+.md { min-width: 0; word-break: break-word; padding-top: 2px; }
+.md > :first-child { margin-top: 0; }
+.md > :last-child { margin-bottom: 0; }
+.md p, .md ul, .md ol, .md blockquote { margin: 0 0 8px; }
+.md ul, .md ol { padding-left: 22px; }
+.md h1, .md h2, .md h3, .md h4 { margin: 12px 0 6px; font-size: 14.5px; }
+.md h1 { font-size: 16px; }
+.md code { background: var(--code-bg); border: 1px solid var(--border); padding: 0 4px; border-radius: 4px; font-size: 12px; }
+.md pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0 0 8px; overflow-x: auto; white-space: pre; }
+.md pre code { background: none; border: 0; padding: 0; }
+.md .file-ref { color: var(--accent-ink); font-weight: 500; }
+.md blockquote { border-left: 3px solid var(--border-strong); padding-left: 10px; color: var(--text-2); }
+.md table { border-collapse: collapse; margin: 0 0 8px; font-size: 13px; }
+.md td, .md th { border: 1px solid var(--border); padding: 4px 8px; }
+
+.tools { margin-left: 36px; display: flex; flex-direction: column; border-left: 2px solid var(--border); padding-left: 10px; gap: 1px; }
+.tool { border-radius: 7px; }
+.tool > summary {
+  list-style: none; display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-radius: 7px; cursor: pointer;
+  font-size: 12.5px; color: var(--text-2); min-width: 0;
+}
+.tool > summary::-webkit-details-marker { display: none; }
+.tool > summary:hover { background: var(--hover); }
+.tool .ic { width: 14px; height: 14px; color: var(--muted); }
+.tool .tname { font-weight: 600; color: var(--text); flex: none; }
+.tool .targ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-family: var(--mono); font-size: 12px; flex: 1; min-width: 0; }
+.tool .tstate { flex: none; font-size: 11px; color: var(--muted); }
+.tool .tstate.err { color: var(--danger); font-weight: 600; }
+.tool.err .ic { color: var(--danger); }
+.tool pre { background: var(--code-bg); border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; max-height: 320px; overflow: auto; margin: 2px 0 6px 30px; font-size: 12px; }
+.tool .full-arg { margin: 2px 0 2px 30px; color: var(--text-2); font-size: 12px; }
+
+.live-row { display: flex; align-items: center; gap: 10px; margin: 14px 0 0 0; color: var(--muted); font-size: 13px; }
+.live-row .targ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dots { display: inline-flex; gap: 3px; padding: 0 6px; }
+.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--work); animation: bounce 1.2s infinite ease-in-out; }
+.dots i:nth-child(2) { animation-delay: .15s; }
+.dots i:nth-child(3) { animation-delay: .3s; }
+@keyframes bounce { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
+
+.notice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-2); font-size: 13px; background: var(--panel); }
+.notice .ic { margin-top: 2px; color: var(--muted); }
+.notice b { color: var(--text); }
+.dock .notice { box-shadow: var(--shadow-sm); }
+.notice .btn { margin-left: auto; flex: none; }
+
+.skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2), var(--hover), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; margin: 10px 0; }
+@keyframes shimmer { to { background-position: -200% 0; } }
+
+/* ---------- action cards ---------- */
+.card {
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
+  box-shadow: var(--shadow); margin-top: 12px; overflow: hidden; position: relative;
+  animation: rise .18s ease-out;
+}
+.card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warn); }
+.card.kind-stop::before { background: var(--accent-ink); }
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
+.card.kept { animation: none; }
+/* Keyboard shortcuts act on one card only: mark it, and hide the key hints on the rest. */
+.card.kind-permission:not(.kb-target) .actions kbd { display: none; }
+#inboxPending:has(.kind-permission ~ .kind-permission) .card.kb-target { border-color: var(--accent-ink); box-shadow: var(--shadow), 0 0 0 1px var(--accent-ink); }
+.card.flash { animation: flash .5s ease-in-out 3; }
+@keyframes flash { 50% { box-shadow: var(--shadow), 0 0 0 4px var(--accent-ink); } }
+.card.risky::before { background: var(--danger); }
+.risk-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--danger-soft); color: var(--danger); font-size: 12.5px; }
+.risk-note .ic { flex: none; margin-top: 1px; }
+.card-session { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--panel-2); cursor: pointer; }
+.card-session .avatar { width: 24px; height: 24px; border-radius: 7px; font-size: 10.5px; }
+.card-session .cs-name { font-weight: 600; font-size: 13px; }
+.card-session .cs-title { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
+.card-session .open { color: var(--muted); font-size: 12px; flex: none; }
+.card-session:hover .open { color: var(--accent-ink); }
+.card-body { padding: 14px 16px 16px 18px; }
+.card-head { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
+.card-head .k-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--warn-soft); color: var(--warn); flex: none; }
+.card.kind-stop .card-head .k-ic { background: var(--accent-soft); color: var(--accent-ink); }
+.card-head .k-title { font-weight: 600; }
+.card-head .k-sub { font-size: 12px; color: var(--muted); }
+.card-head .age { margin-left: auto; color: var(--muted); font-size: 12px; align-self: flex-start; }
+
+.tool-body { margin-bottom: 12px; }
+.tool-body .desc { color: var(--text-2); margin-bottom: 8px; }
+.tool-body .path { font-weight: 600; margin-bottom: 6px; word-break: break-all; font-size: 12.5px; }
+.cmd { background: var(--code-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-height: 300px; overflow: auto; }
+.cmd.shell { padding-left: 28px; position: relative; }
+.cmd.shell::before { content: "\276F"; position: absolute; left: 11px; color: var(--accent-ink); }
+.diff { border: 1px solid var(--border); border-radius: 8px; overflow: auto; max-height: 300px; margin-bottom: 6px; }
+.diff div { padding: 0 10px; white-space: pre-wrap; word-break: break-word; }
+.diff .del { background: var(--del-bg); }
+.diff .add { background: var(--add-bg); }
+
+.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+.actions .grow { flex: 1; min-width: 180px; }
+.field {
+  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
+  border-radius: 8px; padding: 7px 11px; font: inherit; font-size: 13px;
+}
+.field:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; border-color: transparent; }
+
+.last-msg { background: var(--panel-2); border-radius: 9px; padding: 10px 14px; max-height: 240px; overflow: auto; margin-bottom: 12px; font-size: 13.5px; }
+.reply-box { border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); transition: border-color .12s, box-shadow .12s; }
+.reply-box:focus-within { border-color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
+.reply-box textarea { width: 100%; min-height: 64px; max-height: 260px; resize: none; border: 0; background: transparent; color: var(--text); font: inherit; padding: 10px 12px 4px; outline: none; display: block; }
+.reply-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 12px; }
+.reply-row .hint { color: var(--muted); font-size: 12px; margin-right: auto; }
+
+.question { margin-bottom: 14px; }
+.q-title { font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
+.options { display: grid; gap: 6px; }
+.option { display: flex; gap: 10px; padding: 9px 12px; border-radius: 9px; cursor: pointer; align-items: flex-start; border: 1px solid var(--border); transition: border-color .12s, background .12s; }
+.option:hover { border-color: var(--border-strong); background: var(--panel-2); }
+.option:has(input:checked) { border-color: var(--accent-ink); background: var(--accent-soft); }
+.option input { margin-top: 3px; accent-color: var(--accent-ink); }
+.option .o-label { font-weight: 500; }
+.option .o-desc { color: var(--muted); font-size: 12.5px; }
+.q-other { margin-top: 6px; }
+
+/* ---------- inbox / overview ---------- */
+.section-title { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 26px 0 10px; }
+#inboxPending > .section-title { margin-top: 0; }
+.all-clear { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--border); }
+.all-clear .big { width: 38px; height: 38px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
+.all-clear b { display: block; }
+.all-clear span { color: var(--muted); font-size: 13px; }
+.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
+.tile {
+  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px;
+  cursor: pointer; display: flex; flex-direction: column; gap: 8px; text-align: left; transition: border-color .12s, box-shadow .12s;
+  min-width: 0;
+}
+.tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
+.tile.needs { border-color: var(--warn); }
+.tile-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.tile-top .avatar .st { border-color: var(--panel); }
+.tile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tile-when { font-size: 11.5px; color: var(--muted); }
+.tile-title { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
+.tile-action { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
+.tile.compact { flex-direction: row; align-items: center; padding: 9px 12px; }
+.tile.compact .tile-title { min-height: 0; -webkit-line-clamp: 1; flex: 1; min-width: 0; }
+
+.empty { text-align: center; padding: 12vh 20px; color: var(--muted); }
+.empty .avatar { margin: 0 auto 14px; }
+.empty h2 { color: var(--text); font-size: 18px; margin: 0 0 6px; }
+.empty code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; }
+
+/* ---------- toasts & dialog ---------- */
+.toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 50; pointer-events: none; }
+.toast { background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 9px; font-size: 13px; box-shadow: var(--shadow); animation: rise .18s ease-out; display: flex; gap: 8px; align-items: center; }
+.toast.out { opacity: 0; transition: opacity .3s; }
+dialog { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--text); padding: 22px 24px; box-shadow: var(--shadow); max-width: 440px; width: calc(100% - 32px); }
+dialog::backdrop { background: rgba(0, 0, 0, .35); }
+dialog h2 { margin: 0 0 14px; font-size: 16px; }
+.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 18px; font-size: 13px; }
+.keys dt { white-space: nowrap; }
+.keys dd { margin: 0; color: var(--text-2); }
+dialog form { text-align: right; }
+
+.scrim { display: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation: none !important; transition: none !important; }
+}
+
+/* ---------- small screens ---------- */
+@media (max-width: 800px) {
+  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow); width: min(300px, 86vw); }
+  .app.nav-open .sidebar { transform: none; }
+  .app.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 30; }
+  .menu-btn { display: inline-flex; }
+  .main-head { padding: 10px 16px; }
+  .content { padding: 16px; }
+  .dock { padding: 0 16px 14px; }
+  .head-actions .label { display: none; }
+  .msg-user { max-width: 92%; }
+  .btn kbd, .reply-row .hint, .search kbd { display: none; }
+  .tools { margin-left: 8px; }
+  /* No room side by side: the app goes on top, the conversation below. */
+  .split { flex-direction: column; }
+  .splitter { display: none; }
+  .preview { order: -1; width: auto; max-width: none; min-width: 0; height: 48vh; border-bottom: 1px solid var(--border); }
+}

package/scripts/install-shortcuts.ps1

@@ -0,0 +1,36 @@
+# Creates "Agenter" shortcuts on the Desktop and in the Start Menu (pin it to the taskbar from there).
+# -Startup also starts the Agenter server silently when you log in to Windows.
+param([switch]$Startup, [switch]$Remove)
+
+$root = Split-Path -Parent $PSScriptRoot
+$shell = New-Object -ComObject WScript.Shell
+$targets = @(
+  (Join-Path ([Environment]::GetFolderPath('Desktop')) 'Agenter.lnk'),
+  (Join-Path ([Environment]::GetFolderPath('Programs')) 'Agenter.lnk')
+)
+$startupLink = Join-Path ([Environment]::GetFolderPath('Startup')) 'Agenter Server.lnk'
+
+if ($Remove) {
+  foreach ($t in $targets + $startupLink) { if (Test-Path $t) { Remove-Item $t; "Removed $t" } }
+  return
+}
+
+foreach ($t in $targets) {
+  $lnk = $shell.CreateShortcut($t)
+  $lnk.TargetPath = "$env:SystemRoot\System32\wscript.exe"
+  $lnk.Arguments = "`"$root\Agenter.vbs`""
+  $lnk.WorkingDirectory = $root
+  $lnk.IconLocation = "$env:SystemRoot\System32\shell32.dll,94"
+  $lnk.Description = 'Watch and answer all your Claude Code sessions'
+  $lnk.Save()
+  "Created $t"
+}
+
+if ($Startup) {
+  $lnk = $shell.CreateShortcut($startupLink)
+  $lnk.TargetPath = "$env:SystemRoot\System32\wscript.exe"
+  $lnk.Arguments = "`"$root\Agenter.vbs`" server"
+  $lnk.WorkingDirectory = $root
+  $lnk.Save()
+  "Created $startupLink (server starts at login)"
+}