@agent-native/core 0.178.0 → 0.178.1-nightly-20260909221943

package/corpus/templates/clips/app/routes/_app.r.$recordingId.tsx

@@ -1,4 +1,8 @@
-import { AgentPanel } from "@agent-native/core/client/agent-chat";
+import {
+  requestAgentSidebarOpen,
+  SIDEBAR_STATE_CHANGE_EVENT,
+  type AgentSidebarStateChangeDetail,
+} from "@agent-native/core/client/agent-chat";
 import {
   agentNativePath,
   appBasePath,
@@ -46,7 +50,6 @@ import {
   IconBolt,
   IconMessage,
   IconExternalLink,
-  IconFolder,
   IconMoodSmile,
 } from "@tabler/icons-react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
@@ -64,7 +67,11 @@ import { toast } from "sonner";
 import { ClipsAvatar } from "@/components/clips-avatar";
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
 import { EditorLayout } from "@/components/editor/editor-layout";
-import { PageHeader } from "@/components/library/page-header";
+import {
+  PageBreadcrumb,
+  PageHeader,
+  type PageBreadcrumbItem,
+} from "@/components/library/page-header";
 import {
   BrowserDiagnosticsPanel,
   isFullBrowserDiagnostics,
@@ -101,14 +108,6 @@ import {
   ViewerTabsTrigger,
 } from "@/components/player/viewer-controls";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenuItem,
@@ -419,9 +418,35 @@ export function meta() {
   return [{ title: enMessages.recordingRoute.pageTitle }];
 }
 
-type SidePanel = "transcript" | "comments" | "agent" | "debug" | "settings";
+type SidePanel = "transcript" | "comments" | "debug" | "settings";
 type ToolbarPanel = Exclude<SidePanel, "comments">;
 
+function useGlobalAgentSidebarOpen() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleStateChange = (event: Event) => {
+      const detail = (event as CustomEvent<AgentSidebarStateChangeDetail>)
+        .detail;
+      if (detail && typeof detail.open === "boolean") {
+        setOpen(detail.open);
+      }
+    };
+
+    window.addEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    const mountedPanel = document.querySelector<HTMLElement>(
+      ".agent-sidebar-panel[data-agent-sidebar-state='open']",
+    );
+    setOpen(Boolean(mountedPanel));
+
+    return () => {
+      window.removeEventListener(SIDEBAR_STATE_CHANGE_EVENT, handleStateChange);
+    };
+  }, []);
+
+  return open;
+}
+
 const WORKFLOW_MENU_ITEMS: Array<{
   kind: WorkflowKind;
   labelKey: string;
@@ -536,6 +561,7 @@ export default function RecordingPage() {
   const commentsSectionRef = useRef<HTMLElement | null>(null);
 
   const [panel, setPanel] = useState<SidePanel | null>("transcript");
+  const globalAgentSidebarOpen = useGlobalAgentSidebarOpen();
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(startMs);
@@ -573,16 +599,18 @@ export default function RecordingPage() {
     const nextParams = new URLSearchParams(searchParams);
     nextParams.set("panel", "comments");
     setSearchParams(nextParams, { replace: true });
-    requestAnimationFrame(() => {
-      commentsSectionRef.current?.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+    if (isCompactLayout) {
+      requestAnimationFrame(() => {
+        commentsSectionRef.current?.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
       });
-    });
-  }, [searchParams, setSearchParams]);
+    }
+  }, [isCompactLayout, searchParams, setSearchParams]);
   const openAgentPanel = useCallback(() => {
-    openSidePanel("agent");
-  }, [openSidePanel]);
+    requestAgentSidebarOpen();
+  }, []);
   const transcriptKickedRef = useRef<string | null>(null);
   // When the recording lands in the processing state but never flips to
   // 'ready', stop spinning forever and surface an error banner so the user
@@ -929,17 +957,23 @@ export default function RecordingPage() {
   }, [browserDiagnostics, canEdit, panel]);
 
   useEffect(() => {
+    if (panelParam === "agent") {
+      setPanel("transcript");
+      requestAgentSidebarOpen();
+      return;
+    }
     if (panelParam === "comments") {
-      setPanel("comments");
-      requestAnimationFrame(() => {
-        commentsSectionRef.current?.scrollIntoView({ block: "start" });
-      });
+      setPanel(recording?.enableComments ? "comments" : "transcript");
+      if (isCompactLayout) {
+        requestAnimationFrame(() => {
+          commentsSectionRef.current?.scrollIntoView({ block: "start" });
+        });
+      }
       return;
     }
     if (
       (panelParam === "transcript" ||
         panelParam === "insights" ||
-        panelParam === "agent" ||
         panelParam === "debug" ||
         panelParam === "settings") &&
       (panelParam !== "settings" || canEdit) &&
@@ -947,7 +981,13 @@ export default function RecordingPage() {
     ) {
       setPanel(panelParam === "insights" ? "transcript" : panelParam);
     }
-  }, [browserDiagnostics, canEdit, panelParam]);
+  }, [
+    browserDiagnostics,
+    canEdit,
+    isCompactLayout,
+    panelParam,
+    recording?.enableComments,
+  ]);
 
   const builderCredits =
     (playerDataQ.data?.builderCredits as BuilderCreditsStatus | null) ?? null;
@@ -965,55 +1005,30 @@ export default function RecordingPage() {
   const visibleTitle = recording
     ? displayRecordingTitle(recording.title)
     : "Untitled Clip";
+  const recordingBreadcrumbItems: PageBreadcrumbItem[] = [
+    ...(recordingSpace
+      ? [
+          { label: t("navigation.spaces"), to: "/spaces" },
+          {
+            label: recordingSpace.name,
+            to: `/spaces/${recordingSpace.id}`,
+          },
+        ]
+      : [{ label: t("navigation.library"), to: "/library" }]),
+    ...(recordingFolder
+      ? [
+          {
+            label: recordingFolder.name,
+            to: recordingFolder.spaceId
+              ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
+              : `/library/folder/${recordingFolder.id}`,
+          },
+        ]
+      : []),
+    { label: visibleTitle },
+  ];
   const recordingBreadcrumb = (
-    <Breadcrumb aria-label={t("navigation.library")} className="min-w-0">
-      <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="shrink-0">
-          <BreadcrumbLink asChild>
-            <NavLink to="/library">{t("navigation.library")}</NavLink>
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-        {recordingSpace ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={`/spaces/${recordingSpace.id}`}
-                  className="truncate"
-                >
-                  {recordingSpace.name}
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        {recordingFolder ? (
-          <>
-            <BreadcrumbSeparator className="shrink-0" />
-            <BreadcrumbItem className="min-w-0">
-              <BreadcrumbLink asChild>
-                <NavLink
-                  to={
-                    recordingFolder.spaceId
-                      ? `/spaces/${recordingFolder.spaceId}/folder/${recordingFolder.id}`
-                      : `/library/folder/${recordingFolder.id}`
-                  }
-                  className="flex min-w-0 items-center gap-1.5"
-                >
-                  <IconFolder className="size-4 shrink-0" />
-                  <span className="truncate">{recordingFolder.name}</span>
-                </NavLink>
-              </BreadcrumbLink>
-            </BreadcrumbItem>
-          </>
-        ) : null}
-        <BreadcrumbSeparator className="shrink-0" />
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate">{visibleTitle}</BreadcrumbPage>
-        </BreadcrumbItem>
-      </BreadcrumbList>
-    </Breadcrumb>
+    <PageBreadcrumb items={recordingBreadcrumbItems} />
   );
   // Attribution `via` must never point at someone who isn't the owner, so it
   // is only tagged when the viewer is the owner (same rule as the share dialog).
@@ -1925,7 +1940,7 @@ export default function RecordingPage() {
 
   const renderPanelTabs = () => (
     <ViewerTabsList className="min-w-0 shrink-0 bg-sidebar">
-      {isCompactLayout ? (
+      {recording.enableComments ? (
         <ViewerTabsTrigger value="comments">
           {t("playerSettings.comments")}
         </ViewerTabsTrigger>
@@ -1933,9 +1948,6 @@ export default function RecordingPage() {
       <ViewerTabsTrigger value="transcript">
         {t("recordingPage.transcript")}
       </ViewerTabsTrigger>
-      <ViewerTabsTrigger value="agent">
-        {t("recordingPage.agent")}
-      </ViewerTabsTrigger>
       {browserDiagnostics ? (
         <ViewerTabsTrigger value="debug">
           <span className="flex items-center justify-center gap-1.5">
@@ -1964,7 +1976,7 @@ export default function RecordingPage() {
         "scroll-mt-14",
         compact
           ? "flex min-h-0 flex-1 flex-col px-4 pb-5 pt-4"
-          : "flex min-h-0 flex-1 flex-col px-1 pb-5 pt-4",
+          : "flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3",
       )}
     >
       {!compact ? (
@@ -1992,9 +2004,18 @@ export default function RecordingPage() {
     </section>
   );
 
-  const renderSidePanel = () => {
+  const renderSidePanel = (compact = false) => {
     return (
       <>
+        {recording.enableComments ? (
+          <TabsContent
+            forceMount
+            value="comments"
+            className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+          >
+            {renderCommentsSection(compact)}
+          </TabsContent>
+        ) : null}
         <TabsContent
           value="transcript"
           className="mt-0 flex-1 min-h-0 data-[state=inactive]:hidden"
@@ -2035,26 +2056,6 @@ export default function RecordingPage() {
             isRegenerating={requestTranscript.isPending}
           />
         </TabsContent>
-        <TabsContent
-          value="agent"
-          className="mt-0 flex min-h-0 flex-1 flex-col overflow-y-auto data-[state=inactive]:hidden"
-        >
-          <AgentPanel
-            emptyStateText={t("recordingPage.askAboutClip")}
-            dynamicSuggestions={false}
-            scope={{ type: "recording", id: recording.id }}
-            missingApiKeySetupLayout="sidebar"
-            suggestions={[
-              t("recordingPage.summarizeClip"),
-              t("recordingPage.findKeyMoments"),
-              t("recordingPage.listFollowUpActions"),
-              t("recordingPage.draftQuestions"),
-            ]}
-            browserTabId={browserTabId}
-            showHeader={false}
-            showTabBar={false}
-          />
-        </TabsContent>
         {browserDiagnostics ? (
           <TabsContent
             value="debug"
@@ -2392,7 +2393,7 @@ export default function RecordingPage() {
           }
           openSidePanel(value as ToolbarPanel);
         }}
-        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden [&_.agent-composer-root]:!border-0 [&_.agent-composer-root]:!bg-background"
+        className="clips-recording-view grid h-full min-h-0 w-full max-w-full grid-cols-1 overflow-x-hidden bg-background lg:grid-cols-[minmax(0,1fr)_auto] lg:grid-rows-[minmax(0,1fr)] lg:overflow-hidden"
       >
         {/* Main video column */}
         <div className="contents">
@@ -2407,11 +2408,11 @@ export default function RecordingPage() {
             {editing && canUseNativeEditor ? (
               <EditorLayout recordingId={recording.id} className="flex-1" />
             ) : (
-              <div className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[calc(177.778dvh-35.556rem)]">
+              <div className="mx-auto flex min-h-0 w-full flex-1 flex-col gap-0 sm:gap-4 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))]">
                 <div className="flex w-full shrink-0 justify-center">
-                  {/* A 16:9 width derived from 100dvh - 20rem keeps the
-                    recording context and start of the discussion in view on
-                    displays that are both very wide and very tall. */}
+                  {/* Let the viewer grow on wide displays without pushing the
+                    discussion below the first scrollable viewport. The comments
+                    list owns the desktop scroll so the player stays in context. */}
                   <div className="relative aspect-video w-full overflow-hidden bg-card shadow-sm ring-1 ring-border sm:rounded-2xl">
                     <VideoPlayer
                       ref={playerRef}
@@ -2479,7 +2480,7 @@ export default function RecordingPage() {
                               onDraftChange={setCommentDraft}
                               onClose={() => setCommentOpen(false)}
                               onAdded={() => {
-                                setPanel("comments");
+                                if (isCompactLayout) setPanel("comments");
                                 void playerDataQ.refetch();
                               }}
                             />
@@ -2588,26 +2589,22 @@ export default function RecordingPage() {
                   </div>
                 </div>
 
-                {isCompactLayout ? (
+                {isCompactLayout && !globalAgentSidebarOpen ? (
                   <RecordingSidePanel
                     id="clip-activity-panel"
                     className="mt-2 lg:hidden"
                     tabs={renderPanelTabs()}
                   >
-                    {panel === "comments"
-                      ? renderCommentsSection(true)
-                      : renderSidePanel()}
+                    {renderSidePanel(true)}
                   </RecordingSidePanel>
-                ) : (
-                  renderCommentsSection()
-                )}
+                ) : null}
               </div>
             )}
           </div>
         </div>
 
         {/* Side panel */}
-        {!editing && !isCompactLayout && panel && panel !== "comments" ? (
+        {!editing && !isCompactLayout && !globalAgentSidebarOpen && panel ? (
           <RecordingSidePanel
             className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:w-[360px] xl:w-[420px] 2xl:w-[440px]"
             tabs={renderPanelTabs()}

package/corpus/templates/clips/app/routes/_app.spaces.$spaceId.folder.$folderId.tsx

@@ -3,7 +3,8 @@ import { useMemo } from "react";
 import { useParams } from "react-router";
 
 import { LibraryGrid } from "@/components/library/library-grid";
-import { useFolders } from "@/hooks/use-library";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
+import { useFolders, useOrganizations, useSpaces } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -17,7 +18,18 @@ export default function SpaceFolderRoute() {
     folderId: string;
   }>();
 
-  const { data: folders } = useFolders({ spaceId });
+  const { data: organizations } = useOrganizations();
+  const currentOrganizationId =
+    organizations?.currentId ?? organizations?.organizations?.[0]?.id;
+  const { data: spacesData } = useSpaces(currentOrganizationId);
+  const space = (spacesData?.spaces ?? []).find(
+    (candidate: any) => candidate.id === spaceId,
+  );
+
+  const { data: folders } = useFolders({
+    organizationId: currentOrganizationId,
+    spaceId,
+  });
   const folder = useMemo(
     () =>
       (folders?.folders ?? []).find((f: any) => f.id === folderId) as
@@ -33,6 +45,17 @@ export default function SpaceFolderRoute() {
       folderId={folderId}
       emptyKind="folder"
       title={folder?.name ?? t("navigation.folder")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        {
+          label: space?.name ?? t("navigation.space"),
+          to: `/spaces/${spaceId}`,
+        },
+        { label: folder?.name ?? t("navigation.folder") },
+      ]}
+      extraActions={
+        <LibraryPrimaryActions folderId={folderId} spaceId={spaceId} />
+      }
     />
   );
 }

package/corpus/templates/clips/app/routes/_app.spaces.$spaceId.tsx

@@ -1,10 +1,9 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { useMemo } from "react";
 import { useParams } from "react-router";
 
-import { FolderTree, type FolderNode } from "@/components/library/folder-tree";
 import { LibraryGrid } from "@/components/library/library-grid";
-import { useFolders, useSpaces, useOrganizations } from "@/hooks/use-library";
+import { LibraryPrimaryActions } from "@/components/library/library-primary-actions";
+import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
 
 export function meta() {
@@ -20,64 +19,18 @@ export default function SpaceRoute() {
   const { data: spacesData } = useSpaces(currentOrganizationId);
   const space = (spacesData?.spaces ?? []).find((s: any) => s.id === spaceId);
 
-  const { data: folders } = useFolders({
-    organizationId: currentOrganizationId,
-    spaceId,
-  });
-  const folderList: FolderNode[] = useMemo(
-    () =>
-      (folders?.folders ?? [])
-        .filter((f: any) => f.spaceId === spaceId)
-        .map((f: any) => ({
-          id: f.id,
-          parentId: f.parentId ?? null,
-          spaceId: f.spaceId ?? null,
-          name: f.name,
-        })),
-    [folders, spaceId],
-  );
-
   return (
-    <div className="flex flex-1 min-h-0">
-      {/* Space-scoped folder rail */}
-      <aside className="hidden w-[220px] shrink-0 flex-col border-r border-border bg-sidebar p-2 lg:flex">
-        <div className="px-2 py-1.5">
-          <div className="flex items-center gap-2">
-            <div
-              className="h-5 w-5 rounded flex items-center justify-center text-[10px] text-white"
-              style={{ background: (space as any)?.color ?? "#18181B" }}
-            >
-              {(space as any)?.iconEmoji ??
-                (space as any)?.name?.slice(0, 1).toUpperCase() ??
-                t("navigation.space").slice(0, 1)}
-            </div>
-            <span className="text-xs font-semibold text-foreground truncate">
-              {(space as any)?.name ?? t("navigation.space")}
-            </span>
-          </div>
-        </div>
-        <div className="mt-2">
-          <div className="px-2 pb-1 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">
-            {t("navigation.folders")}
-          </div>
-          <FolderTree
-            folders={folderList}
-            organizationId={currentOrganizationId}
-            spaceId={spaceId ?? null}
-            buildPath={(id) => `/spaces/${spaceId}/folder/${id}`}
-          />
-        </div>
-      </aside>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        <LibraryGrid
-          view="space"
-          spaceId={spaceId}
-          folderId={null}
-          emptyKind="space"
-          title={(space as any)?.name ?? t("navigation.space")}
-        />
-      </div>
-    </div>
+    <LibraryGrid
+      view="space"
+      spaceId={spaceId}
+      folderId={null}
+      emptyKind="space"
+      title={(space as any)?.name ?? t("navigation.space")}
+      breadcrumbItems={[
+        { label: t("navigation.spaces"), to: "/spaces" },
+        { label: (space as any)?.name ?? t("navigation.space") },
+      ]}
+      extraActions={<LibraryPrimaryActions spaceId={spaceId} />}
+    />
   );
 }

package/corpus/templates/clips/app/routes/_app.spaces._index.tsx

@@ -1,24 +1,20 @@
 import { useT } from "@agent-native/core/client/i18n";
 import { useOrgRole } from "@agent-native/core/client/org";
 import { IconPlus, IconUsersGroup } from "@tabler/icons-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CreateSpaceDialog } from "@/components/library/create-space-dialog";
+import { AppEmptyState } from "@/components/library/empty-state";
 import {
   PageBreadcrumb,
   PageHeader,
   PageHeaderPrimaryAction,
 } from "@/components/library/page-header";
 import { SpaceCard, type SpaceCardData } from "@/components/library/space-card";
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/components/ui/empty";
+import { Button } from "@/components/ui/button";
 import { useSpaces, useOrganizations } from "@/hooks/use-library";
 import enMessages from "@/i18n/en-US";
+import { OPEN_CREATE_SPACE_EVENT } from "@/lib/command-events";
 
 export function meta() {
   return [{ title: enMessages.clipsFinalRaw.spacesPageTitle }];
@@ -44,6 +40,18 @@ export default function SpacesIndexRoute() {
   const currentOrganizationId =
     organizations?.currentId ?? organizations?.organizations?.[0]?.id;
   const { data, isLoading, refetch } = useSpaces(currentOrganizationId);
+  const createSpaceLabel = t("createSpaceDialog.newSpace");
+
+  useEffect(() => {
+    if (!canManageOrg) return;
+    const handleOpenCreateSpace = () => setCreateOpen(true);
+    window.addEventListener(OPEN_CREATE_SPACE_EVENT, handleOpenCreateSpace);
+    return () =>
+      window.removeEventListener(
+        OPEN_CREATE_SPACE_EVENT,
+        handleOpenCreateSpace,
+      );
+  }, [canManageOrg]);
 
   const spaces: SpaceCardData[] = (data?.spaces ?? []).map((s: any) => ({
     id: s.id,
@@ -58,12 +66,12 @@ export default function SpacesIndexRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("navigation.spaces")} />
-        {canManageOrg && (
+        <PageBreadcrumb items={[{ label: t("navigation.spaces") }]} />
+        {canManageOrg && spaces.length > 0 && (
           <div className="ml-auto">
             <PageHeaderPrimaryAction onClick={() => setCreateOpen(true)}>
               <IconPlus />
-              {t("createSpaceDialog.newSpace")}
+              {createSpaceLabel}
             </PageHeaderPrimaryAction>
           </div>
         )}
@@ -77,19 +85,21 @@ export default function SpacesIndexRoute() {
             ))}
           </div>
         ) : spaces.length === 0 ? (
-          <Empty className="min-h-full rounded-none">
-            <EmptyHeader>
-              <EmptyMedia variant="icon">
-                <IconUsersGroup />
-              </EmptyMedia>
-              <EmptyTitle>{t("navigation.noSpaces")}</EmptyTitle>
-              {canManageOrg ? (
-                <EmptyDescription>
-                  {t("createSpaceDialog.description")}
-                </EmptyDescription>
-              ) : null}
-            </EmptyHeader>
-          </Empty>
+          <AppEmptyState
+            icon={IconUsersGroup}
+            title={t("navigation.noSpaces")}
+            description={
+              canManageOrg ? t("createSpaceDialog.description") : undefined
+            }
+            content={
+              canManageOrg ? (
+                <Button onClick={() => setCreateOpen(true)} size="sm">
+                  <IconPlus />
+                  {createSpaceLabel}
+                </Button>
+              ) : null
+            }
+          />
         ) : (
           <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]">
             {spaces.map((s) => (

package/corpus/templates/clips/app/routes/_app.trash.tsx

@@ -190,7 +190,7 @@ export default function TrashRoute() {
   return (
     <div className="flex flex-1 flex-col min-h-0">
       <PageHeader>
-        <PageBreadcrumb label={t("trashRoute.title")} />
+        <PageBreadcrumb items={[{ label: t("trashRoute.title") }]} />
         <div className="ms-auto flex items-center gap-2">
           {selectedIds.length > 0 && (
             <>

package/corpus/templates/clips/app/routes/_app.tsx

@@ -1,7 +1,7 @@
 import { useExperiment } from "@agent-native/core/client/experiments";
 import { CLIPS_MEETINGS, CLIPS_WISPRFLOW } from "@shared/experiments";
 import { useEffect, useRef } from "react";
-import { Outlet, useLocation, useNavigate } from "react-router";
+import { Outlet, useNavigate } from "react-router";
 
 import { LibraryLayout } from "@/components/library/library-layout";
 import { useAutoTitleBridge } from "@/hooks/use-auto-title";
@@ -71,8 +71,6 @@ function useGlobalSequenceShortcuts() {
 // Pathless layout route — keeps the left sidebar + agent chat mounted across
 // every library/space/archive/trash navigation. See client-side-routing skill.
 export default function AppLayoutRoute() {
-  const location = useLocation();
-  const recordingWorkspace = /^\/r\/[^/]+\/?$/.test(location.pathname);
   // Watch for server-queued title delegations and dispatch them to the agent
   // chat. `sendToAgentChat` is browser-only so the server can't call it
   // directly; this bridge is how `request-transcript`'s "auto-title when the
@@ -83,7 +81,7 @@ export default function AppLayoutRoute() {
   useGlobalSequenceShortcuts();
 
   return (
-    <LibraryLayout showAgentSidebar={!recordingWorkspace}>
+    <LibraryLayout>
       <Outlet />
     </LibraryLayout>
   );