@hienlh/ppm 0.23.13 → 0.23.15

package/src/web/lib/design/design-layout-mode.ts

@@ -51,6 +51,13 @@ export interface DesignLayoutInput {
   pane: DesignPane;
   /** The canvas covers the whole window. */
   expanded: boolean;
+  /**
+   * The design is in a floating window. The window has its own fixed arrangement — canvas
+   * left, chat in a column on the right — so neither the width nor the pinned layout apply.
+   */
+  windowed?: boolean;
+  /** In a window: the chat column is open. */
+  windowChat?: boolean;
 }
 
 export interface DesignLayout {
@@ -62,10 +69,18 @@ export interface DesignLayout {
   /** The layout menu's checked item, which follows what is on screen. */
   menuValue: DesignLayoutOverride;
   expanded: boolean;
+  /** Laid out as a window: canvas first, chat a fixed column after it, toggled from the toolbar. */
+  windowed: boolean;
+  /** In a window, whether the chat column is open (false outside a window). */
+  windowChat: boolean;
 }
 
 export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   const { override, isPhone, autoSplit, expanded } = input;
+  if (input.windowed && !isPhone) {
+    const chat = input.windowChat !== false && !expanded;
+    return { split: chat, pane: "canvas", switcher: null, menuValue: override, expanded, windowed: true, windowChat: chat };
+  }
   // An expanded canvas lives inside the canvas pane, so that pane has to be the visible one.
   const pane: DesignPane = expanded ? "canvas" : input.pane;
   // A phone ignores a pinned split: two panes do not fit, and the pin belongs to this device's
@@ -75,5 +90,5 @@ export function resolveDesignLayout(input: DesignLayoutInput): DesignLayout {
   // A pinned single pane still lets the user peek at the other pane; the menu then names the
   // pane actually shown, so it never claims "Canvas only" over a visible chat.
   const menuValue = override === "canvas" || override === "chat" ? pane : override;
-  return { split, pane, switcher, menuValue, expanded };
+  return { split, pane, switcher, menuValue, expanded, windowed: false, windowChat: false };
 }

package/src/web/lib/design/design-share-address-state.ts

@@ -0,0 +1,88 @@
+import type { DesignShareAddress } from "../../../shared/design-share-types";
+
+/**
+ * What the Share dialog's address block shows, decided from the address route, the tunnel
+ * start the owner asked for, and the clock. Pure, so every state is tested without a server.
+ */
+
+/** Poll interval while a temporary address is starting. */
+export const SHARE_START_POLL_MS = 2_000;
+/** How long a start may take before the dialog says it did not come up. */
+export const SHARE_START_TIMEOUT_MS = 60_000;
+
+export const SIGNIN_OFF_REASON = "Turn on PPM sign-in first";
+export const QUICK_ADDRESS_WARNING =
+  "This is a temporary address. It changes when PPM or the tunnel restarts, and links you already sent stop working; copy them again then.";
+
+/** What the tunnel switch answered (`POST /api/tunnel/enabled`). */
+export type TunnelReload = "sent" | "busy" | "no-supervisor";
+
+export interface ShareStartAttempt {
+  /** Epoch ms the owner pressed Start. */
+  at: number;
+  /** Null until the switch answered. */
+  reload: TunnelReload | null;
+  /** The switch itself failed. */
+  error: string | null;
+}
+
+export type ShareAddressView =
+  | { kind: "loading" }
+  | { kind: "error"; message: string }
+  | { kind: "signin-off" }
+  | { kind: "named"; url: string; warning: string | null }
+  | { kind: "quick"; url: string; warning: string | null }
+  | { kind: "starting" }
+  | { kind: "failed"; message: string }
+  /** No public address; `enabled` = the switch is on but nothing is serving (a dark tunnel). */
+  | { kind: "none"; enabled: boolean; warning: string | null };
+
+export interface ShareAddressInputs {
+  address: DesignShareAddress | null;
+  loadError: string | null;
+  start: ShareStartAttempt | null;
+  now: number;
+}
+
+export function shareAddressView({ address, loadError, start, now }: ShareAddressInputs): ShareAddressView {
+  if (!address) return loadError ? { kind: "error", message: loadError } : { kind: "loading" };
+  if (!address.authEnabled) return { kind: "signin-off" };
+  if (address.url && address.kind !== "none") {
+    return address.kind === "named"
+      ? { kind: "named", url: address.url, warning: address.warning }
+      : { kind: "quick", url: address.url, warning: address.warning };
+  }
+  if (start) {
+    if (start.error) return { kind: "failed", message: start.error };
+    if (start.reload === "no-supervisor") {
+      return {
+        kind: "failed",
+        message: "PPM is running without its supervisor, so nothing can start the tunnel now. It starts the next time PPM is started normally.",
+      };
+    }
+    if (now - start.at <= SHARE_START_TIMEOUT_MS) return { kind: "starting" };
+    return { kind: "failed", message: address.warning ?? "The temporary address did not come up within a minute." };
+  }
+  return { kind: "none", enabled: address.enabled, warning: address.warning };
+}
+
+/** Why a new link cannot be created right now, or null when it can. */
+export function shareBlockedReason(address: DesignShareAddress | null, linkCount: number, maxLinks: number): string | null {
+  if (!address) return "Reading the sharing state…";
+  if (!address.authEnabled) return SIGNIN_OFF_REASON;
+  if (linkCount >= maxLinks) return `This design already has ${maxLinks} share links; delete one first`;
+  return null;
+}
+
+/**
+ * The URL a link is copied as: the public address plus its path, or this page's own origin
+ * when there is no public address (it then opens only where this PPM is reachable).
+ */
+export function shareLinkUrl(
+  address: DesignShareAddress | null, path: string | null, localOrigin: string,
+): { url: string; isPublic: boolean } | null {
+  if (!path) return null;
+  const publicUrl = address && address.kind !== "none" ? address.url : null;
+  if (publicUrl) return { url: publicUrl.replace(/\/+$/, "") + path, isPublic: true };
+  return { url: localOrigin.replace(/\/+$/, "") + path, isPublic: false };
+}

package/src/web/lib/design/design-share-expiry.ts

@@ -0,0 +1,96 @@
+import { SHARE_LIMITS } from "../../../shared/design-share-types";
+
+/**
+ * The expiry a share link is given: a preset, never, or the end of a chosen day in local
+ * time. Pure, so the arithmetic is tested without a browser.
+ *
+ * The server checks the same bound against its own clock (after now, at most
+ * {@link SHARE_LIMITS.maxExpiryMs} ahead), so a custom day is capped to the last one whose
+ * end still falls inside it.
+ */
+
+export type ShareExpiryPreset = "1d" | "7d" | "30d" | "never" | "custom";
+
+export const SHARE_EXPIRY_PRESETS: { id: ShareExpiryPreset; label: string }[] = [
+  { id: "1d", label: "1 day" },
+  { id: "7d", label: "7 days" },
+  { id: "30d", label: "30 days" },
+  { id: "never", label: "Never" },
+  { id: "custom", label: "Custom" },
+];
+
+export const DEFAULT_SHARE_EXPIRY: ShareExpiryPreset = "7d";
+
+const DAY_MS = 24 * 60 * 60 * 1000;
+const PRESET_DAYS: Partial<Record<ShareExpiryPreset, number>> = { "1d": 1, "7d": 7, "30d": 30 };
+
+export interface ShareExpiryChoice {
+  preset: ShareExpiryPreset;
+  /** `YYYY-MM-DD`, read only for `custom`. */
+  customDate: string;
+}
+
+export type ShareExpiryResult = { ok: true; expiresAt: number | null } | { ok: false; error: string };
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+/** A local date as the `YYYY-MM-DD` an `<input type="date">` takes. */
+export function toDateInputValue(ms: number): string {
+  const d = new Date(ms);
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+/** The last millisecond of a `YYYY-MM-DD` day in local time, or null for a malformed date. */
+export function endOfLocalDay(date: string): number | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(date);
+  if (!m) return null;
+  const [y, mo, d] = [Number(m[1]), Number(m[2]) - 1, Number(m[3])];
+  const end = new Date(y, mo, d, 23, 59, 59, 999);
+  // `new Date` rolls 2026-02-31 over into March; a date that moved was never a real day.
+  if (end.getFullYear() !== y || end.getMonth() !== mo || end.getDate() !== d) return null;
+  return end.getTime();
+}
+
+/** Earliest day the date input offers: today, whose end is still ahead. */
+export function minCustomDate(now: number): string {
+  return toDateInputValue(now);
+}
+
+/** Latest day whose end is still at most a year ahead. */
+export function maxCustomDate(now: number): string {
+  const limit = now + SHARE_LIMITS.maxExpiryMs;
+  const sameDay = toDateInputValue(limit);
+  const end = endOfLocalDay(sameDay);
+  return end !== null && end <= limit ? sameDay : toDateInputValue(limit - DAY_MS);
+}
+
+/** The `expiresAt` to send for a choice, or why it cannot be sent. */
+export function expiryFromChoice(choice: ShareExpiryChoice, now: number): ShareExpiryResult {
+  if (choice.preset === "never") return { ok: true, expiresAt: null };
+  const days = PRESET_DAYS[choice.preset];
+  if (days) return { ok: true, expiresAt: now + days * DAY_MS };
+  const end = endOfLocalDay(choice.customDate);
+  if (end === null) return { ok: false, error: "Pick a date" };
+  if (end <= now) return { ok: false, error: "Pick a date that is still ahead" };
+  if (end > now + SHARE_LIMITS.maxExpiryMs) return { ok: false, error: "A link can stay open for at most a year" };
+  return { ok: true, expiresAt: end };
+}
+
+/** What the Change expiry control starts at for a link: never, or its own day. */
+export function choiceForExpiry(expiresAt: number | null, now: number): ShareExpiryChoice {
+  if (expiresAt === null) return { preset: "never", customDate: toDateInputValue(now + 7 * DAY_MS) };
+  return { preset: "custom", customDate: toDateInputValue(Math.max(expiresAt, now)) };
+}
+
+/** "Expires in 3 days", "Expires in 5 hours"…, or null for a link that never expires. */
+export function expiresInLabel(expiresAt: number | null, now: number): string | null {
+  if (expiresAt === null) return null;
+  const left = expiresAt - now;
+  if (left <= 0) return "Expired";
+  // Rounded, not floored: a 7-day link read a moment after it was made still says 7 days.
+  if (left < 60 * 60 * 1000) return "Expires in under an hour";
+  const hours = Math.round(left / (60 * 60 * 1000));
+  if (hours < 24) return `Expires in ${hours} hour${hours === 1 ? "" : "s"}`;
+  const days = Math.round(left / DAY_MS);
+  return `Expires in ${days} day${days === 1 ? "" : "s"}`;
+}

package/src/web/lib/design/design-share-link-status.ts

@@ -0,0 +1,66 @@
+import type { DesignShareLink } from "../../../shared/design-share-types";
+import { expiresInLabel } from "./design-share-expiry";
+
+/**
+ * How one share link reads in the owner's list: its status chip, and which actions still
+ * make sense for it. Pure; the server decides the status, this only words it.
+ */
+
+export type ShareChipTone = "ok" | "warn" | "muted" | "danger";
+
+export interface ShareStatusChip {
+  label: string;
+  tone: ShareChipTone;
+}
+
+export function shareStatusChip(link: DesignShareLink, now: number): ShareStatusChip {
+  switch (link.status) {
+    case "revoked": return { label: "Revoked", tone: "muted" };
+    case "expired": return { label: "Expired", tone: "muted" };
+    case "needs-new-code": return { label: "Needs new code", tone: "warn" };
+    case "design-missing": return { label: "Design missing", tone: "danger" };
+    case "signin-off": return { label: "Paused: sign-in is off", tone: "warn" };
+    case "active": {
+      const left = expiresInLabel(link.expiresAt, now);
+      return { label: left && left !== "Expired" ? left : "Active", tone: "ok" };
+    }
+  }
+}
+
+/** The name a link is listed under; an unlabelled one is named after when it was made. */
+export function shareLinkTitle(link: DesignShareLink): string {
+  if (link.label) return link.label;
+  const made = new Date(link.createdAt);
+  return `Link from ${made.toLocaleDateString(undefined, { month: "short", day: "numeric" })}`;
+}
+
+export type ShareLinkActionId =
+  | "expiry" | "rename" | "repin" | "new-code" | "delete-comments" | "revoke" | "delete";
+
+/**
+ * Actions offered for a link, in menu order. A revoked link is final, so nothing that would
+ * reopen it is offered; re-pin and new code need sign-in, as the server refuses them without.
+ */
+export function shareLinkActions(link: DesignShareLink, authEnabled: boolean): ShareLinkActionId[] {
+  const revoked = link.status === "revoked";
+  const actions: ShareLinkActionId[] = [];
+  if (!revoked) actions.push("expiry");
+  actions.push("rename");
+  if (!revoked && authEnabled) actions.push("repin", "new-code");
+  actions.push("delete-comments");
+  if (!revoked) actions.push("revoke");
+  actions.push("delete");
+  return actions;
+}
+
+export const SHARE_ACTION_LABEL: Record<ShareLinkActionId, string> = {
+  expiry: "Change expiry",
+  rename: "Rename",
+  repin: "Update to latest version",
+  "new-code": "New code",
+  "delete-comments": "Delete this link's comments",
+  revoke: "Revoke",
+  delete: "Delete",
+};
+
+export const DESTRUCTIVE_SHARE_ACTIONS: ReadonlySet<ShareLinkActionId> = new Set(["delete-comments", "revoke", "delete"]);

package/src/web/lib/design/design-view-prefs.ts

@@ -16,12 +16,21 @@ const STORAGE_KEY = "ppm-design-view-prefs";
 export const DEFAULT_CHAT_PERCENT = 38;
 export const MIN_CHAT_PERCENT = 20;
 export const MAX_CHAT_PERCENT = 70;
+/**
+ * The chat column's width in a design *window*, in px: a fixed column rather than a share,
+ * because a window is resized far more often than the column is, and the chat should not
+ * swell and shrink with it. It never takes more than half the window either (see the layout).
+ */
+export const DEFAULT_WINDOW_CHAT_WIDTH = 380;
+export const MIN_WINDOW_CHAT_WIDTH = 280;
+export const MAX_WINDOW_CHAT_WIDTH = 440;
 /** Designs whose frame is remembered; the least recently changed are forgotten first. */
 export const MAX_REMEMBERED_FRAMES = 50;
 
 export interface DesignViewPrefs {
   layout: DesignLayoutOverride;
   chatPercent: number;
+  windowChatWidth: number;
   /** `<project>/<slug>` → frame, oldest first. */
   frames: Record<string, DeviceFrameId>;
   /** `<project>/<slug>` → the variant file on screen, oldest first. Checked against the list on use. */
@@ -29,7 +38,7 @@ export interface DesignViewPrefs {
 }
 
 export function defaultDesignViewPrefs(): DesignViewPrefs {
-  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, frames: {}, variants: {} };
+  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, windowChatWidth: DEFAULT_WINDOW_CHAT_WIDTH, frames: {}, variants: {} };
 }
 
 /** Newest-last entries of a stored map, the ones failing `keep` dropped, at most MAX_REMEMBERED_FRAMES. */
@@ -48,6 +57,11 @@ export function clampChatPercent(value: unknown): number {
   return Math.min(MAX_CHAT_PERCENT, Math.max(MIN_CHAT_PERCENT, Math.round(value)));
 }
 
+export function clampWindowChatWidth(value: unknown): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_WINDOW_CHAT_WIDTH;
+  return Math.min(MAX_WINDOW_CHAT_WIDTH, Math.max(MIN_WINDOW_CHAT_WIDTH, Math.round(value)));
+}
+
 export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   if (!raw) return defaultDesignViewPrefs();
   let data: unknown;
@@ -61,6 +75,7 @@ export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   const layout = isDesignLayoutOverride(obj.layout) ? obj.layout : "auto";
   return {
     layout, chatPercent: clampChatPercent(obj.chatPercent),
+    windowChatWidth: clampWindowChatWidth(obj.windowChatWidth),
     frames: rememberedMap(obj.frames, isDeviceFrameId),
     variants: rememberedMap(obj.variants, isStoredVariant),
   };
@@ -93,6 +108,10 @@ export function withChatPercent(prefs: DesignViewPrefs, percent: number): Design
   return { ...prefs, chatPercent: clampChatPercent(percent) };
 }
 
+export function withWindowChatWidth(prefs: DesignViewPrefs, width: number): DesignViewPrefs {
+  return { ...prefs, windowChatWidth: clampWindowChatWidth(width) };
+}
+
 export function withLayout(prefs: DesignViewPrefs, layout: DesignLayoutOverride): DesignViewPrefs {
   return { ...prefs, layout };
 }

package/src/web/lib/design/open-design-tab.ts

@@ -1,4 +1,8 @@
 import { usePanelStore } from "@/stores/panel-store";
+import { windowIdFromPanelId } from "@/stores/panel-utils";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useWindowStore } from "@/components/floating-window/window-store";
+import { cascadeSpawnRect } from "@/components/floating-window/window-geometry";
 import { currentTabMetadata, patchTabMetadata } from "@/lib/patch-tab-metadata";
 import { designTabMetadata } from "./design-tab-metadata";
 
@@ -13,14 +17,24 @@ export interface OpenDesignTabInput {
   panelId?: string;
   /** Just created: skip looking up its latest session, it has none. */
   fresh?: boolean;
+  /**
+   * Stay in `panelId` as a tab even where designs open in windows: the design is taking the
+   * place of a tab there (a chat that turned out to be a design session), and moving it out
+   * would leave that panel empty.
+   */
+  inPlace?: boolean;
 }
 
 /**
  * Open (or focus) a design's tab. There is one tab per design; opening it again focuses
  * the existing tab, and asking for a particular session switches that tab to it.
+ *
+ * On a desktop with Settings → Design → "Open designs in a window" on, a design that was
+ * not open yet goes straight into a floating window of its own (see {@link showInWindow}).
  */
 export function openDesignTab(input: OpenDesignTabInput): string {
-  const { projectName, slug, title, sessionId, providerId, panelId, fresh } = input;
+  const { projectName, slug, title, sessionId, providerId, panelId, fresh, inPlace } = input;
+  const wasOpen = isDesignOpen(projectName, slug);
   const id = usePanelStore.getState().openTab({
     type: "design",
     title: title || slug,
@@ -28,6 +42,7 @@ export function openDesignTab(input: OpenDesignTabInput): string {
     closable: true,
     metadata: designTabMetadata({ projectName, designSlug: slug, sessionId, providerId, fresh }),
   }, panelId);
+  if (id) showInWindow(id, wasOpen || Boolean(inPlace));
   if (!id || !sessionId) return id;
 
   // The tab already existed, so the panel store focused it and ignored the metadata above.
@@ -44,6 +59,44 @@ export function openDesignTab(input: OpenDesignTabInput): string {
   return id;
 }
 
+/** Same match as the panel store's one-tab-per-design rule: slug and project, any panel. */
+function isDesignOpen(projectName: string, slug: string): boolean {
+  return Object.values(usePanelStore.getState().panels).some((p) => p.tabs.some((t) =>
+    t.type === "design" && t.metadata?.designSlug === slug && (t.projectId ?? t.metadata?.projectName) === projectName));
+}
+
+/**
+ * Put a design on screen in its window.
+ *
+ * Already in a window: that window comes forward, out of the dock if it was minimized. Just
+ * opened: it moves from the tab strip into a new window, which is its home — closing the
+ * window closes the design. Open in the grid already (the user docked it there, or the
+ * setting was off when it opened): it stays where the user put it.
+ *
+ * A phone has no windows, and `popOutTab` refuses there; at the window cap it refuses too,
+ * and the design simply stays a tab.
+ */
+function showInWindow(tabId: string, wasOpen: boolean): void {
+  const panelId = usePanelStore.getState().getPanelForTab(tabId)?.id;
+  if (!panelId) return;
+  const windowId = windowIdFromPanelId(panelId);
+  if (windowId) {
+    useWindowStore.getState().focus(windowId);
+    return;
+  }
+  if (wasOpen || !useSettingsStore.getState().designWindows) return;
+  const windows = useWindowStore.getState();
+  const rect = cascadeSpawnRect(
+    Object.values(windows.windows).map((w) => w.rect),
+    windows.bounds,
+    { w: Math.round(windows.bounds.w * DESIGN_WINDOW_SHARE.w), h: Math.round(windows.bounds.h * DESIGN_WINDOW_SHARE.h) },
+  );
+  usePanelStore.getState().popOutTab(tabId, panelId, { closeTabsOnClose: true, rect });
+}
+
+/** A design window's first size, as a share of the work area: a canvas wants room. */
+const DESIGN_WINDOW_SHARE = { w: 0.72, h: 0.84 };
+
 /** The epoch after the one `metadata` carries; the design tab keys its chat on it. */
 export function nextChatEpoch(metadata: Record<string, unknown> | undefined): number {
   const epoch = metadata?.designChatEpoch;

package/src/web/lib/git-repo-scope.ts

@@ -50,6 +50,66 @@ export function resolveRepo(
   return discovery.repos.length === 1 ? discovery.repos[0]! : null;
 }
 
+/**
+ * The repository a file belongs to, whatever the panels have chosen.
+ *
+ * A file-scoped question — blame, above all — has exactly one right answer: the
+ * repository whose working tree holds the file. Going by the user's choice
+ * instead left blame silent in a container folder until the right repository
+ * happened to be picked in Source Control, and with no choice at all it ran git
+ * in the container itself, which is not a repository.
+ *
+ * The innermost candidate wins, though discovery does not descend into a found
+ * repository today, so two never nest. `null` before discovery answers, and for
+ * a file under no repository.
+ */
+export function repoContainingFile(
+  discovery: GitRepoDiscovery | undefined,
+  projectRelative: string,
+): GitRepoCandidate | null {
+  if (!discovery) return null;
+  const path = projectRelative.replace(/^\.?\//, "");
+  let best: GitRepoCandidate | null = null;
+  for (const repo of discovery.repos) {
+    const contains = repo.relative === "." || path === repo.relative || path.startsWith(`${repo.relative}/`);
+    if (!contains) continue;
+    if (!best || best.relative === "." || repo.relative.length > best.relative.length) best = repo;
+  }
+  return best;
+}
+
+/** Where a file-scoped git call goes: `repo` as its `repo=`, `path` as its file. */
+export interface FileGitScope {
+  /** `null` means no `repo=` at all — git runs in the project folder. */
+  repo: GitRepoCandidate | null;
+  /** The file, relative to wherever git runs. */
+  path: string;
+}
+
+/**
+ * The scope for one file's git call — blame, the file diff, a blob.
+ *
+ * The file's own repository when discovery found it. When discovery found no
+ * repository anywhere, the call goes out unscoped as it always did: a project
+ * folder *inside* a repository (`<repo>/packages/web`) has no `.git` of its own
+ * and none below it, yet git run there finds the enclosing repository and
+ * answers. Refusing that case would take blame away from a layout that had it.
+ *
+ * `undefined` while discovery has not answered — not yet known, so a caller
+ * waits rather than guessing. `null` for a file under none of the repositories
+ * discovery did find: there is nothing to ask git.
+ */
+export function fileGitScope(
+  discovery: GitRepoDiscovery | undefined,
+  projectRelative: string,
+): FileGitScope | null | undefined {
+  if (!discovery) return undefined;
+  const repo = repoContainingFile(discovery, projectRelative);
+  if (repo) return { repo, path: repoRelativePath(projectRelative, repo) ?? "" };
+  if (hasNoRepo(discovery)) return { repo: null, path: repoRelativePath(projectRelative, null) ?? "" };
+  return null;
+}
+
 /** True when there is a choice to make and it has not been made. */
 export function needsPick(
   discovery: GitRepoDiscovery | undefined,

package/src/web/lib/icons.generated.tsx

@@ -209,6 +209,7 @@ const D: Record<string, readonly string[]> = {
   "wifi-off": ["M2.854 2.146a.5.5 0 1 0-.708.708l3.031 3.03a9.6 9.6 0 0 0-1.937 1.5a10 10 0 0 0-1.121 1.36a.5.5 0 0 0 .821.57A9 9 0 0 1 3.947 8.09a8.6 8.6 0 0 1 1.964-1.473l1.436 1.436a6.4 6.4 0 0 0-1.871 1.303a6.4 6.4 0 0 0-1.193 1.645a.5.5 0 1 0 .892.452a5.4 5.4 0 0 1 1.008-1.39A5.4 5.4 0 0 1 8.11 8.818l1.855 1.856a4.02 4.02 0 0 0-2.781 1.18a4 4 0 0 0-.84 1.244a.5.5 0 0 0 .916.4c.155-.355.368-.674.63-.937a3.03 3.03 0 0 1 3.304-.66l1.646 1.647a.5.5 0 0 0 .2.2l4.105 4.106a.5.5 0 0 0 .708-.708zm6.75 5.336L10.62 8.5a5.43 5.43 0 0 1 3.27 1.565a5.6 5.6 0 0 1 1.01 1.404a.5.5 0 0 0 .891-.455a6.6 6.6 0 0 0-1.194-1.656a6.44 6.44 0 0 0-4.994-1.875M7.135 5.014l.81.81a8.61 8.61 0 0 1 9.197 3.493a.5.5 0 0 0 .823-.568a9.61 9.61 0 0 0-10.83-3.734m3.828 8.773a1.298 1.298 0 1 1-1.836 1.836a1.298 1.298 0 0 1 1.836-1.836"],
   "window": ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3zM4 6a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2zm0 1h12v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"],
   "window-console": ["M5.646 9.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L7.293 11.5L5.646 9.854a.5.5 0 0 1 0-.708M14.5 13h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1M2.996 5.5a2.5 2.5 0 0 1 2.5-2.5h9a2.5 2.5 0 0 1 2.5 2.5V6H17v1h-.003v7.5a2.5 2.5 0 0 1-2.5 2.5h-9a2.5 2.5 0 0 1-2.5-2.5zm13 .5v-.5a1.5 1.5 0 0 0-1.5-1.5h-9a1.5 1.5 0 0 0-1.5 1.5V6zm-12 1v7.5a1.5 1.5 0 0 0 1.5 1.5h9a1.5 1.5 0 0 0 1.5-1.5V7z"],
+  "wrench": ["M9 6.5a4.5 4.5 0 0 1 6.352-4.102a.5.5 0 0 1 .148.809L13.207 5.5L14.5 6.793L16.793 4.5a.5.5 0 0 1 .809.147a4.5 4.5 0 0 1-5.207 6.216L6.03 17.311a2.357 2.357 0 0 1-3.374-3.293L9.082 7.36A4.5 4.5 0 0 1 9 6.5M13.5 3a3.5 3.5 0 0 0-3.387 4.386a.5.5 0 0 1-.125.473l-6.612 6.854a1.357 1.357 0 0 0 1.942 1.896l6.574-6.66a.5.5 0 0 1 .512-.124a3.5 3.5 0 0 0 4.521-4.044l-2.072 2.073a.5.5 0 0 1-.707 0l-2-2a.5.5 0 0 1 0-.708l2.073-2.072a3.5 3.5 0 0 0-.72-.074"],
   "zoom-in": ["M8.5 5.5A.5.5 0 0 1 9 6v2h2a.5.5 0 0 1 0 1H9v2a.5.5 0 0 1-1 0V9H6a.5.5 0 0 1 0-1h2V6a.5.5 0 0 1 .5-.5m0-3.5a6.5 6.5 0 0 1 4.937 10.73l3.417 3.416a.5.5 0 0 1-.638.765l-.07-.058l-3.417-3.417A6.5 6.5 0 1 1 8.5 2m0 1a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"],
   "zoom-out": ["M11 8a.5.5 0 0 1 0 1H6a.5.5 0 0 1 0-1zM8.5 2a6.5 6.5 0 0 1 4.937 10.73l3.417 3.416a.5.5 0 0 1-.638.765l-.07-.058l-3.417-3.417A6.5 6.5 0 1 1 8.5 2m0 1a5.5 5.5 0 1 0 0 11a5.5 5.5 0 0 0 0-11"],
 };
@@ -224,7 +225,7 @@ export function glyphPaths(name: string): readonly string[] | undefined {
 }
 
 /** Which names this module draws with Fluent, for the coverage test. */
-export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","Archive","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowLeftRight","ArrowNext","ArrowPrevious","ArrowRight","ArrowRightFromLine","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","ArrowUpRight","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsLeft","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","CloudUpload","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileArchive","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Form","Gauge","GitBranch","GitMerge","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Hash","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","IndentIncrease","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","MessageSquarePlus","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","MousePointerClick","Move","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Presentation","Printer","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","SlidersHorizontal","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareMinus","SquarePlus","SquareTerminal","Sun","Table","TableSimple","Tablet","Tag","Tags","Terminal","TerminalSquare","TextSelect","Timer","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
+export const FLUENT_NAMES: readonly string[] = ["Activity","AlertCircle","AlertTriangle","AppWindow","Archive","ArrowDown","ArrowDownAZ","ArrowDownToLine","ArrowDownUp","ArrowLeft","ArrowLeftRight","ArrowNext","ArrowPrevious","ArrowRight","ArrowRightFromLine","ArrowUp","ArrowUpCircle","ArrowUpDown","ArrowUpFromLine","ArrowUpRight","Bell","BellOff","BellRing","Bot","BotMessageSquare","Brain","Bug","CalendarClock","CalendarX2","Check","CheckCircle","CheckCircle2","CheckIcon","ChevronDown","ChevronDownIcon","ChevronLeft","ChevronRight","ChevronRightIcon","ChevronUp","ChevronUpIcon","ChevronsDown","ChevronsDownUp","ChevronsLeft","ChevronsRight","ChevronsUpDown","Circle","CircleCheckIcon","CircleHelp","CircleIcon","CircleX","Clipboard","ClipboardCheck","ClipboardList","ClipboardPaste","Clock","Cloud","CloudOff","CloudUpload","Code","Coffee","Columns","Columns2","Columns3","Copy","Cpu","Crosshair","Database","DatabaseZap","Download","ExternalLink","Eye","EyeOff","File","FileArchive","FileCode","FilePen","FilePlus","FilePlus2","FileSearch","FileText","FileType","FileWarning","Filter","FlaskConical","FlipHorizontal","FlipHorizontal2","FlipVertical","FlipVertical2","Folder","FolderOpen","FolderPlus","FolderSearch","FolderSymlink","FolderTree","Form","Gauge","GitBranch","GitMerge","Globe","Grid2x2","GripHorizontal","GripVertical","Hand","HardDrive","Hash","Heart","HelpCircle","History","Home","Image","ImageOff","ImagePlus","IndentIncrease","Info","InfoIcon","Key","KeyRound","Keyboard","Layers","LayoutGrid","Lightbulb","Link","Link2","Link2Off","List","ListChecks","ListFilter","ListOrdered","ListTodo","Loader2","Loader2Icon","Lock","LogIn","LogOut","Maximize","Maximize2","Menu","MessageCircle","MessageSquare","MessageSquarePlus","Mic","MicOff","Minimize","Minimize2","Minus","Monitor","MonitorSmartphone","MonitorX","Moon","MoreHorizontal","MoreVertical","MousePointer2","MousePointerClick","Move","Music","OctagonXIcon","Palette","PanelBottom","PanelLeft","PanelLeftOpen","PanelRight","Paperclip","Pause","Pencil","PencilLine","PictureInPicture2","Pin","PinOff","Play","Plug","Plus","Power","Presentation","Printer","Puzzle","QrCode","Redo2","RefreshCw","RotateCcw","RotateCw","Save","Scissors","ScrollText","Search","Send","Settings","Settings2","Share2","ShieldAlert","ShieldCheck","ShieldOff","SlidersHorizontal","Smartphone","Sparkles","Square","SquareDashedMousePointer","SquareMinus","SquarePlus","SquareTerminal","Sun","Table","TableSimple","Tablet","Tag","Tags","Terminal","TerminalSquare","TextSelect","Timer","Trash2","TriangleAlert","TriangleAlertIcon","Undo2","Unlink","Upload","Usb","UserPlus","UserRound","Users","Volume1","Volume2","VolumeX","Wifi","WifiOff","WrapText","Wrench","X","XCircle","XIcon","XSquare","Zap","ZapOff","ZoomIn","ZoomOut"];
 
 /** Which names deliberately stay on lucide, and are asserted to be a short list. */
 export const LUCIDE_NAMES: readonly string[] = ["CaseSensitive","FileDiff","FileJson","FolderGit2","GitCommitHorizontal","Github","Hexagon","Network","PowerOff","Regex","ReplaceAll","Scan","ServerOff","Slash","WholeWord"];
@@ -474,6 +475,7 @@ export const VolumeX = fluentIcon("VolumeX", D["speaker-off"]!);
 export const Wifi = fluentIcon("Wifi", D["wifi-1"]!);
 export const WifiOff = fluentIcon("WifiOff", D["wifi-off"]!);
 export const WrapText = fluentIcon("WrapText", D["text-wrap"]!);
+export const Wrench = fluentIcon("Wrench", D["wrench"]!);
 export const X = fluentIcon("X", D["dismiss"]!);
 export const XCircle = fluentIcon("XCircle", D["dismiss-circle"]!);
 export const XIcon = fluentIcon("XIcon", D["dismiss"]!);

package/src/web/lib/model-display-name.ts

@@ -0,0 +1,16 @@
+/**
+ * A readable name for a model id the provider's model list did not label.
+ *
+ * The chip shows the list's own label when it has one; this is the fallback for a model the
+ * list does not carry (a pinned default, an older session, a list still loading), which
+ * otherwise rendered its raw id — `claude-opus-5-5`, the widest thing in a narrow composer.
+ * Only Claude ids are rewritten: their shape is known (`claude-<family>-<major>[-<minor>]`,
+ * optionally a `-YYYYMMDD` snapshot). Anything else is shown as given.
+ */
+export function modelDisplayName(id: string): string {
+  const match = /^claude-([a-z]+)((?:-\d{1,2})+)(?:-\d{8})?$/i.exec(id);
+  if (!match) return id;
+  const family = match[1]!;
+  const version = match[2]!.slice(1).split("-").join(".");
+  return `${family[0]!.toUpperCase()}${family.slice(1)} ${version}`;
+}