@agent-native/core 0.88.0 → 0.90.1

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

@@ -10,34 +10,6 @@ import {
   useChangeVersions,
   useT,
 } from "@agent-native/core/client";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@agent-native/toolkit/ui/dropdown-menu";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-} from "@agent-native/toolkit/ui/sheet";
-import { Spinner } from "@agent-native/toolkit/ui/spinner";
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-} from "@agent-native/toolkit/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import {
   BUILDER_CREDITS_UPGRADE_URL,
   type BuilderCreditsStatus,
@@ -58,7 +30,6 @@ import {
   IconFileText,
   IconSparkles,
   IconExternalLink,
-  IconMessageDots,
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -83,6 +54,23 @@ import {
   type VideoPlayerHandle,
 } from "@/components/player/video-player";
 import { StorageSetupCard } from "@/components/recorder/storage-setup-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { isDefaultTitle, useAutoTitleBridge } from "@/hooks/use-auto-title";
 import { usePlayerShortcuts } from "@/hooks/use-player-shortcuts";
 import { useViewTracking } from "@/hooks/use-view-tracking";
@@ -219,7 +207,6 @@ export default function RecordingPage() {
   const playerRef = useRef<VideoPlayerHandle | null>(null);
 
   const [panel, setPanel] = useState<SidePanel>("agent");
-  const [sidePanelOpen, setSidePanelOpen] = useState(false);
   const [theaterMode, setTheaterMode] = useState(false);
   const [editing, setEditing] = useState(false);
   const [currentMs, setCurrentMs] = useState(0);
@@ -266,7 +253,15 @@ export default function RecordingPage() {
       panelParam === "settings"
     ) {
       setPanel(panelParam);
-      if (isCompactLayout) setSidePanelOpen(true);
+    }
+  }, [panelParam]);
+
+  const appliedCompactDefaultRef = useRef(false);
+  useEffect(() => {
+    if (appliedCompactDefaultRef.current) return;
+    if (!panelParam && isCompactLayout) {
+      appliedCompactDefaultRef.current = true;
+      setPanel("comments");
     }
   }, [isCompactLayout, panelParam]);
 
@@ -538,10 +533,6 @@ export default function RecordingPage() {
     if (!canUseNativeEditor && editing) setEditing(false);
   }, [canUseNativeEditor, editing]);
 
-  useEffect(() => {
-    if (editing || !isCompactLayout) setSidePanelOpen(false);
-  }, [editing, isCompactLayout]);
-
   useEffect(() => {
     if (!recording) return;
     document.title = isDefaultTitle(recording.title)
@@ -778,167 +769,178 @@ export default function RecordingPage() {
     );
   }
 
-  const renderSidePanel = (compact = false) => (
-    <Tabs
-      value={panel}
-      onValueChange={(v) => setPanel(v as SidePanel)}
-      className={cn("flex h-full flex-col", compact && "pt-8")}
-    >
-      <TabsList
-        className={cn(
-          "mx-3 mt-3 grid w-auto",
-          canEdit ? "grid-cols-5" : "grid-cols-4",
-        )}
-      >
-        <TabsTrigger value="agent" className="min-w-0 px-2 text-xs">
-          {t("recordingPage.agent")}
-        </TabsTrigger>
-        <TabsTrigger value="comments" className="min-w-0 px-2 text-xs">
-          {t("recordingPage.activity")}
-        </TabsTrigger>
-        <TabsTrigger value="transcript" className="min-w-0 px-2 text-xs">
-          {t("recordingPage.transcript")}
-        </TabsTrigger>
-        <TabsTrigger value="insights" className="min-w-0 px-2 text-xs">
-          {t("recordingPage.insights")}
-        </TabsTrigger>
-        {canEdit ? (
-          <TabsTrigger value="settings" className="min-w-0 px-2 text-xs">
-            {t("recordingPage.settings")}
-          </TabsTrigger>
-        ) : null}
-      </TabsList>
+  const renderSidePanel = (variant: "desktop" | "inline" = "desktop") => {
+    const compact = variant === "inline";
+    const tabTriggerClass = "min-w-0 px-2 text-xs";
+    const trigger = (value: SidePanel, label: string) => (
+      <TabsTrigger key={value} value={value} className={tabTriggerClass}>
+        {label}
+      </TabsTrigger>
+    );
+    const triggers = compact
+      ? [
+          trigger("comments", t("recordingPage.activity")),
+          trigger("transcript", t("recordingPage.transcript")),
+          trigger("agent", t("recordingPage.agent")),
+          trigger("insights", t("recordingPage.insights")),
+          canEdit ? trigger("settings", t("recordingPage.settings")) : null,
+        ]
+      : [
+          trigger("agent", t("recordingPage.agent")),
+          trigger("comments", t("recordingPage.activity")),
+          trigger("transcript", t("recordingPage.transcript")),
+          trigger("insights", t("recordingPage.insights")),
+          canEdit ? trigger("settings", t("recordingPage.settings")) : null,
+        ];
 
-      <TabsContent
-        value="agent"
-        className="mt-0 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
-      >
-        <AgentPanel
-          browserTabId={browserTabId}
-          scope={recordingScope}
-          emptyStateText={t("recordingPage.askAboutClip")}
-          dynamicSuggestions={false}
-          chatNotice={
-            generatedWorkflow ? (
-              <GeneratedWorkflowNotice workflow={generatedWorkflow} />
-            ) : null
-          }
-          suggestions={
-            canEdit
-              ? [
-                  t("recordingPage.summarizeClip"),
-                  t("recordingPage.generateChapters"),
-                  t("recordingPage.findActionItems"),
-                  t("recordingPage.draftRecap"),
-                ]
-              : [
-                  t("recordingPage.summarizeClip"),
-                  t("recordingPage.findKeyMoments"),
-                  t("recordingPage.listFollowUpActions"),
-                  t("recordingPage.draftQuestions"),
-                ]
-          }
-        />
-      </TabsContent>
-      <TabsContent
-        value="transcript"
-        className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
+    return (
+      <Tabs
+        value={panel}
+        onValueChange={(v) => setPanel(v as SidePanel)}
+        className="flex h-full flex-col"
       >
-        <TranscriptPanel
-          segments={transcriptSegments}
-          fullText={transcriptFullText}
-          durationMs={recording.durationMs}
-          currentMs={currentMs}
-          onSeek={(ms) => playerRef.current?.seek(ms)}
-          status={transcriptStatus}
-          failureReason={transcriptFailureReason}
-          cleanup={transcriptCleanup}
-          recordingTitle={recording.title}
-          onRetry={() => {
-            // Force a fresh transcript job, then let polling swap the panel
-            // back to the pending state while it runs.
-            fetch(
-              agentNativePath("/_agent-native/actions/request-transcript"),
-              {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({
-                  recordingId: recording.id,
-                  force: true,
-                }),
-              },
-            )
-              .then((res) => {
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-              })
-              .catch((err) =>
-                toast.error(
-                  t("recordingPage.retryFailed", {
-                    message: err?.message ?? t("recordingPage.networkError"),
+        <TabsList
+          className={cn(
+            "mx-3 mt-3 grid w-auto",
+            canEdit ? "grid-cols-5" : "grid-cols-4",
+          )}
+        >
+          {triggers}
+        </TabsList>
+
+        <TabsContent
+          value="agent"
+          className="mt-0 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+        >
+          <AgentPanel
+            browserTabId={browserTabId}
+            scope={recordingScope}
+            emptyStateText={t("recordingPage.askAboutClip")}
+            dynamicSuggestions={false}
+            chatNotice={
+              generatedWorkflow ? (
+                <GeneratedWorkflowNotice workflow={generatedWorkflow} />
+              ) : null
+            }
+            suggestions={
+              canEdit
+                ? [
+                    t("recordingPage.summarizeClip"),
+                    t("recordingPage.generateChapters"),
+                    t("recordingPage.findActionItems"),
+                    t("recordingPage.draftRecap"),
+                  ]
+                : [
+                    t("recordingPage.summarizeClip"),
+                    t("recordingPage.findKeyMoments"),
+                    t("recordingPage.listFollowUpActions"),
+                    t("recordingPage.draftQuestions"),
+                  ]
+            }
+          />
+        </TabsContent>
+        <TabsContent
+          value="transcript"
+          className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
+        >
+          <TranscriptPanel
+            segments={transcriptSegments}
+            fullText={transcriptFullText}
+            durationMs={recording.durationMs}
+            currentMs={currentMs}
+            onSeek={(ms) => playerRef.current?.seek(ms)}
+            status={transcriptStatus}
+            failureReason={transcriptFailureReason}
+            cleanup={transcriptCleanup}
+            recordingTitle={recording.title}
+            onRetry={() => {
+              // Force a fresh transcript job, then let polling swap the panel
+              // back to the pending state while it runs.
+              fetch(
+                agentNativePath("/_agent-native/actions/request-transcript"),
+                {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({
+                    recordingId: recording.id,
+                    force: true,
                   }),
-                ),
+                },
               )
-              .finally(() => playerDataQ.refetch());
-          }}
-        />
-      </TabsContent>
-      <TabsContent
-        value="comments"
-        className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
-      >
-        <CommentsPanel
-          recordingId={recording.id}
-          comments={comments}
-          currentMs={currentMs}
-          currentUserEmail={session?.email}
-          enableComments={recording.enableComments}
-          onSeek={(ms) => playerRef.current?.seek(ms)}
-          queryKey={[
-            "action",
-            "get-recording-player-data",
-            { recordingId: recordingId ?? "" },
-          ]}
-        />
-      </TabsContent>
-      <TabsContent
-        value="insights"
-        className="flex-1 min-h-0 mt-3 overflow-y-auto data-[state=inactive]:hidden"
-      >
-        {canEdit ? (
-          <InsightsPanel
-            recordingId={recording.id}
-            durationMs={recording.durationMs}
+                .then((res) => {
+                  if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                })
+                .catch((err) =>
+                  toast.error(
+                    t("recordingPage.retryFailed", {
+                      message: err?.message ?? t("recordingPage.networkError"),
+                    }),
+                  ),
+                )
+                .finally(() => playerDataQ.refetch());
+            }}
           />
-        ) : (
-          <InsightsUnavailableState />
-        )}
-      </TabsContent>
-      {canEdit ? (
+        </TabsContent>
         <TabsContent
-          value="settings"
-          className="mt-3 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+          value="comments"
+          className="flex-1 min-h-0 mt-3 data-[state=inactive]:hidden"
         >
-          <SettingsPanel
-            recording={recording}
-            visibility={recording.visibility}
-            ctas={ctas}
-            onClose={() => setPanel("agent")}
-            onRefetch={() => playerDataQ.refetch()}
-            showHeader={false}
+          <CommentsPanel
+            recordingId={recording.id}
+            comments={comments}
+            currentMs={currentMs}
+            currentUserEmail={session?.email}
+            enableComments={recording.enableComments}
+            onSeek={(ms) => playerRef.current?.seek(ms)}
+            queryKey={[
+              "action",
+              "get-recording-player-data",
+              { recordingId: recordingId ?? "" },
+            ]}
+            presentation={compact ? "share" : "default"}
           />
         </TabsContent>
-      ) : null}
-    </Tabs>
-  );
+        <TabsContent
+          value="insights"
+          className="flex-1 min-h-0 mt-3 overflow-y-auto data-[state=inactive]:hidden"
+        >
+          {canEdit ? (
+            <InsightsPanel
+              recordingId={recording.id}
+              durationMs={recording.durationMs}
+            />
+          ) : (
+            <InsightsUnavailableState />
+          )}
+        </TabsContent>
+        {canEdit ? (
+          <TabsContent
+            value="settings"
+            className="mt-3 flex flex-1 min-h-0 flex-col data-[state=inactive]:hidden"
+          >
+            <SettingsPanel
+              recording={recording}
+              visibility={recording.visibility}
+              ctas={ctas}
+              onClose={() => setPanel("agent")}
+              onRefetch={() => playerDataQ.refetch()}
+              showHeader={false}
+            />
+          </TabsContent>
+        ) : null}
+      </Tabs>
+    );
+  };
 
   return (
-    <div className="flex min-h-screen w-full bg-background xl:h-screen xl:overflow-hidden">
+    <div className="flex min-h-screen w-full max-w-full flex-col overflow-x-hidden bg-background xl:h-screen xl:flex-row xl:overflow-hidden">
       {/* Main video column */}
       <div className="flex w-full min-w-0 flex-col xl:flex-1">
-        <header className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+        <header className="flex min-w-0 shrink-0 items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
           <Button
             variant="ghost"
             size="icon"
+            className="shrink-0"
             onClick={() => navigate("/")}
             aria-label={t("recordingPage.back")}
           >
@@ -970,7 +972,7 @@ export default function RecordingPage() {
             <Button
               variant={editing ? "secondary" : "outline"}
               size="sm"
-              className="gap-1.5"
+              className={cn("gap-1.5", !editing && "hidden sm:inline-flex")}
               onClick={() => setEditing((v) => !v)}
             >
               <IconScissors className="h-4 w-4" />
@@ -981,7 +983,11 @@ export default function RecordingPage() {
           {canEdit ? (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="sm" className="gap-1.5">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="hidden gap-1.5 sm:inline-flex"
+                >
                   {t("recordingPage.aiTools")}
                   <IconChevronDown className="h-4 w-4" />
                 </Button>
@@ -1084,22 +1090,6 @@ export default function RecordingPage() {
             </DropdownMenu>
           ) : null}
 
-          {!editing ? (
-            <Button
-              variant="outline"
-              size="sm"
-              className="gap-1.5 xl:hidden"
-              onClick={() => {
-                setPanel("agent");
-                setSidePanelOpen(true);
-              }}
-              aria-label={t("recordingPage.askAboutClip")}
-            >
-              <IconMessageDots className="h-4 w-4" />
-              <span>{t("recordingPage.agent")}</span>
-            </Button>
-          ) : null}
-
           <ShareRecordingPopover
             recordingId={recording.id}
             recordingTitle={recording.title}
@@ -1109,7 +1099,7 @@ export default function RecordingPage() {
             hasPassword={Boolean(recording.hasPassword)}
           >
             <Button
-              className="bg-primary hover:bg-primary/90 text-primary-foreground gap-1.5"
+              className="shrink-0 gap-1.5 bg-primary text-primary-foreground hover:bg-primary/90"
               size="sm"
             >
               <IconShare3 className="h-4 w-4" />
@@ -1136,7 +1126,7 @@ export default function RecordingPage() {
             "flex flex-col",
             editing && canUseNativeEditor
               ? "min-h-0 flex-1 overflow-hidden"
-              : "gap-4 p-4 xl:min-h-0 xl:flex-1 xl:overflow-hidden",
+              : "gap-0 sm:gap-4 sm:p-4 xl:min-h-0 xl:flex-1 xl:overflow-hidden",
           )}
         >
           {editing && canUseNativeEditor ? (
@@ -1148,6 +1138,7 @@ export default function RecordingPage() {
                   ref={playerRef}
                   recordingId={recording.id}
                   videoUrl={recording.videoUrl}
+                  videoFormat={recording.videoFormat}
                   embedProvider={isLoomEmbedBacked ? "loom" : null}
                   durationMs={recording.durationMs}
                   editsJson={recording.editsJson}
@@ -1166,7 +1157,7 @@ export default function RecordingPage() {
                   cta={firstCta}
                   onCtaClick={() => tracking.reportCtaClick()}
                   onTimeUpdate={(ms) => setCurrentMs(ms)}
-                  className="h-full w-full"
+                  className="h-full w-full rounded-none sm:rounded-xl"
                 />
                 {commentOpen ? (
                   <TimestampedCommentBar
@@ -1175,7 +1166,6 @@ export default function RecordingPage() {
                     onClose={() => setCommentOpen(false)}
                     onAdded={() => {
                       setPanel("comments");
-                      if (isCompactLayout) setSidePanelOpen(true);
                       void playerDataQ.refetch();
                     }}
                   />
@@ -1183,8 +1173,26 @@ export default function RecordingPage() {
               </div>
 
               {/* Title + reactions row */}
-              <div className="flex items-start gap-3 shrink-0">
-                <div className="flex-1 min-w-0">
+              <div className="flex shrink-0 flex-col gap-3 px-4 py-4 sm:flex-row sm:items-start sm:px-0 sm:py-0">
+                <div className="min-w-0 flex-1">
+                  <div className="mb-3 sm:hidden">
+                    <EditableRecordingTitle
+                      recordingId={recording.id}
+                      title={recording.title}
+                      canEdit={canEdit}
+                      displayTitle={visibleTitle}
+                      showPendingSkeleton={showTitleSkeleton}
+                      className="text-2xl font-semibold leading-tight"
+                      inputClassName="h-9 text-2xl font-semibold"
+                      skeletonClassName="h-7 w-72 max-w-full"
+                    />
+                    <p className="mt-1 truncate text-sm text-muted-foreground">
+                      {recording.ownerEmail}
+                      {recording.visibility !== "private" ? (
+                        <> · {capitalize(recording.visibility)}</>
+                      ) : null}
+                    </p>
+                  </div>
                   {/* G9 — "From meeting" badge surfaced when this recording is
                       attached to a meeting (server fix 6 attaches `meeting`). */}
                   {playerDataQ.data?.meeting ? (
@@ -1202,44 +1210,56 @@ export default function RecordingPage() {
                       </span>
                     </NavLink>
                   ) : null}
-                  <TimestampedCommentButton
-                    enableComments={recording.enableComments}
-                    onOpen={() => {
-                      setCommentAtMs(resolvePlaybackMs());
-                      setCommentOpen(true);
-                    }}
-                  />
+                  <div className="flex flex-wrap items-center gap-2">
+                    <TimestampedCommentButton
+                      enableComments={recording.enableComments}
+                      className="shrink-0"
+                      onOpen={() => {
+                        if (isCompactLayout) {
+                          setPanel("comments");
+                          requestAnimationFrame(() => {
+                            document
+                              .getElementById("clip-activity-panel")
+                              ?.scrollIntoView({ block: "start" });
+                          });
+                          return;
+                        }
+                        setCommentAtMs(resolvePlaybackMs());
+                        setCommentOpen(true);
+                      }}
+                    />
+                    {recording.enableReactions ? (
+                      <ReactionsTray
+                        disabled={!recording.enableReactions}
+                        onReact={(emoji) => {
+                          tracking.reportReaction(emoji);
+                          const liveMs = resolvePlaybackMs();
+                          fetch(
+                            agentNativePath(
+                              "/_agent-native/actions/react-to-recording",
+                            ),
+                            {
+                              method: "POST",
+                              headers: { "Content-Type": "application/json" },
+                              body: JSON.stringify({
+                                recordingId: recording.id,
+                                emoji,
+                                videoTimestampMs: liveMs,
+                              }),
+                            },
+                          )
+                            .then(() => playerDataQ.refetch())
+                            .catch(() => {});
+                        }}
+                      />
+                    ) : null}
+                  </div>
                   {recording.description ? (
-                    <p className="text-sm text-muted-foreground line-clamp-2">
+                    <p className="mt-3 line-clamp-2 text-sm text-muted-foreground">
                       {recording.description}
                     </p>
                   ) : null}
                 </div>
-                {recording.enableReactions ? (
-                  <ReactionsTray
-                    disabled={!recording.enableReactions}
-                    onReact={(emoji) => {
-                      tracking.reportReaction(emoji);
-                      const liveMs = resolvePlaybackMs();
-                      fetch(
-                        agentNativePath(
-                          "/_agent-native/actions/react-to-recording",
-                        ),
-                        {
-                          method: "POST",
-                          headers: { "Content-Type": "application/json" },
-                          body: JSON.stringify({
-                            recordingId: recording.id,
-                            emoji,
-                            videoTimestampMs: liveMs,
-                          }),
-                        },
-                      )
-                        .then(() => playerDataQ.refetch())
-                        .catch(() => {});
-                    }}
-                  />
-                ) : null}
               </div>
             </>
           )}
@@ -1250,20 +1270,12 @@ export default function RecordingPage() {
       {!editing ? (
         <>
           {isCompactLayout ? (
-            <Sheet open={sidePanelOpen} onOpenChange={setSidePanelOpen}>
-              <SheetContent
-                side="right"
-                className="flex h-full w-[calc(100vw-24px)] max-w-[420px] flex-col gap-0 p-0 sm:max-w-[420px]"
-              >
-                <SheetTitle className="sr-only">
-                  {t("recordingPage.details")}
-                </SheetTitle>
-                <SheetDescription className="sr-only">
-                  {t("recordingPage.askAboutClip")}
-                </SheetDescription>
-                {renderSidePanel(true)}
-              </SheetContent>
-            </Sheet>
+            <aside
+              id="clip-activity-panel"
+              className="flex min-h-[420px] w-full min-w-0 flex-col border-t border-border bg-background xl:hidden"
+            >
+              {renderSidePanel("inline")}
+            </aside>
           ) : null}
           {!isCompactLayout ? (
             <aside className="hidden w-[380px] shrink-0 flex-col border-s border-border bg-background xl:flex">