@saadnvd1/agent-os 0.3.770 → 0.3.777

package/components/Shares/SharedLinksPanel.tsx

@@ -9,6 +9,7 @@ import {
   useSharesQuery,
   type SharedLinkRow,
 } from "@/data/shares";
+import { useAllLiveShares, useEndLive, type LiveView } from "@/data/live";
 import { cn } from "@/lib/utils";
 import { SessionAnchor } from "@/components/Chat/SessionAnchor";
 
@@ -108,11 +109,61 @@ function Row({ share }: { share: SharedLinkRow }) {
   );
 }
 
+function LiveRow({ share }: { share: LiveView }) {
+  const end = useEndLive(share.id);
+  const watching = share.guests.filter((g) => g.status === "admitted").length;
+  return (
+    <li className="bg-muted/40 flex flex-col gap-2 rounded-lg px-3 py-2.5 sm:flex-row sm:items-center">
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-medium">
+          <SessionAnchor
+            sessionId={share.sessionId}
+            className="hover:underline"
+          >
+            {share.title}
+          </SessionAnchor>
+        </div>
+        <div className="text-muted-foreground flex flex-wrap gap-x-3 text-xs">
+          <span>Live</span>
+          <span>{watching} joined</span>
+          <span>
+            {share.endsWithSession
+              ? "Until the session ends"
+              : share.expiresAt
+                ? `Ends ${new Date(share.expiresAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" })}`
+                : ""}
+          </span>
+        </div>
+      </div>
+      <Button
+        variant="outline"
+        className="text-destructive min-h-11 shrink-0 sm:min-h-8"
+        disabled={end.isPending}
+        onClick={() =>
+          end.mutate(undefined, {
+            onError: (err) => toast.error((err as Error).message),
+          })
+        }
+      >
+        End access
+      </Button>
+    </li>
+  );
+}
+
 // Every snapshot link made from this machine, with views from Connect.
 export function SharedLinksPanel() {
   const { data, isLoading, error } = useSharesQuery();
+  const liveNow = useAllLiveShares().data?.shares ?? [];
   return (
     <div className="space-y-3">
+      {liveNow.length > 0 && (
+        <ul className="space-y-2">
+          {liveNow.map((s) => (
+            <LiveRow key={s.id} share={s} />
+          ))}
+        </ul>
+      )}
       <p className="text-muted-foreground text-sm">
         Read-only snapshots you shared from a chat or a page. Revoking one
         deletes it from Connect straight away.

package/data/live/index.ts

@@ -0,0 +1,2 @@
+export * from "./keys";
+export * from "./queries";

package/data/live/keys.ts

@@ -0,0 +1,4 @@
+export const liveKeys = {
+  all: ["live-shares"] as const,
+  session: (sessionId: string) => [...liveKeys.all, sessionId] as const,
+};

package/data/live/queries.ts

@@ -0,0 +1,81 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { LiveExpiry, LiveResponse, LiveView } from "@/lib/live/types";
+import { liveKeys } from "./keys";
+
+export type { LiveExpiry, LiveResponse, LiveView } from "@/lib/live/types";
+
+async function json<T>(res: Response): Promise<T> {
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || "Request failed");
+  return data;
+}
+
+const send = (url: string, method: string, body?: unknown) =>
+  fetch(url, {
+    method,
+    headers: { "Content-Type": "application/json" },
+    body: body === undefined ? undefined : JSON.stringify(body),
+  });
+
+/**
+ * The session's live link, who is waiting and who is watching. Asked every
+ * couple of seconds while a link is live, and once a minute when not, so a
+ * request or a suggestion shows up on the host's screen quickly.
+ */
+export function useLiveShare(sessionId: string | undefined, enabled = true) {
+  return useQuery({
+    queryKey: liveKeys.session(sessionId ?? ""),
+    enabled: enabled && !!sessionId,
+    queryFn: async (): Promise<LiveResponse> =>
+      json(await fetch(`/api/live-shares?sessionId=${sessionId}`)),
+    select: (r) => ({
+      linked: r.linked,
+      share: r.shares[0] as LiveView | undefined,
+    }),
+    refetchInterval: (q) => (q.state.data?.shares.length ? 2000 : 60_000),
+  });
+}
+
+export function useCreateLive() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (req: { sessionId: string; expiresIn: LiveExpiry }) =>
+      json<LiveView>(await send("/api/live-shares", "POST", req)),
+    onSuccess: () => qc.invalidateQueries({ queryKey: liveKeys.all }),
+  });
+}
+
+export type LiveAction =
+  | { action: "admit" | "deny" | "kick"; guestId: string }
+  | { action: "send"; suggestionId: string; text?: string }
+  | { action: "dismiss"; suggestionId: string };
+
+export function useLiveAction(shareId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async (req: LiveAction) =>
+      json<{ ok: true }>(
+        await send(`/api/live-shares/${shareId}`, "POST", req)
+      ),
+    onSettled: () => qc.invalidateQueries({ queryKey: liveKeys.all }),
+  });
+}
+
+export function useEndLive(shareId: string) {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: async () =>
+      json<{ ok: true }>(await send(`/api/live-shares/${shareId}`, "DELETE")),
+    onSettled: () => qc.invalidateQueries({ queryKey: liveKeys.all }),
+  });
+}
+
+/** Every live link this machine holds, for the Shared links page. */
+export function useAllLiveShares() {
+  return useQuery({
+    queryKey: [...liveKeys.all, "all"] as const,
+    queryFn: async (): Promise<LiveResponse> =>
+      json(await fetch("/api/live-shares")),
+    refetchInterval: 5000,
+  });
+}

package/data/session-artifacts/keys.ts

@@ -7,4 +7,6 @@ export const sessionArtifactKeys = {
   // A page's versions, by any version's id; pageId keys the invalidation.
   versions: (pageId: string) =>
     [...sessionArtifactKeys.all, "versions", pageId] as const,
+  compare: (sessionId: string, from: string, to: string, mode: string) =>
+    [...sessionArtifactKeys.all, "compare", sessionId, from, to, mode] as const,
 };

package/data/session-artifacts/queries.ts

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import type { SessionArtifact } from "@/lib/session-artifacts/types";
 import type { PageVersions } from "@/lib/artifacts/actions";
+import type { CompareMode, CompareResult } from "@/lib/artifacts/compare/types";
 import { sessionArtifactKeys } from "./keys";
 
 export type { SessionArtifact } from "@/lib/session-artifacts/types";
@@ -76,3 +77,27 @@ export function useArtifactVersions(
     staleTime: 30_000,
   });
 }
+
+/** What changed between two versions of a page. */
+export function useArtifactCompare(
+  sessionId: string,
+  fromId: string,
+  toId: string,
+  mode: CompareMode,
+  enabled = true
+) {
+  return useQuery({
+    queryKey: sessionArtifactKeys.compare(sessionId, fromId, toId, mode),
+    queryFn: async (): Promise<Extract<CompareResult, { ok: true }>> => {
+      const res = await fetch(
+        `${artifactContentUrl(sessionId, fromId)}/compare?to=${encodeURIComponent(toId)}&mode=${mode}`
+      );
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) throw new Error(data.error || "Couldn't compare versions");
+      return data;
+    },
+    enabled: enabled && !!fromId && !!toId,
+    // Versions never change once saved.
+    staleTime: Infinity,
+  });
+}

package/data/shares/queries.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type {
   CreatedShare,
+  MessageList,
   PreviewRequest,
   SharePreview,
   SharesResponse,
@@ -40,6 +41,16 @@ export function useSharePreview() {
   });
 }
 
+/** Every message of a chat, for picking the part to share. */
+export function useShareMessages() {
+  return useMutation({
+    mutationFn: async (req: PreviewRequest) =>
+      json<MessageList>(
+        await post("/api/shares/preview", { ...req, listOnly: true })
+      ),
+  });
+}
+
 /** The share as a PDF, printed by the server. */
 export function useSharePdf() {
   return useMutation({

package/hooks/usePaletteCommands.ts

@@ -17,7 +17,10 @@ export function usePaletteCommands(
   });
   const shape = commands
     ? commands
-        .map((c) => `${c.id}\u0000${c.title}\u0000${c.hint ?? ""}`)
+        .map(
+          (c) =>
+            `${c.id}\u0000${c.title}\u0000${c.hint ?? ""}\u0000${c.status ?? ""}`
+        )
         .join("\u0001")
     : null;
   useEffect(() => {

package/lib/artifacts/actions.ts

@@ -7,6 +7,7 @@ export type ArtifactActionId =
   | "share"
   | "open"
   | "download"
+  | "compare"
   | "open-pr"
   | "copy-path"
   | "open-in-files";
@@ -36,16 +37,25 @@ export interface ArtifactVersion {
 
 export interface PageVersions {
   pageId: string;
+  // The page's name: its latest version's title.
+  title: string;
   latestId: string;
   versions: ArtifactVersion[];
   actions: ArtifactAction[];
 }
 
-export function pageActions(ctx: { pdf: boolean }): ArtifactAction[] {
+// versions: how many versions the page has; Compare needs two.
+export function pageActions(ctx: {
+  pdf: boolean;
+  versions?: number;
+}): ArtifactAction[] {
   return [
     { id: "fullscreen", label: "Full screen" },
     { id: "share", label: "Share" },
     { id: "open", label: "Open" },
+    ...((ctx.versions ?? 1) > 1
+      ? [{ id: "compare" as const, label: "Compare" }]
+      : []),
     {
       id: "download",
       label: "Download",

package/lib/artifacts/compare/compareVersions.ts

@@ -0,0 +1,66 @@
+import { getArtifact, readArtifactHtml } from "../store";
+import { toVersion } from "../versions";
+import { diffLines } from "./diff";
+import { extractText } from "./extractText";
+import type { CompareMode, CompareResult } from "./types";
+
+// Per version; bigger pages are only shown side by side.
+export const MAX_COMPARE_BYTES = 512 * 1024;
+
+const NOT_FOUND = {
+  ok: false,
+  status: 404,
+  error: "Version not found",
+} as const;
+
+// Two versions of one page in one session, as a diff. Both must belong to
+// the session asked about and to the same page: an id from anywhere else
+// reads as not found, so ids can't be probed across sessions.
+export async function compareVersions(
+  sessionId: string,
+  fromId: string,
+  toId: string,
+  mode: CompareMode
+): Promise<CompareResult> {
+  const from = getArtifact(fromId);
+  const to = getArtifact(toId);
+  if (!from || !to) return NOT_FOUND;
+  if (from.session_id !== sessionId || to.session_id !== sessionId)
+    return NOT_FOUND;
+  if (from.page_id !== to.page_id)
+    return {
+      ok: false,
+      status: 400,
+      error: "Those versions belong to different pages",
+    };
+
+  const head = {
+    ok: true,
+    mode,
+    from: toVersion(from),
+    to: toVersion(to),
+  } as const;
+  const tooBig = (a: { bytes: number | null }) =>
+    (a.bytes ?? 0) > MAX_COMPARE_BYTES;
+  const tooLarge = (reason: string): CompareResult => ({
+    ...head,
+    tooLarge: true,
+    reason,
+  });
+  if (tooBig(from) || tooBig(to)) return tooLarge("too large to diff");
+
+  const [a, b] = await Promise.all([
+    readArtifactHtml(from),
+    readArtifactHtml(to),
+  ]);
+  if (a === null || b === null) return NOT_FOUND;
+  if (a.length > MAX_COMPARE_BYTES || b.length > MAX_COMPARE_BYTES)
+    return tooLarge("too large to diff");
+
+  const result =
+    mode === "source"
+      ? diffLines(a, b)
+      : diffLines(extractText(a), extractText(b));
+  if (!result.ok) return tooLarge("too many changes to diff");
+  return { ...head, summary: result.summary, lines: result.lines };
+}

package/lib/artifacts/compare/diff.ts

@@ -0,0 +1,178 @@
+// A line diff (Myers' O(ND)) with a word diff inside the changed lines that
+// pair up. Bounded: past the limits it gives up instead of burning the CPU.
+
+import type { DiffLine, DiffSummary, WordPart } from "./types";
+
+export const MAX_LINES = 20_000;
+// Edit distance past which two texts are different enough not to diff.
+export const MAX_EDITS = 4_000;
+const MAX_WORD_TOKENS = 600;
+
+type Op = { t: "eq" | "add" | "del"; i: number; j: number };
+
+// Edit script from a to b, or null when it needs more than maxEdits.
+function myers(a: string[], b: string[], maxEdits: number): Op[] | null {
+  const n = a.length;
+  const m = b.length;
+  const max = Math.min(n + m, maxEdits);
+  const offset = max + 1;
+  const v = new Int32Array(2 * max + 3);
+  const trace: Int32Array[] = [];
+  let found = -1;
+  for (let d = 0; d <= max && found < 0; d++) {
+    trace.push(v.slice());
+    for (let k = -d; k <= d; k += 2) {
+      let x =
+        k === -d || (k !== d && v[offset + k - 1] < v[offset + k + 1])
+          ? v[offset + k + 1]
+          : v[offset + k - 1] + 1;
+      let y = x - k;
+      while (x < n && y < m && a[x] === b[y]) {
+        x++;
+        y++;
+      }
+      v[offset + k] = x;
+      if (x >= n && y >= m) {
+        found = d;
+        break;
+      }
+    }
+  }
+  if (found < 0) return null;
+  const ops: Op[] = [];
+  let x = n;
+  let y = m;
+  for (let d = found; d > 0; d--) {
+    const prev = trace[d];
+    const k = x - y;
+    const down =
+      k === -d || (k !== d && prev[offset + k - 1] < prev[offset + k + 1]);
+    const pk = down ? k + 1 : k - 1;
+    const px = prev[offset + pk];
+    const py = px - pk;
+    while (x > px && y > py) {
+      x--;
+      y--;
+      ops.push({ t: "eq", i: x, j: y });
+    }
+    if (down) {
+      y--;
+      ops.push({ t: "add", i: x, j: y });
+    } else {
+      x--;
+      ops.push({ t: "del", i: x, j: y });
+    }
+  }
+  while (x > 0 && y > 0) {
+    x--;
+    y--;
+    ops.push({ t: "eq", i: x, j: y });
+  }
+  return ops.reverse();
+}
+
+const tokens = (s: string) =>
+  s.match(/\s+|[\p{L}\p{N}_]+|[^\s\p{L}\p{N}_]/gu) ?? [];
+
+// The words of two paired lines: what each side kept and what it changed.
+function wordParts(
+  before: string,
+  after: string
+): { del: WordPart[]; add: WordPart[] } | null {
+  const a = tokens(before);
+  const b = tokens(after);
+  if (a.length > MAX_WORD_TOKENS || b.length > MAX_WORD_TOKENS) return null;
+  const ops = myers(a, b, MAX_WORD_TOKENS);
+  if (!ops) return null;
+  const del: WordPart[] = [];
+  const add: WordPart[] = [];
+  const push = (list: WordPart[], t: WordPart["t"], s: string) => {
+    const last = list[list.length - 1];
+    if (last && last.t === t) last.s += s;
+    else list.push({ t, s });
+  };
+  for (const op of ops) {
+    if (op.t === "eq") {
+      push(del, "eq", a[op.i]);
+      push(add, "eq", b[op.j]);
+    } else if (op.t === "del") push(del, "del", a[op.i]);
+    else push(add, "add", b[op.j]);
+  }
+  return { del, add };
+}
+
+export type DiffResult =
+  { ok: true; lines: DiffLine[]; summary: DiffSummary } | { ok: false };
+
+export function diffLines(before: string, after: string): DiffResult {
+  const a = before === "" ? [] : before.split("\n");
+  const b = after === "" ? [] : after.split("\n");
+  if (a.length > MAX_LINES || b.length > MAX_LINES) return { ok: false };
+  const ops = myers(a, b, MAX_EDITS);
+  if (!ops) return { ok: false };
+
+  const lines: DiffLine[] = [];
+  let added = 0;
+  let removed = 0;
+  for (let p = 0; p < ops.length;) {
+    if (ops[p].t === "eq") {
+      lines.push({ t: "eq", s: a[ops[p].i] });
+      p++;
+      continue;
+    }
+    // A run of changes: removals first, then additions, paired in order.
+    const dels: string[] = [];
+    const adds: string[] = [];
+    while (p < ops.length && ops[p].t !== "eq") {
+      if (ops[p].t === "del") dels.push(a[ops[p].i]);
+      else adds.push(b[ops[p].j]);
+      p++;
+    }
+    removed += dels.length;
+    added += adds.length;
+    const delLines: DiffLine[] = dels.map((s) => ({ t: "del", s }));
+    const addLines: DiffLine[] = adds.map((s) => ({ t: "add", s }));
+    for (let q = 0; q < Math.min(dels.length, adds.length); q++) {
+      const w = wordParts(dels[q], adds[q]);
+      if (w) {
+        delLines[q].words = w.del;
+        addLines[q].words = w.add;
+      }
+    }
+    lines.push(...delLines, ...addLines);
+  }
+  return { ok: true, lines, summary: { added, removed } };
+}
+
+export function summaryLabel(s: DiffSummary): string {
+  if (!s.added && !s.removed) return "No changes";
+  return `+${s.added} −${s.removed} lines`;
+}
+
+export type Shown = DiffLine | { gap: number };
+
+// Long unchanged stretches folded to a gap, keeping `context` lines around
+// every change.
+export function foldUnchanged(lines: DiffLine[], context = 3): Shown[] {
+  const keep = new Array<boolean>(lines.length).fill(false);
+  lines.forEach((l, i) => {
+    if (l.t === "eq") return;
+    for (
+      let k = Math.max(0, i - context);
+      k <= Math.min(lines.length - 1, i + context);
+      k++
+    )
+      keep[k] = true;
+  });
+  const out: Shown[] = [];
+  let gap = 0;
+  lines.forEach((l, i) => {
+    if (keep[i]) {
+      if (gap) out.push({ gap });
+      gap = 0;
+      out.push(l);
+    } else gap++;
+  });
+  if (gap) out.push({ gap });
+  return out;
+}

package/lib/artifacts/compare/extractText.ts

@@ -0,0 +1,64 @@
+// The text a reader sees on a page, one block per line: scripts, styles and
+// the head gone, headings, paragraphs, list items and table cells each on
+// their own line.
+
+const DROPPED =
+  /<(script|style|noscript|template|head|svg|iframe)\b[\s\S]*?<\/\1\s*>/gi;
+const COMMENTS = /<!--[\s\S]*?-->/g;
+const BREAKING =
+  /<\/?(?:p|div|section|article|aside|header|footer|main|nav|ul|ol|li|dl|dt|dd|h[1-6]|tr|td|th|table|thead|tbody|tfoot|caption|blockquote|pre|figure|figcaption|form|fieldset|details|summary|hr|br|address|label|button|option)\b[^>]*>/gi;
+const TAGS = /<[^>]*>/g;
+
+const NAMED: Record<string, string> = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  quot: '"',
+  apos: "'",
+  nbsp: " ",
+  ndash: "–",
+  mdash: "—",
+  hellip: "…",
+  lsquo: "‘",
+  rsquo: "’",
+  ldquo: "“",
+  rdquo: "”",
+  middot: "·",
+  bull: "•",
+  times: "×",
+  rarr: "→",
+  larr: "←",
+  copy: "©",
+};
+
+function codePoint(n: number, whole: string): string {
+  try {
+    return n > 0 && n <= 0x10ffff ? String.fromCodePoint(n) : whole;
+  } catch {
+    return whole;
+  }
+}
+
+export function decodeEntities(s: string): string {
+  return s.replace(
+    /&(?:#(\d{1,7})|#[xX]([0-9a-fA-F]{1,6})|([a-zA-Z]{2,8}));/g,
+    (whole, dec, hex, name) => {
+      if (dec) return codePoint(parseInt(dec, 10), whole);
+      if (hex) return codePoint(parseInt(hex, 16), whole);
+      return NAMED[name.toLowerCase()] ?? whole;
+    }
+  );
+}
+
+export function extractText(html: string): string {
+  const flat = html
+    .replace(COMMENTS, "")
+    .replace(DROPPED, "")
+    .replace(BREAKING, "\n")
+    .replace(TAGS, "");
+  return decodeEntities(flat)
+    .split("\n")
+    .map((l) => l.replace(/\s+/g, " ").trim())
+    .filter(Boolean)
+    .join("\n");
+}

package/lib/artifacts/compare/index.ts

@@ -0,0 +1,11 @@
+export { compareVersions, MAX_COMPARE_BYTES } from "./compareVersions";
+export { diffLines, foldUnchanged, summaryLabel, type Shown } from "./diff";
+export { extractText } from "./extractText";
+export type {
+  CompareMode,
+  CompareResult,
+  Comparison,
+  DiffLine,
+  DiffSummary,
+  WordPart,
+} from "./types";

package/lib/artifacts/compare/types.ts

@@ -0,0 +1,44 @@
+import type { ArtifactVersion } from "../actions";
+
+export type CompareMode = "changes" | "source";
+
+// A piece of one line: kept, or (on a removed line) taken out, or (on an
+// added line) put in.
+export interface WordPart {
+  t: "eq" | "add" | "del";
+  s: string;
+}
+
+export interface DiffLine {
+  t: "eq" | "add" | "del";
+  s: string;
+  // Only on a removed or added line that pairs with one on the other side.
+  words?: WordPart[];
+}
+
+export interface DiffSummary {
+  added: number;
+  removed: number;
+}
+
+export type Comparison =
+  | {
+      ok: true;
+      mode: CompareMode;
+      from: ArtifactVersion;
+      to: ArtifactVersion;
+      summary: DiffSummary;
+      lines: DiffLine[];
+    }
+  | {
+      ok: true;
+      mode: CompareMode;
+      from: ArtifactVersion;
+      to: ArtifactVersion;
+      // Too big to diff: the client shows the pages side by side only.
+      tooLarge: true;
+      reason: string;
+    };
+
+export type CompareResult =
+  Comparison | { ok: false; status: 400 | 404; error: string };