@tsconfigdotjson/vibe-os 0.0.0-stage → 0.1.0

package/server/wallpapers.ts

@@ -0,0 +1,248 @@
+// Wallpaper storage.
+//
+// Stored content-addressed: the filename is derived from a hash of the bytes,
+// never from anything the client sent. That removes path traversal as a
+// category rather than trying to sanitise around it, and deduplicates uploads
+// for free. The user's chosen display name lives in a side index.
+//
+// The type is decided by sniffing magic bytes, not by trusting Content-Type or
+// a file extension. These files are served back to a browser, so letting a
+// caller label an HTML document as an image would be a stored-XSS primitive.
+
+import { createHash } from "node:crypto";
+import { mkdir, readdir, readFile, unlink, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { serialise, writeAtomic } from "./fsx.ts";
+import { log } from "./log.ts";
+
+export const MAX_WALLPAPER_BYTES = 16 * 1024 * 1024;
+
+const SIGNATURES: {
+  ext: string;
+  mime: string;
+  test: (b: Uint8Array) => boolean;
+}[] = [
+  {
+    ext: "png",
+    mime: "image/png",
+    test: (b) =>
+      b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4e && b[3] === 0x47,
+  },
+  {
+    ext: "jpg",
+    mime: "image/jpeg",
+    test: (b) => b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff,
+  },
+  {
+    ext: "gif",
+    mime: "image/gif",
+    test: (b) =>
+      b[0] === 0x47 && b[1] === 0x49 && b[2] === 0x46 && b[3] === 0x38,
+  },
+  {
+    ext: "webp",
+    mime: "image/webp",
+    test: (b) =>
+      b[0] === 0x52 &&
+      b[1] === 0x49 &&
+      b[2] === 0x46 &&
+      b[3] === 0x46 &&
+      b[8] === 0x57 &&
+      b[9] === 0x45 &&
+      b[10] === 0x42 &&
+      b[11] === 0x50,
+  },
+  {
+    ext: "avif",
+    mime: "image/avif",
+    test: (b) =>
+      b[4] === 0x66 &&
+      b[5] === 0x74 &&
+      b[6] === 0x79 &&
+      b[7] === 0x70 &&
+      b[8] === 0x61 &&
+      b[9] === 0x76 &&
+      b[10] === 0x69 &&
+      b[11] === 0x66,
+  },
+];
+
+const ID_PATTERN = /^wp-[a-f0-9]{16}\.(png|jpg|gif|webp|avif)$/;
+
+/**
+ * Anything in Unicode's Control category, which a display name has no business
+ * carrying: it is echoed back to the browser and written into the index file.
+ */
+const CONTROL_CHARS = /\p{Cc}/gu;
+
+import type { DesktopPrefs, Wallpaper } from "../shared/wire.ts";
+
+export type { DesktopPrefs, Wallpaper };
+
+const DEFAULT_PREFS: DesktopPrefs = {
+  wallpaper: null,
+  fit: "cover",
+  dim: 0.35,
+};
+
+/**
+ * One rule for a prefs object, applied on the way in and on the way out.
+ *
+ * These were two implementations that disagreed: reading an out-of-range `dim`
+ * fell back to the default, writing the same value clamped it to 0.9. Whichever
+ * you believed, the other one was wrong.
+ */
+function sanitisePrefs(raw: unknown): DesktopPrefs {
+  const v = (raw ?? {}) as Partial<DesktopPrefs>;
+  const dim = Number(v.dim);
+  return {
+    wallpaper:
+      typeof v.wallpaper === "string" && ID_PATTERN.test(v.wallpaper)
+        ? v.wallpaper
+        : null,
+    fit: v.fit === "contain" || v.fit === "tile" ? v.fit : "cover",
+    dim: Number.isFinite(dim)
+      ? Math.min(0.9, Math.max(0, dim))
+      : DEFAULT_PREFS.dim,
+  };
+}
+
+/** Mime for a stored id, which is content-addressed and carries its extension. */
+function mimeForId(id: string): string {
+  return (
+    SIGNATURES.find((s) => s.ext === id.split(".").pop())?.mime ??
+    "application/octet-stream"
+  );
+}
+
+function sniff(bytes: Uint8Array): { ext: string; mime: string } | null {
+  if (bytes.length < 16) return null;
+  return SIGNATURES.find((s) => s.test(bytes)) ?? null;
+}
+
+export class WallpaperStore {
+  private readonly dir: string;
+  private readonly indexPath: string;
+  private readonly prefsPath: string;
+  /**
+   * The name index is read, modified and written back, which two concurrent
+   * uploads would otherwise interleave — both read the old map, and the second
+   * write drops the first's display name. Every mutation queues here instead.
+   */
+  private readonly queue = serialise();
+
+  constructor(stateDir: string) {
+    this.dir = path.join(stateDir, "wallpapers");
+    this.indexPath = path.join(this.dir, "index.json");
+    this.prefsPath = path.join(stateDir, "desktop.json");
+  }
+
+  async init(): Promise<void> {
+    await mkdir(this.dir, { recursive: true, mode: 0o700 });
+  }
+
+  private async names(): Promise<Record<string, string>> {
+    try {
+      return JSON.parse(await readFile(this.indexPath, "utf8")) as Record<
+        string,
+        string
+      >;
+    } catch {
+      return {};
+    }
+  }
+
+  async list(): Promise<Wallpaper[]> {
+    await this.init();
+    const names = await this.names();
+    const entries = await readdir(this.dir).catch(() => [] as string[]);
+    const out: Wallpaper[] = [];
+    for (const id of entries) {
+      if (!ID_PATTERN.test(id)) continue;
+      const file = Bun.file(path.join(this.dir, id));
+      const mime = mimeForId(id);
+      out.push({ id, name: names[id] ?? id, mime, size: file.size });
+    }
+    return out.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  /** Returns the stored wallpaper, or null if the id is unknown or malformed. */
+  async read(
+    id: string,
+  ): Promise<{ file: ReturnType<typeof Bun.file>; mime: string } | null> {
+    if (!ID_PATTERN.test(id)) return null;
+    const file = Bun.file(path.join(this.dir, id));
+    if (!(await file.exists())) return null;
+    const mime = mimeForId(id);
+    return { file, mime };
+  }
+
+  async save(bytes: Uint8Array, displayName: string): Promise<Wallpaper> {
+    if (bytes.length === 0) throw new Error("empty upload");
+    if (bytes.length > MAX_WALLPAPER_BYTES) {
+      throw new Error(
+        `image is larger than ${Math.round(MAX_WALLPAPER_BYTES / 1024 / 1024)}MB`,
+      );
+    }
+    const kind = sniff(bytes);
+    if (!kind)
+      throw new Error("not a recognised image (png, jpeg, gif, webp or avif)");
+
+    await this.init();
+    const digest = createHash("sha256")
+      .update(bytes)
+      .digest("hex")
+      .slice(0, 16);
+    const id = `wp-${digest}.${kind.ext}`;
+    await writeFile(path.join(this.dir, id), bytes, { mode: 0o600 });
+
+    const clean =
+      displayName.replace(CONTROL_CHARS, "").trim().slice(0, 80) || id;
+    await this.queue(async () => {
+      const names = await this.names();
+      names[id] = clean;
+      await writeAtomic(this.indexPath, JSON.stringify(names, null, 2), 0o600);
+    });
+
+    log.info(
+      `stored wallpaper ${clean} (${(bytes.length / 1024).toFixed(0)}KB, ${kind.mime})`,
+    );
+    return { id, name: clean, mime: kind.mime, size: bytes.length };
+  }
+
+  async remove(id: string): Promise<boolean> {
+    if (!ID_PATTERN.test(id)) return false;
+    try {
+      await unlink(path.join(this.dir, id));
+    } catch {
+      return false;
+    }
+    await this.queue(async () => {
+      const names = await this.names();
+      delete names[id];
+      await writeAtomic(this.indexPath, JSON.stringify(names, null, 2), 0o600);
+    }).catch(() => {});
+
+    // Do not leave the desktop pointing at something that no longer exists.
+    const prefs = await this.prefs();
+    if (prefs.wallpaper === id)
+      await this.setPrefs({ ...prefs, wallpaper: null });
+    return true;
+  }
+
+  async prefs(): Promise<DesktopPrefs> {
+    try {
+      return sanitisePrefs(
+        JSON.parse(await readFile(this.prefsPath, "utf8")) as unknown,
+      );
+    } catch {
+      return { ...DEFAULT_PREFS };
+    }
+  }
+
+  async setPrefs(next: DesktopPrefs): Promise<DesktopPrefs> {
+    const clean = sanitisePrefs(next);
+    await writeAtomic(this.prefsPath, JSON.stringify(clean, null, 2), 0o600);
+    return clean;
+  }
+}

package/server/windows.ts

@@ -0,0 +1,237 @@
+// Window layout, stored per workspace.
+//
+// This lives on the server rather than in localStorage so a desktop follows you
+// between browsers and machines, and so switching workspaces can restore an
+// arrangement rather than rebuild one.
+
+import { eq, sql } from "drizzle-orm";
+import {
+  DEFAULT_WINDOW_COLS,
+  DEFAULT_WINDOW_ROWS,
+  GRID_COLS,
+  GRID_ROWS,
+  MIN_WINDOW_COLS,
+  MIN_WINDOW_ROWS,
+} from "../shared/grid.ts";
+import { sessionName } from "./attach.ts";
+import { type Db, newId, windows, workspaces } from "./db.ts";
+
+const MIN_COLS = MIN_WINDOW_COLS;
+const MIN_ROWS = MIN_WINDOW_ROWS;
+
+export interface Geometry {
+  col: number;
+  row: number;
+  colSpan: number;
+  rowSpan: number;
+  z?: number;
+  minimized?: boolean;
+}
+
+const clampInt = (
+  v: unknown,
+  lo: number,
+  hi: number,
+  fallback: number,
+): number => {
+  const n = Math.round(Number(v));
+  return Number.isFinite(n) ? Math.max(lo, Math.min(hi, n)) : fallback;
+};
+
+/**
+ * Server-side bounds check.
+ *
+ * The client already clamps, but geometry arrives over HTTP and a row that says
+ * a window is 900 cells wide would break every later render. Same rule as the
+ * client: size is honoured first, then position is pulled into range.
+ */
+export function sanitize(
+  input: Partial<Geometry>,
+  current?: Geometry,
+): Required<Geometry> {
+  const colSpan = clampInt(
+    input.colSpan ?? current?.colSpan,
+    MIN_COLS,
+    GRID_COLS,
+    DEFAULT_WINDOW_COLS,
+  );
+  const rowSpan = clampInt(
+    input.rowSpan ?? current?.rowSpan,
+    MIN_ROWS,
+    GRID_ROWS,
+    DEFAULT_WINDOW_ROWS,
+  );
+  return {
+    colSpan,
+    rowSpan,
+    col: clampInt(input.col ?? current?.col, 0, GRID_COLS - colSpan, 0),
+    row: clampInt(input.row ?? current?.row, 0, GRID_ROWS - rowSpan, 0),
+    z: clampInt(input.z ?? current?.z, 0, Number.MAX_SAFE_INTEGER, 1),
+    minimized: Boolean(input.minimized ?? current?.minimized),
+  };
+}
+
+export function listWindows(db: Db, workspaceId: string) {
+  return db
+    .select()
+    .from(windows)
+    .where(eq(windows.workspaceId, workspaceId))
+    .orderBy(windows.z)
+    .all()
+    .map(toRow);
+}
+
+export function getWindow(db: Db, id: string) {
+  const row = db.select().from(windows).where(eq(windows.id, id)).get();
+  return row ? toRow(row) : undefined;
+}
+
+/**
+ * SQLite has no booleans, so the flags come back as 0 and 1.
+ *
+ * Concrete in its parameter rather than generic: a generic here produces
+ * `T & { minimized: boolean }`, and intersecting `number` with `boolean` is
+ * `never`, which makes every field of the result unreadable.
+ */
+function toRow(w: typeof windows.$inferSelect) {
+  return {
+    ...w,
+    minimized: Boolean(w.minimized),
+    promptDone: Boolean(w.promptDone),
+    handoffSeen: Boolean(w.handoffSeen),
+    handoff: (w.handoff as "ssh" | null) ?? null,
+  };
+}
+
+/**
+ * Places a new window without landing exactly on an existing one.
+ *
+ * A plain cascade walks off the bottom-right after a few windows, so this wraps
+ * back and nudges sideways instead.
+ */
+function placement(index: number): Geometry {
+  const colSpan = DEFAULT_WINDOW_COLS;
+  const rowSpan = DEFAULT_WINDOW_ROWS;
+  const step = 2;
+  const slots = Math.max(1, Math.floor((GRID_COLS - colSpan) / step));
+  const lane = index % slots;
+  const wrap = Math.floor(index / slots);
+  return sanitize({
+    col: lane * step + wrap,
+    row: (lane * step + wrap) % Math.max(1, GRID_ROWS - rowSpan),
+    colSpan,
+    rowSpan,
+  });
+}
+
+export function createWindow(
+  db: Db,
+  workspaceId: string,
+  profileId?: string | null,
+) {
+  const existing = listWindows(db, workspaceId);
+
+  // Lowest unused index: it becomes part of the session name, which people read
+  // when picking a window to attach to, so it should stay short and get reused.
+  const used = new Set(existing.map((w) => w.idx));
+  let idx = 1;
+  while (used.has(idx)) idx += 1;
+
+  const topZ = existing.reduce((max, w) => Math.max(max, w.z), 0);
+  const geometry = placement(existing.length);
+  const id = newId();
+
+  db.insert(windows)
+    .values({
+      id,
+      workspaceId,
+      idx,
+      col: geometry.col,
+      row: geometry.row,
+      colSpan: geometry.colSpan,
+      rowSpan: geometry.rowSpan,
+      z: topZ + 1,
+      minimized: 0,
+      profileId: profileId ?? null,
+      promptDone: 0,
+      createdAt: Date.now(),
+    })
+    .run();
+
+  const created = getWindow(db, id);
+  if (!created) throw new Error(`window ${id} vanished after insert`);
+  return created;
+}
+
+export function updateWindow(
+  db: Db,
+  id: string,
+  patch: Partial<Geometry> & { raise?: boolean; promptDone?: boolean },
+) {
+  const current = getWindow(db, id);
+  if (!current) return undefined;
+
+  let z = current.z;
+  if (patch.raise) {
+    const top = db
+      .select({ max: sql<number>`coalesce(max(${windows.z}), 0)` })
+      .from(windows)
+      .where(eq(windows.workspaceId, current.workspaceId))
+      .get();
+    z = (top?.max ?? 0) + 1;
+  }
+
+  const geometry = sanitize({ ...patch, z: patch.z ?? z }, current);
+  db.update(windows)
+    .set({
+      col: geometry.col,
+      row: geometry.row,
+      colSpan: geometry.colSpan,
+      rowSpan: geometry.rowSpan,
+      z: geometry.z,
+      minimized: geometry.minimized ? 1 : 0,
+      // One-way: the prompt band, once handed off, stays closed.
+      promptDone: patch.promptDone || current.promptDone ? 1 : 0,
+    })
+    .where(eq(windows.id, id))
+    .run();
+
+  return getWindow(db, id);
+}
+
+export function deleteWindow(db: Db, id: string) {
+  const row = getWindow(db, id);
+  if (row) db.delete(windows).where(eq(windows.id, id)).run();
+  return row;
+}
+
+/**
+ * The session name for a window, with everything else needed to launch it.
+ *
+ * Built from the workspace name and the window index so the session list reads as
+ * something a person recognises: `vibe-quiet-amber-otter-1`. The profile is
+ * deliberately *not* folded into the name — renaming a role would then orphan
+ * the session running it, for no gain a person would notice.
+ */
+export function sessionNameFor(
+  db: Db,
+  windowId: string,
+): { session: string; cwd: string; profileId: string | null } | undefined {
+  const row = db
+    .select({
+      idx: windows.idx,
+      profileId: windows.profileId,
+      name: workspaces.name,
+      path: workspaces.path,
+    })
+    .from(windows)
+    .innerJoin(workspaces, eq(windows.workspaceId, workspaces.id))
+    .where(eq(windows.id, windowId))
+    .get();
+  if (!row) return undefined;
+  return {
+    session: sessionName(row.name, row.idx),
+    cwd: row.path,
+    profileId: row.profileId,
+  };
+}

package/shared/args.ts

@@ -0,0 +1,91 @@
+/**
+ * Turning a flag string into argv, and back.
+ *
+ * Shared rather than mirrored. These two are inverses of each other, and the
+ * editor relies on that: `detokenize` renders stored argv into the text field,
+ * `tokenize` parses it on the way back, so every save of an unmodified profile
+ * runs a full cycle. They lived in two files that agreed by hand until they
+ * didn't — the browser's copy had no unbalanced-quote check and no idea what
+ * the escaping the server emitted meant, so an argument with an apostrophe in
+ * it came back mangled on one side and unsaveable on the other.
+ *
+ * Runtime code, unlike the type-only `wire.ts` beside it, so `shared/` is in
+ * the package's `files` list.
+ */
+
+/**
+ * Splits a flag string into argv tokens, honouring quotes.
+ *
+ * The tokens are shell-quoted individually when the launch command is built, so
+ * this is what stops `--model "gpt 4"` from becoming two arguments and equally
+ * what stops a stray `;` from becoming a second command. Unbalanced quotes are
+ * an error here rather than a mystery at spawn time — you find out when you
+ * press save, not when the terminal comes up empty.
+ */
+export function tokenize(input: string): string[] {
+  const tokens: string[] = [];
+  let current = "";
+  let quote: '"' | "'" | null = null;
+  let started = false;
+
+  for (let i = 0; i < input.length; i += 1) {
+    const ch = input[i];
+
+    // Single quotes are literal in POSIX: no escape survives inside them, and
+    // the only way out is the closing quote. This is what makes the `'\''`
+    // idiom detokenize emits work — it closes, escapes, and reopens.
+    if (quote === "'") {
+      if (ch === "'") quote = null;
+      else current += ch;
+      continue;
+    }
+    if (quote === '"') {
+      if (ch === "\\" && (input[i + 1] === '"' || input[i + 1] === "\\")) {
+        current += input[i + 1];
+        i += 1;
+      } else if (ch === '"') quote = null;
+      else current += ch;
+      continue;
+    }
+    if (ch === "\\") {
+      if (i + 1 >= input.length)
+        throw new Error("the arguments end in a dangling backslash");
+      current += input[i + 1];
+      i += 1;
+      started = true;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      started = true;
+      continue;
+    }
+    if (/\s/.test(ch)) {
+      if (started) tokens.push(current);
+      current = "";
+      started = false;
+      continue;
+    }
+    current += ch;
+    started = true;
+  }
+
+  if (quote) throw new Error(`unbalanced ${quote} in the arguments`);
+  if (started) tokens.push(current);
+  return tokens;
+}
+
+/**
+ * Renders tokens back to editable text. Round-trips through `tokenize`.
+ *
+ * Backslash is in the quote-me set alongside whitespace and the quote
+ * characters, because `tokenize` now treats it as an escape: without this a
+ * token like `C:\\path` would come back as `C:path`.
+ */
+export function detokenize(tokens: string[]): string {
+  return tokens
+    .map((t) =>
+      t === "" || /[\s"'\\]/.test(t) ? `'${t.replaceAll("'", `'\\''`)}'` : t,
+    )
+    .join(" ");
+}

package/shared/grid.ts

@@ -0,0 +1,32 @@
+/**
+ * The window grid, agreed on by both halves of the desktop.
+ *
+ * Geometry is stored in grid units rather than pixels, and both sides clamp
+ * against these bounds: the browser so a drag cannot leave the screen, the
+ * server so a row arriving over HTTP cannot claim a window is 900 cells wide.
+ * They were declared separately in `server/windows.ts` and
+ * `src/desktop/useWindows.ts` with the server's copy imported by nobody — so
+ * changing the grid on one side silently clamped every stored window to a
+ * rectangle the other side was not drawing.
+ *
+ * Runtime values, so `shared/` ships with the package. See `shared/wire.ts` for
+ * the type-only half.
+ */
+
+/** Columns across the desktop. */
+export const GRID_COLS = 24;
+/** Rows down the desktop. */
+export const GRID_ROWS = 14;
+
+/**
+ * The smallest a window may be, in cells.
+ *
+ * Below this a terminal has too few columns to be worth having — an 80-column
+ * program in four cells is unreadable rather than merely small.
+ */
+export const MIN_WINDOW_COLS = 5;
+export const MIN_WINDOW_ROWS = 4;
+
+/** The default size a new window opens at. */
+export const DEFAULT_WINDOW_COLS = 11;
+export const DEFAULT_WINDOW_ROWS = 8;