@saadnvd1/agent-os 0.3.738 → 0.3.743

package/lib/chat/model-wait.ts

@@ -0,0 +1,88 @@
+import type { ModelWait } from "./events";
+import type { WorkerEvent } from "./worker/protocol";
+
+// Follows a running turn's events to know when it is waiting on a model
+// call: no tool running, nothing streaming, not compacting. Only what a
+// driver measured is kept as the prompt size; nothing is guessed.
+export class ModelWaitTracker {
+  wait: ModelWait | null = null;
+  private lastPrompt: number | undefined;
+  private running = new Set<string>();
+  private active = false;
+
+  // Returns whether `wait` changed.
+  on(e: WorkerEvent, now = Date.now()): boolean {
+    const before = this.wait;
+    switch (e.type) {
+      case "state":
+        if (e.state === "running") {
+          if (!this.active) {
+            this.active = true;
+            this.begin(now);
+          }
+        } else this.end();
+        break;
+      case "item": {
+        const i = e.item;
+        if (i.kind === "turn_end") this.end();
+        else if (i.kind === "compacted") this.lastPrompt = undefined;
+        else if (i.kind === "tool") {
+          if (i.status === "running") {
+            this.running.add(i.id);
+            this.wait = null;
+          } else {
+            this.running.delete(i.id);
+            if (this.active && !this.running.size) this.begin(now);
+          }
+        } else if (i.kind === "assistant" || i.kind === "reasoning") {
+          if (i.streaming) this.wait = null;
+          else if (this.active && !this.running.size && !this.wait)
+            this.begin(now);
+        }
+        break;
+      }
+      case "delta":
+        this.wait = null;
+        break;
+      case "compacting":
+        if (e.compacting) {
+          this.wait = null;
+          this.lastPrompt = undefined;
+        } else if (this.active && !this.running.size) this.begin(now);
+        break;
+      case "prompt_tokens":
+        this.lastPrompt = e.tokens;
+        break;
+      case "context":
+        this.lastPrompt = e.context.usedTokens || this.lastPrompt;
+        break;
+      case "model_retry":
+        if (this.active)
+          this.wait = {
+            ...(this.wait ?? this.fresh(now)),
+            retry: { attempt: e.attempt, message: e.message },
+          };
+        break;
+    }
+    return (
+      before !== this.wait &&
+      JSON.stringify(before) !== JSON.stringify(this.wait)
+    );
+  }
+
+  private fresh(now: number): ModelWait {
+    return this.lastPrompt
+      ? { since: now, promptTokens: this.lastPrompt }
+      : { since: now };
+  }
+
+  private begin(now: number) {
+    this.wait = this.fresh(now);
+  }
+
+  private end() {
+    this.active = false;
+    this.wait = null;
+    this.running.clear();
+  }
+}

package/lib/chat/progress.ts

@@ -0,0 +1,169 @@
+import type { ChatItem, ChatState, Compacting, ModelWait } from "./events";
+import { formatTokens } from "./context";
+
+type Tool = Extract<ChatItem, { kind: "tool" }>;
+
+export type Phase = "planning" | "coding" | "testing" | "error";
+
+// A wait on one model call this long gets a hint that it may be normal.
+export const LONG_WAIT_MS = 2 * 60_000;
+export const LONG_WAIT_HINT =
+  "Still waiting on the model; large prompts on local models can take minutes";
+
+const TEST_RE =
+  /\b(test|tests|vitest|jest|pytest|mocha|playwright|tsc|typecheck|lint|eslint|build|check)\b|cargo (test|build|check)|go (test|build|vet)/;
+const EDIT_TOOLS = new Set([
+  "Edit",
+  "Write",
+  "MultiEdit",
+  "NotebookEdit",
+  "apply_patch",
+]);
+const VERBS: Record<string, string> = {
+  Read: "Reading",
+  Edit: "Editing",
+  Write: "Writing",
+  MultiEdit: "Editing",
+  NotebookEdit: "Editing",
+  Search: "Searching",
+  Find: "Finding",
+  Fetch: "Fetching",
+  List: "Listing",
+  Run: "Running",
+};
+
+const str = (v: unknown) => (typeof v === "string" ? v : "");
+const input = (t: Tool) => (t.input ?? {}) as Record<string, unknown>;
+const command = (t: Tool) => str(input(t).command);
+
+// "ollama/qwen3-coder:30b" -> "qwen3-coder:30b"; nothing known -> "the model".
+export function shortModel(label: string | undefined): string {
+  let m = (label ?? "").trim().split("/").at(-1) ?? "";
+  m = m.replace(/:latest$/, "").replace(/-\d{8}$/, "");
+  if (!m || m.toLowerCase() === "default") return "the model";
+  return m.length > 24 ? `${m.slice(0, 23)}…` : m;
+}
+
+const tail = (path: string) => path.split("/").slice(-3).join("/");
+const clip = (s: string, n = 60) =>
+  s.length > n ? `${s.slice(0, n - 1)}…` : s;
+
+// A tool call in plain words: "Running npm test", "Editing src/a/b.ts".
+export function stepLabel(t: Tool): string {
+  const cmd = command(t);
+  if (cmd) return `Running ${clip(cmd.replace(/\s+/g, " ").trim())}`;
+  const path = str(input(t).file_path);
+  if (path && EDIT_TOOLS.has(t.name)) {
+    const verb = VERBS[t.name] ?? "Editing";
+    return `${verb} ${tail(path)}`;
+  }
+  const [first, ...rest] = t.title.split(" ");
+  return VERBS[first] && rest.length
+    ? `${VERBS[first]} ${rest.join(" ")}`
+    : t.title;
+}
+
+export function turnTools(items: ChatItem[]): Tool[] {
+  let start = 0;
+  items.forEach((i, n) => {
+    if (i.kind === "user" && !i.midTurn) start = n + 1;
+  });
+  return items.slice(start).filter((i): i is Tool => i.kind === "tool");
+}
+
+const edited = (t: Tool) => EDIT_TOOLS.has(t.name) || !!t.diff;
+
+// Planning, coding, testing or error, from the turn's tools: the current
+// step (running, else the last one) decides error and testing; having
+// edited anything in the turn makes the rest coding.
+export function phaseOf(tools: Tool[]): Phase {
+  const step = tools.findLast((t) => t.status === "running") ?? tools.at(-1);
+  if (!step) return "planning";
+  if (step.status === "error") return "error";
+  if (TEST_RE.test(command(step))) return "testing";
+  return tools.some(edited) ? "coding" : "planning";
+}
+
+export interface Activity {
+  label: string;
+  since?: number;
+  compacting?: boolean;
+  kind: "answer" | "compacting" | "tool" | "writing" | "waiting" | "retry";
+  // The last measured prompt, when a driver reported one.
+  tokens?: number;
+  phase?: Phase;
+  steps: number;
+  // The last finished step, while no tool runs.
+  lastStep?: string;
+  turnSince?: number;
+  hint?: string;
+}
+
+// What the turn is doing now and for how long, from its items.
+export function currentActivity(
+  items: ChatItem[],
+  state: ChatState,
+  compacting: Compacting | null = null,
+  modelWait: ModelWait | null = null,
+  model?: string,
+  now: number = Date.now()
+): Activity | null {
+  if (state === "waiting")
+    return { label: "Waiting for your answer", kind: "answer", steps: 0 };
+  if (state !== "running") return null;
+  if (compacting)
+    return {
+      label: `Compacting context…${compacting.before ? ` ${formatTokens(compacting.before)} tokens` : ""}`,
+      since: compacting.since,
+      compacting: true,
+      kind: "compacting",
+      steps: 0,
+    };
+  const lastUser = items.findLast((i) => i.kind === "user" && !i.midTurn);
+  const tools = turnTools(items);
+  const base = {
+    steps: tools.length,
+    turnSince: lastUser?.createdAt,
+    phase: tools.length ? phaseOf(tools) : undefined,
+  };
+  const tool = tools.findLast((t) => t.status === "running");
+  if (tool)
+    return {
+      ...base,
+      label: stepLabel(tool),
+      since: tool.createdAt,
+      kind: "tool",
+    };
+  const last = items.at(-1);
+  if (
+    last &&
+    (last.kind === "assistant" || last.kind === "reasoning") &&
+    last.streaming
+  )
+    return {
+      ...base,
+      label: last.kind === "assistant" ? "Writing" : "Thinking",
+      since: lastUser?.createdAt,
+      kind: "writing",
+    };
+  const done = tools.findLast((t) => t.status !== "running");
+  const since =
+    modelWait?.since ?? done?.endedAt ?? done?.createdAt ?? lastUser?.createdAt;
+  const retry = modelWait?.retry;
+  return {
+    ...base,
+    label: retry
+      ? `Retrying model request (attempt ${retry.attempt})`
+      : `Waiting for ${shortModel(model)}`,
+    since,
+    kind: retry ? "retry" : "waiting",
+    tokens: modelWait?.promptTokens,
+    lastStep: done
+      ? `${stepLabel(done)}${done.status === "error" ? " failed" : ""}`
+      : undefined,
+    hint:
+      since !== undefined && now - since > LONG_WAIT_MS
+        ? LONG_WAIT_HINT
+        : undefined,
+  };
+}

package/lib/chat/registry.ts

@@ -10,9 +10,11 @@ import type {
   ChatServerMessage,
   ChatState,
   Compacting,
+  ModelWait,
 } from "./events";
 import { markStatusDirty } from "../status/dirty";
 import { FLUSH_MS } from "./store";
+import type { ModelWaitTracker } from "./model-wait";
 
 // Long enough for the worker's buffered write of an item to land.
 const EMIT_SETTLE_MS = 2 * FLUSH_MS;
@@ -23,6 +25,9 @@ export interface Live {
   state: ChatState;
   // Set while its agent compacts the context, over a "running" state.
   compacting?: Compacting | null;
+  // The model call the turn is waiting on, if any (lib/chat/model-wait).
+  modelWait?: ModelWait | null;
+  waitTracker?: ModelWaitTracker;
   // Streamed items carry their latest text here, ahead of SQLite.
   streaming: Map<string, ChatItem>;
   // What the turn is doing right now, for the session list.

package/lib/chat/runner-watch.ts

@@ -0,0 +1,71 @@
+import type { ChatContext, ChatItem } from "./events";
+import { getSession, registry, type Listener } from "./registry";
+import { releaseUnwatchedSoon, sendCapabilities } from "./settings";
+import { recentTasks, settle } from "./store";
+import { readPage, toolBody, type ItemPage } from "./page";
+import { listQueue } from "./queued";
+import { runningWorkers } from "./worker/client";
+import { demoLive } from "./demo";
+
+function savedContext(sessionId: string): ChatContext | null {
+  const raw = getSession(sessionId).chat_context;
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as ChatContext;
+  } catch {
+    return null;
+  }
+}
+
+// What a watcher is sent of stored items: the live text of what's still
+// streaming, or with no conversation running, nothing left running.
+function present(sessionId: string, items: ChatItem[]): ChatItem[] {
+  const live = registry.live.get(sessionId);
+  if (live) return items.map((i) => live.streaming.get(i.id) ?? i);
+  if (demoLive(sessionId)) return items;
+  return runningWorkers().includes(sessionId) ? items : settle(items);
+}
+
+// Snapshot then live updates. Returns the unsubscribe function. Every
+// client gets the latest page and asks for older ones.
+export function watchChat(sessionId: string, listener: Listener): () => void {
+  const live = registry.live.get(sessionId);
+  const demo = demoLive(sessionId);
+  const page = readPage(sessionId);
+  const onPage = new Set(page.items.map((i) => i.id));
+  // The composer lists background work still going or just done, even when
+  // it started before the page.
+  const recent = Date.now() - 60 * 60 * 1000;
+  const tasks = recentTasks(sessionId, recent).filter((t) => !onPage.has(t.id));
+  listener({
+    type: "snapshot",
+    items: present(sessionId, page.items),
+    cursor: page.cursor,
+    hasMore: page.hasMore,
+    tasks: present(sessionId, tasks),
+    state: live?.state ?? demo?.state ?? "idle",
+    compacting: live?.compacting ?? null,
+    modelWait: live?.modelWait ?? demo?.wait ?? null,
+    queue: listQueue(sessionId),
+    suggestion: getSession(sessionId).chat_suggestion ?? null,
+  });
+  listener({ type: "context", context: savedContext(sessionId) });
+  sendCapabilities(sessionId, listener).catch((error) =>
+    console.error(`[chat ${sessionId}] capabilities not sent:`, error)
+  );
+  let set = registry.listeners.get(sessionId);
+  if (!set) registry.listeners.set(sessionId, (set = new Set()));
+  set.add(listener);
+  return () => {
+    set?.delete(listener);
+    releaseUnwatchedSoon();
+  };
+}
+
+// The page before `before`, as the reader scrolls up.
+export function chatHistory(sessionId: string, before: number): ItemPage {
+  const page = readPage(sessionId, before);
+  return { ...page, items: present(sessionId, page.items) };
+}
+
+export const chatToolBody = toolBody;

package/lib/chat/runner.ts

@@ -16,9 +16,9 @@ import { randomUUID } from "crypto";
 import os from "os";
 import { db, type Session } from "../db";
 import type { CompactFirst } from "./stale";
+import { trackModelWait } from "./model-wait-live";
 import type {
   ApprovalDecision,
-  ChatContext,
   ChatFile,
   ChatImage,
   ChatServerMessage,
@@ -34,26 +34,17 @@ import {
   type Listener,
   type Live,
 } from "./registry";
-import {
-  capsKey,
-  emitCapabilities,
-  releaseUnwatchedSoon,
-  sendCapabilities,
-  setChatPlan,
-} from "./settings";
+import { capsKey, emitCapabilities, setChatPlan } from "./settings";
 import {
   endOrphanedTasks,
   endRunningTasks,
   getItem,
   hasItem,
   itemsOfKind,
-  recentTasks,
   sessionsWithRunningTasks,
   saveItem,
-  settle,
 } from "./store";
 import { noteToolResult } from "../health/env/recordHit";
-import { readPage, toolBody, type ItemPage } from "./page";
 import {
   deleteQueued,
   editQueued,
@@ -101,16 +92,6 @@ export {
   setChatPlan,
 } from "./settings";
 
-function savedContext(sessionId: string): ChatContext | null {
-  const raw = getSession(sessionId).chat_context;
-  if (!raw) return null;
-  try {
-    return JSON.parse(raw) as ChatContext;
-  } catch {
-    return null;
-  }
-}
-
 const CARRY_OUT = "Carry out the plan.";
 
 // Leaves plan mode and starts the plan. The message's id comes from the
@@ -192,6 +173,7 @@ function emitEnded(
 
 function onWorkerEvent(sessionId: string, live: Live, e: WorkerEvent): void {
   track(live, e);
+  if (trackModelWait(sessionId, live, e)) return;
   if (e.type === "item" && e.item.kind === "tool")
     noteToolResult(sessionId, e.item);
   if (
@@ -968,55 +950,7 @@ export function chatTaskOutput(
   return taskOutputTail(taskId, task.outputFile);
 }
 
-// What a watcher is sent of stored items: the live text of what's still
-// streaming, or with no conversation running, nothing left running.
-function present(sessionId: string, items: ChatItem[]): ChatItem[] {
-  const live = registry.live.get(sessionId);
-  if (live) return items.map((i) => live.streaming.get(i.id) ?? i);
-  return runningWorkers().includes(sessionId) ? items : settle(items);
-}
-
-// Snapshot then live updates. Returns the unsubscribe function. Every
-// client gets the latest page and asks for older ones.
-export function watchChat(sessionId: string, listener: Listener): () => void {
-  const live = registry.live.get(sessionId);
-  const page = readPage(sessionId);
-  const onPage = new Set(page.items.map((i) => i.id));
-  // The composer lists background work still going or just done, even when
-  // it started before the page.
-  const recent = Date.now() - 60 * 60 * 1000;
-  const tasks = recentTasks(sessionId, recent).filter((t) => !onPage.has(t.id));
-  listener({
-    type: "snapshot",
-    items: present(sessionId, page.items),
-    cursor: page.cursor,
-    hasMore: page.hasMore,
-    tasks: present(sessionId, tasks),
-    state: live?.state ?? "idle",
-    compacting: live?.compacting ?? null,
-    queue: listQueue(sessionId),
-    suggestion: getSession(sessionId).chat_suggestion ?? null,
-  });
-  listener({ type: "context", context: savedContext(sessionId) });
-  sendCapabilities(sessionId, listener).catch((error) =>
-    console.error(`[chat ${sessionId}] capabilities not sent:`, error)
-  );
-  let set = registry.listeners.get(sessionId);
-  if (!set) registry.listeners.set(sessionId, (set = new Set()));
-  set.add(listener);
-  return () => {
-    set?.delete(listener);
-    releaseUnwatchedSoon();
-  };
-}
-
-// The page before `before`, as the reader scrolls up.
-export function chatHistory(sessionId: string, before: number): ItemPage {
-  const page = readPage(sessionId, before);
-  return { ...page, items: present(sessionId, page.items) };
-}
-
-export const chatToolBody = toolBody;
+export { chatHistory, chatToolBody, watchChat } from "./runner-watch";
 
 // After a restart: reconnect to every worker still running a conversation,
 // and send the queues of conversations whose worker is gone.

package/lib/chat/tools.ts

@@ -81,3 +81,17 @@ export function clipOutput(text: string): string {
     ? `${text.slice(0, MAX_TOOL_OUTPUT)}\n… (${text.length - MAX_TOOL_OUTPUT} more characters)`
     : text;
 }
+
+export const LIVE_OUTPUT_LINES = 200;
+
+// A running step's output so far: the last lines, never more than a
+// finished step keeps. The end of a long build is what the reader wants.
+export function tailOutput(text: string): string {
+  const lines = text.split("\n");
+  let tail =
+    lines.length > LIVE_OUTPUT_LINES
+      ? lines.slice(-LIVE_OUTPUT_LINES).join("\n")
+      : text;
+  if (tail.length > MAX_TOOL_OUTPUT) tail = tail.slice(-MAX_TOOL_OUTPUT);
+  return tail === text ? tail : `…\n${tail}`;
+}

package/lib/security/demo.ts

@@ -23,6 +23,14 @@ type Env = Record<string, string | undefined>;
 
 export const demoMode = (env: Env = process.env) => env.AGENTOS_DEMO === "1";
 
+/**
+ * Only the chat is a stand-in (AGENTOS_DEMO_CHAT=1): the screenshot server's
+ * scripted turns (lib/chat/drivers/demo-script). The rest of the server is a
+ * normal one, so it is held to the same sandbox as the demo (server.ts).
+ */
+export const demoChatMode = (env: Env = process.env) =>
+  env.AGENTOS_DEMO_CHAT === "1";
+
 const within = (child: string, parent: string) => {
   const rel = path.relative(parent, child);
   return rel === "" || (!rel.startsWith("..") && !path.isAbsolute(rel));

package/lib/tasks/move-testing.ts

@@ -57,7 +57,12 @@ export function setupMoveRepo(): MoveFixture {
     restore: () => {
       process.env.HOME = saved.HOME;
       delete process.env.CLAUDE_CONFIG_DIR;
-      fs.rmSync(tmp, { recursive: true, force: true });
+      fs.rmSync(tmp, {
+        recursive: true,
+        force: true,
+        maxRetries: 5,
+        retryDelay: 100,
+      });
     },
   };
 }

package/package.json

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

package/scripts/screenshots/run.ts

@@ -5,6 +5,7 @@
  *     npm run screenshots              # everything
  *     npm run screenshots -- --keep    # leave the demo server up afterwards
  *     npm run screenshots -- --only hero,tasks
+ *     npm run screenshots -- --only running-turn   # a held running turn
  */
 import fs from "fs";
 import path from "path";
@@ -13,6 +14,7 @@ import { spawnServer } from "@/lib/dev-instance";
 import { BASE_URL, PORT, REPO, ROOT, demoEnv } from "./config";
 import { seed, teardownTmux } from "./seed";
 import { shoot } from "./shoot";
+import { SHOTS } from "./shots";
 import { frame } from "./frame";
 import { startPeer } from "./peer";
 
@@ -37,7 +39,7 @@ async function waitForServer(server: ChildProcess): Promise<void> {
   throw new Error(`Demo server did not answer on ${BASE_URL}`);
 }
 
-function startServer(): ChildProcess {
+function startServer(demoChat: boolean): ChildProcess {
   const log = fs.openSync(path.join(ROOT, "server.log"), "w");
   // Loopback only: the demo never listens on another network.
   return spawnServer({
@@ -49,6 +51,8 @@ function startServer(): ChildProcess {
       AGENTOS_BIND: "127.0.0.1",
       AGENTOS_ORCHESTRATOR: "off",
       AGENTOS_STACKS: "off",
+      // Scripted chat turns (lib/chat/drivers/demo-script), for on-demand shots.
+      ...(demoChat ? { AGENTOS_DEMO_CHAT: "1" } : {}),
     }),
     stdio: ["ignore", log, log],
     detached: true,
@@ -64,21 +68,41 @@ function stopServer(server: ChildProcess): void {
   }
 }
 
+// An on-demand shot has no README frame; its raw captures would go with the
+// demo root, so they are copied to .agentos/screenshots (git-ignored there).
+function keepOnDemand(raw: Awaited<ReturnType<typeof shoot>>): void {
+  const names = new Set(SHOTS.filter((s) => s.onDemand).map((s) => s.name));
+  const dir = path.join(process.cwd(), ".agentos", "screenshots");
+  for (const shot of raw) {
+    if (!names.has(shot.name)) continue;
+    fs.mkdirSync(dir, { recursive: true });
+    fs.writeFileSync(path.join(path.dirname(dir), ".gitignore"), "*\n");
+    for (const file of shot.files) {
+      fs.copyFileSync(file, path.join(dir, path.basename(file)));
+      console.log(`  .agentos/screenshots/${path.basename(file)}`);
+    }
+  }
+}
+
 async function main() {
   const only = arg("--only")?.split(",");
+  const onDemand = !!only?.some(
+    (n) => SHOTS.find((s) => s.name === n)?.onDemand
+  );
   const reuse = has("--reuse");
   let server: ChildProcess | null = null;
   const peer = reuse ? null : startPeer();
   try {
     if (!reuse) {
       console.log("Seeding demo data");
-      await seed();
+      await seed(onDemand);
       console.log(`Starting demo server on :${PORT}`);
-      server = startServer();
+      server = startServer(onDemand);
       await waitForServer(server);
     }
     console.log("Shooting");
     const raw = await shoot(only);
+    keepOnDemand(raw);
     console.log("Framing");
     await frame(raw);
   } finally {

package/scripts/screenshots/running-turn.ts

@@ -0,0 +1,54 @@
+import type { Page } from "playwright";
+import type { Part, Shot } from "./shots";
+
+// A running turn, held on screen by the demo's scripted turn
+// (lib/chat/drivers/demo-script): `npm run screenshots -- --only running-turn`.
+// Each part sends the trigger for one state and waits for it to show.
+
+const SESSION = "running-turn";
+const HOLD_S = 60;
+
+const PHASES = [
+  { phase: "step", marker: /npx vitest run src\/checkout/ },
+  { phase: "wait", marker: /Waiting for/ },
+  { phase: "retry", marker: /Retrying model request/ },
+] as const;
+
+async function startTurn(
+  page: Page,
+  phase: string,
+  marker: RegExp,
+  phone: boolean
+): Promise<void> {
+  if (phone) {
+    await page.locator("button:has(svg.lucide-menu)").first().click();
+    await page.waitForTimeout(800);
+  }
+  await page.getByText(SESSION, { exact: true }).first().click();
+  await page.waitForTimeout(2500);
+  await page.locator(".chat-composer [contenteditable]").first().click();
+  await page.keyboard.type(`demo: running turn ${phase} hold=${HOLD_S}`);
+  // Enter is a new line on a phone: the send button sends.
+  if (phone)
+    await page.locator("button:has(svg.lucide-arrow-up)").last().click();
+  else await page.keyboard.press("Enter");
+  await page.getByText(marker).first().waitFor({ timeout: 30000 });
+  await page.waitForTimeout(1500);
+}
+
+const parts = (device: Part["device"]): Part[] =>
+  PHASES.map(({ phase, marker }) => ({
+    id: `${phase}-${device}`,
+    device,
+    themes: ["dark", "light"],
+    keepFocus: true,
+    setup: (page) => startTurn(page, phase, marker, device === "phone"),
+  }));
+
+export const RUNNING_TURN_SHOTS: Shot[] = [
+  {
+    name: "running-turn",
+    onDemand: true,
+    parts: [...parts("desktop"), ...parts("phone")],
+  },
+];