@agent-native/core-corpus 0.216.0 → 0.218.0

package/corpus/templates/analytics/app/components/layout/Sidebar.tsx

@@ -1,3 +1,4 @@
+import { appPath } from "@agent-native/core/client/api-path";
 import {
   AppSidebarFooter,
   AppSidebarHeader,
@@ -96,7 +97,6 @@ function useSettledSyncVersion(version: number): number {
 import {
   navigateWithAgentChatViewTransition,
   useChatThreads,
-  type ChatThreadSummary,
 } from "@agent-native/core/client/agent-chat";
 import {
   callAction,
@@ -104,13 +104,14 @@ import {
   useChangeVersions,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  OwnershipChatHistoryRail,
+  useOwnershipChatHistory,
+  ownDraftRows,
+} from "@agent-native/toolkit/app/chat/ownership-history";
 import { DevDatabaseLink } from "@agent-native/toolkit/app/db-admin";
 import { FeedbackButton } from "@agent-native/toolkit/app/feedback";
 import { OrgSwitcher } from "@agent-native/toolkit/app/org";
-import {
-  ChatHistoryRail,
-  type ChatHistoryItem,
-} from "@agent-native/toolkit/chat-history";
 import {
   analyticsAskThreadIdFromPath,
   analyticsAskThreadPath,
@@ -333,10 +334,6 @@ function applyOrder<T extends { id: string }>(
   return ordered;
 }
 
-function isVisibility(value: unknown): value is Visibility {
-  return value === "private" || value === "org" || value === "public";
-}
-
 export function matchesVisibilityFilter(
   item: { visibility?: Visibility; ownerEmail?: string | null },
   filter: SidebarVisibilityFilter,
@@ -345,23 +342,6 @@ export function matchesVisibilityFilter(
   return matchesDashboardVisibilityFilter(item, filter, currentUserEmail);
 }
 
-export function threadMatchesVisibilityFilter(
-  thread: ChatThreadSummary,
-  filter: SidebarVisibilityFilter,
-): boolean {
-  const runtimeThread = thread as ChatThreadSummary & {
-    visibility?: unknown;
-  };
-  return matchesVisibilityFilter(
-    {
-      visibility: isVisibility(runtimeThread.visibility)
-        ? runtimeThread.visibility
-        : "private",
-    },
-    filter,
-  );
-}
-
 function SidebarSectionSettingsPopover({
   label,
   sortMode,
@@ -1368,110 +1348,44 @@ export function prefetchSqlDashboard(
   });
 }
 
-function formatThreadAge(updatedAt: number) {
-  const diffMs = Math.max(0, Date.now() - updatedAt);
-  const minutes = Math.floor(diffMs / 60_000);
-  if (minutes < 1) return "now";
-  if (minutes < 60) return `${minutes}m`;
-  const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h`;
-  const days = Math.floor(hours / 24);
-  if (days < 7) return `${days}d`;
-  return new Date(updatedAt).toLocaleDateString([], {
-    month: "short",
-    day: "numeric",
-  });
-}
-
-function threadTitle(thread: ChatThreadSummary, untitledLabel: string) {
-  return thread.title || thread.preview || untitledLabel;
-}
-
-function threadUpdatedAt(thread: ChatThreadSummary) {
-  return Number.isFinite(thread.updatedAt)
-    ? thread.updatedAt
-    : Number.isFinite(thread.createdAt)
-      ? thread.createdAt
-      : 0;
-}
-
-function compareThreads(a: ChatThreadSummary, b: ChatThreadSummary) {
-  const aPinned = a.pinnedAt ?? 0;
-  const bPinned = b.pinnedAt ?? 0;
-  if (aPinned || bPinned) return bPinned - aPinned;
-  return threadUpdatedAt(b) - threadUpdatedAt(a);
-}
-
 function AnalyticsChatsSection({
   askThreadId,
   open,
-  visibilityFilter,
 }: {
   /** The saved thread open on /ask/:threadId; null on the blank /ask page. */
   askThreadId: string | null;
   open: boolean;
-  visibilityFilter: SidebarVisibilityFilter;
 }) {
   const navigate = useNavigate();
   const t = useT();
-  const {
-    threads,
-    isLoading: chatsLoading,
-    pinThread,
-    archiveThread,
-    renameThread,
-    refreshThreads,
-  } = useChatThreads(undefined, ANALYTICS_CHAT_STORAGE_KEY, undefined, {
-    autoCreate: false,
-    restoreActiveThread: false,
-  });
-
-  const visibleThreads = useMemo(
-    () =>
-      threads
-        .filter(
-          (thread) =>
-            thread.messageCount > 0 &&
-            !thread.archivedAt &&
-            threadMatchesVisibilityFilter(thread, visibilityFilter),
-        )
-        .sort(compareThreads)
-        .slice(0, 15),
-    [threads, visibilityFilter],
-  );
-  const chatItems = useMemo<ChatHistoryItem[]>(
-    () =>
-      visibleThreads.map((thread) => ({
-        id: thread.id,
-        title: threadTitle(thread, t("chat.untitledChat")),
-        titleText: threadTitle(thread, t("chat.untitledChat")),
-        timestamp:
-          thread.id === askThreadId
-            ? undefined
-            : formatThreadAge(threadUpdatedAt(thread)),
-        pinned: Boolean(thread.pinnedAt),
-      })),
-    [askThreadId, t, visibleThreads],
-  );
+  const { threads, pinThread, archiveThread, renameThread, isNewThread } =
+    useChatThreads(undefined, ANALYTICS_CHAT_STORAGE_KEY, undefined, {
+      ownership: "mine",
+      autoCreate: false,
+      restoreActiveThread: false,
+    });
 
-  useEffect(() => {
-    const refresh = () => refreshThreads();
-    const handleRunning = (event: Event) => {
-      const detail = (event as CustomEvent).detail as
-        | { isRunning?: unknown }
-        | undefined;
-      if (typeof detail?.isRunning === "boolean") refreshThreads();
-    };
-
-    window.addEventListener("agent-chat:threads-updated", refresh);
-    window.addEventListener("agentNative.chatRunning", handleRunning);
-    window.addEventListener("focus", refresh);
-    return () => {
-      window.removeEventListener("agent-chat:threads-updated", refresh);
-      window.removeEventListener("agentNative.chatRunning", handleRunning);
-      window.removeEventListener("focus", refresh);
-    };
-  }, [refreshThreads]);
+  const history = useOwnershipChatHistory({
+    getThreadUrl: (threadId) => appPath(analyticsAskThreadPath(threadId)),
+    activeId: askThreadId,
+    localMineRows: ownDraftRows({ threads, isNewThread }),
+    mutations: {
+      pin: pinThread,
+      rename: renameThread,
+      archive: archiveThread,
+    },
+    onMutationFailed: (kind) => {
+      toast.error(
+        t(
+          kind === "archive"
+            ? "chat.archiveFailed"
+            : kind === "rename"
+              ? "chat.renameFailed"
+              : "agentChat.common.saveFailed",
+        ),
+      );
+    },
+  });
 
   function openThread(threadId: string) {
     navigateWithAgentChatViewTransition(
@@ -1494,18 +1408,10 @@ function AnalyticsChatsSection({
 
   async function handleArchiveThread(threadId: string) {
     const wasActive = threadId === askThreadId;
-    const archived = await archiveThread(threadId);
-    if (!archived) {
-      toast.error(t("chat.archiveFailed"));
-      return;
-    }
+    const archived = await history.listProps.onDelete!(threadId);
+    if (!archived) return false;
     if (wasActive) handleNewChat();
-  }
-
-  function handleRenameThread(threadId: string, title: string) {
-    void renameThread(threadId, title).then((renamed) => {
-      if (!renamed) toast.error(t("chat.renameFailed"));
-    });
+    return true;
   }
 
   return (
@@ -1515,43 +1421,15 @@ function AnalyticsChatsSection({
       aria-hidden={!open}
     >
       <div className="ms-4 min-w-0 space-y-0.5">
-        {chatsLoading &&
-          visibleThreads.length === 0 &&
-          Array.from({ length: 3 }).map((_, i) => (
-            <div
-              key={`chat-skeleton-${i}`}
-              className="flex items-center gap-2 px-3 py-1"
-            >
-              <Skeleton
-                className={cn(
-                  "h-3.5 w-3.5 shrink-0 rounded-sm",
-                  SIDEBAR_SKELETON_CLASS,
-                )}
-              />
-              <Skeleton
-                className={cn("h-3 rounded", SIDEBAR_SKELETON_CLASS)}
-                style={{ width: `${60 + ((i * 17) % 30)}%` }}
-              />
-            </div>
-          ))}
-        <ChatHistoryRail
-          items={chatItems}
+        <OwnershipChatHistoryRail
+          {...history}
           activeId={askThreadId}
           onSelect={(threadId) => openThread(threadId)}
           onNewChat={handleNewChat}
           railLabels={{
             newChat: t("chat.newChat"),
-            showMore: t("sidebar.showMore", {
-              count: Math.max(0, visibleThreads.length - SIDEBAR_PREVIEW_COUNT),
-            }),
-            showLess: t("sidebar.showLess"),
           }}
           renameMaxLength={160}
-          onTogglePin={(threadId) => {
-            const thread = visibleThreads.find((item) => item.id === threadId);
-            if (thread) void pinThread(threadId, !thread.pinnedAt);
-          }}
-          onRename={handleRenameThread}
           onDelete={(threadId) => void handleArchiveThread(threadId)}
           labels={{
             options: (item) =>
@@ -1639,7 +1517,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
   const [askOpen, setAskOpen] = useState(
     () => getStoredBooleanPreference(ASK_OPEN_KEY) ?? isAskRoute,
   );
-  const [askFilter, setAskFilter] = useState<SidebarVisibilityFilter>("all");
   const [dashOpen, setDashOpen] = useState(
     () =>
       getStoredBooleanPreference(DASHBOARDS_OPEN_KEY) ??
@@ -2511,11 +2388,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                       {t("navigation.ask")}
                     </span>
                   </Link>
-                  <SidebarSectionSettingsPopover
-                    label={t("navigation.ask")}
-                    visibilityFilter={askFilter}
-                    onVisibilityFilterChange={setAskFilter}
-                  />
                   <button
                     type="button"
                     onClick={toggleAskOpen}
@@ -2538,7 +2410,6 @@ export function Sidebar({ mobile }: { mobile?: boolean } = {}) {
                 <AnalyticsChatsSection
                   askThreadId={askThreadId}
                   open={askOpen}
-                  visibilityFilter={askFilter}
                 />
               </div>
 

package/corpus/templates/analytics/app/i18n/en-US.ts

@@ -1790,6 +1790,10 @@ export default {
     catalogOpenSessions: "Show sessions with {{event}}",
     catalogAutomatic: "Automatic",
     catalogStoppedFiring: "Stopped firing",
+    catalogMadeIt: "Made it",
+    catalogUsedIt: "Used it",
+    catalogNoUsedIt:
+      "“Made it, didn't use it” can't check outputs from {{apps}} because no “used it” event is defined.",
     catalogPropertyKeys: "Property keys",
     catalogMoreKeys: "+{{count}} more",
     catalogTruncated: "Showing only the {{count}} most recently seen events.",
@@ -1803,6 +1807,29 @@ export default {
     speedCoverageStarting: "Speed is measured for page views from now on.",
     speedFilterNeedsLab:
       "This link has a speed filter. Turn on the Sessions triage Lab in Settings to apply it.",
+    unusedOutputs: "Made it, didn't use it",
+    anyOutcome: "Any session",
+    unusedSlidesDecks: "Unused Slides decks",
+    unusedSlidesRule:
+      "Decks made at least {{days}} days ago that weren't presented past the first slide for {{seconds}} s or more, or exported, within {{days}} days. Opening a deck doesn't count.",
+    unusedFilterNeedsLab:
+      "This link has a “made it, didn't use it” filter. Turn on the Sessions triage Lab in Settings to apply it.",
+    outputCoverageSince:
+      "Outputs tracked since {{date}}; unused ones show {{days}} days after they're made.",
+    outputCoverageStarting:
+      "Outputs are tracked from now on; unused ones show {{days}} days after they're made.",
+    openDeck: "Open deck",
+    moreOutputs: "+{{count}} more",
+    deckCount: "{{count}} decks",
+    deckCountSingular: "{{count}} deck",
+    deckMadeOn: "Deck made {{date}}",
+    outputPresentedOn: "Presented {{date}}",
+    outputExportedOn: "Exported {{date}}",
+    outputUsedOn: "Used {{date}}",
+    outputUnused: "Not used within {{days}} days",
+    outputOpen: "Not used yet; counts as unused after {{date}}",
+    outputUnmeasured: "Not measured: some events failed to save",
+    outputsUnavailable: "Couldn't load outputs.",
     slowRequestCount: "{{count}} slow requests",
     slowRequestCountSingular: "{{count}} slow request",
     speedIncomplete: "Speed data incomplete",

package/corpus/templates/analytics/app/pages/sessions/EventCatalogPage.tsx

@@ -82,6 +82,9 @@ export default function EventCatalogPage() {
   const automaticOnlyApps = (data?.apps ?? []).filter(
     (item) => item.onlyAutomaticEvents,
   );
+  const noUsedItApps = (data?.apps ?? [])
+    .filter((item) => item.makesOutputs && !item.usedItEvents.length)
+    .map((item) => item.app || t("sessions.unknownApp"));
   const sessionsHref = `/sessions${
     range !== "30d" || app
       ? `?${new URLSearchParams({
@@ -190,7 +193,7 @@ export default function EventCatalogPage() {
           </Button>
         </div>
 
-        {automaticOnlyApps.length ? (
+        {automaticOnlyApps.length || noUsedItApps.length ? (
           <Alert role="status">
             <IconInfoCircle />
             <AlertDescription>
@@ -201,6 +204,13 @@ export default function EventCatalogPage() {
                   })}
                 </p>
               ))}
+              {noUsedItApps.length ? (
+                <p>
+                  {t("sessions.catalogNoUsedIt", {
+                    apps: noUsedItApps.join(", "),
+                  })}
+                </p>
+              ) : null}
             </AlertDescription>
           </Alert>
         ) : null}
@@ -283,6 +293,13 @@ function CatalogRow({
               {t("sessions.catalogStoppedFiring")}
             </Badge>
           ) : null}
+          {entry.outputRole ? (
+            <Badge variant="outline">
+              {entry.outputRole === "made"
+                ? t("sessions.catalogMadeIt")
+                : t("sessions.catalogUsedIt")}
+            </Badge>
+          ) : null}
         </span>
         {entry.description ? (
           <span className="line-clamp-2 block text-xs text-muted-foreground">

package/corpus/templates/analytics/app/pages/sessions/SessionDetailPage.tsx

@@ -128,6 +128,7 @@ import {
   SessionDevToolsPanel,
 } from "./SessionDevToolsPanel";
 import { SessionFrictionPanel } from "./SessionFriction";
+import { SessionOutputsButton } from "./SessionOutputs";
 import { SessionStartTime } from "./SessionStartTime";
 
 export {
@@ -343,7 +344,8 @@ export default function SessionDetailPage() {
         </div>
         {recording ? (
           <TooltipProvider>
-            <div className="flex shrink-0 items-center gap-2">
+            <div className="flex shrink-0 flex-wrap items-center gap-2">
+              <SessionOutputsButton recordingId={recording.id} />
               <CopySessionForAgentButton recordingId={recording.id} />
               <AskSessionPopover recording={recording} />
               <AgentToggleButton />

package/corpus/templates/analytics/app/pages/sessions/SessionOutputs.tsx

@@ -0,0 +1,197 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { useLab } from "@agent-native/core/client/labs";
+import {
+  IconExternalLink,
+  IconPackage,
+  IconRefresh,
+} from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+import { ANALYTICS_SESSIONS_TRIAGE_LAB } from "../../../shared/labs";
+import {
+  MIN_PRESENTATION_MS,
+  OUTPUT_USE_WINDOW_DAYS,
+  type OutputUseApp,
+  type SessionOutput,
+  type SessionRecordingOutputs,
+} from "../../../shared/output-use";
+
+type T = ReturnType<typeof useT>;
+
+export function unusedFilterLabel(app: OutputUseApp, t: T): string {
+  switch (app) {
+    case "slides":
+      return t("sessions.unusedSlidesDecks");
+  }
+}
+
+export function unusedRuleText(app: OutputUseApp, t: T): string {
+  switch (app) {
+    case "slides":
+      return t("sessions.unusedSlidesRule", {
+        days: String(OUTPUT_USE_WINDOW_DAYS),
+        seconds: String(MIN_PRESENTATION_MS / 1000),
+      });
+  }
+}
+
+function openOutputLabel(output: SessionOutput, t: T): string {
+  switch (output.app) {
+    case "slides":
+      return t("sessions.openDeck");
+  }
+}
+
+function outputTitle(output: SessionOutput, t: T): string {
+  const date = new Date(output.madeAt).toLocaleDateString();
+  switch (output.app) {
+    case "slides":
+      return t("sessions.deckMadeOn", { date });
+  }
+}
+
+export function outputStatusText(output: SessionOutput, t: T): string {
+  switch (output.status) {
+    case "used": {
+      const date = output.usedAt
+        ? new Date(output.usedAt).toLocaleDateString()
+        : "";
+      if (output.usedEvent === "presentation_ended") {
+        return t("sessions.outputPresentedOn", { date });
+      }
+      if (output.usedEvent === "deck_exported") {
+        return t("sessions.outputExportedOn", { date });
+      }
+      return t("sessions.outputUsedOn", { date });
+    }
+    case "unused":
+      return t("sessions.outputUnused", {
+        days: String(OUTPUT_USE_WINDOW_DAYS),
+      });
+    case "open":
+      return t("sessions.outputOpen", {
+        date: new Date(output.useBy).toLocaleDateString(),
+      });
+    case "unmeasured":
+      return t("sessions.outputUnmeasured");
+  }
+}
+
+function OutputLink({ output }: { output: SessionOutput }) {
+  const t = useT();
+  if (!output.url) return null;
+  return (
+    <Button asChild variant="ghost" size="xs" className="shrink-0">
+      <a href={output.url} target="_blank" rel="noreferrer">
+        {openOutputLabel(output, t)}
+        <IconExternalLink />
+      </a>
+    </Button>
+  );
+}
+
+// A link cannot nest inside the row's replay link, so this sits beside it.
+export function UnusedOutputLink({
+  outputs,
+}: {
+  outputs?: SessionOutput[] | null;
+}) {
+  const t = useT();
+  const unusedOutputs = (outputs ?? []).filter(
+    (output) => output.status === "unused",
+  );
+  const linked = unusedOutputs.find((output) => output.url);
+  if (!linked) return null;
+  return (
+    <div className="flex shrink-0 items-center gap-1 px-3">
+      <OutputLink output={linked} />
+      {unusedOutputs.length > 1 ? (
+        <span className="text-xs text-muted-foreground">
+          {t("sessions.moreOutputs", {
+            count: String(unusedOutputs.length - 1),
+          })}
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
+/** The outputs a replay's session made, and whether each was used in time. */
+export function SessionOutputsButton({ recordingId }: { recordingId: string }) {
+  const t = useT();
+  const lab = useLab(ANALYTICS_SESSIONS_TRIAGE_LAB);
+  const query = useActionQuery<SessionRecordingOutputs>(
+    "list-session-outputs",
+    { recordingIds: [recordingId] },
+    { enabled: lab, staleTime: 30_000 },
+  );
+  if (!lab) return null;
+  if (query.isError && !query.data) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => void query.refetch()}
+        disabled={query.isFetching}
+      >
+        <IconRefresh className={cn(query.isFetching && "animate-spin")} />
+        {t("sessions.outputsUnavailable")}
+      </Button>
+    );
+  }
+  const outputs = query.data?.outputs[recordingId];
+  if (!outputs?.length) return null;
+  const omitted = query.data?.omittedOutputs[recordingId] ?? 0;
+  const total = outputs.length + omitted;
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline">
+          <IconPackage />
+          {t(
+            total === 1 ? "sessions.deckCountSingular" : "sessions.deckCount",
+            { count: String(total) },
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-80">
+        <ul className="space-y-3">
+          {outputs.map((output) => (
+            <li
+              key={`${output.app}:${output.outputId}`}
+              className="flex items-start justify-between gap-3"
+            >
+              <span className="min-w-0 text-sm">
+                <span className="block truncate font-medium">
+                  {outputTitle(output, t)}
+                </span>
+                <span
+                  className={cn(
+                    "block text-xs text-muted-foreground",
+                    output.status === "unused" && "text-foreground",
+                  )}
+                >
+                  {outputStatusText(output, t)}
+                </span>
+              </span>
+              <OutputLink output={output} />
+            </li>
+          ))}
+        </ul>
+        {omitted ? (
+          <p className="mt-3 text-xs text-muted-foreground">
+            {t("sessions.moreOutputs", { count: String(omitted) })}
+          </p>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}