auricui-skill 0.0.0-stage → 0.1.2

package/skill/assets/upstream/apps/desktop/chat/src/lib/local-sessions.ts

@@ -0,0 +1,25 @@
+/**
+ * A project's conversations (the session bar's list), kept with the project (lib/chat-store.ts: its .film/chat), in
+ * the shape of lib/project-sessions.ts; the turns of each are kept beside them.
+ */
+import type { ProjectSessionItem } from '@/lib/project-sessions';
+import { chatSessions, lastSession, setChatSessions, setLastSession } from '@/lib/chat-store';
+
+const MAX = 200;
+
+export function loadSessions(project: string): ProjectSessionItem[] {
+  return chatSessions(project).filter((s): s is ProjectSessionItem => Boolean(s && typeof s.id === 'string' && typeof s.createdAt === 'string'));
+}
+
+export function saveSessions(project: string, sessions: ProjectSessionItem[]): void {
+  setChatSessions(project, sessions.slice(0, MAX));
+}
+
+export function newSession(): ProjectSessionItem {
+  const now = new Date().toISOString();
+  return { id: `s${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`, title: '', createdAt: now, updatedAt: now, turns: 0 };
+}
+
+/** The one shown last in this project, remembered across launches. */
+export const loadLastSession = (project: string): string | null => lastSession(project);
+export const saveLastSession = (project: string, id: string): void => setLastSession(project, id);

package/skill/assets/upstream/apps/desktop/chat/src/lib/model-calls.ts

@@ -0,0 +1,87 @@
+/**
+ * The requests an agent made to its model in a turn and the answers (the turn's model log, src/chat-store.mjs), whole
+ * again: a line keeps only what is new since the request before (`prefix` of that one's messages, then its own;
+ * `systemPrompt`, `tools`, `settings`, `source` and `thread` when they changed). The app's own agent (Pi) writes its
+ * own; the other agents' are read from their own records (src/agent-records.mjs), or from the logs they are started
+ * with in Developer mode (src/agent-logs.mjs).
+ *
+ * Messages are Pi's: system (its text in `sections`), user (text or parts), assistant (`thinking`, `text` and
+ * `toolCall` parts, its usage and why it stopped) and toolResult (`toolCallId`, `toolName`, parts, `isError`); from an
+ * agent's record also `context`: what the agent put in by itself (`label` says what, `as` the role it went in as).
+ */
+type Item = Record<string, any>;
+
+export interface RawCall {
+  startedAt: number;
+  /** null: the log does not say how long it took (Qwen Code's) */
+  ms: number | null;
+  prefix: number;
+  messages: Item[];
+  systemPrompt?: string | null;
+  tools?: Item[] | null;
+  /** Codex keeps no tool definitions: `tools` is not known, not empty */
+  toolsUnknown?: boolean;
+  /** the turn's settings as the agent kept them (Codex: model, effort, permissions) */
+  settings?: Item | null;
+  /** read from this agent's own record */
+  source?: { agent: string; file: string } | null;
+  /** a subagent's request (Claude Code), named */
+  thread?: { id: string; label: string } | null;
+  /** what the log this was read from does not have, by name (the turn log says each: turnLog.lacks.<name>) */
+  lacks?: string[];
+  answer: Item | null;
+}
+
+export interface ModelCall {
+  no: number;
+  startedAt: number;
+  ms: number | null;
+  systemPrompt: string | null;
+  /** every message the model got, in order; from `fresh` on, the ones new in this request */
+  messages: Item[];
+  fresh: number;
+  tools: Item[] | null;
+  toolsUnknown: boolean;
+  settings: Item | null;
+  source: { agent: string; file: string } | null;
+  thread: { id: string; label: string } | null;
+  lacks: string[];
+  answer: Item | null;
+}
+
+export function modelCalls(raw: RawCall[]): ModelCall[] {
+  let messages: Item[] = [];
+  let systemPrompt: string | null = null;
+  let tools: Item[] | null = null;
+  let settings: Item | null = null;
+  let source: ModelCall['source'] = null;
+  let thread: ModelCall['thread'] = null;
+  return raw.map((call, i) => {
+    messages = [...messages.slice(0, call.prefix), ...(call.messages ?? [])];
+    if ('systemPrompt' in call) systemPrompt = call.systemPrompt ?? null;
+    if ('tools' in call) tools = call.tools ?? null;
+    if ('settings' in call) settings = call.settings ?? null;
+    if ('source' in call) source = call.source ?? null;
+    if ('thread' in call) thread = call.thread ?? null;
+    return { no: i + 1, startedAt: call.startedAt, ms: call.ms, systemPrompt, messages, fresh: call.prefix, tools, toolsUnknown: call.toolsUnknown === true, settings, source, thread, lacks: call.lacks ?? [], answer: call.answer };
+  });
+}
+
+/** What an answer used: tokens in (of them read from the cache) and out (of them thinking); never a price. */
+export function usageOf(call: ModelCall) {
+  const u = call.answer?.usage ?? {};
+  const cached = Number(u.cacheRead) || 0;
+  return {
+    input: (Number(u.input) || 0) + cached + (Number(u.cacheWrite) || 0),
+    cached,
+    output: Number(u.output) || 0,
+    reasoning: Number(u.reasoning) || 0,
+  };
+}
+
+/** A message's text: a system message's sections, or its text parts. */
+export function textOf(message: Item): string {
+  if (message.role === 'system') return typeof message.content === 'string' && message.content ? message.content : Object.values(message.sections ?? {}).join('\n\n');
+  if (typeof message.content === 'string') return message.content;
+  return (message.content ?? []).map((p: Item) => (p.type === 'text' ? p.text : p.type === 'thinking' ? p.thinking : p.type === 'toolCall' ? `${p.name} ${JSON.stringify(p.arguments)}` : p.type === 'image' ? '[image]' : '')).join(' ');
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/pretty-json.ts

@@ -0,0 +1,12 @@
+/**
+ * Compact JSON on disk is one line. Viewers expand it so a file is readable
+ * without rewriting what the author (or agent) saved.
+ */
+export function prettyJsonSource(path: string, raw: string): string {
+  if (!/\.json$/i.test(path) || /\.jsonl$/i.test(path)) return raw;
+  try {
+    return `${JSON.stringify(JSON.parse(raw), null, 2)}\n`;
+  } catch {
+    return raw;
+  }
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/preview-top.ts

@@ -0,0 +1,15 @@
+/**
+ * Where the lightbox (PreviewFrame) starts at the top of the window. On Windows the window's own buttons are drawn
+ * over the page's top right (src/main.mjs, `titleBarOverlay`), above anything the page draws: the lightbox starts
+ * below them, so its close button is never under the window's, which quits OpenFilm.
+ *
+ * Pure: no React, no bridge, so `node --test` runs it (src/preview-top.test.mjs).
+ */
+
+/** How tall Windows draws the window's buttons over the page: `titleBarOverlay`'s height in src/main.mjs. */
+export const WINDOW_BUTTONS_H = 32;
+
+/** The lightbox's top padding, as CSS, on this platform (`navigator.platform`). */
+export function previewTop(platform: string): string {
+  return platform.startsWith('Win') ? `${WINDOW_BUTTONS_H + 8}px` : 'max(1rem, var(--inset-titlebar-h, 0px))';
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/project-resources.ts

@@ -0,0 +1,66 @@
+/**
+ * Which kind a file is, and its icon, so a file looks the same everywhere in the chat.
+ */
+import {
+  File as FileIcon,
+  FileArchive,
+  FileAudio,
+  FileCode,
+  FileJson,
+  FileSpreadsheet,
+  FileText,
+  FileVideo,
+  Folder,
+  Image as ImageIcon,
+  Subtitles,
+  type LucideIcon,
+} from 'lucide-react';
+import { AUDIO_UPLOAD_EXTENSIONS, DOCUMENT_EXTENSIONS, IMAGE_EXTENSIONS, VIDEO_UPLOAD_EXTENSIONS } from '@/lib/upload-limits';
+
+export type WorkspaceResourceKind = 'video' | 'image' | 'audio' | 'document' | 'mg' | 'other';
+
+export const RESOURCE_KIND_ICON: Record<WorkspaceResourceKind, LucideIcon> = {
+  video: FileVideo,
+  image: ImageIcon,
+  audio: FileAudio,
+  document: FileText,
+  mg: FileVideo,
+  other: FileIcon,
+};
+
+const EXTENSION_ICON: Record<string, LucideIcon> = {
+  json: FileJson, csv: FileSpreadsheet, xls: FileSpreadsheet, xlsx: FileSpreadsheet, srt: Subtitles, vtt: Subtitles,
+  zip: FileArchive, rar: FileArchive, '7z': FileArchive, tar: FileArchive, gz: FileArchive,
+  js: FileCode, ts: FileCode, tsx: FileCode, html: FileCode, css: FileCode, py: FileCode,
+};
+
+/** A file's extension (no dot, lower case); empty when it has none. */
+export function fileExtension(name: string): string {
+  const cut = name.lastIndexOf('.');
+  return cut <= 0 ? '' : name.slice(cut + 1).toLowerCase();
+}
+
+export function resourceIcon(file: { name: string; kind: string }): LucideIcon {
+  return EXTENSION_ICON[fileExtension(file.name)] ?? RESOURCE_KIND_ICON[file.kind as WorkspaceResourceKind] ?? RESOURCE_KIND_ICON.other;
+}
+
+/** Which kind a file is, by its extension first (Finder often reports a .mov as octet-stream), then its type. */
+export function attachmentKind(file: { name: string; mediaType?: string }): WorkspaceResourceKind {
+  const ext = fileExtension(file.name);
+  if (VIDEO_UPLOAD_EXTENSIONS.has(ext)) return 'video';
+  if (AUDIO_UPLOAD_EXTENSIONS.has(ext)) return 'audio';
+  if ((IMAGE_EXTENSIONS as readonly string[]).includes(ext)) return 'image';
+  if (DOCUMENT_EXTENSIONS.has(ext)) return 'document';
+  const mime = (file.mediaType ?? '').toLowerCase().split(';')[0]!.trim();
+  if (mime.startsWith('video/')) return 'video';
+  if (mime.startsWith('audio/')) return 'audio';
+  if (mime.startsWith('image/')) return 'image';
+  if (mime === 'application/pdf' || mime.startsWith('text/')) return 'document';
+  return 'other';
+}
+
+/** The icon for a file in the composer or a message; a folder's name ends in "/" (desktop-attachments turnAttachments). */
+export function attachmentIcon(file: { name: string; mediaType?: string; folder?: boolean }): LucideIcon {
+  if (file.folder || file.name.endsWith('/')) return Folder;
+  return resourceIcon({ name: file.name, kind: attachmentKind(file) });
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/project-sessions.ts

@@ -0,0 +1,66 @@
+import type { SkillsGiven } from './skill-pages';
+
+/**
+ * A project's sessions: their shape on the client, and how the session bar groups them by when they were last used.
+ */
+
+export interface ProjectSessionItem {
+  id: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string;
+  /** How many turns the session has. 0: just opened, nothing said yet. */
+  turns: number;
+  /** Each agent's own id of this conversation (by agent): its next turn goes on with it, after a restart too. */
+  agentSessions?: Record<string, string>;
+  /** The skills whose SKILL.md each agent's session has had in this conversation (lib/skill-pages), by agent. */
+  skillsGiven?: SkillsGiven;
+}
+
+export type SessionRecencyKey = 'today' | 'yesterday' | 'week' | 'earlier';
+
+export interface SessionRecencyGroup {
+  key: SessionRecencyKey;
+  items: ProjectSessionItem[];
+}
+
+function startOfLocalDay(ts: number): number {
+  const date = new Date(ts);
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
+}
+
+/**
+ * Groups into today, yesterday, the past 7 days and earlier, keeping the given order within each group.
+ *
+ * By updatedAt (else createdAt): a session talked in recently belongs under today, not the day it was created.
+ */
+export function groupSessionsByRecency(
+  items: readonly ProjectSessionItem[],
+  now = Date.now(),
+): SessionRecencyGroup[] {
+  const today = startOfLocalDay(now);
+  const yesterday = today - 86_400_000;
+  const week = today - 7 * 86_400_000;
+  const buckets: Record<SessionRecencyKey, ProjectSessionItem[]> = {
+    today: [],
+    yesterday: [],
+    week: [],
+    earlier: [],
+  };
+  for (const item of items) {
+    const at = Date.parse(item.updatedAt || item.createdAt);
+    const key: SessionRecencyKey = Number.isNaN(at) || at >= today
+      ? 'today'
+      : at >= yesterday
+        ? 'yesterday'
+        : at >= week
+          ? 'week'
+          : 'earlier';
+    buckets[key].push(item);
+  }
+  const order: SessionRecencyKey[] = ['today', 'yesterday', 'week', 'earlier'];
+  return order
+    .filter((key) => buckets[key].length > 0)
+    .map((key) => ({ key, items: buckets[key] }));
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/project-versions.ts

@@ -0,0 +1,116 @@
+import type { Turn, LibraryVideo, PromptDisplay, TurnAttachment } from '@openfilm/shared';
+import { readFileChanges, type FileChange, type TurnFileChanges } from './file-changes.ts';
+import { readBalance, type Balance, type TurnBalance } from './balance.ts';
+
+/**
+ * A project's conversation: each of its turns, in time order.
+ *
+ * Not every turn makes a film: a turn can be only talk, or stop before a film. So the list is every turn of the
+ * conversation; a film only decides whether a row has a poster and counts as a version, not whether it exists.
+ */
+export interface ProjectVersionEntry {
+  assetId: string;
+  /** Turns that made a film get a version (v1..vN); a turn that only talked has none. */
+  label: string;
+  title: string;
+  /** What the person sent in this turn; the content of its bubble. */
+  prompt: string;
+  /**
+   * The message as written in the composer (with pill markers). When present it is rendered, pills as pills.
+   *
+   * Empty in two cases, both falling back to `prompt`: the message referenced no pill (the two are identical),
+   * or it was sent before this field existed.
+   */
+  promptDisplay?: PromptDisplay;
+  /** What came with the message (names and thumbnails); empty when nothing did. */
+  attachments: TurnAttachment[];
+  /** The poster of the film this turn made; empty when it made none (talk, running, failed). */
+  posterUrl?: string;
+  status: 'ready' | 'active' | 'failed';
+  current: boolean;
+  /** Which agent answered (codex, claude…). */
+  agent?: string;
+  /** The model name shown, e.g. "gpt-5.5 · Medium". */
+  model?: string;
+  /** How long the turn ran. Only for settled turns whose times make sense. */
+  durationMs?: number;
+  /** How the turn stopped when it didn't finish normally. Empty when it did. */
+  outcome?: 'stopped' | 'failed' | 'balance';
+  /** outcome 'balance': which service had no balance left, and its page */
+  balance?: Balance;
+  /** outcome 'failed': why, as the turn kept it */
+  error?: string;
+  /** When the message was sent (ISO). Hovering under the bubble says "N minutes ago". */
+  createdAt?: string;
+  /** When the turn settled (ISO), only for settled turns. Hovering under the reply says "N minutes ago". */
+  settledAt?: string;
+  /** What the turn changed in the project's files (lib/file-changes); none when nothing did. */
+  fileChanges?: FileChange[];
+  /** 'background': the agent started it by itself, a background task of its own having come back (no message) */
+  origin?: 'background';
+}
+
+/** Longest believable turn: anything longer most likely means a later write touched updatedAt. */
+const DURATION_MAX_MS = 3 * 60 * 60 * 1000;
+
+function frameOf(asset: Turn): Pick<ProjectVersionEntry, 'agent' | 'model' | 'durationMs' | 'outcome' | 'balance' | 'error' | 'createdAt' | 'settledAt'> {
+  const settled = asset.status === 'ready' || asset.status === 'error' || asset.status === 'cancelled';
+  const ms = Date.parse(asset.updatedAt) - Date.parse(asset.createdAt);
+  const model = asset.localAgent?.model ?? null;
+  /* no balance left: said by the service's name, the same for every one */
+  const balance = asset.status === 'error' ? readBalance((asset as Turn & TurnBalance).balance) : null;
+  const outcome = asset.status === 'cancelled' ? 'stopped' as const
+    : balance ? 'balance' as const : asset.status === 'error' ? 'failed' as const : null;
+  /* a turn saved before turns named their agent: which one is not known */
+  const agent = asset.localAgent?.id ?? null;
+  return {
+    ...(agent ? { agent } : {}),
+    ...(model ? { model } : {}),
+    ...(settled && Number.isFinite(ms) && ms > 0 && ms < DURATION_MAX_MS ? { durationMs: ms } : {}),
+    ...(outcome ? { outcome } : {}),
+    ...(balance ? { balance } : {}),
+    ...(outcome === 'failed' && asset.error ? { error: asset.error } : {}),
+    ...(asset.createdAt ? { createdAt: asset.createdAt } : {}),
+    ...(settled && asset.updatedAt ? { settledAt: asset.updatedAt } : {}),
+  };
+}
+
+function statusOf(asset: Turn, hasFilm: boolean): ProjectVersionEntry['status'] {
+  if (asset.status === 'generating' || asset.status === 'failing' || asset.status === 'canceling') {
+    return 'active';
+  }
+  /* Ready without a film means the turn only talked; it didn't fail. Marked failed, a simple question like
+     "how long is this film" would get a red label. */
+  if (asset.status === 'ready') return 'ready';
+  return hasFilm ? 'ready' : 'failed';
+}
+
+export function deriveProjectTurns(
+  turns: Turn[],
+  videos: LibraryVideo[],
+  selectedId: string | null,
+): ProjectVersionEntry[] {
+  /* The order is set here: callers pass lists from mergeAssetLists, newest first, which would render the
+     conversation backwards. */
+  const ordered = [...turns].sort((a, b) => Date.parse(a.createdAt) - Date.parse(b.createdAt));
+  let filmCount = 0;
+  return ordered.map((asset) => {
+    const film = videos.find((item) => item.turnId === asset.id);
+    if (film) filmCount += 1;
+    const fileChanges = readFileChanges((asset as Turn & TurnFileChanges).fileChanges);
+    return {
+      assetId: asset.id,
+      label: film ? `v${filmCount}` : '',
+      title: asset.prompt,
+      prompt: asset.prompt,
+      ...(asset.promptDisplay ? { promptDisplay: asset.promptDisplay } : {}),
+      attachments: asset.attachments ?? [],
+      ...(film?.result.posterUrl ? { posterUrl: film.result.posterUrl } : {}),
+      status: statusOf(asset, Boolean(film)),
+      current: asset.id === selectedId,
+      ...frameOf(asset),
+      ...(fileChanges ? { fileChanges } : {}),
+      ...((asset as Turn & { origin?: unknown }).origin === 'background' ? { origin: 'background' as const } : {}),
+    };
+  });
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/ref-pictures.ts

@@ -0,0 +1,119 @@
+/**
+ * The pictures of a message's references, for its agent: each the frame Studio gave the reference (only the part
+ * pointed at, for a region or a layer), as a JPEG kept in the project (.film/refs/<turn>-<n>.jpg, which the message
+ * names) and, for an agent that takes pictures, sent with the message.
+ */
+import { app, type StudioRef, type StudioRefImage } from '@/app-bridge';
+import type { PromptImage } from '@/lib/desktop-bridge';
+
+/** at most this many pictures a message, each at most this wide: enough to see, little enough to send */
+const MAX_PICTURES = 8;
+const MAX_WIDTH = 1280;
+/** a frame Studio has to draw first can take a moment; one that takes longer is left out */
+const LOAD_TIMEOUT_MS = 15_000;
+
+/** The reference's picture as a JPEG: fetched from Studio, cut to its crop (stage px, scaled to the picture's). */
+async function encode(image: StudioRefImage): Promise<Blob> {
+  if (!image.src) throw new Error('no picture was taken');
+  const res = await fetch(image.src, { signal: AbortSignal.timeout(LOAD_TIMEOUT_MS) });
+  if (!res.ok) throw new Error(`Studio answered ${res.status}`);
+  const bitmap = await createImageBitmap(await res.blob());
+  try {
+    let sx = 0;
+    let sy = 0;
+    let sw = bitmap.width;
+    let sh = bitmap.height;
+    if (image.crop && image.stage && image.stage.w > 0) {
+      const scale = bitmap.width / image.stage.w;
+      sx = Math.max(0, Math.round(image.crop.x * scale));
+      sy = Math.max(0, Math.round(image.crop.y * scale));
+      sw = Math.min(bitmap.width - sx, Math.round(image.crop.w * scale));
+      sh = Math.min(bitmap.height - sy, Math.round(image.crop.h * scale));
+    }
+    if (sw < 1 || sh < 1) throw new Error('nothing to cut');
+    const out = Math.min(1, MAX_WIDTH / sw);
+    const canvas = new OffscreenCanvas(Math.max(1, Math.round(sw * out)), Math.max(1, Math.round(sh * out)));
+    const context = canvas.getContext('2d');
+    if (!context) throw new Error('no canvas');
+    /* a JPEG has no transparency: a page's see-through parts read as white, not black */
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(bitmap, sx, sy, sw, sh, 0, 0, canvas.width, canvas.height);
+    return await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.85 });
+  } finally {
+    bitmap.close();
+  }
+}
+
+function base64(bytes: ArrayBuffer): string {
+  const view = new Uint8Array(bytes);
+  let text = '';
+  for (let i = 0; i < view.length; i += 0x8000) text += String.fromCharCode(...view.subarray(i, i + 0x8000));
+  return btoa(text);
+}
+
+/**
+ * Make the pictures of `refs` (in their order, numbered from 1 as in the message): `pictures[i]` is where reference
+ * [i + 1]'s was kept in the project (none when it has none, or it did not load or could not be kept), `images` what
+ * the agent is sent. Never throws: a picture that fails only leaves its line without one.
+ */
+export async function referencePictures(refs: StudioRef[], { project, turnId }: { project: string; turnId: string }): Promise<{
+  pictures: Array<string | undefined>;
+  images: PromptImage[];
+}> {
+  const wanted = refs.flatMap((ref, i) => (ref.image ? [{ n: i + 1, image: ref.image }] : [])).slice(0, MAX_PICTURES);
+  const made = await Promise.all(wanted.map(async ({ n, image }) => {
+    try {
+      const bytes = await (await encode(image)).arrayBuffer();
+      const kept = await app.chat.saveRefImage(project, turnId, n, bytes).then((r) => r.path, () => undefined);
+      return { n, path: kept, image: { data: base64(bytes), mimeType: 'image/jpeg' } };
+    } catch {
+      return null;
+    }
+  }));
+  const pictures: Array<string | undefined> = refs.map(() => undefined);
+  const images: PromptImage[] = [];
+  for (const picture of made) {
+    if (!picture) continue;
+    pictures[picture.n - 1] = picture.path;
+    images.push(picture.image);
+  }
+  return { pictures, images };
+}
+
+/**
+ * an attached picture is sent as it is up to this size and this many pixels on its long side; larger, made smaller.
+ * 2000: a request with more than 20 pictures in it (a conversation's, not only this message's) takes none larger
+ */
+const ATTACHED_MAX_BYTES = 4 * 1024 * 1024;
+const ATTACHED_MAX_SIDE = 2000;
+const AS_IS = new Set(['image/jpeg', 'image/png', 'image/webp']);
+
+/**
+ * A picture attached to a message, as its agent is sent it beside the text (as a picture pasted in its own chat is):
+ * itself when it is a JPEG, PNG or WebP small enough, else a JPEG at most ATTACHED_MAX_SIDE on its long side. Null
+ * when it cannot be read as a picture.
+ */
+export async function attachedPicture(file: Blob): Promise<PromptImage | null> {
+  try {
+    const bitmap = await createImageBitmap(file);
+    try {
+      const long = Math.max(bitmap.width, bitmap.height);
+      if (AS_IS.has(file.type) && file.size <= ATTACHED_MAX_BYTES && long <= ATTACHED_MAX_SIDE) {
+        return { data: base64(await file.arrayBuffer()), mimeType: file.type };
+      }
+      const scale = Math.min(1, ATTACHED_MAX_SIDE / long);
+      const canvas = new OffscreenCanvas(Math.max(1, Math.round(bitmap.width * scale)), Math.max(1, Math.round(bitmap.height * scale)));
+      const context = canvas.getContext('2d');
+      if (!context) return null;
+      context.fillStyle = '#fff';
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+      return { data: base64(await (await canvas.convertToBlob({ type: 'image/jpeg', quality: 0.85 })).arrayBuffer()), mimeType: 'image/jpeg' };
+    } finally {
+      bitmap.close();
+    }
+  } catch {
+    return null;
+  }
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/relative-time.ts

@@ -0,0 +1,46 @@
+'use client';
+
+/**
+ * "38 minutes ago": how long ago a message or reply was (shown under it on hover).
+ *
+ * Intl.RelativeTimeFormat in the UI language, no strings of our own. Beyond a week it gives the date: "43 days
+ * ago" makes the reader do the arithmetic.
+ *
+ * One minute tick for the whole page (useMinuteTick): a long conversation has dozens of times, and a timer each
+ * would wake dozens of components every minute.
+ */
+import * as React from 'react';
+
+export function relativeTime(iso: string | undefined, locale: string, now: number): string {
+  const at = iso ? Date.parse(iso) : NaN;
+  if (!Number.isFinite(at) || !now) return '';
+  /* `now` moves once a minute (useMinuteTick), so a line from the last few seconds can be up to a minute
+     "ahead" of it: that is just now, never "in 1 minute". */
+  const sec = Math.min(0, Math.round((at - now) / 1000));
+  const fmt = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+  const abs = Math.abs(sec);
+  if (abs < 45) return fmt.format(0, 'second');
+  if (abs < 3600) return fmt.format(Math.round(sec / 60), 'minute');
+  if (abs < 86_400) return fmt.format(Math.round(sec / 3600), 'hour');
+  if (abs < 7 * 86_400) return fmt.format(Math.round(sec / 86_400), 'day');
+  return new Date(at).toLocaleDateString(locale, { month: 'short', day: 'numeric', ...(new Date(at).getFullYear() !== new Date(now).getFullYear() ? { year: 'numeric' } : {}) });
+}
+
+const listeners = new Set<() => void>();
+let minute = Date.now();
+let timer: number | null = null;
+function subscribe(fn: () => void): () => void {
+  listeners.add(fn);
+  if (timer == null) { minute = Date.now(); timer = window.setInterval(() => { minute = Date.now(); listeners.forEach((l) => l()); }, 60_000); }
+  return () => {
+    listeners.delete(fn);
+    if (!listeners.size && timer != null) { window.clearInterval(timer); timer = null; }
+  };
+}
+const snapshot = () => minute;
+const serverSnapshot = () => 0;
+
+/** Now, updated once a minute. */
+export function useMinuteTick(): number {
+  return React.useSyncExternalStore(subscribe, snapshot, serverSnapshot);
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/skill-pages.ts

@@ -0,0 +1,29 @@
+/**
+ * A skill named in a message (its pill) is for that message. Its SKILL.md goes to the agent with it, unseen in the
+ * chat, once per conversation: the agent keeps it in its own session from then on, so naming the skill again sends only
+ * its name. What each agent's session was given is kept with the conversation (`skillsGiven`, by agent); a session the
+ * agent could not take up again starts with nothing. Reads nothing, so `node --test` can use it.
+ */
+
+/** Per agent: its own session id (null before it has one) and the skills whose pages that session was given. */
+export type SkillsGiven = Record<string, { session: string | null; names: string[] }>;
+
+/** The skills named in this message whose pages go with it: those `agent`'s current `session` has not had. */
+export function pagesToSend(named: readonly string[], given: Readonly<SkillsGiven> | undefined, agent: string, session: string | null): string[] {
+  const had = given?.[agent];
+  const known = new Set(had && had.session === session ? had.names : []);
+  return [...new Set(named)].filter((name) => !known.has(name));
+}
+
+/**
+ * What `agent` has been given once a message goes with the pages of `sent`. `session`: its session the message went to;
+ * `fresh`: one just started that has nothing from before (the pages it holds are those of this message only).
+ */
+export function givenAfter(given: Readonly<SkillsGiven> | undefined, agent: string, session: string | null, sent: readonly string[], { fresh = false } = {}): SkillsGiven {
+  const out: SkillsGiven = {};
+  for (const [by, had] of Object.entries(given ?? {})) out[by] = { session: had.session, names: [...had.names] };
+  const had = out[agent];
+  const before = !fresh && had && had.session === session ? had.names : [];
+  out[agent] = { session, names: [...new Set([...before, ...sent])] };
+  return out;
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/step-file.ts

@@ -0,0 +1,23 @@
+/**
+ * The file a step of the user's own agent names in its row (lib/local-agent-run localToolActivity): the base name of
+ * its path, with either separator.
+ *
+ * The path is where ACP puts it, in the call's locations or its input (`file_path`, `path`, `filePath`), and else
+ * in its title. A read's last update often carries only its title, or nothing but what was read, and each agent
+ * titles a read its own way: Claude Code "Read .film\cache\look\0-5s.png (1 - 40)", OpenCode the path without its
+ * drive ("Users\me\…\0-5s.png"), Copilot "Viewing …\look\0-5s.png", Cursor "Read C:\…\SKILL.md". A title that is
+ * no path (Claude Code's "Read File" before it knows which, OpenCode's "read") names no file, so the row keeps the
+ * one it has.
+ *
+ * Pure: no React, no bridge, so `node --test` runs it (src/step-file.test.mjs).
+ */
+
+export function baseName(path: string): string {
+  return path.replace(/[\\/]+$/, '').split(/[\\/]/).pop() ?? path;
+}
+
+/** The file a title names when it is a path, after its verb and line range; undefined when it is none. */
+export function titleFile(title: string): string | undefined {
+  const path = title.trim().replace(/^(?:Read|View Image|Viewing)\s+/i, '').replace(/\s+\((?:from line \d+|\d+ - \d+)\)$/, '');
+  return /[\\/]|\.\w+$/.test(path) ? baseName(path) : undefined;
+}

package/skill/assets/upstream/apps/desktop/chat/src/lib/structural-share.ts

@@ -0,0 +1,52 @@
+/**
+ * Structural sharing: subtrees of `next` deeply equal to `prev` get `prev`'s references back; if all is equal,
+ * `prev` itself is returned.
+ *
+ * Each poll returns freshly parsed objects even when nothing changed. Put straight into state, every card and turn
+ * gets new props and every memo misses, worse the longer the list. Through here, unchanged parts keep their
+ * references and React skips them; when nothing changed, setState gets the same reference and skips the render.
+ *
+ * Handles JSON shapes only (objects, arrays, primitives), which is what the API returns.
+ */
+export function shareStructure<T>(prev: T, next: T): T {
+  if (Object.is(prev, next)) return prev;
+  if (typeof prev !== 'object' || typeof next !== 'object' || prev === null || next === null) {
+    return next;
+  }
+  if (Array.isArray(prev) !== Array.isArray(next)) return next;
+  if (Array.isArray(prev)) {
+    const a = prev as unknown[];
+    const b = next as unknown[];
+    let same = a.length === b.length;
+    const out = b.map((item, i) => {
+      const shared = i < a.length ? shareStructure(a[i], item) : item;
+      if (shared !== a[i]) same = false;
+      return shared;
+    });
+    return (same ? prev : out) as T;
+  }
+  const a = prev as Record<string, unknown>;
+  const b = next as Record<string, unknown>;
+  const keys = Object.keys(b);
+  let same = keys.length === Object.keys(a).length;
+  const out: Record<string, unknown> = {};
+  for (const k of keys) {
+    const shared = k in a ? shareStructure(a[k], b[k]) : b[k];
+    if (shared !== a[k] || !(k in a)) same = false;
+    out[k] = shared;
+  }
+  return (same ? prev : out) as T;
+}
+
+/** The list version, matched by id: each item shares structure with the previous item of the same id; unchanged, returns `prev` itself. */
+export function shareListById<T extends { id: string }>(prev: readonly T[], next: T[]): T[] {
+  const byId = new Map(prev.map((item) => [item.id, item]));
+  let same = prev.length === next.length;
+  const out = next.map((item, i) => {
+    const old = byId.get(item.id);
+    const shared = old ? shareStructure(old, item) : item;
+    if (shared !== prev[i]) same = false;
+    return shared;
+  });
+  return same ? (prev as T[]) : out;
+}