codehost 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [0.23.0](https://github.com/snomiao/codehost/compare/v0.22.1...v0.23.0) (2026-06-15)
+
+
+### Features
+
+* **web:** show the serving user@host in the connected header, link the repo URL out ([a10c243](https://github.com/snomiao/codehost/commit/a10c2435d0b6b15572708696854ccf65c74a268e))
+
+## [0.22.1](https://github.com/snomiao/codehost/compare/v0.22.0...v0.22.1) (2026-06-15)
+
+
+### Bug Fixes
+
+* **web:** stack the setup-card command rows on narrow screens ([4348ef7](https://github.com/snomiao/codehost/commit/4348ef72d766aba4254ecf693277a6064b06d333))
+
 # [0.22.0](https://github.com/snomiao/codehost/compare/v0.21.0...v0.22.0) (2026-06-14)
 
 

package/CLAUDE.md

@@ -0,0 +1,43 @@
+# codehost — repo-scoped agent notes
+
+WebRTC-tunneled VS Code: a CLI daemon (`codehost serve`/`dev`) serves a machine; the
+codehost.dev page (Cloudflare Pages) connects over a WebRTC data channel; a Worker + Durable
+Object (signal.codehost.dev) only relays signaling. See README.md for the architecture.
+
+## Build / typecheck / test / deploy
+
+- **Typecheck:** `bun run typecheck` — three tsconfigs (root, `src/web/tsconfig.sw.json`,
+  `worker/tsconfig.json`). All three must pass.
+- **Build:** `bun run build` (vite app + service worker) and `bun run build:lib` (the standalone
+  `room-client` bundle for embedding).
+- **Tests:** `bun test` globs into the **gitignored `tmp/` scratch checkout** (a second project
+  missing test deps) and reports false failures. Run project tests only:
+  `bun test $(git ls-files '*.test.ts' '*.test.tsx')`.
+- **Deploy:** `bun run deploy:signal` (the Worker/DO — only needed when the signaling protocol
+  changes) and `bun run deploy:pages` (the codehost.dev site). Wrangler reads
+  `CLOUDFLARE_API_TOKEN` + `CLOUDFLARE_ACCOUNT_ID` from `.env.local` (gitignored). The token is
+  **account-owned**, so verify it via `/accounts/<id>/tokens/verify`, not `/user/tokens/verify`;
+  it has no Zone/DNS scope.
+- A push to `main` triggers a semantic-release version bump + npm publish — keep `main` green.
+
+## The signaling protocol is shared AND has live peers in the field
+
+`src/shared/signaling.ts` is the wire contract for the page, the daemon, AND the Worker. Deployed
+daemons run many npm versions, so **only make additive/optional changes** to the protocol.
+
+The connecting role is `"client"`, but `"viewer"` remains a valid wire value: receivers accept
+either via `isClientRole`, and new code still EMITS `CLIENT_WIRE_ROLE` (currently `"viewer"`)
+during an "accept both, emit old" transition — so old and new daemons/pages interoperate. Don't
+rename or repurpose wire values, or flip the emitted role, without keeping that compatibility.
+
+## Verifying codehost.dev visually (rech)
+
+To screenshot/verify the live site, drive a real Chrome with `rech` (the `rechrome` package — see
+its own CLAUDE.md for setup and the session/scroll caveats). codehost.dev quirks:
+
+- The page scrolls an **inner `<main>` (overflow:auto)**, not the document — so
+  `screenshot --full-page` only captures the viewport. To capture below the fold, `resize` the
+  window tall enough that everything lays out without inner-scroll, then screenshot and crop.
+- The mobile layout kicks in under a **560px** width breakpoint — `resize` to a phone width to
+  check it.
+- After a Pages deploy, open with a `?cb=<ts>` cache-buster to dodge a stale cached bundle.

package/package.json

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

package/src/cli/commands/dev.ts

@@ -4,7 +4,7 @@ import type { CommandModule } from "yargs";
 import type { PeerMeta } from "../../shared/signaling";
 import type { ApprovePolicy } from "../approver";
 import { TOKEN_REQUIREMENTS, validateToken } from "../../shared/token";
-import { ensureHostId } from "../config";
+import { currentUser, ensureHostId } from "../config";
 import { launchServeDaemon } from "../daemonize";
 import { announceConnect } from "../open-url";
 import { runServer } from "../run-server";
@@ -137,6 +137,7 @@ export const devCommand: CommandModule<{}, DevArgs> = {
       // the real OS path for the local VS Code working dir.
       cwd: toPosixPath(dir),
       host,
+      user: currentUser(),
       hostId: ensureHostId(),
       kind: "repo",
       repo: id.repo,

package/src/cli/commands/expose.ts

@@ -2,7 +2,7 @@ import { hostname } from "node:os";
 import type { CommandModule } from "yargs";
 import type { PeerMeta } from "../../shared/signaling";
 import { TOKEN_REQUIREMENTS, validateToken } from "../../shared/token";
-import { ensureHostId } from "../config";
+import { currentUser, ensureHostId } from "../config";
 import { launchServeDaemon } from "../daemonize";
 import { runServer } from "../run-server";
 import { DEFAULT_SIGNAL_URL } from "./serve";
@@ -79,6 +79,7 @@ export const exposeCommand: CommandModule<{}, ExposeArgs> = {
       name: argv.name ?? `localhost:${argv.port}`,
       cwd: `localhost:${argv.port}`,
       host,
+      user: currentUser(),
       hostId: ensureHostId(),
     };
 

package/src/cli/commands/serve.ts

@@ -6,7 +6,7 @@ import type { PeerMeta } from "../../shared/signaling";
 import type { ApprovePolicy } from "../approver";
 import { DEFAULT_LAYOUT, GITHUB_HOST, toPosixPath } from "../../shared/repo";
 import { TOKEN_REQUIREMENTS, validateToken } from "../../shared/token";
-import { defaultRoot, ensureHostId } from "../config";
+import { currentUser, defaultRoot, ensureHostId } from "../config";
 import { launchServeDaemon } from "../daemonize";
 import { announceConnect } from "../open-url";
 import { agentYesPlugin } from "../plugins/agent-yes";
@@ -200,6 +200,7 @@ export const serveCommand: CommandModule<{}, ServeArgs> = {
           // real OS path `dir` is still what we spawn VS Code in.
           cwd: toPosixPath(dir),
           host,
+          user: currentUser(),
           hostId: ensureHostId(),
           kind: "root",
           layout,

package/src/cli/config.ts

@@ -1,5 +1,5 @@
 import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
-import { homedir } from "node:os";
+import { homedir, userInfo } from "node:os";
 import { dirname, join } from "node:path";
 
 // Persistent CLI config under ~/.codehost (same root as the managed VS Code
@@ -39,6 +39,17 @@ export function defaultRoot(file: string = CONFIG_FILE): string {
   return readConfig(file).root || join(homedir(), "ws");
 }
 
+/** This machine's OS login name, advertised so the web UI can show a
+ *  `user@host` label. Falls back to $USER/$USERNAME, then "unknown" —
+ *  os.userInfo() throws when the uid has no passwd entry (some containers). */
+export function currentUser(): string {
+  try {
+    return userInfo().username;
+  } catch {
+    return process.env.USER || process.env.USERNAME || "unknown";
+  }
+}
+
 /** This machine's persistent hostId, minting + saving it on first call. */
 export function ensureHostId(file: string = CONFIG_FILE): string {
   const config = readConfig(file);

package/src/shared/signaling.ts

@@ -68,6 +68,13 @@ export interface PeerMeta {
   cwd?: string;
   /** Server only: hostname of the machine running the daemon. */
   host?: string;
+  /**
+   * OS login name of whoever launched the daemon — the web UI shows it as the
+   * `user@host` label in front of the workspace URL, so you can tell which
+   * machine/account is actually serving a `codehost.dev/gh/...` link. Absent on
+   * older daemons (and in environments with no passwd entry) — fall back to `host`.
+   */
+  user?: string;
   /**
    * Stable machine identity (UUID persisted in ~/.codehost/config.json). All
    * daemons on one machine share it, unlike the per-process peerId, so clients

package/src/web/discovery.tsx

@@ -102,6 +102,19 @@ function shareLabel(path: string | null): string | null {
   return path;
 }
 
+/** External URL for a repo-shaped share path, so the connected-view label can
+ *  link out to the real host: /gh/owner/repo/tree/x -> https://github.com/owner/repo/tree/x,
+ *  /git/<host>/… -> https://<host>/… . Null for non-repo paths (folder mounts),
+ *  which have no public URL. */
+function shareHref(path: string | null): string | null {
+  if (!path) return null;
+  const gh = path.match(/^\/gh\/(.+)$/);
+  if (gh) return `https://github.com/${gh[1]}`;
+  const git = path.match(/^\/git\/(.+)$/);
+  if (git) return `https://${git[1]}`;
+  return null;
+}
+
 /**
  * Find which of the user's saved rooms hosts a server matching a token-less deep
  * link. Opens a short-lived viewer connection to each candidate room in
@@ -196,9 +209,28 @@ function RoomClient(props: {
   return null;
 }
 
-/** A copy-to-clipboard command row: label, the command, and a Copy button. */
+/** Track a `(max-width: …)` media query so inline-styled components can go
+ *  responsive without a stylesheet. SSR-safe and listener-cleaned. */
+function useNarrow(maxWidth = 560): boolean {
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== "undefined" && window.matchMedia(`(max-width:${maxWidth}px)`).matches,
+  );
+  useEffect(() => {
+    const mq = window.matchMedia(`(max-width:${maxWidth}px)`);
+    const on = () => setNarrow(mq.matches);
+    on();
+    mq.addEventListener("change", on);
+    return () => mq.removeEventListener("change", on);
+  }, [maxWidth]);
+  return narrow;
+}
+
+/** A copy-to-clipboard command row: label, the command, and a Copy button. On
+ *  narrow screens the three stack vertically so the long command doesn't get
+ *  crushed between a fixed label and the button. */
 function CopyCommand({ label, command }: { label: string; command: string }) {
   const [copied, setCopied] = useState(false);
+  const narrow = useNarrow();
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(command);
@@ -210,10 +242,10 @@ function CopyCommand({ label, command }: { label: string; command: string }) {
     setTimeout(() => setCopied(false), 1500);
   };
   return (
-    <div style={styles.cmdRow}>
-      <span style={styles.cmdLabel}>{label}</span>
+    <div style={{ ...styles.cmdRow, ...(narrow ? styles.cmdRowNarrow : null) }}>
+      <span style={{ ...styles.cmdLabel, ...(narrow ? styles.cmdLabelNarrow : null) }}>{label}</span>
       <code style={styles.cmdCode}>{command}</code>
-      <button style={styles.cmdCopy} onClick={copy}>
+      <button style={{ ...styles.cmdCopy, ...(narrow ? styles.cmdCopyNarrow : null) }} onClick={copy}>
         {copied ? "Copied!" : "Copy"}
       </button>
     </div>
@@ -941,16 +973,37 @@ export function Discovery() {
         <div style={styles.page}>
           <header style={styles.header}>
             <span style={styles.brand}>codehost</span>
-            <span style={styles.dim}>·</span>
-            <span
-              style={styles.cwd}
-              title={`${activeServer?.meta?.name ?? ""} ${activeServer?.meta?.cwd ?? ""}`.trim()}
-            >
-              {shareLabel(sharePathRef.current) ??
-                activeServer?.meta?.cwd ??
-                activeServer?.meta?.name ??
-                activePeerId?.slice(0, 8)}
-            </span>
+            {activeServer?.meta?.host ? (
+              // Which machine/account is actually serving this codehost.dev link.
+              <span style={styles.hostTag} title="machine serving this workspace">
+                [{activeServer.meta.user ? `${activeServer.meta.user}@` : ""}
+                {activeServer.meta.host}]
+              </span>
+            ) : (
+              <span style={styles.dim}>·</span>
+            )}
+            {shareHref(sharePathRef.current) ? (
+              // Repo-shaped link: clickable out to the real host (GitHub etc.).
+              <a
+                style={styles.cwdLink}
+                href={shareHref(sharePathRef.current) ?? undefined}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={shareHref(sharePathRef.current) ?? undefined}
+              >
+                {shareLabel(sharePathRef.current)}
+              </a>
+            ) : (
+              <span
+                style={styles.cwd}
+                title={`${activeServer?.meta?.name ?? ""} ${activeServer?.meta?.cwd ?? ""}`.trim()}
+              >
+                {shareLabel(sharePathRef.current) ??
+                  activeServer?.meta?.cwd ??
+                  activeServer?.meta?.name ??
+                  activePeerId?.slice(0, 8)}
+              </span>
+            )}
             {connPath && (
               <span
                 style={styles.dim}
@@ -1281,6 +1334,7 @@ const styles: Record<string, React.CSSProperties> = {
   page: { display: "flex", flexDirection: "column", height: "100%", background: "#1f1f1f", color: "#ccc", fontFamily: "system-ui, sans-serif" },
   header: { display: "flex", alignItems: "center", gap: 8, padding: "8px 14px", background: "#2d2d2d", borderBottom: "1px solid #3d3d3d", fontSize: 13 },
   brand: { fontFamily: "monospace", fontWeight: 700, color: "#fff" },
+  hostTag: { fontFamily: "monospace", fontSize: 12, color: "#dcdcaa" },
   dim: { color: "#888", fontSize: 12 },
   status: { fontSize: 12 },
   // Wide cap + per-host card GRID below: a 4K monitor gets several columns of
@@ -1354,6 +1408,7 @@ const styles: Record<string, React.CSSProperties> = {
   cardName: { fontSize: 14, fontWeight: 600, color: "#fff" },
   cardSub: { display: "flex", gap: 12, fontSize: 12, color: "#888", marginTop: 2 },
   cwd: { fontFamily: "monospace" },
+  cwdLink: { fontFamily: "monospace", color: "#75beff", textDecoration: "none" },
   echo: { marginTop: 6, fontSize: 12, color: "#4ec9b0", fontFamily: "monospace" },
   echoBad: { marginTop: 6, fontSize: 12, color: "#f48771", fontFamily: "monospace" },
   rosterSection: { marginTop: 28 },
@@ -1362,9 +1417,12 @@ const styles: Record<string, React.CSSProperties> = {
   setupHead: { fontSize: 15, color: "#fff", fontWeight: 600, marginBottom: 6 },
   setupSub: { fontSize: 13, color: "#aaa", margin: "0 0 14px", lineHeight: 1.5 },
   cmdRow: { display: "flex", alignItems: "center", gap: 10, marginTop: 8 },
+  cmdRowNarrow: { flexDirection: "column", alignItems: "stretch", gap: 6, marginTop: 12 },
   cmdLabel: { fontSize: 11, color: "#888", width: 88, flexShrink: 0 },
-  cmdCode: { flex: 1, minWidth: 0, background: "#1b1b1b", border: "1px solid #3d3d3d", borderRadius: 6, padding: "8px 10px", fontFamily: "monospace", fontSize: 12.5, color: "#dcdcaa", overflow: "auto", whiteSpace: "nowrap" },
+  cmdLabelNarrow: { width: "auto" },
+  cmdCode: { flex: 1, minWidth: 0, background: "#1b1b1b", border: "1px solid #3d3d3d", borderRadius: 6, padding: "8px 10px", fontFamily: "monospace", fontSize: 12.5, color: "#dcdcaa", whiteSpace: "pre-wrap", overflowWrap: "anywhere" },
   cmdCopy: { flexShrink: 0, background: "#0e639c", border: "none", color: "#fff", padding: "8px 12px", borderRadius: 6, cursor: "pointer", fontSize: 12 },
+  cmdCopyNarrow: { width: "100%", padding: "10px 12px" },
   rosterHint: { margin: "10px 0 0", fontSize: 12, color: "#888" },
   personRow: { display: "flex", alignItems: "center", gap: 10, background: "#252525", border: "1px solid #3d3d3d", borderRadius: 8, padding: "8px 14px", fontSize: 13 },
   personDot: { color: "#4ec9b0", fontSize: 10 },

package/.claude/scheduled_tasks.lock

@@ -1 +0,0 @@
-{"sessionId":"f8e4e571-944e-43d7-bbfa-267a5251e41c","pid":87968,"procStart":"Mon Jun  8 09:46:02 2026","acquiredAt":1780974562147}