@saadnvd1/agent-os 0.3.715 → 0.3.728

package/components/Export/ExportActions.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Check, Copy, Download, Loader2, Share2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { writeClipboard } from "@/hooks/useCopyToClipboard";
+import { fetchExport, type ExportEstimate } from "@/data/exports";
+import type { ExportRequest } from "@/lib/export/view";
+
+type Busy = "copy" | "download" | "share" | null;
+
+function save(blob: Blob, name: string) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = name;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+// Copy for agent, Download and (where the browser can) Share. Never blocked
+// by a sensitive-data warning, only by the size limit.
+export function ExportActions({
+  sessionId,
+  title,
+  req,
+  est,
+}: {
+  sessionId: string;
+  title: string;
+  req: ExportRequest;
+  est: ExportEstimate | null;
+}) {
+  const [busy, setBusy] = useState<Busy>(null);
+  const [copied, setCopied] = useState(false);
+  // Only rendered on the client (the sheet loads with ssr off).
+  const [canShare] = useState(() => {
+    try {
+      const probe = new File([""], "x.md", { type: "text/markdown" });
+      return !!navigator.canShare?.({ files: [probe] });
+    } catch {
+      return false;
+    }
+  });
+
+  const wire = JSON.parse(JSON.stringify(req)) as ExportRequest;
+  const file = () => fetchExport(sessionId, wire, title, est?.selected ?? null);
+  const disabled = !est || est.tooBig || busy !== null;
+
+  const run =
+    (kind: Exclude<Busy, null>, work: () => Promise<void>) => async () => {
+      setBusy(kind);
+      try {
+        await work();
+      } catch (err) {
+        if ((err as Error).name !== "AbortError")
+          toast.error((err as Error).message || "Export failed");
+      } finally {
+        setBusy(null);
+      }
+    };
+
+  const copy = run("copy", async () => {
+    const pending = file();
+    // Safari only allows a copy started inside the tap: hand it the promise.
+    if (typeof ClipboardItem !== "undefined" && navigator.clipboard?.write) {
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          "text/plain": pending.then(
+            (f) => new Blob([f.blob], { type: "text/plain" })
+          ),
+        }),
+      ]);
+    } else {
+      await writeClipboard(await (await pending).blob.text());
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+    toast.success("Copied. Paste it into your AI chat.");
+  });
+
+  const download = run("download", async () => {
+    const f = await file();
+    save(f.blob, f.name);
+  });
+
+  const share = run("share", async () => {
+    const f = await file();
+    const shared = new File([f.blob], f.name, { type: f.blob.type });
+    if (!navigator.canShare?.({ files: [shared] })) return save(f.blob, f.name);
+    await navigator.share({ files: [shared], title });
+  });
+
+  const Spin = <Loader2 className="h-4 w-4 animate-spin" />;
+  return (
+    <div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
+      <Button
+        className="min-h-11 sm:order-last"
+        disabled={disabled}
+        onClick={copy}
+      >
+        {busy === "copy" ? (
+          Spin
+        ) : copied ? (
+          <Check className="h-4 w-4" />
+        ) : (
+          <Copy className="h-4 w-4" />
+        )}
+        {req.format === "md" ? "Copy for agent" : "Copy"}
+      </Button>
+      <div className="flex gap-2">
+        <Button
+          variant="outline"
+          className="min-h-11 flex-1 sm:flex-none"
+          disabled={disabled}
+          onClick={download}
+        >
+          {busy === "download" ? Spin : <Download className="h-4 w-4" />}
+          Download
+        </Button>
+        {canShare && (
+          <Button
+            variant="outline"
+            className="min-h-11 flex-1 sm:flex-none"
+            disabled={disabled}
+            onClick={share}
+          >
+            {busy === "share" ? Spin : <Share2 className="h-4 w-4" />}
+            Share…
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

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>
+  );
+}