codehost 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [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.8.0",
   "type": "module",
   "repository": {
     "type": "git",

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" },