stackdeck 0.3.0 → 0.4.0

package/index.html

@@ -13,14 +13,18 @@
     --border:    oklch(0.27 0.012 75);
     --hairline:  oklch(0.23 0.010 75);
     --text:      oklch(0.93 0.010 85);
-    --dim:       oklch(0.66 0.014 80);
-    --faint:     oklch(0.47 0.012 80);
+    --dim:       oklch(0.70 0.014 80);
+    --faint:     oklch(0.60 0.012 80);
+    --border-strong: oklch(0.52 0.012 75);
     --accent:    oklch(0.78 0.115 68);
     --accent-dim:oklch(0.78 0.115 68 / .14);
     --green:     oklch(0.74 0.145 152);
     --green-dim: oklch(0.74 0.145 152 / .13);
     --red:       oklch(0.66 0.17 26);
     --red-dim:   oklch(0.66 0.17 26 / .13);
+    --r-sm: 5px; --r: 7px; --r-lg: 10px;
+    --ease: cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
+    --dur: .15s;
     --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
     --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
   }
@@ -29,16 +33,16 @@
   body { margin:0; background:var(--bg); color:var(--text); font:14px/1.5 var(--sans); }
 
   header {
-    display:flex; align-items:baseline; gap:14px;
-    padding:22px 28px 0; max-width:1000px; margin:0 auto;
+    display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
+    padding:22px 28px 0; max-width:1200px; margin:0 auto;
   }
   header h1 { font-size:16px; font-weight:650; margin:0; letter-spacing:.01em; }
   header h1 span { color:var(--accent); }
-  #summary { color:var(--dim); font-size:12.5px; }
+  #summary { color:var(--dim); font-size:13px; }
   header .spacer { flex:1; }
   header .paths { color:var(--faint); font-size:11px; font-family:var(--mono); }
 
-  main { max-width:1000px; margin:0 auto; padding:10px 28px 96px; }
+  main { max-width:1200px; margin:0 auto; padding:10px 28px 96px; }
 
   .section-label {
     margin:36px 2px 10px; font-size:11px; font-weight:600; letter-spacing:.1em;
@@ -46,14 +50,14 @@
     display:flex; align-items:center; gap:10px;
   }
   .section-label .count { color:var(--dim); font-weight:500; letter-spacing:0; text-transform:none; }
-  .section-label button { font-size:11.5px; padding:3px 9px; }
+  .section-label button { font-size:12px; padding:3px 9px; }
   .section-label input {
-    margin-left:auto; width:220px; font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400;
+    margin-left:auto; width:220px; font-size:13px; letter-spacing:0; text-transform:none; font-weight:400;
   }
 
-  .ledger { background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
+  .ledger { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
 
-  .row { border-top:1px solid var(--hairline); transition:background .15s ease-out; }
+  .row { border-top:1px solid var(--hairline); transition:background var(--dur) var(--ease); }
   .row:first-child { border-top:none; }
   .row:hover { background:var(--surface-2); }
   .row-main { display:flex; align-items:center; gap:12px; padding:11px 16px; }
@@ -63,31 +67,32 @@
          border:1.5px solid var(--faint); flex:none; }
   .dot.up { background:var(--green); border-color:var(--green); box-shadow:0 0 0 3px var(--green-dim); }
 
-  .svc-name { font-weight:600; font-size:13.5px; min-width:96px; }
+  .svc-name { font-weight:600; font-size:14px; min-width:96px; }
   .addr { font-family:var(--mono); font-size:12px; color:var(--dim); white-space:nowrap; }
   .grow { flex:1; min-width:0; }
   .cmdline {
-    font-family:var(--mono); font-size:11.5px; color:var(--faint);
+    font-family:var(--mono); font-size:12px; color:var(--faint);
     overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
   }
   .cmdline b { color:var(--dim); font-weight:500; }
 
   .badge {
-    font-size:10.5px; font-weight:600; letter-spacing:.03em; padding:2px 7px;
-    border-radius:5px; white-space:nowrap;
+    font-size:11px; font-weight:600; letter-spacing:.03em; padding:2px 7px;
+    border-radius:var(--r-sm); white-space:nowrap;
   }
-  .badge.ext   { color:var(--accent); background:var(--accent-dim); }
+  .badge.ext   { color:var(--accent); background:transparent; box-shadow:inset 0 0 0 1px oklch(0.78 0.115 68 / .45); }
   .badge.dirty { color:var(--accent); background:var(--accent-dim); }
+  .badge.wt    { color:var(--dim); background:oklch(0.30 0.012 75 / .5); }
   .badge.git   { color:var(--dim); background:oklch(0.30 0.012 75 / .5); font-family:var(--mono); font-weight:500; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
-  .badge.plain { color:var(--faint); background:oklch(0.30 0.012 75 / .35); }
+  .badge.plain { color:var(--dim); background:oklch(0.30 0.012 75 / .35); }
   .badge.cfgd  { color:var(--green); background:var(--green-dim); }
   .badge.crash { color:var(--red); background:var(--red-dim); }
   a.badge.link { color:var(--accent); background:var(--accent-dim); text-decoration:none; }
   a.badge.link:hover { text-decoration:underline; }
-  .logfilter { width:200px; margin:0 0 6px; font-size:11.5px; padding:3px 8px; }
+  .logfilter { width:200px; margin:0 0 6px; font-size:12px; padding:3px 8px; }
 
   select, input, textarea {
-    background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:7px;
+    background:var(--bg); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r);
     padding:5px 9px; font-family:var(--mono); font-size:12px;
   }
   select:focus-visible, input:focus-visible, textarea:focus-visible, button:focus-visible {
@@ -96,25 +101,46 @@
   select:disabled { opacity:.4; cursor:not-allowed; }
 
   /* fixed-width slots keep every row's controls in the same columns */
-  .branch-slot { width:220px; flex:none; display:flex; justify-content:flex-end; }
+  .branch-slot { width:clamp(150px, 16vw, 220px); flex:none; display:flex; justify-content:flex-end; }
   .branch-slot select { width:100%; }
-  .branch-slot select.dirty { border-color:var(--accent); }
+  /* dirty = amber border plus a dot glyph, so the state isn't color-alone */
+  .branch-slot select.dirty {
+    border-color:var(--accent);
+    background-image:radial-gradient(circle, var(--accent) 2px, transparent 2.6px);
+    background-repeat:no-repeat; background-position:right 24px center;
+  }
   .row-actions { display:flex; gap:2px; flex:none; align-items:center; }
-  .row-actions .primary { width:74px; text-align:center; }
+  .row-actions .primary { min-width:74px; text-align:center; }
   .addr { width:110px; flex:none; text-align:right; }
 
   /* Secondary actions stay quiet until the row (or section head) is engaged —
      the board reads as status, not as a wall of buttons. */
   .row-actions .ghost, .group-head .actions button, .row .add {
-    opacity:0; transition:opacity .15s ease-out;
+    opacity:0; transition:opacity var(--dur) var(--ease);
   }
   .row:hover .row-actions .ghost, .row:focus-within .row-actions .ghost,
   .group-head:hover .actions button, .group-head:focus-within .actions button,
   .row:hover .add, .row:focus-within .add { opacity:1; }
+  .cat-sel { opacity:0; transition:opacity var(--dur) var(--ease); max-width:150px; font-size:11px; padding:2px 6px; }
+  .row:hover .cat-sel, .row:focus-within .cat-sel { opacity:1; }
 
-  /* touch devices have no hover — keep actions visible there */
+  /* touch devices have no hover — keep actions visible and give them room */
   @media (hover: none) {
-    .row-actions .ghost, .group-head .actions button, .row .add { opacity:1; }
+    .row-actions .ghost, .group-head .actions button, .row .add, .cat-sel { opacity:1; }
+    button { padding:10px 14px; }
+    .group-head button { padding:7px 10px; }
+    .row-actions { gap:6px; }
+  }
+  /* split-window / narrow: let rows wrap instead of clipping actions */
+  @media (max-width: 900px) {
+    header, main { padding-left:16px; padding-right:16px; }
+    .row-main { flex-wrap:wrap; row-gap:6px; }
+    .row-main .cmdline { order:10; flex-basis:100%; padding-left:20px; }
+    .row-main .row-actions { margin-left:auto; }
+    .branch-slot { width:auto; min-width:150px; }
+    .addr { width:auto; }
+    .section-label { flex-wrap:wrap; }
+    .section-label input { width:100%; margin-left:0; }
   }
   @media (prefers-reduced-motion: reduce) {
     *, *::before, *::after { transition:none !important; animation:none !important; }
@@ -122,10 +148,10 @@
   textarea { width:100%; resize:vertical; min-height:34px; }
 
   button {
-    font:600 12.5px var(--sans); color:var(--text);
-    background:var(--surface-2); border:1px solid var(--border); border-radius:7px;
+    font:600 13px var(--sans); color:var(--text);
+    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r);
     padding:5px 13px; cursor:pointer;
-    transition:border-color .15s ease-out, background .15s ease-out, color .15s ease-out;
+    transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
   }
   button:hover { border-color:var(--dim); }
   button:active { transform:translateY(0.5px); }
@@ -133,28 +159,33 @@
   button.start { color:var(--green); background:var(--green-dim); border-color:transparent; }
   button.start:hover { background:var(--green); color:oklch(0.15 0.02 152); }
   button.kill { color:var(--red); background:var(--red-dim); border-color:transparent; }
-  button.kill:hover { background:var(--red); color:oklch(0.97 0.01 26); }
+  button.kill:hover { background:var(--red); color:oklch(0.13 0.02 26); }
   button.ghost { background:transparent; border-color:transparent; color:var(--dim); font-weight:500; }
   button.ghost:hover { color:var(--text); border-color:var(--border); }
   button.add { color:var(--accent); background:var(--accent-dim); border-color:transparent; }
   button.add:hover { background:var(--accent); color:oklch(0.16 0.02 68); }
 
   .drawer { display:none; padding:4px 16px 14px 36px; }
-  .drawer.open { display:block; }
+  @keyframes drawerIn { from { opacity:0; transform:translateY(-3px); } }
+  .drawer.open { display:block; animation:drawerIn .18s var(--ease); }
+  @keyframes badgeIn { from { opacity:0; transform:scale(.92); } }
+  .badge.crash, .badge.dirty { animation:badgeIn .22s var(--ease); }
   .fields { display:grid; grid-template-columns:64px 1fr; gap:7px 12px; align-items:center; max-width:720px; }
-  .fields label { color:var(--faint); font-size:11.5px; text-align:right; }
+  .fields label { color:var(--faint); font-size:12px; text-align:right; }
 
+  /* the log pane is a terminal: always dark, own text colors, in every theme
+     (ANSI palette + readability hold even when the board itself is light) */
   .logs {
-    background:oklch(0.10 0.006 75); border:1px solid var(--hairline); border-radius:8px;
+    background:oklch(0.10 0.006 75); border:1px solid var(--hairline); border-radius:var(--r);
     padding:10px 12px; height:250px; overflow:auto; overscroll-behavior:contain;
-    font-family:var(--mono); font-size:11.5px; line-height:1.55; white-space:pre-wrap; color:var(--dim);
+    font-family:var(--mono); font-size:12px; line-height:1.55; white-space:pre-wrap; color:oklch(0.72 0.010 80);
   }
-  .logs:empty::before { content:"waiting for output…"; color:var(--faint); font-style:italic; }
+  .logs:empty::before { content:"waiting for output…"; color:oklch(0.62 0.010 80); font-style:italic; }
   .logs::-webkit-scrollbar { width:8px; }
   .logs::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
   .logs::-webkit-scrollbar-track { background:transparent; }
 
-  .empty { padding:26px 16px; text-align:center; color:var(--faint); font-size:12.5px; }
+  .empty { padding:26px 16px; text-align:center; color:var(--faint); font-size:13px; }
 
   /* drag & drop */
   .handle {
@@ -168,23 +199,27 @@
   .group-block { margin-bottom:18px; }
   .group-head {
     display:flex; align-items:center; gap:8px; margin:0 2px 6px;
-    font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.04em;
+    font-size:12px; font-weight:600; color:var(--dim); letter-spacing:.04em;
   }
   .group-head .count { color:var(--faint); font-weight:500; }
   .group-head button { padding:1px 7px; font-size:11px; }
   .group-head .actions { margin-left:auto; display:flex; gap:4px; }
   .hiddenItem { opacity:.45; }
-  .group-head .title { display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
-  .group-head .title:hover { color:var(--text); }
-  .chev { display:inline-block; transition:transform .15s ease-out; font-size:10px; color:var(--faint); }
+  button.title {
+    display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
+    background:none; border:none; padding:2px 4px; margin:0;
+    font:inherit; font-weight:600; color:inherit; letter-spacing:inherit;
+  }
+  button.title:hover { color:var(--text); }
+  button.chev-btn { background:none; border:none; padding:2px 6px; cursor:pointer; color:var(--faint); }
+  button.chev-btn:hover { color:var(--dim); }
+  .chev { display:inline-block; transition:transform var(--dur) var(--ease); font-size:10px; color:var(--faint); }
   .chev.closed { transform:rotate(-90deg); }
 
   /* settings: folder tree */
-  .cfg-label { font-size:11.5px; font-weight:600; color:var(--dim); letter-spacing:.04em; margin:2px 0 8px; }
-  .cfg-label .count { color:var(--faint); font-weight:500; }
   .root-row {
     display:flex; align-items:center; gap:10px; padding:6px 0;
-    font-family:var(--mono); font-size:12.5px;
+    font-family:var(--mono); font-size:13px;
   }
   .root-row .chev { cursor:pointer; padding:4px; }
   .child-grid {
@@ -198,62 +233,256 @@
   .child-grid label.off { color:var(--faint); text-decoration:line-through; }
   .child-grid input { accent-color:var(--accent); }
   .browser {
-    border:1px solid var(--border); border-radius:8px; padding:10px 12px; margin:8px 0;
+    border:1px solid var(--border); border-radius:var(--r); padding:10px 12px; margin:8px 0;
     max-width:560px; background:var(--bg);
   }
   .browser .crumb { font-family:var(--mono); font-size:12px; color:var(--dim); margin-bottom:8px; word-break:break-all; }
   .browser .dirs { max-height:220px; overflow:auto; display:grid; gap:1px; }
   .browser .dirs button {
     text-align:left; background:transparent; border-color:transparent; color:var(--text);
-    font:500 12.5px var(--mono); padding:3px 8px;
+    font:500 13px var(--mono); padding:3px 8px;
   }
   .browser .dirs button:hover { background:var(--surface-2); }
   .cat-list { display:grid; gap:2px; max-width:380px; }
   .cat-row {
     display:flex; align-items:center; gap:9px; padding:5px 10px;
-    border:1px solid var(--hairline); border-radius:7px; background:var(--bg);
-    font-size:12.5px; cursor:grab; user-select:none;
+    border:1px solid var(--hairline); border-radius:var(--r); background:var(--bg);
+    font-size:13px; cursor:grab; user-select:none;
   }
-  .cat-row .count { color:var(--faint); margin-left:auto; font-size:11.5px; }
+  .cat-row .count { color:var(--faint); margin-left:auto; font-size:12px; }
   .cat-row.dragging { opacity:.35; }
   .cat-row.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
   .cat-row.pinned { color:var(--faint); cursor:default; border-style:dashed; }
 
   .toast {
     position:fixed; bottom:22px; left:50%; transform:translate(-50%, 8px);
-    background:var(--surface-2); border:1px solid var(--border); border-radius:9px;
+    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
     padding:10px 18px; max-width:70%; font-size:13px;
-    opacity:0; pointer-events:none; transition:opacity .2s ease-out, transform .2s ease-out;
+    opacity:0; pointer-events:none; transition:opacity .2s var(--ease), transform .2s var(--ease);
   }
   .toast.show { opacity:1; transform:translate(-50%, 0); }
-  .toast.err { border-color:var(--red); color:oklch(0.85 0.06 26); }
+  .toast.err { border-color:var(--red); color:var(--red); }
+  input[type="range"] { accent-color:var(--accent); padding:0; border:none; background:transparent; }
+
+  /* ---- theme: playful ---- */
+  [data-theme="playful"] {
+    --bg:        oklch(0.17 0.03 200);
+    --surface:   oklch(0.21 0.035 205);
+    --surface-2: oklch(0.25 0.04 210);
+    --border:    oklch(0.33 0.045 210);
+    --hairline:  oklch(0.27 0.04 208);
+    --text:      oklch(0.95 0.015 90);
+    --dim:       oklch(0.75 0.03 190);
+    --faint:     oklch(0.64 0.03 195);
+    --border-strong: oklch(0.55 0.04 200);
+    --accent:    oklch(0.74 0.16 35);
+    --accent-dim:oklch(0.74 0.16 35 / .16);
+    --green:     oklch(0.78 0.16 155);
+    --green-dim: oklch(0.78 0.16 155 / .15);
+    --red:       oklch(0.68 0.19 20);
+    --red-dim:   oklch(0.68 0.19 20 / .15);
+    --r-sm: 999px; --r: 11px; --r-lg: 16px;
+    --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint: a touch livelier */
+    --dur: .2s;
+  }
+  [data-theme="playful"] .dot { width:10px; height:10px; }
+  [data-theme="playful"] .dot.up { box-shadow:0 0 0 4px var(--green-dim), 0 0 12px oklch(0.78 0.16 155 / .35); }
+  [data-theme="playful"] .badge { padding:2px 9px; }
+  [data-theme="playful"] button:hover { transform:translateY(-1px); }
+  [data-theme="playful"] button:active { transform:translateY(0.5px); }
+  [data-theme="playful"] .section-label { color:var(--accent); }
+  [data-theme="playful"] .drawer.open { animation-duration:.24s; }
+
+  /* ---- theme: austere ---- */
+  [data-theme="austere"] {
+    --bg:        oklch(0.13 0.003 80);
+    --surface:   oklch(0.15 0.004 80);
+    --surface-2: oklch(0.19 0.005 80);
+    --border:    oklch(0.28 0.005 80);
+    --hairline:  oklch(0.22 0.004 80);
+    --text:      oklch(0.90 0.004 85);
+    --dim:       oklch(0.68 0.005 85);
+    --faint:     oklch(0.58 0.005 85);
+    --border-strong: oklch(0.50 0.005 85);
+    --accent:    oklch(0.85 0.02 85); /* selection reads as brightness, not hue */
+    --accent-dim:oklch(0.85 0.02 85 / .10);
+    --green:     oklch(0.78 0.09 150);
+    --green-dim: oklch(0.78 0.09 150 / .10);
+    --red:       oklch(0.70 0.11 25);
+    --red-dim:   oklch(0.70 0.11 25 / .10);
+    --r-sm: 2px; --r: 3px; --r-lg: 4px;
+    --dur: .08s; /* austere: near-instant state changes */
+  }
+  [data-theme="austere"] body { font-family:var(--mono); }
+  [data-theme="austere"] .dot.up { box-shadow:none; }
+  [data-theme="austere"] button { background:transparent; border-color:var(--border); }
+  [data-theme="austere"] button.start { border-color:oklch(0.78 0.09 150 / .4); background:transparent; }
+  [data-theme="austere"] button.kill { border-color:oklch(0.70 0.11 25 / .4); background:transparent; }
+  [data-theme="austere"] button.add { border-color:oklch(0.85 0.02 85 / .4); background:transparent; }
+  [data-theme="austere"] .section-label { letter-spacing:.18em; }
+  [data-theme="austere"] .drawer.open, [data-theme="austere"] .badge.crash, [data-theme="austere"] .badge.dirty { animation:none; }
+
+  /* settings panel: title + hint rail on the left, controls on the right */
+  .cfg-head {
+    display:flex; align-items:center; justify-content:space-between;
+    padding:13px 18px; border-bottom:1px solid var(--hairline);
+    font-size:13px; font-weight:650;
+  }
+  .cfg-head button { font-size:15px; padding:2px 9px; }
+  .cfg-section {
+    display:grid; grid-template-columns:220px minmax(0, 1fr); gap:8px 28px;
+    padding:18px; border-bottom:1px solid var(--hairline); align-items:start;
+  }
+  .cfg-title { font-size:13px; font-weight:600; margin-bottom:5px; }
+  .cfg-hint { color:var(--faint); font-size:12px; line-height:1.5; padding-right:8px; }
+  .cfg-foot { display:flex; gap:12px; align-items:center; padding:14px 18px; }
+  @media (max-width: 900px) {
+    .cfg-section { grid-template-columns:1fr; }
+  }
+
+  /* theme swatches */
+  .swatches { display:flex; gap:8px; flex-wrap:wrap; }
+  .swatch {
+    display:flex; align-items:center; gap:9px; padding:6px 13px 6px 7px;
+    background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
+    font:500 12px var(--sans); color:var(--dim); cursor:pointer;
+  }
+  .swatch:hover { border-color:var(--dim); color:var(--text); }
+  .swatch[aria-pressed="true"] { border-color:var(--accent); color:var(--text); }
+  .swatch .sw {
+    width:36px; height:24px; border-radius:5px; border:1px solid var(--hairline);
+    position:relative; flex:none;
+  }
+  .swatch .sw i { position:absolute; width:8px; height:8px; border-radius:50%; top:8px; }
+  .swatch .sw i:first-child { left:7px; }
+  .swatch .sw i:last-child { left:19px; }
+
+  /* theme editor knobs: gradient tracks preview what each slider does */
+  .knobs {
+    display:grid; grid-template-columns:92px minmax(120px, 300px) 54px;
+    gap:9px 14px; align-items:center;
+  }
+  .knobs label { color:var(--dim); font-size:12px; text-align:right; }
+  .knobs .knob-val { color:var(--faint); font-size:11px; font-family:var(--mono); }
+  .knobs select { max-width:120px; }
+  .knobs input[type="range"] { -webkit-appearance:none; appearance:none; height:20px; background:transparent; margin:0; }
+  .knobs input[type="range"]::-webkit-slider-runnable-track {
+    height:8px; border-radius:4px; border:1px solid var(--hairline);
+    background:var(--track, var(--surface-2));
+  }
+  .knobs input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance:none; width:16px; height:16px; border-radius:50%; margin-top:-5px;
+    background:var(--text); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--border-strong);
+  }
+  .knobs input[type="range"]::-moz-range-track {
+    height:8px; border-radius:4px; border:1px solid var(--hairline);
+    background:var(--track, var(--surface-2));
+  }
+  .knobs input[type="range"]::-moz-range-thumb {
+    width:12px; height:12px; border-radius:50%;
+    background:var(--text); border:3px solid var(--bg); box-shadow:0 0 0 1px var(--border-strong);
+  }
+  .sw.wheel { background:conic-gradient(oklch(0.7 0.15 20), oklch(0.8 0.15 90), oklch(0.75 0.15 150), oklch(0.7 0.15 230), oklch(0.7 0.15 310), oklch(0.7 0.15 20)); }
+  .cfg-status { color:var(--green); font-size:12px; margin-left:auto; }
 </style>
 </head>
 <body>
 <header>
   <h1><svg viewBox="0 0 64 64" width="18" height="18" style="vertical-align:-3px; margin-right:2px" aria-hidden="true"><rect x="16" y="44" width="34" height="10" rx="5" fill="#57534b"/><rect x="11" y="29" width="34" height="10" rx="5" fill="#8a8375"/><rect x="6" y="14" width="34" height="10" rx="5" fill="#dfa662"/><circle cx="48" cy="19" r="4.5" fill="#5ec488"/><circle cx="48" cy="19" r="7.5" fill="#5ec488" opacity="0.25"/></svg> stack<span>deck</span></h1>
-  <span id="summary"></span>
+  <span id="summary">connecting…</span>
   <span class="spacer"></span>
-  <button class="ghost" id="hiddenToggle" onclick="toggleHidden()" title="show/hide the items you've hidden"></button>
+  <button class="ghost" id="hiddenToggle" style="display:none" onclick="toggleHidden()" title="show/hide the items you've hidden"></button>
   <button class="ghost" onclick="toggleSettings()">settings</button>
   <span class="paths" id="metaPaths"></span>
 </header>
 <main>
   <div class="ledger" id="settings" style="display:none; margin-top:18px">
-    <div class="drawer open" style="padding:16px 18px">
-      <div class="cfg-label">Scanned folders <span class="count">tick a subfolder to include it, untick to exclude</span></div>
-      <div id="cfg-roots-list"></div>
-      <div id="cfg-browser" style="display:none"></div>
-      <button class="ghost" onclick="browseFolders()">+ add folder…</button>
-      <div class="cfg-label" style="margin-top:16px">Project categories <span class="count">drag to change the order they appear on the board</span></div>
-      <div id="cfg-cats" class="cat-list"></div>
-      <div style="display:flex; gap:10px; align-items:center; margin-top:12px">
-        <button onclick="saveConfig()">Save</button>
-        <span class="cmdline" id="cfg-path"></span>
+    <div class="cfg-head">
+      <span role="heading" aria-level="2">Settings</span>
+      <button class="ghost" aria-label="close settings" onclick="toggleSettings()">×</button>
+    </div>
+    <div class="cfg-section">
+      <div class="cfg-info">
+        <div class="cfg-title">Scanned folders</div>
+        <div class="cfg-hint">Where Stackdeck looks for projects. Tick a subfolder to include it, untick to exclude.</div>
       </div>
+      <div class="cfg-body">
+        <div id="cfg-roots-list"></div>
+        <div id="cfg-browser" style="display:none"></div>
+        <button class="ghost" onclick="browseFolders()">+ add folder…</button>
+      </div>
+    </div>
+    <div class="cfg-section">
+      <div class="cfg-info">
+        <div class="cfg-title">Project categories</div>
+        <div class="cfg-hint">The order they appear on the board. Drag, or use the arrows.</div>
+      </div>
+      <div class="cfg-body">
+        <div id="cfg-cats" class="cat-list"></div>
+        <div style="display:flex; gap:6px; margin-top:10px">
+          <input id="new-cat" placeholder="new category…" aria-label="new category name"
+                 onkeydown="if (event.key === 'Enter') addCategoryInline()">
+          <button class="ghost" onclick="addCategoryInline()">add</button>
+        </div>
+      </div>
+    </div>
+    <div class="cfg-section">
+      <div class="cfg-info">
+        <div class="cfg-title">Theme</div>
+        <div class="cfg-hint">Applies immediately and saves on its own. Pick custom to tune every color.</div>
+      </div>
+      <div class="cfg-body">
+        <div class="swatches">
+          <button class="swatch" data-tbtn="" onclick="applyTheme('', true)">
+            <span class="sw" style="background:oklch(0.145 0.008 75)" aria-hidden="true"><i style="background:oklch(0.78 0.115 68)"></i><i style="background:oklch(0.74 0.145 152)"></i></span>calm</button>
+          <button class="swatch" data-tbtn="playful" onclick="applyTheme('playful', true)">
+            <span class="sw" style="background:oklch(0.17 0.03 200)" aria-hidden="true"><i style="background:oklch(0.74 0.16 35)"></i><i style="background:oklch(0.78 0.16 155)"></i></span>playful</button>
+          <button class="swatch" data-tbtn="austere" onclick="applyTheme('austere', true)">
+            <span class="sw" style="background:oklch(0.13 0.003 80)" aria-hidden="true"><i style="background:oklch(0.85 0.02 85)"></i><i style="background:oklch(0.78 0.09 150)"></i></span>austere</button>
+          <button class="swatch" data-tbtn="custom" onclick="applyTheme('custom', true)">
+            <span class="sw wheel" id="sw-custom" aria-hidden="true"></span>custom…</button>
+        </div>
+        <div id="theme-editor" style="display:none; margin-top:14px">
+          <div class="knobs">
+            <label for="tk-hue">base hue</label>
+            <input type="range" id="tk-hue" min="0" max="360" step="1" value="75" oninput="knob('hue', this.value)"
+                   style="--track:linear-gradient(90deg, oklch(0.55 0.06 0), oklch(0.55 0.06 60), oklch(0.55 0.06 120), oklch(0.55 0.06 180), oklch(0.55 0.06 240), oklch(0.55 0.06 300), oklch(0.55 0.06 360))">
+            <span class="knob-val" id="tkv-hue">75</span>
+            <label for="tk-tint">warmth</label>
+            <input type="range" id="tk-tint" min="0" max="0.05" step="0.002" value="0.01" oninput="knob('tint', this.value)"
+                   style="--track:linear-gradient(90deg, oklch(0.45 0 0), oklch(0.5 0.08 75))">
+            <span class="knob-val" id="tkv-tint">0.01</span>
+            <label for="tk-bgL">dark ↔ light</label>
+            <input type="range" id="tk-bgL" min="0.08" max="0.98" step="0.005" value="0.145" oninput="knob('bgL', this.value)"
+                   style="--track:linear-gradient(90deg, oklch(0.10 0.01 75), oklch(0.97 0.01 75))">
+            <span class="knob-val" id="tkv-bgL">0.145</span>
+            <label for="tk-accentHue">accent hue</label>
+            <input type="range" id="tk-accentHue" min="0" max="360" step="1" value="68" oninput="knob('accentHue', this.value)"
+                   style="--track:linear-gradient(90deg, oklch(0.6 0.14 0), oklch(0.6 0.14 60), oklch(0.6 0.14 120), oklch(0.6 0.14 180), oklch(0.6 0.14 240), oklch(0.6 0.14 300), oklch(0.6 0.14 360))">
+            <span class="knob-val" id="tkv-accentHue">68</span>
+            <label for="tk-accentC">accent pop</label>
+            <input type="range" id="tk-accentC" min="0" max="0.25" step="0.005" value="0.115" oninput="knob('accentC', this.value)">
+            <span class="knob-val" id="tkv-accentC">0.115</span>
+            <label for="tk-radius">corners</label>
+            <input type="range" id="tk-radius" min="0" max="18" step="1" value="7" oninput="knob('radius', this.value)">
+            <span class="knob-val" id="tkv-radius">7</span>
+            <label for="tk-font">font</label>
+            <select id="tk-font" onchange="knob('font', this.value)">
+              <option value="sans">sans</option>
+              <option value="mono">mono</option>
+            </select>
+            <span></span>
+          </div>
+          <button class="ghost" style="margin-top:10px" onclick="resetKnobs()">reset to calm defaults</button>
+        </div>
+      </div>
+    </div>
+    <div class="cfg-foot">
+      <span class="cmdline">changes apply immediately and save to <span id="cfg-path"></span></span>
+      <span class="cfg-status" id="cfg-status" role="status" aria-live="polite"></span>
     </div>
   </div>
-  <div class="section-label">Services <span class="count" id="svc-count"></span>
+  <div class="section-label"><span role="heading" aria-level="2">Services</span> <span class="count" id="svc-count"></span>
     <span style="margin-left:auto; display:flex; gap:4px">
       <button class="ghost" onclick="collapseAll('g', true)">collapse all</button>
       <button class="ghost" onclick="collapseAll('g', false)">expand all</button>
@@ -262,25 +491,145 @@
   </div>
   <div id="services"></div>
 
-  <div class="section-label">Dev tools <span class="count" id="infra-count"></span></div>
+  <div class="section-label"><span role="heading" aria-level="2">Dev tools</span> <span class="count" id="infra-count"></span></div>
   <div class="ledger" id="infra"></div>
 
   <div class="section-label">
-    Projects <span class="count" id="proj-count"></span>
+    <span role="heading" aria-level="2">Projects</span> <span class="count" id="proj-count"></span>
     <span style="margin-left:auto; display:flex; gap:4px; align-items:center">
       <button class="ghost" onclick="addCategory()">+ category</button>
       <button class="ghost" onclick="refreshProjects()" title="rescan project roots for new folders">↻ refresh</button>
       <button class="ghost" onclick="collapseAll('c', true)">collapse all</button>
       <button class="ghost" onclick="collapseAll('c', false)">expand all</button>
-      <input id="filter" type="search" placeholder="filter projects…" oninput="renderProjects()">
+      <input id="filter" type="search" placeholder="filter projects…" aria-label="filter projects" oninput="clearTimeout(window.__fdeb); window.__fdeb=setTimeout(renderProjects,120)">
     </span>
   </div>
   <div id="projects"></div>
 </main>
-<div class="toast" id="toast"></div>
+<div class="toast" id="toast" role="status" aria-live="polite"></div>
 
 <script>
 const TOKEN = "__STACKDECK_TOKEN__"; // injected by the daemon when serving this page
+/* ---------- themes ----------
+   Presets: "" (calm), playful, austere. "custom" derives every token from a
+   few knobs (works light or dark). Persisted in config.json via /api/config;
+   localStorage is only a flash-free cache. ?theme= in the URL wins. */
+const THEME_KNOB_DEFAULTS = { hue: 75, tint: 0.01, bgL: 0.145, accentHue: 68, accentC: 0.115, radius: 7, font: "sans" };
+let themeKnobs = { ...THEME_KNOB_DEFAULTS };
+let themeName = "", themeLocked = false;
+
+function applyTokens(k) {
+  const dark = k.bgL < 0.5;
+  const st = document.documentElement.style;
+  const o = (l, c, h, a) => `oklch(${l.toFixed(3)} ${Math.max(0, c).toFixed(3)} ${h}${a ? " / " + a : ""})`;
+  const n = k.tint, h = k.hue;
+  st.setProperty("--bg", o(k.bgL, n, h));
+  if (dark) {
+    st.setProperty("--surface", o(k.bgL + 0.035, n, h));
+    st.setProperty("--surface-2", o(k.bgL + 0.07, n + 0.002, h));
+    st.setProperty("--border", o(k.bgL + 0.125, n + 0.004, h));
+    st.setProperty("--hairline", o(k.bgL + 0.085, n + 0.002, h));
+    st.setProperty("--text", o(0.93, Math.min(n, 0.01), h + 10));
+    st.setProperty("--dim", o(0.70, n + 0.004, h + 5));
+    st.setProperty("--faint", o(0.60, n + 0.002, h + 5));
+    st.setProperty("--border-strong", o(0.52, n + 0.002, h));
+    st.setProperty("--accent", o(0.78, k.accentC, k.accentHue));
+    st.setProperty("--accent-dim", o(0.78, k.accentC, k.accentHue, ".14"));
+    st.setProperty("--green", o(0.74, 0.145, 152));
+    st.setProperty("--green-dim", o(0.74, 0.145, 152, ".13"));
+    st.setProperty("--red", o(0.66, 0.17, 26));
+    st.setProperty("--red-dim", o(0.66, 0.17, 26, ".13"));
+  } else {
+    st.setProperty("--surface", o(Math.min(0.99, k.bgL + 0.015), n, h));
+    st.setProperty("--surface-2", o(k.bgL - 0.05, n + 0.002, h));
+    st.setProperty("--border", o(k.bgL - 0.16, n + 0.004, h));
+    st.setProperty("--hairline", o(k.bgL - 0.08, n + 0.002, h));
+    st.setProperty("--text", o(0.25, Math.min(n, 0.01), h + 10));
+    st.setProperty("--dim", o(0.47, n + 0.004, h + 5));
+    st.setProperty("--faint", o(0.55, n + 0.002, h + 5));
+    st.setProperty("--border-strong", o(0.62, n + 0.002, h));
+    st.setProperty("--accent", o(0.53, Math.max(k.accentC, 0.05), k.accentHue));
+    st.setProperty("--accent-dim", o(0.53, Math.max(k.accentC, 0.05), k.accentHue, ".14"));
+    st.setProperty("--green", o(0.50, 0.13, 152));
+    st.setProperty("--green-dim", o(0.50, 0.13, 152, ".12"));
+    st.setProperty("--red", o(0.53, 0.17, 26));
+    st.setProperty("--red-dim", o(0.53, 0.17, 26, ".12"));
+  }
+  st.setProperty("--r", Math.round(k.radius) + "px");
+  st.setProperty("--r-sm", Math.max(2, Math.round(k.radius * 0.7)) + "px");
+  st.setProperty("--r-lg", Math.round(k.radius * 1.45) + "px");
+  st.colorScheme = dark ? "dark" : "light";
+  document.body.style.fontFamily = k.font === "mono" ? "var(--mono)" : "";
+}
+function clearTokens() {
+  const st = document.documentElement.style;
+  [...st].filter(p => p.startsWith("--")).forEach(p => st.removeProperty(p));
+  st.removeProperty("color-scheme");
+  if (document.body) document.body.style.fontFamily = "";
+}
+function markPressed(t) {
+  document.querySelectorAll("[data-tbtn]").forEach(b => b.setAttribute("aria-pressed", String(b.dataset.tbtn === t)));
+}
+function syncEditor() {
+  for (const k of ["hue", "tint", "bgL", "accentHue", "accentC", "radius"]) {
+    const el = document.getElementById("tk-" + k);
+    if (el) el.value = themeKnobs[k];
+    const v = document.getElementById("tkv-" + k);
+    if (v) v.textContent = themeKnobs[k];
+  }
+  const f = document.getElementById("tk-font");
+  if (f) f.value = themeKnobs.font;
+  updateAccentTrack();
+}
+function applyTheme(t, save) {
+  themeName = t;
+  if (t === "custom") { delete document.documentElement.dataset.theme; applyTokens(themeKnobs); }
+  else {
+    clearTokens();
+    if (t) document.documentElement.dataset.theme = t;
+    else delete document.documentElement.dataset.theme;
+  }
+  markPressed(t);
+  const ed = document.getElementById("theme-editor");
+  if (ed) ed.style.display = t === "custom" ? "" : "none";
+  const chip = document.getElementById("sw-custom");
+  if (chip) {
+    if (t === "custom") {
+      const dk = themeKnobs.bgL < 0.5;
+      chip.style.background = `oklch(${themeKnobs.bgL} ${themeKnobs.tint} ${themeKnobs.hue})`;
+      chip.innerHTML = `<i style="background:oklch(${dk ? 0.78 : 0.53} ${themeKnobs.accentC} ${themeKnobs.accentHue})"></i>` +
+                       `<i style="background:oklch(${dk ? 0.74 : 0.50} 0.14 152)"></i>`;
+    } else { chip.style.background = ""; chip.innerHTML = ""; }
+  }
+  try { localStorage.setItem("stackdeck.themeCache", JSON.stringify({ t, k: themeKnobs })); } catch {}
+  if (save) {
+    clearTimeout(applyTheme.t);
+    applyTheme.t = setTimeout(() =>
+      api("/api/config", { theme: t, themeTokens: themeKnobs }).catch(e => toast(e.message, true)), 300);
+  }
+}
+function updateAccentTrack() {
+  const el = document.getElementById("tk-accentC");
+  if (el) el.style.setProperty("--track",
+    `linear-gradient(90deg, oklch(0.6 0 ${themeKnobs.accentHue}), oklch(0.6 0.25 ${themeKnobs.accentHue}))`);
+}
+function knob(k, v) {
+  themeKnobs[k] = k === "font" ? v : Number(v);
+  const disp = document.getElementById("tkv-" + k);
+  if (disp) disp.textContent = v;
+  if (k === "accentHue") updateAccentTrack();
+  applyTheme("custom", true);
+}
+function resetKnobs() { themeKnobs = { ...THEME_KNOB_DEFAULTS }; syncEditor(); applyTheme("custom", true); }
+{
+  // flash-free boot: cached theme first, server truth follows via /api/meta
+  try {
+    const c = JSON.parse(localStorage.getItem("stackdeck.themeCache") || "null");
+    if (c) { themeKnobs = { ...THEME_KNOB_DEFAULTS, ...(c.k || {}) }; applyTheme(c.t || "", false); }
+  } catch {}
+  const u = new URLSearchParams(location.search).get("theme");
+  if (/^[a-z]+$/.test(u || "")) { themeLocked = true; applyTheme(u === "calm" ? "" : u, false); }
+}
 const $svc = document.getElementById("services");
 const $proj = document.getElementById("projects");
 const $toast = document.getElementById("toast");
@@ -305,9 +654,10 @@ function collapseAll(prefix, on) {
   prefix === "g" ? renderServices() : renderProjects();
 }
 function chevTitle(key, label, count) {
-  return `<span class="title" onclick="toggleCollapse(decodeURIComponent('${encodeURIComponent(key)}'))">
-    <span class="chev ${collapsed.has(key) ? "closed" : ""}">▾</span>${label}
-    <span class="count">${count}</span></span>`;
+  return `<button class="title" aria-expanded="${!collapsed.has(key)}"
+    onclick="toggleCollapse(decodeURIComponent('${encodeURIComponent(key)}'))">
+    <span class="chev ${collapsed.has(key) ? "closed" : ""}" aria-hidden="true">▾</span>${label}
+    <span class="count">${count}</span></button>`;
 }
 
 function toggleHidden() { showHidden = !showHidden; renderServices(); renderProjects(); updateHiddenToggle(); }
@@ -377,25 +727,28 @@ function svcRow(s) {
   // Dirty (uncommitted changes) shows as an amber outline on the dropdown —
   // a badge would shift the columns.
   const selTitle = s.running
-    ? `on ${s.branch} — Kill first to switch the main checkout, or ⧉ to run the selected branch in a parallel worktree${s.dirty ? " · uncommitted changes" : ""}`
-    : (s.dirty ? "uncommitted changes — commit or stash to switch branch" : "branch to run (⧉ runs it in a parallel worktree)");
+    ? `on ${s.branch}. Kill first to switch the main checkout, or ⧉ runs the selected branch in a parallel worktree${s.dirty ? " · uncommitted changes" : ""}`
+    : (s.dirty ? "uncommitted changes: commit or stash to switch branch" : "branch to run (⧉ runs it in a parallel worktree)");
   const branch = `<span class="branch-slot">${s.isGit
-    ? `<select id="br-${s.name}" class="${s.dirty ? "dirty" : ""}" title="${esc(selTitle)}">
+    ? `<select id="br-${s.name}" class="${s.dirty ? "dirty" : ""}" title="${esc(selTitle)}" aria-label="branch for ${esc(s.name)}">
          ${s.branches.map(b => `<option ${b===s.branch?"selected":""}>${esc(b)}</option>`).join("")}
        </select>
-       <button class="ghost" style="padding:3px 7px" title="run the selected branch in a parallel worktree (own checkout, auto $PORT)"
+       <button class="ghost" style="padding:3px 7px" aria-label="run the selected branch of ${esc(s.name)} in a parallel worktree"
+               title="run the selected branch in a parallel worktree (own checkout, auto $PORT)"
                onclick="worktreeStart('${esc(s.name)}')">⧉</button>`
     : '<span class="badge plain">no git</span>'}</span>`;
   return `
   <div class="row ${s.hidden ? "hiddenItem" : ""}" data-name="${esc(s.name)}"
        ondragover="rowOver(event)" ondragleave="rowLeave(event)" ondrop="rowDrop(event)">
     <div class="row-main">
-      <span class="handle" draggable="true" title="drag to reorder or move to a section"
+      <span class="handle" id="h-${s.name}" tabindex="0" role="button" draggable="true"
+            aria-label="reorder ${esc(s.name)}: arrow keys move it within and between sections"
+            title="drag to reorder or move to a section · or focus and use arrow keys"
             ondragstart="dragStart(event,'${esc(s.name)}')" ondragend="dragEnd()">⠿</span>
-      <span class="dot ${s.running ? "up" : ""}"></span>
+      <span class="dot ${s.running ? "up" : ""}" role="img" aria-label="${s.running ? "running" : "stopped"}"></span>
       <span class="svc-name">${esc(s.name)}</span>
       ${s.resurrected
-        ? '<span class="badge crash" title="Stackdeck killed it, but a supervisor (brew services / launchd / systemd) restarted it — stop it with its own manager, e.g. brew services stop">auto-restarted</span>'
+        ? '<span class="badge crash" title="Stackdeck killed it, but a supervisor (brew services / launchd / systemd) restarted it; stop it with its own manager, e.g. brew services stop">auto-restarted</span>'
         : s.running && !s.managed ? '<span class="badge ext" title="running, but not started from Stackdeck">external</span>' : ""}
       ${s.restartPending ? '<span class="badge dirty" title="crashed; auto-restart scheduled">restarting…</span>' : ""}
       ${!s.running && !s.restartPending && s.lastExit && !s.lastExit.expected && s.lastExit.code !== 0
@@ -408,30 +761,37 @@ function svcRow(s) {
       ${branch}
       <span class="row-actions">
         ${s.running
-          ? `<button class="kill primary" onclick="stop('${s.name}')">Kill</button>`
-          : `<button class="start primary" onclick="start('${s.name}')">Start</button>`}
+          ? `<button class="kill primary" onclick="stop('${esc(s.name)}', this)">Kill</button>`
+          : `<button class="start primary" onclick="start('${esc(s.name)}', false, this)">Start</button>`}
         <button class="ghost" ${s.running ? "" : "disabled"} title="stop, then start again on the same branch"
                 onclick="restart('${s.name}')">restart</button>
-        <button class="ghost" onclick="toggleLogs('${s.name}')">logs</button>
-        <button class="ghost" onclick="toggleEdit('${s.name}')">edit</button>
+        <button class="ghost" aria-expanded="${logOpen.has(s.name)}" aria-controls="logwrap-${s.name}"
+                onclick="toggleLogs('${s.name}', this)">logs</button>
+        <button class="ghost" aria-expanded="${open.has(s.name)}" aria-controls="edit-${s.name}"
+                onclick="toggleEdit('${s.name}', this)">edit</button>
         <button class="ghost" title="${s.hidden ? "show on board" : "hide from board"}"
                 onclick="hideItem('service','${esc(s.name)}',${!s.hidden})">${s.hidden ? "unhide" : "hide"}</button>
       </span>
     </div>
     <div class="drawer ${open.has(s.name) ? "open" : ""}" id="edit-${s.name}">
       <div class="fields">
-        <label>name</label><input id="name-${s.name}" value="${esc(s.name)}">
-        <label>dir</label><input id="dir-${s.name}" value="${esc(s.dir)}">
-        <label>command</label><textarea id="cmd-${s.name}">${esc(s.command)}</textarea>
-        <label>port</label><input id="port-${s.name}" value="${s.port ?? ""}" placeholder="for status detection">
-        <label>env</label><textarea id="env-${s.name}" placeholder='{"KEY":"value"} — .env in dir loads automatically; these override it'>${esc(JSON.stringify(s.env || {}))}</textarea>
-        <label>restart</label>
+        <label for="name-${s.name}">name</label><input id="name-${s.name}" value="${esc(s.name)}">
+        <label for="dir-${s.name}">dir</label><input id="dir-${s.name}" value="${esc(s.dir)}">
+        <label for="cmd-${s.name}">command</label><textarea id="cmd-${s.name}">${esc(s.command)}</textarea>
+        <label for="port-${s.name}">port</label><input id="port-${s.name}" value="${s.port ?? ""}" placeholder="for status detection">
+        <label for="env-${s.name}">env</label><textarea id="env-${s.name}" placeholder='{"KEY":"value"} (.env in dir loads automatically; these override it)'>${esc(JSON.stringify(s.env || {}))}</textarea>
+        <label for="rs-${s.name}">restart</label>
         <select id="rs-${s.name}" style="max-width:160px">
           <option value="">never (default)</option>
           <option value="on-failure" ${s.restart === "on-failure" ? "selected" : ""}>on failure (backoff, 5 tries)</option>
         </select>
-        <label>depends on</label><input id="dep-${s.name}" value="${esc((s.dependsOn || []).join(", "))}" placeholder="comma-separated service names, started first">
-        <label>ready when</label><input id="rw-${s.name}" value="${esc((s.readyWhen && s.readyWhen.log) || "")}" placeholder="regex matched against its logs (default: port opens)">
+        <label for="grp-${s.name}">section</label>
+        <select id="grp-${s.name}" style="max-width:160px">
+          <option value="" ${!s.group ? "selected" : ""}>Ungrouped</option>
+          ${groups.map(g => `<option ${s.group === g ? "selected" : ""}>${esc(g)}</option>`).join("")}
+        </select>
+        <label for="dep-${s.name}">depends on</label><input id="dep-${s.name}" value="${esc((s.dependsOn || []).join(", "))}" placeholder="comma-separated service names, started first">
+        <label for="rw-${s.name}">ready when</label><input id="rw-${s.name}" value="${esc((s.readyWhen && s.readyWhen.log) || "")}" placeholder="regex matched against its logs (default: port opens)">
         <label></label>
         <div style="display:flex; gap:8px">
           <button onclick="saveSvc('${s.name}')">Save</button>
@@ -440,8 +800,9 @@ function svcRow(s) {
       </div>
     </div>
     <div class="drawer ${logOpen.has(s.name) ? "open" : ""}" id="logwrap-${s.name}">
-      <input class="logfilter" id="lf-${s.name}" type="search" placeholder="filter logs…" oninput="filterLogs('${s.name}')">
-      <div class="logs" id="log-${s.name}"></div>
+      <input class="logfilter" id="lf-${s.name}" type="search" placeholder="filter logs…"
+             aria-label="filter ${esc(s.name)} logs" oninput="filterLogsDeb('${s.name}')">
+      <div class="logs" id="log-${s.name}" role="log" aria-label="${esc(s.name)} logs"></div>
     </div>
   </div>`;
 }
@@ -566,24 +927,43 @@ async function delSection(name) {
 
 /* ---------- projects ---------- */
 
+function catChoices() {
+  const extra = [...new Set(projects.map(p => p.category).filter(Boolean))]
+    .filter(c => !CAT_ORDER.includes(c)).sort();
+  return [...CAT_ORDER.filter(c => c !== "Uncategorized"), ...extra, "Uncategorized"];
+}
+async function setProjCat(name, cat) {
+  try {
+    await api("/api/project/category", { name, category: cat || null });
+    toast(`${name} → ${cat || "Uncategorized"}`);
+  } catch (e) { toast(e.message, true); }
+  await loadMeta();
+  loadProjects(true);
+}
 function projRow(p) {
   const nArg = `decodeURIComponent('${encodeURIComponent(p.name)}')`;
   const branch = p.isGit
     ? `<span class="badge git" title="current branch">${esc(p.branch || "?")}</span>`
     : '<span class="badge plain">no git</span>';
   const cmd = p.procs && p.procs.length
-    ? `<span class="grow cmdline"><b>${p.procs.length} processes</b> · ${esc(p.procs.map(x => x.name).join(", ")).slice(0, 80)}</span>`
+    ? `<span class="grow cmdline"><b>${p.procs.length} processes</b> · ${esc(p.procs.map(x => x.name).join(", ").slice(0, 80))}</span>`
     : p.suggestedCommand
     ? `<span class="grow cmdline"><b>${esc(p.suggestedCommand)}</b></span>`
     : '<span class="grow cmdline">no run command detected</span>';
+  const catSel = catChoices().length > 1
+    ? `<select class="cat-sel" aria-label="category for ${esc(p.name)}" onchange="setProjCat(${nArg}, this.value)">
+        ${catChoices().map(c => `<option value="${esc(c === "Uncategorized" ? "" : c)}"
+          ${(p.category || "Uncategorized") === c ? "selected" : ""}>${esc(c)}</option>`).join("")}
+      </select>` : "";
   return `
   <div class="row">
     <div class="row-main">
-      <span class="handle" draggable="true" title="drag into one of your categories"
+      <span class="handle" tabindex="-1" aria-hidden="true" draggable="true" title="drag into one of your categories"
             ondragstart="projDragStart(event, ${nArg})" ondragend="projDragEnd()">⠿</span>
       <span class="svc-name" style="min-width:200px">${esc(p.name)}</span>
       ${branch}
       ${cmd}
+      ${catSel}
       ${p.configured
         ? '<span class="badge cfgd">configured</span>'
         : `<button class="add" onclick="configure(${nArg})">configure</button>`}
@@ -709,7 +1089,7 @@ async function configure(name) {
     toast(`${svcName} added to Services${p.suggestedCommand ? "" : " — set its command"}`);
     open.add(svcName);
     await load();
-    document.getElementById("edit-" + svcName)?.scrollIntoView({ block:"center", behavior:"smooth" });
+    document.getElementById("edit-" + svcName)?.scrollIntoView({ block:"center", behavior: REDUCED ? "auto" : "smooth" });
   } catch (e) { toast(e.message, true); }
 }
 
@@ -719,9 +1099,9 @@ function instanceRow(i) {
   return `
   <div class="row">
     <div class="row-main" style="padding-left:38px">
-      <span class="dot up"></span>
+      <span class="dot up" role="img" aria-label="running"></span>
       <span class="svc-name" style="font-weight:500">⧉ ${esc(i.svc)} <span class="cmdline">@ ${esc(i.branch)}</span></span>
-      <span class="badge dirty" title="parallel worktree instance">worktree</span>
+      <span class="badge wt" title="parallel worktree instance">worktree</span>
       ${meta && meta.proxyPort && i.port
         ? `<a class="badge link" target="_blank" href="http://${esc(i.key.split("@")[1])}.${esc(i.svc)}.localhost${meta.proxyPort === 80 ? "" : ":" + meta.proxyPort}"
              title="via the *.localhost proxy">${esc(i.key.split("@")[1])}.${esc(i.svc)}.localhost</a>` : ""}
@@ -729,12 +1109,14 @@ function instanceRow(i) {
       <span class="grow"></span>
       <span class="row-actions">
         <button class="kill primary" onclick="stopInstance('${esc(i.key)}')">Kill</button>
-        <button class="ghost" onclick="toggleLogs('${esc(i.key)}')">logs</button>
+        <button class="ghost" aria-expanded="${logOpen.has(i.key)}" aria-controls="logwrap-${i.key}"
+                onclick="toggleLogs('${esc(i.key)}', this)">logs</button>
       </span>
     </div>
     <div class="drawer ${logOpen.has(i.key) ? "open" : ""}" id="logwrap-${i.key}">
-      <input class="logfilter" id="lf-${i.key}" type="search" placeholder="filter logs…" oninput="filterLogs('${esc(i.key)}')">
-      <div class="logs" id="log-${i.key}"></div>
+      <input class="logfilter" id="lf-${i.key}" type="search" placeholder="filter logs…"
+             aria-label="filter ${esc(i.key)} logs" oninput="filterLogsDeb('${esc(i.key)}')">
+      <div class="logs" id="log-${i.key}" role="log" aria-label="${esc(i.key)} logs"></div>
     </div>
   </div>`;
 }
@@ -757,8 +1139,9 @@ async function stopInstance(key) {
   setTimeout(() => loadServices(true), 400);
 }
 
-async function start(name, force) {
+async function start(name, force, btn) {
   const sel = document.getElementById("br-" + name);
+  if (btn) { btn.disabled = true; btn.textContent = "starting…"; }
   try {
     const s = services.find(x => x.name === name);
     // when stopped, the dropdown choice is a checkout request; when it was
@@ -769,18 +1152,20 @@ async function start(name, force) {
   } catch (e) {
     const busy = e.message.match(/port (\d+) is busy \(pid (\d+)/);
     if (busy && !force && confirm(`Port ${busy[1]} is used by another process (pid ${busy[2]}).\nKill it and start ${name}?`))
-      return start(name, true);
+      return start(name, true, btn);
     toast(e.message, true);
+    if (btn) { btn.disabled = false; btn.textContent = "Start"; }
   }
   loadServices(true);
 }
-async function stop(name) {
+async function stop(name, btn) {
+  if (btn) { btn.disabled = true; btn.textContent = "killing…"; }
   try {
     const r = await api("/api/stop", { name });
     toast(r.note || name + " killed", !!r.note);
   }
-  catch (e) { toast(e.message, true); }
-  setTimeout(loadServices, 400);
+  catch (e) { toast(e.message, true); if (btn) { btn.disabled = false; btn.textContent = "Kill"; } }
+  setTimeout(() => loadServices(true), 400);
 }
 async function restart(name) {
   toast(name + " restarting…");
@@ -788,19 +1173,21 @@ async function restart(name) {
   catch (e) { toast(e.message, true); }
   loadServices(true);
 }
-function toggleEdit(name) {
+function toggleEdit(name, btn) {
   open.has(name) ? open.delete(name) : open.add(name);
   document.getElementById("edit-" + name).classList.toggle("open", open.has(name));
+  btn?.setAttribute("aria-expanded", open.has(name));
 }
-function toggleLogs(name) {
+function toggleLogs(name, btn) {
   if (logOpen.has(name)) { logOpen.delete(name); streams[name]?.close(); delete streams[name]; }
   else logOpen.add(name);
   document.getElementById("logwrap-" + name).classList.toggle("open", logOpen.has(name));
+  btn?.setAttribute("aria-expanded", logOpen.has(name));
   if (logOpen.has(name)) attachStream(name);
 }
 /* Minimal ANSI SGR → HTML (colors 30–37/90–97, bold, dim, reset). */
-const ANSI_FG = { 30:"#57534c",31:"#e06c5f",32:"#84c17b",33:"#d9a05b",34:"#7aa2d4",35:"#c092d0",36:"#72bcb8",37:"#b8b2a7",
-                  90:"#6e6a63",91:"#f08d80",92:"#a0d598",93:"#e8bc7e",94:"#9dbfe6",95:"#d5b0e2",96:"#93d5d1",97:"#d6d0c4" };
+const ANSI_FG = { 30:"#8f897e",31:"#e06c5f",32:"#84c17b",33:"#d9a05b",34:"#7aa2d4",35:"#c092d0",36:"#72bcb8",37:"#b8b2a7",
+                  90:"#a09a8f",91:"#f08d80",92:"#a0d598",93:"#e8bc7e",94:"#9dbfe6",95:"#d5b0e2",96:"#93d5d1",97:"#d6d0c4" };
 function ansiToHtml(raw) {
   let out = "", openSpan = false;
   for (const part of raw.split(/(\x1b\[[0-9;]*m)/)) {
@@ -824,6 +1211,8 @@ function logMatches(name, line) {
   const q = (document.getElementById("lf-" + name)?.value || "").toLowerCase();
   return !q || line.toLowerCase().includes(q);
 }
+const flDeb = Object.create(null);
+function filterLogsDeb(name) { clearTimeout(flDeb[name]); flDeb[name] = setTimeout(() => filterLogs(name), 120); }
 function filterLogs(name) {
   const pane = document.getElementById("log-" + name);
   if (!pane) return;
@@ -833,21 +1222,29 @@ function filterLogs(name) {
   pane.scrollTop = pane.scrollHeight;
 }
 function attachStream(name) {
-  streams[name]?.close();
+  // A live stream survives re-renders: the pane div is recreated empty, so
+  // just repaint it from the client buffer instead of reconnecting the SSE.
+  if (streams[name]) {
+    const pane = document.getElementById("log-" + name);
+    if (pane && !pane.childNodes.length) filterLogs(name);
+    return;
+  }
   const pane = document.getElementById("log-" + name);
   if (!pane) return;
   pane.innerHTML = "";
-  clientLogs[name] = [];
+  clientLogs[name] = []; // fresh connection: the server replays its buffer
   const es = new EventSource("/api/logs?name=" + encodeURIComponent(name) + "&t=" + TOKEN);
   es.onmessage = (ev) => {
     const line = JSON.parse(ev.data);
     const buf = clientLogs[name];
     buf.push(line);
     if (buf.length > 3000) buf.shift();
-    if (!logMatches(name, line)) return;
-    pane.insertAdjacentHTML("beforeend", ansiToHtml(line) + "\n");
-    while (pane.childNodes.length > 6000) pane.removeChild(pane.firstChild);
-    pane.scrollTop = pane.scrollHeight;
+    const p = document.getElementById("log-" + name); // never a stale node
+    if (!p || !logMatches(name, line)) return;
+    const stick = p.scrollHeight - p.scrollTop - p.clientHeight < 40;
+    p.insertAdjacentHTML("beforeend", ansiToHtml(line) + "\n");
+    while (p.childNodes.length > 6000) p.removeChild(p.firstChild);
+    if (stick) p.scrollTop = p.scrollHeight; // don't yank the view while reading history
   };
   streams[name] = es;
 }
@@ -884,6 +1281,9 @@ async function saveSvc(name) {
       JSON.stringify(body.dependsOn) !== JSON.stringify(cur.dependsOn || []) ||
       rw !== ((cur.readyWhen && cur.readyWhen.log) || "");
     if (fieldsChanged) await api("/api/service", body);
+    const wantedGroup = document.getElementById("grp-" + name)?.value || null;
+    if ((cur.group || null) !== wantedGroup)
+      await api("/api/move", { name: finalName, group: wantedGroup, before: null });
     toast(finalName + " saved"); open.delete(name); load();
   } catch (e) { toast(e.message, true); }
 }
@@ -899,20 +1299,24 @@ function editGuard() {
   if (open.size || dragging || dragProj) return true;
   const ae = document.activeElement;
   return ae && (ae.closest("#services") || ae.closest("#projects") || ae.id === "filter") &&
-         ["SELECT","INPUT","TEXTAREA"].includes(ae.tagName);
+         (["SELECT","INPUT","TEXTAREA","BUTTON"].includes(ae.tagName) || ae.classList.contains("handle"));
 }
 let prevUp = null; // name -> was running (crash detection across polls)
 function notifyCrash(name, code) {
   toast(`${name} crashed (exit ${code})`, true);
-  if (!("Notification" in window)) return;
-  if (Notification.permission === "default") Notification.requestPermission();
-  if (Notification.permission === "granted")
+  if (("Notification" in window) && Notification.permission === "granted")
     new Notification("Stackdeck", { body: `${name} crashed (exit code ${code})` });
 }
+let lastSig = null;
 async function loadServices(force) {
   if (!force && editGuard()) return;
   try {
     const d = await api("/api/services");
+    // Unchanged payload → skip the re-render entirely (keeps focus, open log
+    // panes, and scroll positions intact between polls).
+    const sig = JSON.stringify(d);
+    if (!force && sig === lastSig) return;
+    lastSig = sig;
     groups = d.groups || []; services = d.services || [];
     instancesList = d.instances || [];
     hiddenGroups = d.hiddenGroups || []; hiddenCategories = d.hiddenCategories || [];
@@ -966,9 +1370,9 @@ async function refreshProjects() {
   const before = projects.length;
   await loadProjects(true);
   const diff = projects.length - before;
-  toast(diff > 0 ? `rescanned — ${diff} new project${diff > 1 ? "s" : ""} found`
-      : diff < 0 ? `rescanned — ${-diff} project${diff < -1 ? "s" : ""} gone`
-      : "rescanned — no changes");
+  toast(diff > 0 ? `rescanned: ${diff} new project${diff > 1 ? "s" : ""} found`
+      : diff < 0 ? `rescanned: ${-diff} project${diff < -1 ? "s" : ""} gone`
+      : "rescanned: no changes");
 }
 
 /* ---------- settings (VLC-style folder tree) ---------- */
@@ -990,11 +1394,15 @@ function toggleSettings() {
       ...(meta.categoryOrder || []).filter(c => existing.includes(c)),
       ...existing.filter(c => !(meta.categoryOrder || []).includes(c)).sort(),
     ];
-    document.getElementById("cfg-path").textContent = "saved to " + shortP(meta.configPath);
+    document.getElementById("cfg-path").textContent = shortP(meta.configPath);
     document.getElementById("cfg-browser").style.display = "none";
     renderRoots();
     renderCatList();
   }
+  if (show) {
+    const h = document.querySelector("#settings .cfg-head [role=heading]");
+    if (h) { h.setAttribute("tabindex", "-1"); h.focus(); }
+  }
 }
 
 /* category reorder list */
@@ -1009,9 +1417,19 @@ function renderCatList() {
          ondragover="event.preventDefault(); if(dragCat!==null && dragCat!=${i}) this.classList.add('drop-before')"
          ondragleave="this.classList.remove('drop-before')"
          ondrop="dropCat(event, ${i})">
-      <span class="handle">⠿</span> ${esc(c)} <span class="count">${counts[c] || 0}</span>
+      <span class="handle" aria-hidden="true">⠿</span> ${esc(c)} <span class="count">${counts[c] || 0}</span>
+      <button class="ghost" id="catup-${i}" aria-label="move ${esc(c)} up" ${i === 0 ? "disabled" : ""} onclick="moveCat(${i},-1)">↑</button>
+      <button class="ghost" id="catdn-${i}" aria-label="move ${esc(c)} down" ${i === pending.cats.length - 1 ? "disabled" : ""} onclick="moveCat(${i},1)">↓</button>
     </div>`).join("") +
-    `<div class="cat-row pinned" title="new and unmapped projects land here">Uncategorized — always last <span class="count">${counts["Uncategorized"] || 0}</span></div>`;
+    `<div class="cat-row pinned" title="new and unmapped projects land here">Uncategorized · always last <span class="count">${counts["Uncategorized"] || 0}</span></div>`;
+}
+function moveCat(i, d) {
+  const j = i + d;
+  if (j < 0 || j >= pending.cats.length) return;
+  [pending.cats[i], pending.cats[j]] = [pending.cats[j], pending.cats[i]];
+  renderCatList();
+  document.getElementById((d < 0 ? "catup-" : "catdn-") + j)?.focus();
+  scheduleCfgSave();
 }
 function dropCat(ev, to) {
   ev.preventDefault();
@@ -1020,6 +1438,7 @@ function dropCat(ev, to) {
   pending.cats.splice(to > dragCat ? to - 1 : to, 0, moved);
   dragCat = null;
   renderCatList();
+  scheduleCfgSave();
 }
 
 async function renderRoots() {
@@ -1042,13 +1461,14 @@ async function renderRoots() {
       } catch (e) { children = `<div class="child-grid"><span class="cmdline">${esc(e.message)}</span></div>`; }
     }
     return `<div class="root-row">
-        <span class="chev ${isOpen ? "" : "closed"}" onclick="toggleRootOpen(${rArg})">▾</span>
+        <button class="chev-btn" aria-expanded="${isOpen}" aria-label="${isOpen ? "collapse" : "expand"} ${esc(shortP(root))}"
+                onclick="toggleRootOpen(${rArg})"><span class="chev ${isOpen ? "" : "closed"}" aria-hidden="true">▾</span></button>
         <b>${esc(shortP(root))}</b>
         <button class="ghost" onclick="removeRoot(${rArg})">remove</button>
       </div>${children}`;
   }));
   box.innerHTML = blocks.join("") ||
-    '<div class="cmdline" style="padding:6px 0">no folders yet — add one below</div>';
+    '<div class="cmdline" style="padding:6px 0">no folders yet: add one below</div>';
 }
 
 function toggleRootOpen(root) {
@@ -1058,10 +1478,12 @@ function toggleRootOpen(root) {
 function toggleExclude(full, included) {
   included ? pending.excludes.delete(full) : pending.excludes.add(full);
   renderRoots();
+  scheduleCfgSave();
 }
 function removeRoot(root) {
   pending.roots = pending.roots.filter(r => r !== root);
   renderRoots();
+  scheduleCfgSave();
 }
 
 /* folder browser for adding a root */
@@ -1093,22 +1515,50 @@ function pickRoot() {
   if (browsePath && !pending.roots.includes(browsePath)) {
     pending.roots.push(browsePath);
     pending.openRoots.add(browsePath);
+    scheduleCfgSave();
   }
   document.getElementById("cfg-browser").style.display = "none";
   renderRoots();
 }
 
-async function saveConfig() {
+/* settings auto-save: every control applies immediately; the footer shows
+   saving…/saved so the user is never left wondering (no explicit Save). */
+let cfgSaveT, cfgStatusT;
+function cfgStatus(msg, sticky) {
+  const el = document.getElementById("cfg-status");
+  if (!el) return;
+  el.textContent = msg;
+  clearTimeout(cfgStatusT);
+  if (msg && !sticky) cfgStatusT = setTimeout(() => (el.textContent = ""), 2000);
+}
+function scheduleCfgSave() {
+  cfgStatus("saving…", true);
+  clearTimeout(cfgSaveT);
+  cfgSaveT = setTimeout(async () => {
+    try {
+      await api("/api/config", {
+        projectRoots: pending.roots,
+        excludes: [...pending.excludes],
+        categoryOrder: pending.cats,
+      });
+      cfgStatus("saved ✓");
+      await loadMeta();
+      loadProjects(true);
+    } catch (e) { cfgStatus(""); toast(e.message, true); }
+  }, 500);
+}
+async function addCategoryInline() {
+  const el = document.getElementById("new-cat");
+  const name = el.value.trim();
+  if (!name) return;
   try {
-    await api("/api/config", {
-      projectRoots: pending.roots,
-      excludes: [...pending.excludes],
-      categoryOrder: pending.cats,
-    });
-    toast("settings saved");
-    document.getElementById("settings").style.display = "none";
+    await api("/api/category", { name });
+    el.value = "";
+    if (!pending.cats.includes(name)) pending.cats.push(name);
+    renderCatList();
+    cfgStatus("saved ✓");
     await loadMeta();
-    await loadProjects(true);
+    loadProjects(true);
   } catch (e) { toast(e.message, true); }
 }
 async function load() { await Promise.all([loadServices(), loadProjects()]); }
@@ -1116,6 +1566,11 @@ async function loadMeta() {
   try {
     const m = await api("/api/meta");
     meta = m;
+    if (!themeLocked && m.theme !== undefined) {
+      themeKnobs = { ...THEME_KNOB_DEFAULTS, ...(m.themeTokens || {}) };
+      syncEditor();
+      applyTheme(m.theme || "", false);
+    }
     if (m.categoryOrder && m.categoryOrder.length) CAT_ORDER = [...m.categoryOrder, "Uncategorized"];
     document.getElementById("metaPaths").textContent = `v${m.version}`;
     document.getElementById("metaPaths").title = `config: ${shortP(m.configPath)} · logs: ${shortP(m.logDir)}`;
@@ -1125,6 +1580,60 @@ async function loadMeta() {
   } catch {}
 }
 
+/* ---------- keyboard ---------- */
+
+const REDUCED = matchMedia("(prefers-reduced-motion: reduce)").matches;
+// Notification permission must be requested from a user gesture.
+document.addEventListener("click", () => {
+  if ("Notification" in window && Notification.permission === "default") Notification.requestPermission();
+}, { once: true });
+
+async function moveSvcKey(name, dir) {
+  const s = services.find(x => x.name === name);
+  if (!s) return;
+  const g = s.group || null;
+  const rows = services.filter(x => (x.group || null) === g && (showHidden || !x.hidden));
+  const i = rows.findIndex(x => x.name === name);
+  const sections = groups.length ? [...groups, null] : [null];
+  const gi = sections.findIndex(x => (x || null) === g);
+  if (dir < 0) {
+    if (i > 0) return moveKeep(name, g, rows[i - 1].name);
+    if (gi > 0) return moveKeep(name, sections[gi - 1], null); // end of previous section
+  } else {
+    if (i < rows.length - 1) return moveKeep(name, g, rows[i + 2]?.name ?? null);
+    if (gi >= 0 && gi < sections.length - 1) { // top of next section
+      const next = sections[gi + 1];
+      const nrows = services.filter(x => (x.group || null) === (next || null) && (showHidden || !x.hidden));
+      return moveKeep(name, next, nrows[0]?.name ?? null);
+    }
+  }
+}
+async function moveKeep(name, group, before) {
+  try { await api("/api/move", { name, group, before }); }
+  catch (e) { toast(e.message, true); }
+  await loadServices(true);
+  document.getElementById("h-" + name)?.focus();
+}
+document.addEventListener("keydown", (ev) => {
+  const tag = document.activeElement?.tagName;
+  if (ev.key === "Escape") {
+    const settings = document.getElementById("settings");
+    if (settings.style.display !== "none") { settings.style.display = "none"; return; }
+    if (open.size) { open.clear(); renderServices(); }
+    return;
+  }
+  if (ev.key === "/" && !["INPUT","TEXTAREA","SELECT"].includes(tag)) {
+    ev.preventDefault();
+    document.getElementById("filter").focus();
+    return;
+  }
+  if ((ev.key === "ArrowUp" || ev.key === "ArrowDown") &&
+      ev.target.classList?.contains("handle") && ev.target.id.startsWith("h-")) {
+    ev.preventDefault();
+    moveSvcKey(ev.target.id.slice(2), ev.key === "ArrowUp" ? -1 : 1);
+  }
+});
+
 load(); loadMeta(); loadInfra();
 setInterval(() => { if (document.visibilityState === "visible") loadInfra(); }, 15000);
 setInterval(() => { if (document.visibilityState === "visible") loadServices(); }, 5000);