@saadnvd1/agent-os 0.3.558 → 0.3.561

package/components/Pane/MobileTabBar.tsx

@@ -23,6 +23,7 @@ import {
   Menu,
   Plus,
   Search,
+  Share2,
   Terminal as TerminalIcon,
   TextSearch,
   Users,
@@ -34,6 +35,7 @@ import { awayUntil } from "@/components/Away/time";
 import type { Session, Project } from "@/lib/db";
 import type { LucideIcon } from "lucide-react";
 import { HostBadge } from "@/components/Hosts/HostBadge";
+import { shareUiActions } from "@/stores/shareUi";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 
 type ViewMode = "terminal" | "files" | "git" | "workers" | "log";
@@ -234,6 +236,23 @@ export function MobileTabBar({
                 iconClassName="h-4 w-4"
               />
             )}
+            {session?.view === "chat" && (
+              <>
+                <DropdownMenuItem
+                  onSelect={() =>
+                    shareUiActions.open({
+                      kind: "chat",
+                      sessionId: session.id,
+                      title: session.name,
+                    })
+                  }
+                >
+                  <Share2 className="h-4 w-4" />
+                  Share…
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+              </>
+            )}
             {sessions
               .filter((s) => !s.conductor_session_id)
               .map((s) => {

package/components/Pane/PaneMenu.tsx

@@ -5,6 +5,7 @@ import {
   Copy,
   Link,
   MoreHorizontal,
+  Share2,
   SplitSquareHorizontal,
   SplitSquareVertical,
   Unplug,
@@ -21,6 +22,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { copySessionLink, writeClipboard } from "@/hooks/useCopyToClipboard";
 import type { Session } from "@/lib/db";
+import { shareUiActions } from "@/stores/shareUi";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 
 interface PaneMenuProps {
@@ -87,6 +89,20 @@ export function PaneMenu({
               <Copy className="h-4 w-4" />
               Copy session ID
             </DropdownMenuItem>
+            {session.view === "chat" && (
+              <DropdownMenuItem
+                onSelect={() =>
+                  shareUiActions.open({
+                    kind: "chat",
+                    sessionId: session.id,
+                    title: session.name,
+                  })
+                }
+              >
+                <Share2 className="h-4 w-4" />
+                Share…
+              </DropdownMenuItem>
+            )}
             <DropdownMenuSeparator />
             <MoveMenuItems
               session={session}

package/components/SessionList/SessionRowMenu.tsx

@@ -13,6 +13,7 @@ import {
   GitPullRequest,
   KanbanSquare,
   Link,
+  Share2,
   Loader2,
   Pencil,
   Pin,
@@ -38,6 +39,7 @@ import { SNOOZE_PRESETS, snoozePreset, wakeLabel } from "@/lib/sidebar/snooze";
 import type { SidebarRow } from "@/lib/sidebar/shelves";
 import { useRowContext } from "./RowContext";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
+import { shareUiActions } from "@/stores/shareUi";
 import { copySessionLink } from "@/hooks/useCopyToClipboard";
 import { useLinkedHostNames } from "@/data/hosts";
 import { remoteBlocks } from "@/lib/hosts/remote-menu";
@@ -206,6 +208,20 @@ export function SessionRowMenu({
         <Link className={icon} />
         Copy link
       </Item>
+      {session.view === "chat" && (
+        <Item
+          onClick={() =>
+            shareUiActions.open({
+              kind: "chat",
+              sessionId: session.id,
+              title: session.name,
+            })
+          }
+        >
+          <Share2 className={icon} />
+          Share…
+        </Item>
+      )}
       <Item onClick={onRename}>
         <Pencil className={icon} />
         Rename

package/components/Settings/SettingsDialog.test.ts

@@ -38,6 +38,9 @@ vi.mock("@/components/Models/ModelsSection", () => ({
   ModelsSection: stub("models"),
 }));
 vi.mock("@/components/Devices", () => ({ DevicesPanel: stub("devices") }));
+vi.mock("@/components/Shares/SharedLinksPanel", () => ({
+  SharedLinksPanel: stub("shares"),
+}));
 vi.mock("@/components/Schedules", () => ({
   SchedulesPanel: stub("schedules"),
 }));

package/components/Settings/SettingsDialog.tsx

@@ -12,6 +12,7 @@ import {
   Cpu,
   GitMerge,
   LayoutGrid,
+  Link2,
   ListChecks,
   ShieldOff,
   FlaskConical,
@@ -32,6 +33,7 @@ import { AuditsPanel } from "@/components/Audits/AuditsPanel";
 import { DevicesPanel } from "@/components/Devices";
 import { GlobalMergeSection } from "@/components/Merge/GlobalMergeSection";
 import { ModelsSection } from "@/components/Models/ModelsSection";
+import { SharedLinksPanel } from "@/components/Shares/SharedLinksPanel";
 import { SchedulesPanel } from "@/components/Schedules";
 import { UpdatesSection } from "@/components/Updates/UpdatesSection";
 import { ExperimentsSection } from "./ExperimentsSection";
@@ -73,6 +75,11 @@ export const SECTION_INFO: Record<
     hint: "Pairing, passkeys, network",
     icon: Smartphone,
   },
+  shares: {
+    label: "Shared links",
+    hint: "Snapshot links you made, with views, and revoke",
+    icon: Link2,
+  },
   models: {
     label: "Models",
     hint: "Which model each kind of work runs on, and providers",
@@ -133,6 +140,8 @@ function SectionBody({
       return <ModelsSection />;
     case "devices":
       return <DevicesPanel />;
+    case "shares":
+      return <SharedLinksPanel />;
     case "notifications":
       return <NotificationsSection browser={browser} />;
     case "recipes":

package/components/Settings/commands.ts

@@ -6,6 +6,7 @@ import {
   FlaskConical,
   GitMerge,
   LayoutGrid,
+  Link2,
   RefreshCw,
   Settings,
   Smartphone,
@@ -72,6 +73,14 @@ export function settingsCommands(workspaceId: string | null): PaletteCommand[] {
       icon: Smartphone,
       run: () => settingsUiActions.open("devices"),
     },
+    {
+      id: "app.shares",
+      title: "Shared links",
+      group,
+      keywords: ["share", "snapshot", "revoke", "link", "connect"],
+      icon: Link2,
+      run: () => settingsUiActions.open("shares"),
+    },
     {
       id: "app.notifications",
       title: "Notification settings",

package/components/Settings/entry-points.test.ts

@@ -23,6 +23,7 @@ describe("⌘K entry points", () => {
     ["app.workspace-settings", "workspaces"],
     ["app.models", "models"],
     ["app.devices", "devices"],
+    ["app.shares", "shares"],
     ["app.notifications", "notifications"],
     ["app.phone-notifications", "notifications"],
     ["app.schedules", "schedules"],

package/components/Share/ShareDialog.tsx

@@ -0,0 +1,336 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useSnapshot } from "valtio";
+import { toast } from "sonner";
+import { Check, Copy, Download, ExternalLink, Link2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { writeClipboard } from "@/hooks/useCopyToClipboard";
+import {
+  useCreateShare,
+  useSharePreview,
+  type ShareExpiry,
+  type SharePreview,
+} from "@/data/shares";
+import { shareUi, shareUiActions } from "@/stores/shareUi";
+import { redactionSummary, formatBytes, fileName } from "./format";
+
+const EXPIRIES: { value: ShareExpiry; label: string }[] = [
+  { value: "1d", label: "1 day" },
+  { value: "7d", label: "7 days" },
+  { value: "30d", label: "30 days" },
+  { value: "never", label: "Never" },
+];
+
+const TYPE_LABEL: Record<string, string> = {
+  user: "You",
+  assistant: "Agent",
+  plan: "Plan",
+  error: "Error",
+  divider: "Divider",
+  artifact: "Page",
+  detail: "Tool",
+};
+
+// Opened from a menu or an artifact: the redacted page exactly as it would be
+// uploaded, with what to leave out, then Create link or Download HTML.
+export function ShareDialog() {
+  const { target } = useSnapshot(shareUi);
+  return (
+    <Dialog
+      open={!!target}
+      onOpenChange={(open) => !open && shareUiActions.close()}
+    >
+      {target && (
+        <ShareBody
+          key={target.sessionId ?? target.artifactId}
+          target={{ ...target }}
+        />
+      )}
+    </Dialog>
+  );
+}
+
+function ShareBody({
+  target,
+}: {
+  target: {
+    kind: "chat" | "artifact";
+    sessionId?: string;
+    artifactId?: string;
+    title: string;
+  };
+}) {
+  const [tools, setTools] = useState(false);
+  const [dropped, setDropped] = useState<string[]>([]);
+  const [expiresIn, setExpiresIn] = useState<ShareExpiry>("7d");
+  const [preview, setPreview] = useState<SharePreview | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [created, setCreated] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const previewReq = useSharePreview();
+  const create = useCreateShare();
+  const seq = useRef(0);
+
+  const { kind, sessionId, artifactId } = target;
+  useEffect(() => {
+    const mine = ++seq.current;
+    const timer = setTimeout(async () => {
+      try {
+        const p = await previewReq.mutateAsync({
+          kind,
+          sessionId,
+          artifactId,
+          includeTools: tools,
+          dropIds: dropped,
+        });
+        if (mine === seq.current) {
+          setPreview(p);
+          setError(null);
+        }
+      } catch (err) {
+        if (mine === seq.current) setError((err as Error).message);
+      }
+    }, 250);
+    return () => clearTimeout(timer);
+    // previewReq is stable enough; re-running on it would loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [kind, sessionId, artifactId, tools, dropped]);
+
+  const toggle = (id: string) =>
+    setDropped((d) =>
+      d.includes(id) ? d.filter((x) => x !== id) : [...d, id]
+    );
+
+  const makeLink = async () => {
+    if (!preview) return;
+    try {
+      const res = await create.mutateAsync({
+        kind,
+        sessionId,
+        artifactId,
+        includeTools: tools,
+        dropIds: dropped,
+        sharedAt: preview.sharedAt,
+        hash: preview.hash,
+        expiresIn,
+      });
+      setCreated(res.url);
+      try {
+        await writeClipboard(res.url);
+        toast.success("Link copied");
+      } catch {
+        toast.message("Link created. Copy it below.");
+      }
+    } catch (err) {
+      setError((err as Error).message);
+    }
+  };
+
+  const download = () => {
+    if (!preview) return;
+    const url = URL.createObjectURL(
+      new Blob([preview.html], { type: "text/html" })
+    );
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = fileName(target.title);
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const copyAgain = async () => {
+    if (!created) return;
+    try {
+      await writeClipboard(created);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      toast.error("Could not copy to clipboard");
+    }
+  };
+
+  const linked = preview?.connectLinked ?? false;
+  const empty =
+    kind === "chat" && !!preview && preview.items.length === dropped.length;
+  const summary = preview ? redactionSummary(preview.hits) : "";
+
+  return (
+    <DialogContent className="flex h-[100dvh] w-screen max-w-none flex-col gap-3 rounded-none p-4 sm:h-[90vh] sm:max-w-5xl sm:rounded-lg">
+      <div>
+        <DialogTitle>
+          Share {kind === "chat" ? "this chat" : "this page"}
+        </DialogTitle>
+        <DialogDescription>
+          A read-only snapshot, with secrets, home paths and machine names
+          masked. Nothing is uploaded until you create the link.
+        </DialogDescription>
+      </div>
+
+      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto md:flex-row md:overflow-hidden">
+        <div className="bg-background min-h-[45vh] flex-1 overflow-hidden rounded-lg border md:min-h-0">
+          {preview ? (
+            <iframe
+              title="Preview of what will be shared"
+              sandbox="allow-scripts"
+              referrerPolicy="no-referrer"
+              srcDoc={preview.html}
+              className="h-full min-h-[45vh] w-full md:min-h-0"
+            />
+          ) : (
+            <p className="text-muted-foreground p-4 text-sm">
+              {error ?? "Preparing the preview…"}
+            </p>
+          )}
+        </div>
+
+        <div className="flex shrink-0 flex-col gap-4 md:w-80 md:overflow-y-auto">
+          {kind === "chat" && (
+            <>
+              <label className="flex min-h-11 items-center justify-between gap-3 text-sm">
+                <span>Include tool calls and thinking</span>
+                <Switch checked={tools} onCheckedChange={setTools} />
+              </label>
+              <div className="min-h-0">
+                <div className="text-muted-foreground mb-1 text-xs font-medium">
+                  Messages
+                </div>
+                <ul className="max-h-64 divide-y overflow-y-auto rounded-lg border">
+                  {preview?.items.map((item) => (
+                    <li key={item.id}>
+                      <label className="flex min-h-11 cursor-pointer items-center gap-3 px-3 py-1.5 text-sm">
+                        <input
+                          type="checkbox"
+                          className="h-4 w-4 shrink-0"
+                          checked={!dropped.includes(item.id)}
+                          onChange={() => toggle(item.id)}
+                        />
+                        <span className="text-muted-foreground w-12 shrink-0 text-xs">
+                          {TYPE_LABEL[item.type] ?? item.type}
+                        </span>
+                        <span className="min-w-0 flex-1 truncate">
+                          {item.excerpt || "(empty)"}
+                        </span>
+                      </label>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </>
+          )}
+
+          {linked && (
+            <label className="flex min-h-11 items-center justify-between gap-3 text-sm">
+              <span>Link expires after</span>
+              <Select
+                value={expiresIn}
+                onValueChange={(v) => setExpiresIn(v as ShareExpiry)}
+              >
+                <SelectTrigger className="w-32">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {EXPIRIES.map((e) => (
+                    <SelectItem key={e.value} value={e.value}>
+                      {e.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </label>
+          )}
+
+          {preview && (
+            <div className="text-muted-foreground space-y-1 text-xs">
+              <p>{summary || "Nothing needed masking."}</p>
+              <p>
+                Your own machine and network names are masked; public sites like
+                github.com are not.
+              </p>
+              <p>{formatBytes(preview.bytes)}</p>
+            </div>
+          )}
+          {preview?.tooBig && (
+            <p className="text-destructive text-sm">
+              Too big to share; drop some messages or turn tool calls off.
+            </p>
+          )}
+          {error && preview && (
+            <p className="text-destructive text-sm">{error}</p>
+          )}
+        </div>
+      </div>
+
+      {created ? (
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
+          <input
+            readOnly
+            value={created}
+            onFocus={(e) => e.currentTarget.select()}
+            aria-label="Shared link"
+            className="bg-muted min-h-11 min-w-0 flex-1 rounded-lg px-3 font-mono text-xs"
+          />
+          <Button variant="outline" className="min-h-11" onClick={copyAgain}>
+            {copied ? (
+              <Check className="h-4 w-4" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+            Copy
+          </Button>
+          <Button variant="outline" className="min-h-11" asChild>
+            <a href={created} target="_blank" rel="noopener noreferrer">
+              <ExternalLink className="h-4 w-4" />
+              Open
+            </a>
+          </Button>
+          <Button className="min-h-11" onClick={shareUiActions.close}>
+            Done
+          </Button>
+        </div>
+      ) : (
+        <div className="flex flex-col-reverse items-stretch gap-2 sm:flex-row sm:items-center sm:justify-end">
+          {preview && !linked && (
+            <p className="text-muted-foreground flex-1 text-xs">
+              Link this machine in Settings → Devices &amp; access to share a
+              link.
+            </p>
+          )}
+          <Button
+            variant="outline"
+            className="min-h-11"
+            disabled={!preview || preview.tooBig || empty}
+            onClick={download}
+          >
+            <Download className="h-4 w-4" />
+            Download HTML
+          </Button>
+          {linked && (
+            <Button
+              className="min-h-11"
+              disabled={!preview || preview.tooBig || empty || create.isPending}
+              onClick={makeLink}
+            >
+              <Link2 className="h-4 w-4" />
+              {create.isPending ? "Creating…" : "Create link"}
+            </Button>
+          )}
+        </div>
+      )}
+    </DialogContent>
+  );
+}

package/components/Share/format.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest";
+import { fileName, formatBytes, redactionSummary } from "./format";
+
+describe("share format", () => {
+  it("summarises what was masked, singular and plural", () => {
+    const none = { secret: 0, path: 0, ip: 0, host: 0, email: 0 };
+    expect(redactionSummary(none)).toBe("");
+    expect(redactionSummary({ ...none, secret: 1, path: 12 })).toBe(
+      "Masked: 1 secret, 12 paths"
+    );
+  });
+  it("names the download after the title", () => {
+    expect(fileName("My chat: part 2!")).toBe("my-chat-part-2.html");
+    expect(fileName("???")).toBe("shared.html");
+  });
+  it("sizes", () => {
+    expect(formatBytes(500)).toBe("500 bytes");
+    expect(formatBytes(2048)).toBe("2.0 KB");
+  });
+});

package/components/Share/format.ts

@@ -0,0 +1,33 @@
+import type { SharePreview } from "@/data/shares";
+
+const PLURAL: Record<keyof SharePreview["hits"], [string, string]> = {
+  secret: ["secret", "secrets"],
+  path: ["path", "paths"],
+  ip: ["address", "addresses"],
+  host: ["host", "hosts"],
+  email: ["email", "emails"],
+};
+
+/** "Masked: 3 secrets, 12 paths", or "" when nothing was. */
+export function redactionSummary(hits: SharePreview["hits"]): string {
+  const parts = (Object.keys(PLURAL) as (keyof typeof PLURAL)[])
+    .filter((k) => hits[k] > 0)
+    .map((k) => `${hits[k]} ${PLURAL[k][hits[k] === 1 ? 0 : 1]}`);
+  return parts.length ? `Masked: ${parts.join(", ")}` : "";
+}
+
+export function formatBytes(n: number): string {
+  if (n < 1024) return `${n} bytes`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+/** A file name for a download: the title, plain, with .html. */
+export function fileName(title: string): string {
+  const slug = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 60);
+  return `${slug || "shared"}.html`;
+}