@saadnvd1/agent-os 0.3.715 → 0.3.723

package/components/Export/ExportSheet.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useSnapshot } from "valtio";
+import { AlertTriangle, Info } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useExportEstimate, type ExportEstimate } from "@/data/exports";
+import { exportUi, exportUiActions } from "@/stores/exportUi";
+import {
+  COMPACT_RULES,
+  EXPORT_FORMATS,
+  formatBytes,
+  redactionStatus,
+  tokenLabel,
+  type ExportFormat,
+  type ExportMode,
+  type ExportRequest,
+} from "@/lib/export/view";
+import { cn } from "@/lib/utils";
+import { ExportActions } from "./ExportActions";
+import { RangePicker } from "./RangePicker";
+import { Seg } from "./Seg";
+import { TurnSelectBar } from "./TurnSelectBar";
+
+// Opened from a menu or a message: what to export (format, detail, turns,
+// masking), what it comes to, and where it goes (copy, download, share).
+export function ExportSheet() {
+  const ui = useSnapshot(exportUi);
+  return (
+    <>
+      <Dialog
+        open={ui.open && !!ui.sessionId}
+        onOpenChange={(open) => !open && exportUiActions.close()}
+      >
+        {ui.sessionId && (
+          <SheetBody
+            key={ui.sessionId}
+            sessionId={ui.sessionId}
+            title={ui.title}
+          />
+        )}
+      </Dialog>
+      {ui.selecting && <TurnSelectBar />}
+    </>
+  );
+}
+
+function SheetBody({ sessionId, title }: { sessionId: string; title: string }) {
+  const { req, fromItemId } = useSnapshot(exportUi);
+  const [est, setEst] = useState<ExportEstimate | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const estimate = useExportEstimate(sessionId);
+  const seq = useRef(0);
+  const wire = JSON.stringify(req);
+
+  useEffect(() => {
+    const mine = ++seq.current;
+    const timer = setTimeout(async () => {
+      try {
+        const e = await estimate.mutateAsync(JSON.parse(wire) as ExportRequest);
+        if (mine !== seq.current) return;
+        setEst(e);
+        setError(null);
+        exportUi.turns = e.turns;
+        const from = exportUi.fromItemId;
+        if (from) {
+          exportUi.fromItemId = null;
+          const turn = e.turns.find((t) => t.id === from);
+          if (turn)
+            exportUiActions.setRequest({
+              range: { from: turn.n, to: e.selected.of },
+            });
+        }
+      } catch (err) {
+        if (mine === seq.current) setError((err as Error).message);
+      }
+    }, 250);
+    return () => clearTimeout(timer);
+    // The mutation object changes every render; the request is the input.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wire, fromItemId]);
+
+  const name = est?.title ?? title;
+  const set = exportUiActions.setRequest;
+  const size = est?.estimate[req.mode];
+  const stale = estimate.isPending;
+  const token = (m: ExportMode) =>
+    est ? tokenLabel(est.estimate[m].tokens).replace("about ", "~") : " ";
+
+  return (
+    <DialogContent className="flex h-[100dvh] w-screen max-w-none flex-col gap-3 rounded-none p-4 sm:h-auto sm:max-h-[90vh] sm:max-w-[560px] sm:rounded-lg">
+      <div>
+        <DialogTitle>Export for AI</DialogTitle>
+        <DialogDescription className="truncate">{name}</DialogDescription>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto">
+        <Section label="Format">
+          <Seg<ExportFormat>
+            label="Format"
+            value={req.format}
+            options={EXPORT_FORMATS.map((f) => ({ id: f.id, label: f.label }))}
+            onChange={(format) => set({ format })}
+          />
+          <p className="text-muted-foreground text-xs">
+            {EXPORT_FORMATS.find((f) => f.id === req.format)?.hint}
+          </p>
+        </Section>
+
+        <Section label="Detail">
+          <Seg<ExportMode>
+            label="Detail"
+            value={req.mode}
+            options={[
+              { id: "compact", label: "Compact", sub: token("compact") },
+              { id: "full", label: "Full", sub: token("full") },
+            ]}
+            onChange={(mode) => set({ mode })}
+          />
+          <details className="text-muted-foreground text-xs">
+            <summary className="flex min-h-8 cursor-pointer items-center">
+              What Compact drops
+            </summary>
+            <ul className="list-disc space-y-0.5 pl-5">
+              {COMPACT_RULES.map((r) => (
+                <li key={r}>{r}</li>
+              ))}
+            </ul>
+          </details>
+        </Section>
+
+        <Section label="Range">
+          <RangePicker
+            range={req.range}
+            est={est}
+            onChange={(range) => set({ range })}
+            onSelectInChat={() => exportUiActions.startSelect()}
+          />
+        </Section>
+
+        <Section label="Masking">
+          <label className="flex min-h-11 items-center justify-between gap-3 text-sm">
+            <span>Mask paths, machine names and emails</span>
+            <Switch
+              checked={req.redact === "all"}
+              onCheckedChange={(on) => set({ redact: on ? "all" : "secrets" })}
+            />
+          </label>
+          <p className="text-muted-foreground text-xs">
+            Credentials are always masked.{" "}
+            {est ? redactionStatus(est.hits) + "." : ""}
+          </p>
+        </Section>
+
+        <div
+          className={cn(
+            "space-y-2 rounded-lg border p-3 text-sm",
+            stale && "opacity-60"
+          )}
+          aria-live="polite"
+        >
+          <p className="font-medium">
+            {size
+              ? `${formatBytes(size.bytes)} · ${tokenLabel(size.tokens)}`
+              : (error ?? "Working out the size…")}
+          </p>
+          {est?.warnings.map((w) => (
+            <p
+              key={w.code}
+              className={cn(
+                "flex gap-2 text-xs",
+                w.level === "danger" && "text-destructive",
+                w.level === "warn" && "text-amber-600 dark:text-amber-400",
+                w.level === "info" && "text-muted-foreground"
+              )}
+            >
+              {w.level === "info" ? (
+                <Info className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              ) : (
+                <AlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0" />
+              )}
+              <span>{w.text}</span>
+            </p>
+          ))}
+        </div>
+      </div>
+
+      <ExportActions
+        sessionId={sessionId}
+        title={name}
+        req={req as ExportRequest}
+        est={est}
+      />
+    </DialogContent>
+  );
+}
+
+function Section({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="space-y-2">
+      <h3 className="text-muted-foreground text-xs font-medium">{label}</h3>
+      {children}
+    </section>
+  );
+}

package/components/Export/RangePicker.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import { MousePointerClick } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { ExportEstimate } from "@/data/exports";
+import type { ExportRange } from "@/lib/export/view";
+
+type Chip = "all" | "last1" | "last5" | "compaction" | "custom";
+
+const CHIPS: { id: Chip; label: string }[] = [
+  { id: "all", label: "Whole session" },
+  { id: "last1", label: "Last turn" },
+  { id: "last5", label: "Last 5" },
+  { id: "compaction", label: "Since compaction" },
+  { id: "custom", label: "Custom" },
+];
+
+const chipOf = (r: ExportRange | undefined): Chip =>
+  !r
+    ? "all"
+    : "sinceCompaction" in r
+      ? "compaction"
+      : "last" in r
+        ? r.last === 1
+          ? "last1"
+          : r.last === 5
+            ? "last5"
+            : "custom"
+        : "custom";
+
+const when = (at: string) => at.slice(5, 16).replace("T", " ");
+const clock = (at: string) => at.slice(11, 16);
+
+const SELECT =
+  "bg-background border-input min-h-11 w-full min-w-0 rounded-md border px-2 text-sm";
+
+export function RangePicker({
+  range,
+  est,
+  onChange,
+  onSelectInChat,
+}: {
+  range: ExportRange | undefined;
+  est: ExportEstimate | null;
+  onChange: (r: ExportRange | undefined) => void;
+  onSelectInChat: () => void;
+}) {
+  const chip = chipOf(range);
+  const turns = (est?.turns ?? []).filter((t) => t.n > 0);
+  const sel = est?.selected;
+  const pick = (id: Chip) => {
+    if (id === "all") onChange(undefined);
+    else if (id === "last1") onChange({ last: 1 });
+    else if (id === "last5") onChange({ last: 5 });
+    else if (id === "compaction") onChange({ sinceCompaction: true });
+    else
+      onChange({
+        from: sel?.from ?? 1,
+        to: sel?.to ?? Math.max(1, turns.length),
+      });
+  };
+  const custom = range && "from" in range ? range : null;
+  const options = turns.map((t) => (
+    <option key={t.n} value={t.n}>
+      {`#${t.n} · ${when(t.at)} · ${t.excerpt.slice(0, 40)}`}
+    </option>
+  ));
+
+  return (
+    <div className="space-y-2">
+      <div className="flex flex-wrap gap-1.5" role="group" aria-label="Range">
+        {CHIPS.map((c) => (
+          <button
+            key={c.id}
+            type="button"
+            aria-pressed={chip === c.id}
+            onClick={() => pick(c.id)}
+            className={cn(
+              "min-h-11 rounded-full border px-3.5 text-sm transition-colors",
+              chip === c.id
+                ? "border-primary bg-primary/10 text-foreground"
+                : "text-muted-foreground hover:bg-foreground/[0.04]"
+            )}
+          >
+            {c.label}
+          </button>
+        ))}
+      </div>
+
+      {custom && (
+        <div className="grid grid-cols-[minmax(0,1fr)_minmax(0,1fr)] gap-2">
+          <label className="text-muted-foreground space-y-1 text-xs">
+            From
+            <select
+              className={SELECT}
+              value={custom.from}
+              onChange={(e) =>
+                onChange({
+                  from: Number(e.target.value),
+                  to: Math.max(custom.to, Number(e.target.value)),
+                })
+              }
+            >
+              {options}
+            </select>
+          </label>
+          <label className="text-muted-foreground space-y-1 text-xs">
+            To
+            <select
+              className={SELECT}
+              value={custom.to}
+              onChange={(e) =>
+                onChange({
+                  from: Math.min(custom.from, Number(e.target.value)),
+                  to: Number(e.target.value),
+                })
+              }
+            >
+              {options}
+            </select>
+          </label>
+        </div>
+      )}
+
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-muted-foreground min-w-0 text-xs">
+          {sel && sel.startedAt && sel.endedAt
+            ? `Turns ${sel.from}–${sel.to} · ${sel.turns} ${sel.turns === 1 ? "turn" : "turns"} · ${clock(sel.startedAt)}–${clock(sel.endedAt)}`
+            : "Counting turns…"}
+        </p>
+        <Button
+          variant="outline"
+          size="sm"
+          className="min-h-11 shrink-0"
+          onClick={onSelectInChat}
+        >
+          <MousePointerClick className="h-4 w-4" />
+          Select in chat
+        </Button>
+      </div>
+    </div>
+  );
+}

package/components/Export/Seg.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+// A row of exclusive choices, each at least 44px tall.
+export function Seg<T extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: T;
+  options: { id: T; label: string; sub?: string }[];
+  onChange: (id: T) => void;
+}) {
+  return (
+    <div className="flex gap-1.5" role="group" aria-label={label}>
+      {options.map((o) => (
+        <button
+          key={o.id}
+          type="button"
+          aria-pressed={value === o.id}
+          onClick={() => onChange(o.id)}
+          className={cn(
+            "flex min-h-11 min-w-0 flex-1 flex-col items-center justify-center rounded-lg border px-2 text-sm transition-colors",
+            value === o.id
+              ? "border-primary bg-primary/10 text-foreground"
+              : "text-muted-foreground hover:bg-foreground/[0.04]"
+          )}
+        >
+          <span className="font-medium">{o.label}</span>
+          {o.sub && <span className="text-[11px] opacity-80">{o.sub}</span>}
+        </button>
+      ))}
+    </div>
+  );
+}

package/components/Export/TurnSelectBar.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import { Button } from "@/components/ui/button";
+import { exportUi, exportUiActions, pickedRange } from "@/stores/exportUi";
+import { tokenLabel } from "@/lib/export/view";
+
+// The bar under the chat while turns are being picked for an export.
+export function TurnSelectBar() {
+  const { pick, turns } = useSnapshot(exportUi);
+  const range = pickedRange(pick);
+  const picked = range
+    ? turns.filter((t) => t.n >= range.from && t.n <= range.to)
+    : [];
+  const tokens = picked.reduce((sum, t) => sum + t.tokens, 0);
+  const count = range ? range.to - range.from + 1 : 0;
+  const text = !range
+    ? "Tap the first turn to export"
+    : pick.to === null
+      ? `Turn ${range.from} · tap the last turn, or export just this one`
+      : `Turns ${range.from}–${range.to} · ${count} ${count === 1 ? "turn" : "turns"} · ${tokenLabel(tokens)}`;
+  return (
+    <div
+      role="region"
+      aria-label="Select turns to export"
+      className="bg-background fixed inset-x-0 bottom-0 z-40 flex flex-wrap items-center gap-2 border-t p-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]"
+    >
+      <p className="min-w-[140px] flex-1 text-sm">{text}</p>
+      <Button
+        variant="outline"
+        className="min-h-11"
+        onClick={exportUiActions.cancelSelect}
+      >
+        Cancel
+      </Button>
+      <Button
+        className="min-h-11"
+        disabled={!range}
+        onClick={exportUiActions.finishSelect}
+      >
+        Export…
+      </Button>
+    </div>
+  );
+}

package/components/Models/AgentRoleCard.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { AlertTriangle } from "lucide-react";
+import type { AgentRoleView } from "@/lib/models/agent-roles-view";
+import { cn } from "@/lib/utils";
+import { RoleModelSelect } from "./RoleModelSelect";
+
+const SOURCE: Record<string, string> = {
+  task: "Set for the task",
+  project: "From this project",
+  workspace: "From the workspace",
+  settings: "Set in Settings",
+  env: "From the server's environment",
+  inherited: "Same as Gate review until set here",
+  default: "Default",
+};
+
+const initial = (label: string) => label.slice(0, 1);
+
+// One role: what it does, the model it runs on, where that came from, and
+// whether the model's server answers. A role whose local model is down says so.
+export function AgentRoleCard({
+  role,
+  scope,
+  pending,
+  onChange,
+  onFallback,
+}: {
+  role: AgentRoleView;
+  scope: "settings" | "workspace" | "project";
+  pending: boolean;
+  onChange: (ref: string | null) => void;
+  onFallback: (ref: string | null) => void;
+}) {
+  const down = role.choice?.availability.state === "down";
+  const label = `Default (${role.default.split("/").slice(1).join("/")})`;
+  const inheritLabel =
+    scope === "settings"
+      ? role.modelRole === "advise"
+        ? "Same as Gate review"
+        : label
+      : "Inherit";
+  return (
+    <li
+      className={cn(
+        "bg-muted/40 space-y-2 rounded-xl px-3 py-3",
+        down && "ring-destructive/50 ring-1"
+      )}
+    >
+      <label htmlFor={`agent-role-${role.id}`} className="flex gap-2.5">
+        <span className="bg-accent text-primary grid h-8 w-8 shrink-0 place-items-center rounded-lg text-sm font-semibold">
+          {initial(role.label)}
+        </span>
+        <span className="min-w-0">
+          <span className="block text-sm font-medium">{role.label}</span>
+          <span className="text-muted-foreground block text-xs">
+            {role.purpose}
+          </span>
+        </span>
+      </label>
+      <RoleModelSelect
+        id={`agent-role-${role.id}`}
+        value={role.value}
+        inheritLabel={
+          role.value === null && role.binding
+            ? `${inheritLabel} · ${role.binding.ref.split("/").slice(1).join("/")}`
+            : inheritLabel
+        }
+        disabled={pending}
+        onChange={onChange}
+      />
+      <p className="text-muted-foreground text-xs">
+        {role.error
+          ? role.error
+          : role.binding
+            ? `${SOURCE[role.binding.source] ?? role.binding.source}${role.choice?.endpoint ? ` · ${role.choice.endpoint}` : ""}`
+            : ""}
+      </p>
+      {down && (
+        <div
+          role="alert"
+          className="bg-destructive/10 text-foreground ring-destructive/35 flex gap-2 rounded-lg p-2.5 text-xs ring-1"
+        >
+          <AlertTriangle className="text-destructive mt-0.5 h-3.5 w-3.5 shrink-0" />
+          <span>
+            <b className="font-medium">
+              This model&apos;s server isn&apos;t answering.
+            </b>{" "}
+            {role.choice?.availability.error
+              ? `${role.choice.availability.error}. `
+              : ""}
+            New {role.label} sessions can&apos;t start until it is back
+            {role.fallback ? ", or you start on the fallback" : ""}.
+          </span>
+        </div>
+      )}
+      {scope === "settings" && (
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-muted-foreground text-xs">Fallback</span>
+          <div className="min-w-44 flex-1">
+            <RoleModelSelect
+              id={`agent-role-fallback-${role.id}`}
+              value={role.fallback}
+              inheritLabel="None (don't fall back)"
+              claudeOnly
+              disabled={pending}
+              onChange={onFallback}
+            />
+          </div>
+        </div>
+      )}
+    </li>
+  );
+}

package/components/Models/AgentRolesSection.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { useState } from "react";
+import { useAgentRolesQuery, useSaveAgentRoles } from "@/data/models";
+import { useProjectsQuery } from "@/data/projects/queries";
+import { useWorkspacesQuery } from "@/data/workspaces";
+import type { RoleMap } from "@/lib/models/config";
+import type { RoleScope } from "@/lib/models/agent-roles-view";
+import { cn } from "@/lib/utils";
+import { AgentRoleCard } from "./AgentRoleCard";
+
+const SCOPES: { id: RoleScope; label: string }[] = [
+  { id: "settings", label: "Default" },
+  { id: "workspace", label: "Workspace" },
+  { id: "project", label: "Project" },
+];
+
+// Settings > Agent roles: the model each of Developer, Analyst, Reviewer and
+// Supervisor runs on, for everything or for one workspace or project.
+export function AgentRolesSection() {
+  const [scope, setScope] = useState<RoleScope>("settings");
+  const [target, setTarget] = useState<string | null>(null);
+  const workspaces = useWorkspacesQuery();
+  const projects = useProjectsQuery();
+  const options =
+    scope === "workspace"
+      ? (workspaces.data ?? []).map((w) => ({ id: w.id, name: w.name }))
+      : scope === "project"
+        ? (projects.data ?? [])
+            .filter((p) => !p.is_uncategorized)
+            .map((p) => ({ id: p.id, name: p.name }))
+        : [];
+  const id = scope === "settings" ? null : (target ?? options[0]?.id ?? null);
+  const { data, isPending, isError, error } = useAgentRolesQuery(scope, id);
+  const save = useSaveAgentRoles(scope, id);
+
+  const saved = (key: "value" | "fallback"): RoleMap =>
+    Object.fromEntries(
+      (data?.roles ?? [])
+        .filter((r) => r[key])
+        .map((r) => [r.modelRole, r[key] as string])
+    );
+  const setRole = (modelRole: string, ref: string | null) => {
+    const roles: RoleMap = { ...saved("value") };
+    if (ref) roles[modelRole as keyof RoleMap] = ref;
+    else delete roles[modelRole as keyof RoleMap];
+    save.mutate({ roles });
+  };
+  const setFallback = (modelRole: string, ref: string | null) => {
+    const fallbacks: RoleMap = { ...saved("fallback") };
+    if (ref) fallbacks[modelRole as keyof RoleMap] = ref;
+    else delete fallbacks[modelRole as keyof RoleMap];
+    save.mutate({ roles: saved("value"), fallbacks });
+  };
+
+  return (
+    <div className="space-y-4">
+      <div
+        role="tablist"
+        className="bg-muted inline-flex max-w-full gap-0.5 overflow-x-auto rounded-xl p-0.5"
+      >
+        {SCOPES.map((s) => (
+          <button
+            key={s.id}
+            role="tab"
+            aria-selected={scope === s.id}
+            type="button"
+            onClick={() => {
+              setScope(s.id);
+              setTarget(null);
+            }}
+            className={cn(
+              "h-11 rounded-lg px-3 text-sm whitespace-nowrap md:h-8",
+              scope === s.id
+                ? "bg-background text-foreground ring-border ring-1"
+                : "text-muted-foreground hover:text-foreground"
+            )}
+          >
+            {s.label}
+          </button>
+        ))}
+      </div>
+      {scope !== "settings" && (
+        <select
+          aria-label={scope === "workspace" ? "Workspace" : "Project"}
+          value={id ?? ""}
+          onChange={(e) => setTarget(e.target.value)}
+          className="border-input bg-background h-11 w-full rounded-md border px-3 text-sm md:h-9"
+        >
+          {options.length === 0 && <option value="">None yet</option>}
+          {options.map((o) => (
+            <option key={o.id} value={o.id}>
+              {o.name}
+            </option>
+          ))}
+        </select>
+      )}
+      <p className="text-muted-foreground text-xs">
+        The model each role runs on. A workspace or project can override these,
+        and a session can when it starts. A Pi model (a server you run) runs
+        sessions started in the role; tasks and the merge gate stay on Claude
+        Code models. Planning, gate review, scope check, helpers and watchers
+        are in Models.
+      </p>
+      {scope !== "settings" && !id ? (
+        <p className="text-muted-foreground text-sm">
+          There is no {scope} to set roles for yet.
+        </p>
+      ) : isPending ? (
+        <div className="bg-muted/40 h-64 animate-pulse rounded-lg" />
+      ) : isError ? (
+        <p className="text-destructive text-sm">{error.message}</p>
+      ) : data ? (
+        <ul className="space-y-2.5">
+          {data.roles.map((r) => (
+            <AgentRoleCard
+              key={r.id}
+              role={r}
+              scope={scope}
+              pending={save.isPending}
+              onChange={(ref) => setRole(r.modelRole, ref)}
+              onFallback={(ref) => setFallback(r.modelRole, ref)}
+            />
+          ))}
+        </ul>
+      ) : null}
+      {save.isError && (
+        <p className="text-destructive text-xs">{save.error.message}</p>
+      )}
+    </div>
+  );
+}