@saadnvd1/agent-os 0.3.570 → 0.3.571

package/app/api/client-config/route.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import { GET } from "./route";
+
+describe("GET /api/client-config", () => {
+  it("serves the config uncached", async () => {
+    const res = GET();
+    expect(res.status).toBe(200);
+    expect(res.headers.get("cache-control")).toBe("no-store");
+    expect((await res.json()).v).toBe(1);
+  });
+});

package/app/api/client-config/route.ts

@@ -0,0 +1,10 @@
+import { NextResponse } from "next/server";
+import { clientConfig } from "@/lib/config/client-config";
+
+// GET /api/client-config - the labels and defaults a client renders with.
+// Read-only; the app keeps its own cache, so the server never does.
+export function GET() {
+  return NextResponse.json(clientConfig(), {
+    headers: { "Cache-Control": "no-store" },
+  });
+}

package/components/Chat/AccessPicker.tsx

@@ -14,28 +14,20 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { ACCESS_LEVELS } from "@/lib/chat/access-levels";
 import { CHAT_ACCESS, type ChatAccess } from "@/lib/chat/events";
 
-const LEVELS: Record<
+const ICON: Record<ChatAccess, typeof Shield> = {
+  ask: ShieldCheck,
+  edits: Shield,
+  full: ShieldOff,
+};
+const LEVELS = Object.fromEntries(
+  CHAT_ACCESS.map((a) => [a, { ...ACCESS_LEVELS[a], icon: ICON[a] }])
+) as Record<
   ChatAccess,
   { label: string; description: string; icon: typeof Shield }
-> = {
-  ask: {
-    label: "Ask first",
-    description: "Asks before edits and commands it isn't already allowed",
-    icon: ShieldCheck,
-  },
-  edits: {
-    label: "Accept edits",
-    description: "Edits files on its own, asks before other commands",
-    icon: Shield,
-  },
-  full: {
-    label: "Full access",
-    description: "Does everything without asking",
-    icon: ShieldOff,
-  },
-};
+>;
 
 // What the agent may do without asking, switchable mid-conversation.
 export function AccessPicker({

package/components/Chat/ChatPanel.tsx

@@ -265,6 +265,7 @@ export function ChatPanel({
     refreshingCommands,
     models,
     model,
+    modelLabel,
     send,
     interrupt,
     setModel,
@@ -770,6 +771,7 @@ export function ChatPanel({
           refreshingCommands={refreshingCommands}
           models={models}
           model={model}
+          modelLabel={modelLabel}
           onSetModel={setModel}
           access={access}
           onSetAccess={accessLocked ? undefined : setAccess}

package/components/Chat/ModelPicker.tsx

@@ -9,20 +9,26 @@ import {
 } from "@/components/ui/dropdown-menu";
 import type { ChatModel } from "@/lib/chat/events";
 
-export function modelLabel(models: ChatModel[], value: string): string {
-  return models.find((m) => m.value === value)?.label ?? value;
+export function modelLabel(
+  models: ChatModel[],
+  value: string,
+  serverLabel?: string
+): string {
+  return models.find((m) => m.value === value)?.label ?? (serverLabel || value);
 }
 
 // The session's model, switchable mid-conversation. Opened by its button or /model.
 export function ModelPicker({
   models,
   model,
+  label,
   open,
   onOpenChange,
   onPick,
 }: {
   models: ChatModel[];
   model: string;
+  label?: string;
   open: boolean;
   onOpenChange: (open: boolean) => void;
   onPick: (value: string) => void;
@@ -37,7 +43,7 @@ export function ModelPicker({
           className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.05] flex h-10 max-w-36 min-w-0 items-center gap-1 rounded-lg px-2 text-xs"
         >
           <span className="truncate">
-            {modelLabel(models, model) || "Model"}
+            {modelLabel(models, model, label) || "Model"}
           </span>
           <ChevronDown className="h-3 w-3 shrink-0" />
         </button>

package/components/Chat/composer/ComposerBody.tsx

@@ -51,6 +51,7 @@ export interface ComposerProps {
   refreshingCommands?: boolean;
   models?: ChatModel[];
   model?: string;
+  modelLabel?: string;
   onSetModel?: (model: string) => void;
   access?: ChatAccess;
   onSetAccess?: (access: ChatAccess) => void;
@@ -88,6 +89,7 @@ export function ComposerBody({
   refreshingCommands = false,
   models = [],
   model = "",
+  modelLabel,
   onSetModel,
   access,
   onSetAccess,
@@ -329,6 +331,7 @@ export function ComposerBody({
           onSetAccess={onSetAccess}
           models={models}
           model={model}
+          modelLabel={modelLabel}
           onSetModel={onSetModel}
           modelOpen={modelOpen}
           onModelOpenChange={setModelOpen}

package/components/Chat/composer/Toolbar.tsx

@@ -31,6 +31,7 @@ export function Toolbar({
   onSetAccess,
   models,
   model,
+  modelLabel,
   onSetModel,
   modelOpen,
   onModelOpenChange,
@@ -51,6 +52,7 @@ export function Toolbar({
   onSetAccess?: (access: ChatAccess) => void;
   models: ChatModel[];
   model: string;
+  modelLabel?: string;
   onSetModel?: (model: string) => void;
   modelOpen: boolean;
   onModelOpenChange: (open: boolean) => void;
@@ -135,6 +137,7 @@ export function Toolbar({
         <ModelPicker
           models={models}
           model={model}
+          label={modelLabel}
           open={modelOpen}
           onOpenChange={onModelOpenChange}
           onPick={onSetModel}

package/components/Recipes/format.ts

@@ -1,29 +1,26 @@
+import type { Tone } from "@/lib/config/client-config-types";
+import {
+  RUN_STATUS_LABELS,
+  RUN_TRIGGER_LABELS,
+} from "@/lib/recipes/status-labels";
 import type { RecipeRun, RunStatus } from "@/lib/recipes/types";
 
-export const STATUS_LABEL: Record<RunStatus, string> = {
-  queued: "Queued",
-  starting: "Starting",
-  running: "Running",
-  succeeded: "Succeeded",
-  failed: "Failed",
-  blocked: "Needs you",
-  timed_out: "Timed out",
-  cancelled: "Cancelled",
-  skipped: "Skipped",
-};
+export const STATUS_LABEL = Object.fromEntries(
+  Object.entries(RUN_STATUS_LABELS).map(([k, v]) => [k, v.label])
+) as Record<RunStatus, string>;
 
-export const STATUS_TONE: Record<RunStatus, string> = {
-  queued: "bg-foreground/10 text-muted-foreground",
-  starting: "bg-primary/15 text-primary",
-  running: "bg-primary/15 text-primary",
-  succeeded: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
-  failed: "bg-destructive/15 text-destructive",
-  blocked: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
-  timed_out: "bg-destructive/15 text-destructive",
-  cancelled: "bg-foreground/10 text-muted-foreground",
-  skipped: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+const TONE_CHIP: Record<Tone, string> = {
+  muted: "bg-foreground/10 text-muted-foreground",
+  warning: "bg-amber-500/15 text-amber-700 dark:text-amber-300",
+  primary: "bg-primary/15 text-primary",
+  destructive: "bg-destructive/15 text-destructive",
+  success: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
 };
 
+export const STATUS_TONE = Object.fromEntries(
+  Object.entries(RUN_STATUS_LABELS).map(([k, v]) => [k, TONE_CHIP[v.tone]])
+) as Record<RunStatus, string>;
+
 // SQLite's datetime('now') is UTC without a zone marker.
 export const sqlMs = (t: string | null) =>
   t ? Date.parse(`${t.replace(" ", "T")}Z`) : 0;
@@ -39,13 +36,5 @@ export function duration(ms: number | null): string {
 export const money = (n: number | null) =>
   n == null ? "" : `$${n < 10 ? n.toFixed(2) : n.toFixed(0)}`;
 
-const TRIGGER_LABEL = {
-  manual: "by hand",
-  tool: "by the orchestrator",
-  cli: "by an agent",
-  timer: "on its timer",
-  "catch-up": "on its timer, late",
-} as const;
-
 export const triggerLabel = (r: Pick<RecipeRun, "trigger">) =>
-  TRIGGER_LABEL[r.trigger];
+  RUN_TRIGGER_LABELS[r.trigger];

package/components/Tasks/task-state-labels.ts

@@ -1,19 +1,19 @@
+import type { Tone } from "@/lib/config/client-config-types";
 import type { TaskState } from "@/lib/tasks/state";
+import { TASK_STATE_LABELS } from "@/lib/tasks/state-labels";
 
-// How a task's state reads, and its tone, wherever a task is shown.
-export const TASK_STATE: Record<TaskState, { label: string; tone: string }> = {
-  working: { label: "Working", tone: "text-muted-foreground" },
-  "needs-input": {
-    label: "Needs input",
-    tone: "text-amber-600 dark:text-amber-400",
-  },
-  blocked: { label: "Blocked", tone: "text-amber-600 dark:text-amber-400" },
-  "plan-ready": { label: "Plan ready", tone: "text-primary" },
-  review: { label: "Ready for review", tone: "text-primary" },
-  "checks-failing": { label: "Checks failing", tone: "text-destructive" },
-  exited: { label: "Agent exited", tone: "text-amber-600 dark:text-amber-400" },
-  merged: { label: "Merged", tone: "text-emerald-600 dark:text-emerald-400" },
-  dropped: { label: "Dropped", tone: "text-muted-foreground/60" },
-  done: { label: "Done", tone: "text-emerald-600 dark:text-emerald-400" },
-  moving: { label: "Moving", tone: "text-amber-600 dark:text-amber-400" },
+export const TONE_TEXT: Record<Tone, string> = {
+  muted: "text-muted-foreground",
+  warning: "text-amber-600 dark:text-amber-400",
+  primary: "text-primary",
+  destructive: "text-destructive",
+  success: "text-emerald-600 dark:text-emerald-400",
 };
+
+// How a task's state reads, and its tone class, wherever a task is shown.
+export const TASK_STATE = Object.fromEntries(
+  Object.entries(TASK_STATE_LABELS).map(([k, v]) => [
+    k,
+    { label: v.label, tone: TONE_TEXT[v.tone] },
+  ])
+) as Record<TaskState, { label: string; tone: string }>;

package/data/chat/useChat.ts

@@ -146,6 +146,7 @@ export function useChat(
   const [commands, setCommands] = useState<ChatCommand[]>([]);
   const [models, setModels] = useState<ChatModel[]>([]);
   const [model, setModelState] = useState("");
+  const [modelLabel, setModelLabel] = useState<string | undefined>();
   const [refreshingCommands, setRefreshingCommands] = useState(false);
   const refreshTimer = useRef<ReturnType<typeof setTimeout>>(undefined);
   const [access, setAccessState] = useState<ChatAccess>("full");
@@ -251,6 +252,7 @@ export function useChat(
           setCommands(m.commands);
           setModels(m.models);
           setModelState(m.model);
+          setModelLabel(m.modelLabel);
           setAccessState(m.access);
           setPlanState(m.plan);
           setCanBackground(!!m.background);
@@ -519,6 +521,7 @@ export function useChat(
     refreshingCommands,
     models,
     model,
+    modelLabel,
     send,
     interrupt,
     setModel,

package/lib/chat/access-levels.ts

@@ -0,0 +1,24 @@
+// What each chat access level is called and does, for every client. Synced to
+// the native app, so it may only import synced files.
+import type { ChatAccess } from "./events";
+
+export const ACCESS_LEVELS: Record<
+  ChatAccess,
+  { label: string; description: string }
+> = {
+  ask: {
+    label: "Ask first",
+    description: "Asks before edits and commands it isn't already allowed",
+  },
+  edits: {
+    label: "Accept edits",
+    description: "Edits files on its own, asks before other commands",
+  },
+  full: {
+    label: "Full access",
+    description: "Does everything without asking",
+  },
+};
+
+// The access a new chat starts with when the client doesn't pick one.
+export const DEFAULT_NEW_CHAT_ACCESS: ChatAccess = "edits";

package/lib/chat/events.ts

@@ -359,6 +359,8 @@ export type ChatServerMessage =
       commands: ChatCommand[];
       models: ChatModel[];
       model: string;
+      // A readable name for `model` when it is not one of `models`.
+      modelLabel?: string;
       access: ChatAccess;
       // Plan mode: on, or null when the session can't use it.
       plan: boolean | null;

package/lib/chat/settings.ts

@@ -7,7 +7,7 @@ import { effectiveChatAccess, noApprovalsOn } from "../approvals/no-approvals";
 import os from "os";
 import { db, type Session } from "../db";
 import { agentEnv } from "../agents/launch";
-import { resolveModelForAgent } from "../model-catalog";
+import { modelDisplayName, resolveModelForAgent } from "../model-catalog";
 import { chatDriverFor } from "./drivers";
 import {
   CHAT_ACCESS,
@@ -69,11 +69,15 @@ function visibleCommands(caps: Capabilities): ChatCommand[] {
 export function emitCapabilities(session: Session, listener?: Listener): void {
   const caps = registry.caps.get(capsKey(session));
   if (!caps) return;
+  const model = chatModel(session);
   const m: ChatServerMessage = {
     type: "capabilities",
     commands: visibleCommands(caps),
     models: caps.models,
-    model: chatModel(session),
+    model,
+    modelLabel:
+      caps.models.find((o) => o.value === model)?.label ??
+      modelDisplayName(model),
     access: effectiveChatAccess(session.chat_access),
     plan: canPlan(session) ? !!session.chat_plan && !noApprovalsOn() : null,
     background: chatDriverFor(session.agent_type)?.backgroundTasks === true,

package/lib/config/client-config-types.ts

@@ -0,0 +1,29 @@
+// Read-only config a client renders with. Additive: a new field never bumps
+// `v`; only a change that breaks an old reader does, and then the old field
+// keeps being served beside the new one for a release. Synced to the native
+// app, so it must stay pure: no imports.
+export const CLIENT_CONFIG_VERSION = 1;
+
+export type Tone = "muted" | "warning" | "primary" | "destructive" | "success";
+
+export interface LabelTone {
+  label: string;
+  tone: Tone;
+}
+
+export interface AccessLevel {
+  value: string;
+  label: string;
+  description: string;
+}
+
+// Keys are strings on purpose, so an older app can accept a state it doesn't
+// know yet; each client narrows them through its own typed lookups.
+export interface ClientConfig {
+  v: number;
+  server: { version: string | null; startedAt: string };
+  access: { levels: AccessLevel[]; default: string };
+  taskStates: Record<string, LabelTone>;
+  runStatuses: Record<string, LabelTone>;
+  runTriggers: Record<string, string>;
+}

package/lib/config/client-config.ts

@@ -0,0 +1,28 @@
+import { ACCESS_LEVELS, DEFAULT_NEW_CHAT_ACCESS } from "../chat/access-levels";
+import { CHAT_ACCESS } from "../chat/events";
+import {
+  RUN_STATUS_LABELS,
+  RUN_TRIGGER_LABELS,
+} from "../recipes/status-labels";
+import { TASK_STATE_LABELS } from "../tasks/state-labels";
+import { cachedCheck } from "../updates/check";
+import {
+  CLIENT_CONFIG_VERSION,
+  type ClientConfig,
+} from "./client-config-types";
+
+const startedAt = new Date(Date.now() - process.uptime() * 1000).toISOString();
+
+export function clientConfig(): ClientConfig {
+  return {
+    v: CLIENT_CONFIG_VERSION,
+    server: { version: cachedCheck()?.current?.version ?? null, startedAt },
+    access: {
+      levels: CHAT_ACCESS.map((value) => ({ value, ...ACCESS_LEVELS[value] })),
+      default: DEFAULT_NEW_CHAT_ACCESS,
+    },
+    taskStates: TASK_STATE_LABELS,
+    runStatuses: RUN_STATUS_LABELS,
+    runTriggers: RUN_TRIGGER_LABELS,
+  };
+}

package/lib/model-catalog.ts

@@ -84,3 +84,14 @@ export function resolveModelForAgent(
 
   return getDefaultModelForAgent(agentType);
 }
+
+// A readable name for a model id: "claude-opus-5-5" is "Opus 5.5", the alias
+// "opus" is "Opus". An id it can't read passes through unchanged.
+export function modelDisplayName(id: string): string {
+  const alias = CLAUDE_MODEL_OPTIONS.find((o) => o.value === id);
+  if (alias) return alias.label;
+  const m = /^claude-([a-z]+)-(\d{1,2}(?:-\d{1,2})*)(?:-\d{8})?$/.exec(id);
+  if (!m) return id;
+  const family = m[1][0].toUpperCase() + m[1].slice(1);
+  return `${family} ${m[2].replace(/-/g, ".")}`;
+}

package/lib/recipes/status-labels.ts

@@ -0,0 +1,27 @@
+// How a recipe run's status and trigger read, for every client. Synced to the
+// native app, so it may only import synced files.
+import type { Tone } from "../config/client-config-types";
+import type { RunStatus, RunTriggerKind } from "./types";
+
+export const RUN_STATUS_LABELS: Record<
+  RunStatus,
+  { label: string; tone: Tone }
+> = {
+  queued: { label: "Queued", tone: "muted" },
+  starting: { label: "Starting", tone: "primary" },
+  running: { label: "Running", tone: "primary" },
+  succeeded: { label: "Succeeded", tone: "success" },
+  failed: { label: "Failed", tone: "destructive" },
+  blocked: { label: "Needs you", tone: "warning" },
+  timed_out: { label: "Timed out", tone: "destructive" },
+  cancelled: { label: "Cancelled", tone: "muted" },
+  skipped: { label: "Skipped", tone: "warning" },
+};
+
+export const RUN_TRIGGER_LABELS: Record<RunTriggerKind, string> = {
+  manual: "by hand",
+  tool: "by the orchestrator",
+  cli: "by an agent",
+  timer: "on its timer",
+  "catch-up": "on its timer, late",
+};

package/lib/tasks/state-labels.ts

@@ -0,0 +1,21 @@
+// How a task's state reads, and its tone, wherever a task is shown. Synced to
+// the native app, so it may only import synced files.
+import type { Tone } from "../config/client-config-types";
+import type { TaskState } from "./state";
+
+export const TASK_STATE_LABELS: Record<
+  TaskState,
+  { label: string; tone: Tone }
+> = {
+  working: { label: "Working", tone: "muted" },
+  "needs-input": { label: "Needs input", tone: "warning" },
+  blocked: { label: "Blocked", tone: "warning" },
+  "plan-ready": { label: "Plan ready", tone: "primary" },
+  review: { label: "Ready for review", tone: "primary" },
+  "checks-failing": { label: "Checks failing", tone: "destructive" },
+  exited: { label: "Agent exited", tone: "warning" },
+  merged: { label: "Merged", tone: "success" },
+  dropped: { label: "Dropped", tone: "muted" },
+  done: { label: "Done", tone: "success" },
+  moving: { label: "Moving", tone: "warning" },
+};

package/package.json

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