@saadnvd1/agent-os 0.3.700 → 0.3.723

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/Hosts/AccountMachines.tsx

@@ -3,13 +3,14 @@
 import { useState } from "react";
 import { ExternalLink, Link2, Loader2, RefreshCw } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
 import { LinkForm } from "@/components/Welcome/ConnectBlock";
 import {
   useAccountMachines,
   useRefreshAccount,
   useStartLink,
 } from "@/data/peers";
-import { CONNECT_SITE } from "@/lib/connect/view";
+import { UPGRADE_URL } from "@/lib/peer/reasons";
 import type { AccountMachine } from "@/lib/peer/machines";
 import { cn } from "@/lib/utils";
 import { WaitingLinks } from "./IncomingLinkSheet";
@@ -57,7 +58,12 @@ function MachineRow({
           Linked
         </span>
       ) : machine.linkState === "suspended" ? (
-        <span className="text-muted-foreground text-xs">Suspended</span>
+        <span
+          className="text-xs text-amber-700 dark:text-amber-400"
+          title={machine.suspendedReason ?? undefined}
+        >
+          Suspended
+        </span>
       ) : (
         <Button
           variant="outline"
@@ -122,23 +128,31 @@ export function AccountMachines() {
           />
         </Button>
       </div>
+      {data.uncheckedSince && (
+        <Notice tone="warning">
+          Couldn&apos;t check your account since{" "}
+          {new Date(data.uncheckedSince).toLocaleString([], {
+            dateStyle: "medium",
+            timeStyle: "short",
+          })}
+          . Machines already linked keep working; new links wait until it&apos;s
+          back.
+        </Notice>
+      )}
       {data.entitlements && !entitled && (
-        <div className="flex flex-col gap-2 rounded-lg border p-3 sm:flex-row sm:items-center">
-          <p className="flex-1 text-sm">
-            Link your machines with Pro: tasks move between them over any
-            network, end-to-end encrypted.
-          </p>
-          <Button asChild variant="outline" className="min-h-11 sm:min-h-9">
-            <a
-              href={`${CONNECT_SITE}/settings/billing`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Upgrade
-              <ExternalLink className="h-3.5 w-3.5" />
-            </a>
-          </Button>
-        </div>
+        <Notice
+          action={
+            <Button asChild variant="outline" className="min-h-11 sm:min-h-9">
+              <a href={UPGRADE_URL} target="_blank" rel="noopener noreferrer">
+                Upgrade
+                <ExternalLink className="h-3.5 w-3.5" />
+              </a>
+            </Button>
+          }
+        >
+          Link your machines with Pro: tasks move between them over any network,
+          end-to-end encrypted.
+        </Notice>
       )}
       {entitled && <WaitingLinks />}
       {data.error && (