codehost 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [0.9.0](https://github.com/snomiao/codehost/compare/v0.8.0...v0.9.0) (2026-06-08)
+
+
+### Features
+
+* Windows fallback daemon via Scheduled Task (persists + auto-starts at logon) ([cd72bb7](https://github.com/snomiao/codehost/commit/cd72bb7954d05ddf093337b627bcf6b9e9003c53))
+
+# [0.8.0](https://github.com/snomiao/codehost/compare/v0.7.1...v0.8.0) (2026-06-08)
+
+
+### Features
+
+* **web:** filterable workspace list with fake-tags (ay-ls style) ([83dff4f](https://github.com/snomiao/codehost/commit/83dff4ffb813ac93afddf6bb4118b5ffb5278c3b))
+
 ## [0.7.1](https://github.com/snomiao/codehost/compare/v0.7.0...v0.7.1) (2026-06-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codehost",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "type": "module",
   "repository": {
     "type": "git",

package/src/cli/commands/supervise.ts

@@ -3,22 +3,18 @@ import { runSupervisor } from "../fallback-daemon";
 
 interface SuperviseArgs {
   name: string;
-  argv: string;
 }
 
-// Hidden internal command: the supervisor process behind a detached fallback
-// daemon (see fallback-daemon.ts). Not meant to be run by hand — `serve -d` /
-// `setup` spawn it when oxmgr isn't available.
+// Hidden internal command: the supervisor process behind a fallback daemon (see
+// fallback-daemon.ts). Not meant to be run by hand — `serve -d` / `setup` launch
+// it (detached child on POSIX, scheduled task on Windows) when oxmgr isn't
+// available. It reads its serve argv from the registry by name.
 export const superviseCommand: CommandModule<{}, SuperviseArgs> = {
   command: "__supervise",
   describe: false, // hidden from help
-  builder: (y) =>
-    y
-      .option("name", { type: "string", demandOption: true })
-      .option("argv", { type: "string", demandOption: true, describe: "JSON-encoded serve argv" }) as any,
+  builder: (y) => y.option("name", { type: "string", demandOption: true }) as any,
   handler: async (a) => {
-    const argv = JSON.parse(a.argv) as string[];
-    const code = await runSupervisor(a.name, argv);
+    const code = await runSupervisor(a.name);
     process.exit(code);
   },
 };

package/src/cli/fallback-daemon.ts

@@ -1,30 +1,38 @@
 import { spawn, type Subprocess } from "bun";
+import { spawnSync } from "node:child_process";
 import { mkdirSync, openSync, readFileSync, writeFileSync } from "node:fs";
 import { homedir } from "node:os";
 import { dirname, join } from "node:path";
+import { killProcessTree } from "./proc";
 
-// A minimal, non-oxmgr daemon manager: a detached, self-restarting child that
-// survives the shell. Used as a fallback when oxmgr's native binary can't run
-// here (e.g. broken on a Windows box) so `-d`/`setup` still leave a running
-// server instead of failing or re-download-looping. Tracked in a JSON registry
-// so `codehost list`/`stop` can see and manage these alongside oxmgr daemons.
-//
-// Tradeoff vs oxmgr: no login auto-start (that's oxmgr's per-OS service bit). It
-// does survive the launching shell and restarts the server on crash.
+// A non-oxmgr daemon manager: keeps a server running across the shell without
+// depending on oxmgr's flaky native binary. Two backends:
+//   - Windows: a Scheduled Task (`schtasks`) — built in, always runnable, and it
+//     also auto-starts the server at logon. Unref'd child processes don't
+//     survive their launcher exiting on Windows, so a task is required.
+//   - POSIX: a detached, unref'd supervisor child (reparents to init).
+// Both run the same `__supervise` loop (restart-on-failure) and read their serve
+// argv from this registry by name, so the task/launch command stays short.
 
 const ROOT = join(homedir(), ".codehost");
 const REGISTRY = join(ROOT, "daemons.json");
 const LOG_DIR = join(ROOT, "logs");
+const TASK_DIR = join(ROOT, "tasks");
+const isWindows = process.platform === "win32";
 
 export interface FallbackDaemon {
   name: string;
-  /** Supervisor process pid. */
-  pid: number;
   cwd: string;
   /** The foreground serve argv the supervisor (re)spawns. */
   argv: string[];
   log: string;
   startedAt: number;
+  /** POSIX: supervisor process pid. */
+  pid?: number;
+  /** Windows: scheduled-task name (equals `name`). */
+  task?: string;
+  /** Pid of the serve child the supervisor last spawned (for tree-kill on stop). */
+  servePid?: number;
 }
 
 function readRegistry(): FallbackDaemon[] {
@@ -40,6 +48,18 @@ function writeRegistry(list: FallbackDaemon[]): void {
   writeFileSync(REGISTRY, JSON.stringify(list, null, 2));
 }
 
+function upsert(entry: FallbackDaemon): void {
+  writeRegistry([...readRegistry().filter((d) => d.name !== entry.name), entry]);
+}
+
+function patch(name: string, fields: Partial<FallbackDaemon>): void {
+  const list = readRegistry();
+  const hit = list.find((d) => d.name === name);
+  if (!hit) return;
+  Object.assign(hit, fields);
+  writeRegistry(list);
+}
+
 /** True if a pid is currently alive (signal 0 probe). */
 export function isAlive(pid: number): boolean {
   try {
@@ -50,67 +70,113 @@ export function isAlive(pid: number): boolean {
   }
 }
 
+function schtasks(args: string[]): number {
+  return spawnSync("schtasks", args, { stdio: "ignore" }).status ?? 1;
+}
+
+/** True if a Windows scheduled task with this name is registered. */
+function taskExists(name: string): boolean {
+  return spawnSync("schtasks", ["/query", "/tn", name], { stdio: "ignore" }).status === 0;
+}
+
 /**
- * Start (replacing any same-named instance) a detached, self-restarting daemon
- * that runs `argv` from `cwd`, with output appended to a per-daemon log. Returns
- * false if the supervisor couldn't be spawned.
+ * Start (replacing any same-named instance) a daemon that runs `argv` from
+ * `cwd`. Returns false if it couldn't be started. The registry entry is written
+ * first so the supervisor can read its argv by name.
  */
 export function startFallbackDaemon(opts: { name: string; argv: string[]; cwd: string }): boolean {
-  stopFallbackDaemon(opts.name); // replace any previous instance with this name
+  stopFallbackDaemon(opts.name); // replace any previous instance
 
   mkdirSync(LOG_DIR, { recursive: true });
   const log = join(LOG_DIR, `${opts.name}.log`);
+  upsert({ name: opts.name, cwd: opts.cwd, argv: opts.argv, log, startedAt: Date.now() });
+
+  return isWindows ? startWindowsTask(opts.name, log) : startUnixSupervisor(opts.name, log);
+}
+
+/** POSIX: detached, unref'd supervisor child that survives as an orphan. */
+function startUnixSupervisor(name: string, log: string): boolean {
   const fd = openSync(log, "a");
-  const proc = spawn(
-    [process.execPath, process.argv[1], "__supervise", "--name", opts.name, "--argv", JSON.stringify(opts.argv)],
-    { cwd: opts.cwd, stdin: "ignore", stdout: fd, stderr: fd },
-  );
-  // Detach so the launching process (setup / serve -d) can exit while this keeps
-  // running as an orphan.
+  const proc = spawn([process.execPath, process.argv[1], "__supervise", "--name", name], {
+    stdin: "ignore",
+    stdout: fd,
+    stderr: fd,
+  });
   proc.unref();
   if (!proc.pid) return false;
-
-  const list = readRegistry().filter((d) => d.name !== opts.name);
-  list.push({ name: opts.name, pid: proc.pid, cwd: opts.cwd, argv: opts.argv, log, startedAt: Date.now() });
-  writeRegistry(list);
+  patch(name, { pid: proc.pid });
   return true;
 }
 
-/** Live detached daemons (dead registry entries are pruned as a side effect). */
+/** Windows: a Scheduled Task running the supervisor, with output redirected to
+ *  the log via a small launcher .cmd (avoids schtasks /tr quoting limits). It
+ *  auto-starts at logon and is started immediately. */
+function startWindowsTask(name: string, log: string): boolean {
+  mkdirSync(TASK_DIR, { recursive: true });
+  const cmdPath = join(TASK_DIR, `${name}.cmd`);
+  const cmd = `@echo off\r\n"${process.execPath}" "${process.argv[1]}" __supervise --name "${name}" >> "${log}" 2>&1\r\n`;
+  writeFileSync(cmdPath, cmd);
+
+  // Create the task (onlogon for a normal user; onstart when running elevated as
+  // SYSTEM, where there's no interactive logon), then run it now.
+  let created = schtasks(["/create", "/tn", name, "/tr", cmdPath, "/sc", "onlogon", "/f"]);
+  if (created !== 0) created = schtasks(["/create", "/tn", name, "/tr", cmdPath, "/sc", "onstart", "/f"]);
+  if (created !== 0) return false;
+  patch(name, { task: name });
+  return schtasks(["/run", "/tn", name]) === 0;
+}
+
+/** Live daemons. Dead POSIX supervisors are pruned; Windows entries persist as
+ *  long as their task is still registered (a Ready task is a valid auto-start). */
 export function listFallbackDaemons(): FallbackDaemon[] {
   const list = readRegistry();
-  const alive = list.filter((d) => isAlive(d.pid));
+  const alive = list.filter((d) => (d.task ? taskExists(d.task) : d.pid != null && isAlive(d.pid)));
   if (alive.length !== list.length) writeRegistry(alive);
   return alive;
 }
 
-/** Stop and deregister a detached daemon by name. Returns false if not found. */
+/** Stop and deregister a daemon by name. Returns false if not found. */
 export function stopFallbackDaemon(name: string): boolean {
   const list = readRegistry();
   const hit = list.find((d) => d.name === name);
   if (!hit) return false;
-  try {
-    process.kill(hit.pid); // SIGTERM -> supervisor kills its child, then exits
-  } catch {
-    // already gone
+  if (hit.task) {
+    schtasks(["/end", "/tn", hit.task]);
+    schtasks(["/delete", "/tn", hit.task, "/f"]);
+    // /end hard-terminates the task's top process; kill the serve subtree (VS
+    // Code) too so it doesn't orphan.
+    if (hit.servePid) killProcessTree(hit.servePid);
+  } else if (hit.pid != null) {
+    try {
+      process.kill(hit.pid); // SIGTERM -> supervisor kills its child, then exits
+    } catch {
+      // already gone
+    }
   }
   writeRegistry(list.filter((d) => d.name !== name));
   return true;
 }
 
 /**
- * Supervisor body (run via the hidden `__supervise` command). Runs the serve
- * argv, restarting it on a non-zero exit with capped exponential backoff; stops
- * when the child exits cleanly or when this process receives SIGTERM/SIGINT
- * (killing the child first). Output goes to the inherited log fd.
+ * Supervisor body (run via the hidden `__supervise` command). Loads its serve
+ * argv + cwd from the registry by name, runs it, and restarts it on a non-zero
+ * exit with capped exponential backoff; stops when the child exits cleanly or on
+ * SIGTERM/SIGINT (killing the child first).
  */
-export async function runSupervisor(name: string, argv: string[]): Promise<number> {
+export async function runSupervisor(name: string): Promise<number> {
+  const entry = readRegistry().find((d) => d.name === name);
+  if (!entry) {
+    console.error(`[codehost:${name}] no registry entry; nothing to supervise.`);
+    return 1;
+  }
+  const { argv, cwd } = entry;
+
   let child: Subprocess | null = null;
   let stopping = false;
   const onSignal = () => {
     stopping = true;
     try {
-      child?.kill();
+      if (child?.pid) killProcessTree(child.pid);
     } catch {
       // ignore
     }
@@ -121,7 +187,8 @@ export async function runSupervisor(name: string, argv: string[]): Promise<numbe
   let attempt = 0;
   while (!stopping) {
     console.log(`[codehost:${name}] starting: ${argv.join(" ")}`);
-    child = spawn(argv, { cwd: process.cwd(), stdin: "ignore", stdout: "inherit", stderr: "inherit" });
+    child = spawn(argv, { cwd, stdin: "ignore", stdout: "inherit", stderr: "inherit" });
+    patch(name, { servePid: child.pid });
     const code = await child.exited;
     if (stopping) break;
     if (code === 0) {

package/src/shared/tags.test.ts

@@ -0,0 +1,56 @@
+import { expect, test } from "bun:test";
+import { deriveTags, matchQuery, matchToken, shortRoomLabel } from "./tags";
+
+test("deriveTags builds mnemonic tags from meta", () => {
+  const tags = deriveTags(
+    { name: "x", host: "mbp", cwd: "/ws/a", kind: "repo", repo: "github.com/o/r", branch: "main" },
+    { roomLabel: "ab12" },
+  );
+  expect(tags).toContain("room:ab12");
+  expect(tags).toContain("host:mbp");
+  expect(tags).toContain("kind:repo");
+  expect(tags).toContain("repo:github.com/o/r");
+  expect(tags).toContain("wt:main");
+  expect(tags).toContain("cwd:/ws/a");
+});
+
+test("deriveTags defaults kind to repo and omits absent fields", () => {
+  const tags = deriveTags({ name: "x", host: "h", cwd: "" });
+  expect(tags).toContain("kind:repo");
+  expect(tags).not.toContain("cwd:");
+  expect(tags.some((t) => t.startsWith("repo:"))).toBe(false);
+});
+
+test("key:value matches by tag key + substring value", () => {
+  const e = { name: "server", tags: ["repo:github.com/snomiao/codehost", "host:mbp"] };
+  expect(matchToken(e, "repo:codehost")).toBe(true);
+  expect(matchToken(e, "repo:other")).toBe(false);
+  expect(matchToken(e, "host:mbp")).toBe(true);
+});
+
+test("bare text is a substring across name and tags", () => {
+  const e = { name: "my-laptop", tags: ["repo:github.com/snomiao/codehost"] };
+  expect(matchToken(e, "snomiao")).toBe(true);
+  expect(matchToken(e, "laptop")).toBe(true);
+  expect(matchToken(e, "nope")).toBe(false);
+});
+
+test("bare numeric is an exact pid match", () => {
+  const e = { name: "x", pid: "1234", tags: [] };
+  expect(matchToken(e, "1234")).toBe(true);
+  expect(matchToken(e, "123")).toBe(false);
+});
+
+test("matchQuery ANDs all tokens", () => {
+  const e = { name: "x", tags: ["host:mbp", "repo:github.com/o/codehost", "kind:repo"] };
+  expect(matchQuery(e, "codehost host:mbp")).toBe(true);
+  expect(matchQuery(e, "codehost host:other")).toBe(false);
+  expect(matchQuery(e, "")).toBe(true);
+});
+
+test("shortRoomLabel is stable and exactly 4 chars", () => {
+  const t = "super-secret-token-value-1234567890";
+  expect(shortRoomLabel(t)).toBe(shortRoomLabel(t));
+  expect(shortRoomLabel(t)).toHaveLength(4);
+  expect(shortRoomLabel("another-token")).not.toBe(shortRoomLabel(t));
+});

package/src/shared/tags.ts

@@ -0,0 +1,83 @@
+// "Fake-tags": searchable mnemonics derived from a server's advertised meta
+// (host, cwd, repo, branch, room). They exist only so a workspace list is easy
+// to scan, filter, and remember — they are user-mutable and may collide across
+// machines, so the system never addresses anything by them. Canonical identity
+// stays in the peerId + room token.
+//
+// The matcher mirrors `ay ls`: identity-ish fields match exactly, human text
+// matches as a substring, and a `key:value` token matches a tag by key.
+
+import type { PeerMeta } from "./signaling";
+
+/**
+ * A short, non-secret label for a room token. The token is a bearer secret —
+ * it lives only in the URL fragment and is never sent to a server (see
+ * `tokenFromHash`) — so it must never be rendered into the DOM. This derives a
+ * stable 4-char tag from it (FNV-1a, base36) for display/filtering instead.
+ */
+export function shortRoomLabel(token: string): string {
+  let h = 0x811c9dc5;
+  for (let i = 0; i < token.length; i++) {
+    h ^= token.charCodeAt(i);
+    h = Math.imul(h, 0x01000193);
+  }
+  return (h >>> 0).toString(36).slice(0, 4).padStart(4, "0");
+}
+
+/** Build the mnemonic tag list for a server from its advertised metadata. */
+export function deriveTags(meta: PeerMeta | null, opts: { roomLabel?: string } = {}): string[] {
+  const tags: string[] = [];
+  if (opts.roomLabel) tags.push(`room:${opts.roomLabel}`);
+  if (meta?.host) tags.push(`host:${meta.host}`);
+  tags.push(`kind:${meta?.kind ?? "repo"}`);
+  if (meta?.repo) tags.push(`repo:${meta.repo}`);
+  if (meta?.branch) tags.push(`wt:${meta.branch}`);
+  if (meta?.cwd) tags.push(`cwd:${meta.cwd}`);
+  return tags;
+}
+
+/** The key part of a `key:value` tag (empty string for an unkeyed tag). */
+export function tagKey(tag: string): string {
+  const i = tag.indexOf(":");
+  return i < 0 ? "" : tag.slice(0, i);
+}
+
+function tagValue(tag: string): string {
+  const i = tag.indexOf(":");
+  return i < 0 ? tag : tag.slice(i + 1);
+}
+
+export interface Filterable {
+  tags: string[];
+  name: string;
+  /** Optional numeric id (e.g. a pid); matched exactly by a bare-numeric token. */
+  pid?: string;
+}
+
+/**
+ * Match one whitespace-delimited query token against an entry, `ay ls` style:
+ *  - `key:value` → some tag with that key whose value contains `value` (substring)
+ *  - bare numeric → exact pid
+ *  - bare text → substring over the name or any tag (value or key)
+ */
+export function matchToken(e: Filterable, token: string): boolean {
+  const tok = token.toLowerCase();
+  if (!tok) return true;
+  const ci = tok.indexOf(":");
+  if (ci > 0) {
+    const k = tok.slice(0, ci);
+    const v = tok.slice(ci + 1);
+    return e.tags.some(
+      (t) => tagKey(t).toLowerCase() === k && (v === "" || tagValue(t).toLowerCase().includes(v)),
+    );
+  }
+  if (/^\d+$/.test(tok)) return e.pid === tok; // identity: exact
+  if (e.name.toLowerCase().includes(tok)) return true;
+  return e.tags.some((t) => t.toLowerCase().includes(tok)); // text: substring
+}
+
+/** Every whitespace-separated token must match (AND), like `ay ls [keyword]`. */
+export function matchQuery(e: Filterable, query: string): boolean {
+  const tokens = query.trim().toLowerCase().split(/\s+/).filter(Boolean);
+  return tokens.every((t) => matchToken(e, t));
+}

package/src/web/discovery.tsx

@@ -18,6 +18,7 @@ import {
   shareableDeepLink,
 } from "../shared/repo";
 import { addRoom, getRooms, historyFor, recordConnection } from "./history";
+import { deriveTags, matchQuery, shortRoomLabel, tagKey } from "../shared/tags";
 
 const TOKEN_KEY = "codehost.token";
 
@@ -107,6 +108,11 @@ export function Discovery() {
   const [connected, setConnected] = useState(false);
   const [servers, setServers] = useState<PeerInfo[]>([]);
 
+  // Fake-tag filter over the workspace list: a free-text box plus a set of
+  // pinned tag tokens (chips). Both feed the same `ay ls`-style AND matcher.
+  const [filter, setFilter] = useState("");
+  const [activeTags, setActiveTags] = useState<string[]>([]);
+
   // Active WebRTC connection to one server (Phase 2: echo test).
   const [activePeerId, setActivePeerId] = useState<string | null>(null);
   const [connState, setConnState] = useState<ConnState>("idle");
@@ -355,6 +361,28 @@ export function Discovery() {
 
   const activeServer = servers.find((s) => s.peerId === activePeerId);
 
+  // Annotate each server with its mnemonic fake-tags, then filter. The room
+  // token is hashed to a short label — never rendered raw (it's a bearer secret).
+  const roomLabel = token ? shortRoomLabel(token) : "";
+  const tagged = servers.map((s) => ({
+    server: s,
+    name: s.meta?.name ?? s.peerId.slice(0, 8),
+    tags: deriveTags(s.meta, { roomLabel }),
+  }));
+  const query = [...activeTags, filter].join(" ");
+  const filtered = tagged.filter((t) => matchQuery({ name: t.name, tags: t.tags }, query));
+  const toggleTag = (t: string) =>
+    setActiveTags((a) => (a.includes(t) ? a.filter((x) => x !== t) : [...a, t]));
+  const addTag = (t: string) => setActiveTags((a) => (a.includes(t) ? a : [...a, t]));
+  // Suggested chips: the most common identity/location tags across the list.
+  const tagFreq = new Map<string, number>();
+  for (const t of tagged) for (const tag of t.tags) tagFreq.set(tag, (tagFreq.get(tag) ?? 0) + 1);
+  const suggestedTags = [...tagFreq.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([t]) => t)
+    .filter((t) => ["host", "repo", "wt", "kind", "room"].includes(tagKey(t)))
+    .slice(0, 12);
+
   // Connected view: VS Code in an iframe, served over the tunnel.
   if (iframeSrc && connState === "connected") {
     return (
@@ -421,25 +449,64 @@ export function Discovery() {
           <p style={styles.tokenHint}>Token requires {TOKEN_REQUIREMENTS}.</p>
         )}
 
-        <h2 style={styles.h2}>VS Code servers</h2>
-        {!token && <p style={styles.dim}>Enter a token to see your servers.</p>}
+        <div style={styles.listHead}>
+          <h2 style={styles.h2}>Workspaces</h2>
+          {token && servers.length > 0 && (
+            <span style={styles.count}>
+              {filtered.length === tagged.length
+                ? `${tagged.length}`
+                : `${filtered.length} / ${tagged.length}`}
+            </span>
+          )}
+        </div>
+        {!token && <p style={styles.dim}>Enter a token to see your workspaces.</p>}
         {token && servers.length === 0 && (
           <p style={styles.dim}>
             No servers online. Run{" "}
             <code style={styles.code}>bunx codehost serve -t {token || "<token>"}</code> on a machine.
           </p>
         )}
+        {token && servers.length > 0 && (
+          <>
+            <input
+              value={filter}
+              onChange={(e) => setFilter(e.target.value)}
+              placeholder="filter…  e.g.  repo:codehost  host:mbp  (space = AND)"
+              style={styles.search}
+            />
+            {(activeTags.length > 0 || suggestedTags.length > 0) && (
+              <div style={styles.chipRow}>
+                {activeTags.map((t) => (
+                  <button key={t} style={{ ...styles.chip, ...styles.chipActive }} onClick={() => toggleTag(t)}>
+                    {t} ✕
+                  </button>
+                ))}
+                {suggestedTags
+                  .filter((t) => !activeTags.includes(t))
+                  .map((t) => (
+                    <button key={t} style={styles.chip} onClick={() => toggleTag(t)}>
+                      {t}
+                    </button>
+                  ))}
+              </div>
+            )}
+          </>
+        )}
         <ul style={styles.list}>
-          {servers.map((s) => {
+          {filtered.map(({ server: s, name, tags }) => {
             const isActive = s.peerId === activePeerId;
             return (
               <li key={s.peerId} style={styles.card}>
                 <div style={styles.cardMain}>
-                  <div style={styles.cardName}>{s.meta?.name ?? s.peerId.slice(0, 8)}</div>
-                  <div style={styles.cardSub}>
-                    {s.meta?.host && <span>{s.meta.host}</span>}
-                    {s.meta?.cwd && <span style={styles.cwd}>{s.meta.cwd}</span>}
+                  <div style={styles.cardName}>{name}</div>
+                  <div style={styles.tagRow}>
+                    {tags.map((tag) => (
+                      <button key={tag} style={styles.tag} onClick={() => addTag(tag)} title={`filter by ${tag}`}>
+                        {tag}
+                      </button>
+                    ))}
                   </div>
+                  <div style={styles.idLine}>peer {s.peerId.slice(0, 8)}</div>
                   {isActive && (
                     <div style={styles.echo}>
                       {connState === "connecting" && "negotiating WebRTC…"}
@@ -457,6 +524,9 @@ export function Discovery() {
               </li>
             );
           })}
+          {token && servers.length > 0 && filtered.length === 0 && (
+            <p style={styles.dim}>No workspace matches your filter.</p>
+          )}
         </ul>
       </main>
     </div>
@@ -476,7 +546,26 @@ const styles: Record<string, React.CSSProperties> = {
   label: { fontSize: 12, color: "#888" },
   input: { flex: 1, background: "#252525", border: "1px solid #3d3d3d", color: "#eee", padding: "8px 10px", borderRadius: 6, fontSize: 13, outline: "none" },
   button: { background: "#0e639c", border: "none", color: "#fff", padding: "8px 16px", borderRadius: 6, cursor: "pointer", fontSize: 13 },
-  h2: { fontSize: 14, color: "#aaa", fontWeight: 600, margin: "0 0 12px" },
+  listHead: { display: "flex", alignItems: "baseline", gap: 10, margin: "0 0 12px" },
+  h2: { fontSize: 14, color: "#aaa", fontWeight: 600, margin: 0 },
+  count: { fontSize: 12, color: "#888", fontFamily: "monospace" },
+  search: {
+    width: "100%", boxSizing: "border-box", background: "#252525", border: "1px solid #3d3d3d",
+    color: "#eee", padding: "8px 10px", borderRadius: 6, fontSize: 13, outline: "none",
+    fontFamily: "monospace", marginBottom: 10,
+  },
+  chipRow: { display: "flex", flexWrap: "wrap", gap: 6, marginBottom: 14 },
+  chip: {
+    fontFamily: "monospace", fontSize: 11.5, padding: "2px 8px", borderRadius: 999,
+    border: "1px solid #3d3d3d", background: "transparent", color: "#9aa4af", cursor: "pointer",
+  },
+  chipActive: { background: "#0e639c", borderColor: "#0e639c", color: "#fff" },
+  tagRow: { display: "flex", flexWrap: "wrap", gap: 5, marginTop: 6 },
+  tag: {
+    fontFamily: "monospace", fontSize: 11, padding: "1px 7px", borderRadius: 999,
+    border: "1px solid #3d3d3d", background: "transparent", color: "#9aa4af", cursor: "pointer",
+  },
+  idLine: { fontFamily: "monospace", fontSize: 11, color: "#666", marginTop: 6 },
   code: { background: "#252525", padding: "2px 6px", borderRadius: 4, fontFamily: "monospace", fontSize: 12 },
   list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 },
   card: { display: "flex", alignItems: "center", gap: 12, background: "#252525", border: "1px solid #3d3d3d", borderRadius: 8, padding: "12px 14px" },