@saadnvd1/agent-os 0.3.560 → 0.3.561

package/lib/share/snapshot.ts

@@ -0,0 +1,261 @@
+/**
+ * What a share contains: a chat's items, or one artifact, already redacted.
+ * Nothing here leaves the machine; the renderer turns it into a page.
+ */
+
+import { listItems } from "../chat/store";
+import type { ChatItem } from "../chat/events";
+import { getSession } from "../chat/registry";
+import { getArtifact, readArtifactHtml } from "../artifacts/store";
+import { isSecretPath } from "../secret-paths";
+import {
+  addHits,
+  noHits,
+  redactForShare,
+  type Hits,
+  type ShareContext,
+} from "./redact";
+
+export type SnapshotType =
+  | "user"
+  | "assistant"
+  | "plan"
+  | "error"
+  | "divider"
+  | "artifact"
+  | "detail";
+
+export interface SnapshotItem {
+  id: string;
+  type: SnapshotType;
+  /** For a detail row: what it is (a tool's title, "Thinking"). */
+  label?: string;
+  text: string;
+  /** An artifact's page. */
+  html?: string;
+  height?: number;
+  /** The first words, for the dialog's message list. */
+  excerpt: string;
+  /** Hidden unless "include tool calls and thinking" is on. */
+  tools: boolean;
+}
+
+export interface Snapshot {
+  title: string;
+  items: SnapshotItem[];
+  /** Whether the tools group was left out, to say so on the page. */
+  toolsHidden: boolean;
+  hits: Hits;
+}
+
+export const MAX_TOOL_INPUT = 4_000;
+export const MAX_TOOL_OUTPUT = 20_000;
+const HIDDEN_FILE = "[contents of a secret file hidden]";
+const NO_IMAGE = "[image not shared]";
+
+const clip = (s: string, max: number) =>
+  s.length > max
+    ? `${s.slice(0, max)}\n… (${s.length - max} more characters)`
+    : s;
+
+const excerptOf = (s: string) => s.replace(/\s+/g, " ").trim().slice(0, 120);
+
+// Every string in a tool's input, to see whether it names a secret file.
+function strings(v: unknown, out: string[] = []): string[] {
+  if (typeof v === "string") out.push(v);
+  else if (Array.isArray(v)) v.forEach((x) => strings(x, out));
+  else if (v && typeof v === "object")
+    Object.values(v).forEach((x) => strings(x, out));
+  return out;
+}
+
+const json = (v: unknown) => {
+  try {
+    return typeof v === "string" ? v : (JSON.stringify(v, null, 2) ?? "");
+  } catch {
+    return "";
+  }
+};
+
+/** Items as the reader sees them: what an undo took back is gone. */
+export function visible(items: ChatItem[]): ChatItem[] {
+  const out: ChatItem[] = [];
+  for (const item of items) {
+    if (item.kind !== "undo") {
+      out.push(item);
+      continue;
+    }
+    const at = out.findIndex((i) => i.id === item.from);
+    if (at !== -1) out.length = at;
+  }
+  return out;
+}
+
+type Raw = Omit<SnapshotItem, "excerpt">;
+
+/** One chat item as a row, or null for what is never shared. */
+export function toRaw(item: ChatItem): Raw | null {
+  const id = item.id;
+  switch (item.kind) {
+    case "user": {
+      const images = item.images?.length
+        ? "\n" + item.images.map(() => NO_IMAGE).join("\n")
+        : "";
+      return { id, type: "user", text: item.text + images, tools: false };
+    }
+    case "assistant":
+      return item.text.trim()
+        ? { id, type: "assistant", text: item.text, tools: false }
+        : null;
+    case "plan":
+      return { id, type: "plan", text: item.plan, tools: false };
+    case "error":
+      return { id, type: "error", text: item.message, tools: false };
+    case "compacted":
+      return {
+        id,
+        type: "divider",
+        text: "Conversation compacted",
+        tools: false,
+      };
+    case "artifact":
+      return {
+        id,
+        type: "artifact",
+        label: item.title,
+        text: "",
+        height: item.height,
+        tools: false,
+      };
+    case "reasoning":
+      return item.text.trim()
+        ? {
+            id,
+            type: "detail",
+            label: "Thinking",
+            text: item.text,
+            tools: true,
+          }
+        : null;
+    case "tool": {
+      const secret = strings(item.input).some(isSecretPath);
+      const input = clip(json(item.input), MAX_TOOL_INPUT);
+      const output = secret
+        ? HIDDEN_FILE
+        : clip(item.output ?? "", MAX_TOOL_OUTPUT);
+      return {
+        id,
+        type: "detail",
+        label: item.title || item.name,
+        text: output ? `${input}\n\n${output}` : input,
+        tools: true,
+      };
+    }
+    case "command_output":
+      return {
+        id,
+        type: "detail",
+        label: "Command output",
+        text: clip(item.text, MAX_TOOL_OUTPUT),
+        tools: true,
+      };
+    case "todos":
+      return {
+        id,
+        type: "detail",
+        label: "To do",
+        text: item.todos
+          .map((t) => `${t.status === "completed" ? "[x]" : "[ ]"} ${t.text}`)
+          .join("\n"),
+        tools: true,
+      };
+    case "mcp":
+      return {
+        id,
+        type: "detail",
+        label: "MCP servers",
+        text: item.servers.map((s) => `${s.name}: ${s.status}`).join("\n"),
+        tools: true,
+      };
+    case "task":
+      return {
+        id,
+        type: "detail",
+        label: item.description,
+        text: item.summary ?? item.status,
+        tools: true,
+      };
+    default:
+      // approval, note, undo, turn_end
+      return null;
+  }
+}
+
+/** What the preview lists: every shareable item, whether or not it's on. */
+export async function buildChatSnapshot(
+  sessionId: string,
+  ctx: ShareContext,
+  opts: { includeTools: boolean; dropIds?: string[] }
+): Promise<Snapshot> {
+  const session = getSession(sessionId);
+  const dropped = new Set(opts.dropIds ?? []);
+  let hits = noHits();
+  const take = (text: string) => {
+    const r = redactForShare(text, ctx);
+    hits = addHits(hits, r.hits);
+    return r.text;
+  };
+
+  const items: SnapshotItem[] = [];
+  for (const item of visible(listItems(sessionId))) {
+    const raw = toRaw(item);
+    if (!raw) continue;
+    if (raw.tools && !opts.includeTools) continue;
+    if (dropped.has(raw.id)) continue;
+    const row: SnapshotItem = {
+      ...raw,
+      label: raw.label === undefined ? undefined : take(raw.label),
+      text: take(raw.text),
+      excerpt: "",
+    };
+    if (raw.type === "artifact") {
+      const artifact = getArtifact(listArtifactId(item) ?? "");
+      const html = artifact ? await readArtifactHtml(artifact) : null;
+      if (html === null) continue;
+      row.html = take(html);
+    }
+    row.excerpt = excerptOf(row.text || row.label || "");
+    items.push(row);
+  }
+  return {
+    title: take(session.name).slice(0, 120) || "Chat",
+    items,
+    toolsHidden: !opts.includeTools,
+    hits,
+  };
+}
+
+const listArtifactId = (item: ChatItem) =>
+  item.kind === "artifact" ? item.artifactId : null;
+
+export interface ArtifactSnapshot {
+  title: string;
+  html: string;
+  hits: Hits;
+}
+
+export async function buildArtifactSnapshot(
+  artifactId: string,
+  ctx: ShareContext
+): Promise<ArtifactSnapshot | null> {
+  const artifact = getArtifact(artifactId);
+  const html = artifact ? await readArtifactHtml(artifact) : null;
+  if (!artifact || html === null) return null;
+  const page = redactForShare(html, ctx);
+  const title = redactForShare(artifact.title, ctx);
+  return {
+    title: title.text.slice(0, 120) || "Page",
+    html: page.text,
+    hits: addHits(page.hits, title.hits),
+  };
+}

package/lib/share/static-markup.ts

@@ -0,0 +1,16 @@
+import { createRequire } from "module";
+import path from "path";
+import type { ReactElement } from "react";
+
+// Next refuses a static import of react-dom/server in a route's module graph
+// (it is meant for pages). A snapshot is a plain string, not a page, so it is
+// loaded by name at run time; the bundler never sees the import.
+const load = createRequire(path.join(process.cwd(), "package.json"));
+let render: ((el: ReactElement) => string) | null = null;
+
+export function renderToStaticMarkup(element: ReactElement): string {
+  render ??= (
+    load("react-dom/server") as { renderToStaticMarkup: typeof render & object }
+  ).renderToStaticMarkup;
+  return render!(element);
+}

package/lib/share/store.ts

@@ -0,0 +1,39 @@
+import { db } from "../db";
+
+export interface SharedLink {
+  id: string;
+  url: string;
+  kind: "chat" | "artifact";
+  title: string;
+  session_id: string | null;
+  artifact_id: string | null;
+  expires_at: string | null;
+  created_at: string;
+  revoked_at: string | null;
+}
+
+export function insertSharedLink(link: SharedLink): void {
+  db.prepare(
+    `INSERT INTO shared_links
+       (id, url, kind, title, session_id, artifact_id, expires_at, created_at, revoked_at)
+     VALUES (@id, @url, @kind, @title, @session_id, @artifact_id, @expires_at, @created_at, @revoked_at)`
+  ).run(link);
+}
+
+export function listSharedLinks(): SharedLink[] {
+  return db
+    .prepare(`SELECT * FROM shared_links ORDER BY created_at DESC, rowid DESC`)
+    .all() as SharedLink[];
+}
+
+export function getSharedLink(id: string): SharedLink | undefined {
+  return db.prepare(`SELECT * FROM shared_links WHERE id = ?`).get(id) as
+    | SharedLink
+    | undefined;
+}
+
+export function markRevoked(id: string): void {
+  db.prepare(
+    `UPDATE shared_links SET revoked_at = COALESCE(revoked_at, ?) WHERE id = ?`
+  ).run(new Date().toISOString(), id);
+}

package/lib/share/styles.ts

@@ -0,0 +1,83 @@
+/**
+ * The stylesheet inlined into a shared page. The colours are the app's
+ * default light and dark themes (styles/themes.css, checked by a test), under
+ * prefers-color-scheme, so a snapshot looks like the chat it came from.
+ */
+
+export const LIGHT = {
+  background: "240 10% 95.5%",
+  foreground: "240 12% 14%",
+  card: "0 0% 100%",
+  primary: "262 83% 58%",
+  "primary-foreground": "0 0% 100%",
+  muted: "240 16% 94%",
+  "muted-foreground": "240 6% 46%",
+  border: "240 14% 88%",
+  destructive: "352 80% 56%",
+};
+
+export const DARK = {
+  background: "240 18% 3.5%",
+  foreground: "240 10% 93%",
+  card: "240 14% 6%",
+  primary: "262 92% 68%",
+  "primary-foreground": "0 0% 100%",
+  muted: "240 12% 10%",
+  "muted-foreground": "240 6% 58%",
+  border: "240 10% 15%",
+  destructive: "352 85% 62%",
+};
+
+const vars = (v: Record<string, string>) =>
+  Object.entries(v)
+    .map(([k, val]) => `--${k}:${val};`)
+    .join("");
+
+// Syntax colours, One Light and One Dark as the chat uses.
+const TOKENS_LIGHT = `.token.comment,.token.prolog,.token.cdata{color:#a0a1a7;font-style:italic}.token.keyword,.token.selector,.token.atrule{color:#a626a4}.token.string,.token.char,.token.attr-value,.token.inserted{color:#50a14f}.token.number,.token.boolean,.token.constant,.token.symbol{color:#986801}.token.function,.token.class-name{color:#4078f2}.token.tag,.token.property,.token.deleted{color:#e45649}.token.operator,.token.punctuation{color:#383a42}.token.builtin,.token.attr-name{color:#c18401}`;
+const TOKENS_DARK = `.token.comment,.token.prolog,.token.cdata{color:#5c6370;font-style:italic}.token.keyword,.token.selector,.token.atrule{color:#c678dd}.token.string,.token.char,.token.attr-value,.token.inserted{color:#98c379}.token.number,.token.boolean,.token.constant,.token.symbol{color:#d19a66}.token.function,.token.class-name{color:#61afef}.token.tag,.token.property,.token.deleted{color:#e06c75}.token.operator,.token.punctuation{color:#abb2bf}.token.builtin,.token.attr-name{color:#e5c07b}`;
+
+export const STYLES = `
+:root{color-scheme:light dark;${vars(LIGHT)}}
+${TOKENS_LIGHT}
+@media (prefers-color-scheme:dark){:root{${vars(DARK)}}${TOKENS_DARK}}
+*{box-sizing:border-box}
+html{-webkit-text-size-adjust:100%}
+body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
+.wrap{max-width:760px;margin:0 auto;padding:24px 16px 64px}
+header{margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid hsl(var(--border))}
+h1.title{margin:0 0 4px;font-size:20px;line-height:1.3}
+.meta{margin:0;color:hsl(var(--muted-foreground));font-size:13px}
+.msg{margin:16px 0}
+.user{display:flex;justify-content:flex-end}
+.user .bubble{max-width:85%;background:hsl(var(--muted));border-radius:14px;padding:8px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
+.assistant,.plan{overflow-wrap:anywhere}
+.plan{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:12px;padding:4px 16px}
+.plan>.kicker{margin-top:12px}
+.kicker{font-size:12px;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.04em}
+.error{color:hsl(var(--destructive));border:1px solid hsl(var(--destructive)/.4);border-radius:10px;padding:8px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
+.divider{display:flex;align-items:center;gap:12px;color:hsl(var(--muted-foreground));font-size:12px}
+.divider::before,.divider::after{content:"";flex:1;border-top:1px solid hsl(var(--border))}
+details.tool{border:1px solid hsl(var(--border));border-radius:10px;background:hsl(var(--card))}
+details.tool summary{cursor:pointer;padding:8px 12px;font-size:13px;color:hsl(var(--muted-foreground));overflow-wrap:anywhere}
+details.tool pre{margin:0;padding:10px 12px;border-top:1px solid hsl(var(--border));max-height:420px;overflow:auto}
+.assistant>:first-child{margin-top:0}.assistant>:last-child{margin-bottom:0}
+p,ul,ol,blockquote,table,pre{margin:.7em 0}
+a{color:hsl(var(--primary))}
+blockquote{margin-left:0;padding-left:12px;border-left:3px solid hsl(var(--border));color:hsl(var(--muted-foreground))}
+code{font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
+:not(pre)>code{background:hsl(var(--muted));border-radius:5px;padding:1px 5px}
+pre{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:10px;padding:12px 14px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
+pre code{background:none;padding:0}
+table{border-collapse:collapse;display:block;overflow:auto}
+th,td{border:1px solid hsl(var(--border));padding:6px 10px;text-align:left}
+th{background:hsl(var(--muted))}
+img{max-width:100%}
+.artifact{border:1px solid hsl(var(--border));border-radius:12px;overflow:hidden;background:hsl(var(--card))}
+.artifact .kicker{padding:8px 12px;border-bottom:1px solid hsl(var(--border))}
+.artifact iframe{display:block;width:100%;border:0}
+footer{margin-top:40px;padding-top:16px;border-top:1px solid hsl(var(--border));color:hsl(var(--muted-foreground));font-size:12px}
+@media (max-width:520px){.wrap{padding:16px 12px 48px}.user .bubble{max-width:95%}}
+`
+  .trim()
+  .replace(/\n+/g, "\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saadnvd1/agent-os",
-  "version": "0.3.560",
+  "version": "0.3.561",
   "description": "Self-hosted web UI for managing Claude Code sessions",
   "bin": {
     "agent-os": "scripts/agent-os"

package/stores/shareUi.ts

@@ -0,0 +1,17 @@
+import { proxy } from "valtio";
+import type { ShareTarget } from "@/data/shares";
+
+// What the share dialog is open on: a chat or an artifact, started from a
+// menu, the pane or the artifact card.
+export const shareUi = proxy<{
+  target: (ShareTarget & { title: string }) | null;
+}>({ target: null });
+
+export const shareUiActions = {
+  open: (target: ShareTarget & { title: string }) => {
+    shareUi.target = target;
+  },
+  close: () => {
+    shareUi.target = null;
+  },
+};