@saadnvd1/agent-os 0.3.768 → 0.3.775

package/components/Artifacts/Compare/index.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useState } from "react";
+import { ArrowRight, ChevronLeft } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Notice } from "@/components/ui/notice";
+import { Segmented } from "@/components/ui/segmented";
+import { useArtifactCompare } from "@/data/session-artifacts";
+import type { ArtifactVersion } from "@/lib/artifacts/actions";
+import { summaryLabel } from "@/lib/artifacts/compare/diff";
+import { relativeTime } from "@/lib/schedules/when";
+import { DiffView } from "./DiffView";
+import { SideBySide } from "./SideBySide";
+import { VersionPicker } from "./VersionPicker";
+
+type View = "changes" | "side" | "source";
+
+// The shown version against the one before it; the first version against
+// the one after.
+export function defaultPair(
+  versions: ArtifactVersion[],
+  shownId: string
+): { from: string; to: string } {
+  const i = Math.max(
+    0,
+    versions.findIndex((v) => v.id === shownId)
+  );
+  return i > 0
+    ? { from: versions[i - 1].id, to: versions[i].id }
+    : {
+        from: versions[0].id,
+        to: versions[Math.min(1, versions.length - 1)].id,
+      };
+}
+
+function Note({ v, label }: { v: ArtifactVersion; label: string }) {
+  return (
+    <div className="bg-muted/50 min-w-0 rounded-lg px-3 py-2 text-[12.5px]">
+      <div className="text-muted-foreground text-[11px]">
+        {label} · v{v.version} · {relativeTime(v.createdAt)}
+      </div>
+      <div className="break-words">
+        {v.note || (
+          <span className="text-muted-foreground">No note on this version</span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Changes({
+  sessionId,
+  from,
+  to,
+  mode,
+  onSide,
+}: {
+  sessionId: string;
+  from: ArtifactVersion;
+  to: ArtifactVersion;
+  mode: "changes" | "source";
+  onSide: () => void;
+}) {
+  const q = useArtifactCompare(sessionId, from.id, to.id, mode);
+  if (q.isPending)
+    return <div className="bg-muted/40 m-3 h-40 animate-pulse rounded-lg" />;
+  if (q.isError)
+    return <p className="text-destructive p-4 text-sm">{q.error.message}</p>;
+  const d = q.data;
+  if ("tooLarge" in d)
+    return (
+      <div className="p-3">
+        <Notice
+          tone="warning"
+          action={
+            <Button variant="outline" className="h-11 md:h-8" onClick={onSide}>
+              Side by side
+            </Button>
+          }
+        >
+          These pages are {d.reason}. Compare them side by side instead.
+        </Notice>
+      </div>
+    );
+  const same = d.summary.added + d.summary.removed === 0;
+  return (
+    <div>
+      <div className="px-4 pt-3 text-[13px] font-medium">
+        {summaryLabel(d.summary)}
+        <span className="text-muted-foreground font-normal">
+          {mode === "changes" ? " · visible text" : " · HTML source"}
+        </span>
+      </div>
+      {same ? (
+        <p className="text-muted-foreground p-4 text-sm">
+          {mode === "changes"
+            ? "The visible text is the same. Look at Side by side or Source for styling and script changes."
+            : "The source is identical."}
+        </p>
+      ) : (
+        <DiffView lines={d.lines} wrap={mode === "changes"} />
+      )}
+    </div>
+  );
+}
+
+// Two versions of a page: what changed in its text, side by side, or in its
+// HTML. Owner's viewer only; never offered on a share or public link.
+export function ArtifactCompare({
+  sessionId,
+  versions,
+  shownId,
+  onClose,
+}: {
+  sessionId: string;
+  versions: ArtifactVersion[];
+  shownId: string;
+  onClose: () => void;
+}) {
+  const [pair, setPair] = useState(() => defaultPair(versions, shownId));
+  const [view, setView] = useState<View>("changes");
+  const from = versions.find((v) => v.id === pair.from) ?? versions[0];
+  const to =
+    versions.find((v) => v.id === pair.to) ?? versions[versions.length - 1];
+  const [a, b] = from.version <= to.version ? [from, to] : [to, from];
+
+  return (
+    <div className="@container flex h-full min-w-0 flex-col">
+      <div className="flex flex-col gap-3 border-b px-3 py-3 sm:px-4">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Back to the page"
+            onClick={onClose}
+            className="-ml-1 h-11 w-11 shrink-0 md:h-8 md:w-8"
+          >
+            <ChevronLeft className="h-5 w-5" />
+          </Button>
+          <div className="text-[13px] font-medium">Compare versions</div>
+        </div>
+        <div className="flex items-end gap-2">
+          <VersionPicker
+            name="From"
+            value={from.id}
+            versions={versions}
+            onChange={(id) => setPair({ ...pair, from: id })}
+          />
+          <ArrowRight className="text-muted-foreground mb-3.5 h-4 w-4 shrink-0 md:mb-2.5" />
+          <VersionPicker
+            name="To"
+            value={to.id}
+            versions={versions}
+            onChange={(id) => setPair({ ...pair, to: id })}
+          />
+        </div>
+        <div className="grid gap-2 @xl:grid-cols-2">
+          <Note v={a} label="Before" />
+          <Note v={b} label="After" />
+        </div>
+        <Segmented
+          label="Comparison"
+          value={view}
+          onChange={setView}
+          options={[
+            { value: "changes", label: "Changes" },
+            { value: "side", label: "Side by side" },
+            { value: "source", label: "Source" },
+          ]}
+        />
+      </div>
+      <div className="min-h-0 flex-1 overflow-auto">
+        {from.id === to.id ? (
+          <p className="text-muted-foreground p-4 text-sm">
+            Pick two different versions.
+          </p>
+        ) : view === "side" ? (
+          <SideBySide from={a} to={b} />
+        ) : (
+          <Changes
+            sessionId={sessionId}
+            from={a}
+            to={b}
+            mode={view === "source" ? "source" : "changes"}
+            onSide={() => setView("side")}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

package/components/Chat/ChatPanel.tsx

@@ -66,7 +66,7 @@ import { useGoToItem } from "./useGoToItem";
 import { NeedsYouStrip } from "@/components/Orchestrator/NeedsYouStrip";
 import { useResolveQuestion } from "@/data/orchestrators";
 import { needsYouFocus, needsYouFocusActions } from "@/stores/needsYouFocus";
-import { hrefWithSession } from "@/lib/session-url";
+import { openSessionById } from "./session-link";
 import { questionSource } from "@/lib/chat/turns";
 import { useViewport } from "@/hooks/useViewport";
 import { useChatCommands } from "./useChatCommands";
@@ -767,15 +767,9 @@ export function ChatPanel({
               if (item.kind === "ask") needsYouFocusActions.ask(item.ask.id);
               else if (item.kind === "chat") toEnd();
               else if (item.kind === "task" || item.kind === "card") {
-                window.history.pushState(
-                  null,
-                  "",
-                  hrefWithSession(
-                    location.href,
-                    item.kind === "task" ? item.sessionId : item.card.sessionId
-                  )
+                openSessionById(
+                  item.kind === "task" ? item.sessionId : item.card.sessionId
                 );
-                window.dispatchEvent(new PopStateEvent("popstate"));
               } else goTo((all) => questionSource(all, item.question.text));
             }}
             onReply={(item) => {

package/components/Chat/EventRow.tsx

@@ -12,7 +12,7 @@ import {
 } from "lucide-react";
 import type { ChatItem, ChatOrigin, ChatOriginKind } from "@/lib/chat/events";
 import { eventParts, originOf } from "@/lib/chat/origin";
-import { hrefWithSession } from "@/lib/session-url";
+import { SessionAnchor } from "./SessionAnchor";
 import { cn } from "@/lib/utils";
 import { UserMessage } from "./Messages";
 import { openSessionLink as openSession } from "./session-link";
@@ -45,8 +45,8 @@ function Source({ origin }: { origin: ChatOrigin }) {
   if (!origin.sessionId) return name;
   const id = origin.sessionId;
   return (
-    <a
-      href={hrefWithSession("/", id)}
+    <SessionAnchor
+      sessionId={id}
       onClick={(e) => {
         e.stopPropagation();
         openSession(e, id);
@@ -54,7 +54,7 @@ function Source({ origin }: { origin: ChatOrigin }) {
       className="hover:text-foreground relative min-w-0 underline-offset-2 before:absolute before:-inset-x-1 before:-inset-y-3.5 hover:underline"
     >
       {name}
-    </a>
+    </SessionAnchor>
   );
 }
 

package/components/Chat/Messages.tsx

@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils";
 import { leadingCommand } from "@/lib/chat/commands";
 import { compactedLine } from "@/lib/chat/stale";
 import { splitProse, splitUserText } from "@/lib/chat/user-text";
-import { inAppSessionId } from "@/lib/session-url";
+import { inAppSessionRef } from "@/lib/session-url";
 import { CodeBlock } from "./Code";
 import { CopyButton } from "./CopyButton";
 import { FileChip } from "./FileChip";
@@ -29,6 +29,7 @@ import { Markdown } from "./Markdown";
 import { openSessionLink } from "./session-link";
 import { TurnCopy } from "./TurnCopy";
 import { UndoButton } from "./Undo";
+import { ShareFromHere } from "./ShareFromHere";
 import { useRowState } from "./rowState";
 import { useBookmarkChat } from "@/components/Bookmarks/context";
 import { ChatItemContext } from "./itemContext";
@@ -42,16 +43,16 @@ import {
 type Of<K extends ChatItem["kind"]> = Extract<ChatItem, { kind: K }>;
 
 function UserLink({ href }: { href: string }) {
-  const id =
+  const ref =
     typeof window === "undefined"
       ? null
-      : inAppSessionId(href, window.location.origin);
+      : inAppSessionRef(href, window.location.origin);
   return (
     <a
       href={href}
-      target={id ? undefined : "_blank"}
-      rel={id ? undefined : "noopener noreferrer"}
-      onClick={id ? (e) => openSessionLink(e, id) : undefined}
+      target={ref ? undefined : "_blank"}
+      rel={ref ? undefined : "noopener noreferrer"}
+      onClick={ref ? (e) => openSessionLink(e, ref) : undefined}
       className="chat-link font-medium"
     >
       {href}
@@ -280,6 +281,7 @@ export function UserMessage({
         <div className="-mr-1.5 flex items-center">
           {onUndo && <UndoButton onClick={onUndo} />}
           <ExportFromHere itemId={item.id} />
+          <ShareFromHere itemId={item.id} />
           <BookmarkButton itemId={item.id} />
         </div>
       )}
@@ -325,6 +327,10 @@ export function AssistantMessage({
                   <Quote className="h-3.5 w-3.5" />
                 </button>
               )}
+              <ShareFromHere
+                itemId={item.id}
+                className="text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-9 w-9 items-center justify-center rounded-md md:h-7 md:w-7"
+              />
             </div>
             <BookmarkButton itemId={item.id} />
           </div>

package/components/Chat/SessionAnchor.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import type { AnchorHTMLAttributes } from "react";
+import { useSessionHref } from "@/hooks/useSessionHref";
+import { openSessionLink } from "./session-link";
+
+type Props = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
+  sessionId: string;
+};
+
+// A link to a session at its readable address. A plain click opens it here;
+// a modified one, a new tab. An own onClick replaces the open.
+export function SessionAnchor({ sessionId, onClick, ...rest }: Props) {
+  const href = useSessionHref(sessionId);
+  return (
+    <a
+      href={href}
+      onClick={onClick ?? ((e) => openSessionLink(e, sessionId))}
+      {...rest}
+    />
+  );
+}

package/components/Chat/ShareFromHere.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { Share2 } from "lucide-react";
+import { useBookmarkChat } from "@/components/Bookmarks/context";
+import { shareUiActions } from "@/stores/shareUi";
+
+// Opens the share dialog on the part of the chat from this message to the latest.
+export function ShareFromHere({
+  itemId,
+  className,
+}: {
+  itemId: string;
+  className?: string;
+}) {
+  const chat = useBookmarkChat();
+  if (!chat) return null;
+  return (
+    <button
+      type="button"
+      aria-label="Share from here"
+      title="Share from here"
+      onClick={(e) => {
+        e.stopPropagation();
+        shareUiActions.open({
+          kind: "chat",
+          sessionId: chat.sessionId,
+          title: "",
+          fromId: itemId,
+        });
+      }}
+      className={
+        className ??
+        "text-muted-foreground hover:text-foreground hover:bg-foreground/[0.06] flex h-11 w-11 shrink-0 items-center justify-center rounded-md opacity-40 group-hover:opacity-100 focus-visible:opacity-100 md:h-7 md:w-7 md:opacity-0"
+      }
+    >
+      <Share2 className="h-3.5 w-3.5" />
+    </button>
+  );
+}

package/components/Chat/session-link.ts

@@ -1,10 +1,27 @@
 import type { MouseEvent } from "react";
-import { hrefWithSession } from "@/lib/session-url";
+import {
+  hrefWithRef,
+  hrefWithSession,
+  type SessionRef,
+} from "@/lib/session-url";
 
-// Opens the session through its address, the way a shared link does.
-export function openSessionLink(e: MouseEvent<HTMLAnchorElement>, id: string) {
+// Opens a session through its address, the way a shared link does. The
+// address it lands on is rewritten to the session's readable one.
+export function openSessionById(id: string): void {
+  go(hrefWithSession(location.href, { id }));
+}
+
+export function openSessionLink(
+  e: MouseEvent<HTMLAnchorElement>,
+  target: string | SessionRef
+) {
   if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
   e.preventDefault();
-  window.history.pushState(null, "", hrefWithSession(location.href, id));
+  if (typeof target === "string") openSessionById(target);
+  else go(hrefWithRef(location.href, target));
+}
+
+function go(href: string): void {
+  window.history.pushState(null, "", href);
   window.dispatchEvent(new PopStateEvent("popstate"));
 }

package/components/CommandPalette/CommandPalette.tsx

@@ -13,10 +13,11 @@ import { CommandsBody } from "./CommandsBody";
 import { ConversationSearch } from "./conversations/ConversationSearch";
 
 // ⌘K anywhere, or the header button on a phone: every action the open
-// features offer, found by typing, and (Tab) what was said in any chat.
+// features offer, found by typing, in tabs (Tab cycles them) that include
+// what was said in any chat.
 export function CommandPalette() {
-  const { open, mode } = useSnapshot(paletteUi);
-  const wide = mode === "conversations";
+  const { open, tab } = useSnapshot(paletteUi);
+  const wide = tab === "conversations";
   return (
     <Dialog open={open} onOpenChange={paletteActions.setOpen}>
       <DialogContent
@@ -37,7 +38,7 @@ export function CommandPalette() {
             ? "Search what was said in every conversation"
             : "Search for an action, a session or a conversation"}
         </DialogDescription>
-        {/* Mounted per opening and per mode, so each starts from its own query. */}
+        {/* Mounted per opening and per side, so each starts from its own query. */}
         {wide ? (
           <ConversationSearch key="conversations" />
         ) : (