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

package/corpus/templates/clips/app/routes/bug-report.tsx

@@ -1,30 +1,13 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
-import { useT } from "@agent-native/core/client/i18n";
 import {
   BUG_REPORT_POPUP_RESPONSE_HEADERS,
-  bugReportContextToSearchParams,
   isBugReportSubmissionMessage,
   parseBugReportContext,
-  type BugReportContext,
-  type BugReportSeverity,
 } from "@shared/bug-report";
-import { IconBug, IconShieldCheck } from "@tabler/icons-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useLocation, useOutlet } from "react-router";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Textarea } from "@/components/ui/textarea";
+import { BugReportForm } from "@/components/bug-report/bug-report-form";
 import enMessages from "@/i18n/en-US";
-import { cn } from "@/lib/utils";
 
 export function meta() {
   return [{ title: enMessages.bugReportRoute.pageTitle }];
@@ -34,20 +17,6 @@ export function headers() {
   return BUG_REPORT_POPUP_RESPONSE_HEADERS;
 }
 
-function openRecorder(url: string): Window | null {
-  const opened = window.open(
-    url,
-    "agent-native-clips-bug-report",
-    "popup,width=1120,height=820",
-  );
-  if (!opened) {
-    window.location.href = url;
-    return null;
-  }
-  opened.focus();
-  return opened;
-}
-
 function originFor(value: string | null): string | null {
   if (!value) return null;
   try {
@@ -58,7 +27,6 @@ function originFor(value: string | null): string | null {
 }
 
 export default function BugReportRoute() {
-  const t = useT();
   const location = useLocation();
   const outlet = useOutlet();
   const initialContext = useMemo(() => {
@@ -66,28 +34,10 @@ export default function BugReportRoute() {
     return parseBugReportContext(params, { allowLoose: true });
   }, [location.search]);
 
-  const [title, setTitle] = useState(initialContext?.title ?? "");
-  const [description, setDescription] = useState(
-    initialContext?.description ?? "",
-  );
-  const [reporterEmail, setReporterEmail] = useState(
-    initialContext?.reporterEmail ?? "",
-  );
-  const [severity, setSeverity] = useState<BugReportSeverity>(
-    initialContext?.severity ?? "normal",
-  );
-  const [referrer, setReferrer] = useState<string | null>(null);
   const recorderWindowRef = useRef<Window | null>(null);
-
-  useEffect(() => {
-    setReferrer(document.referrer || null);
-  }, []);
-
-  const sourceUrl = initialContext?.sourceUrl ?? referrer;
-  const pageTitle = initialContext?.pageTitle ?? null;
-  const sourceLabel =
-    pageTitle || sourceUrl || t("bugReportRoute.sourceUnknown");
-  const hostOrigin = originFor(initialContext?.returnUrl ?? sourceUrl);
+  const hostOrigin = originFor(
+    initialContext?.returnUrl ?? initialContext?.sourceUrl ?? null,
+  );
 
   useEffect(() => {
     if (!hostOrigin) return;
@@ -110,144 +60,16 @@ export default function BugReportRoute() {
 
   if (outlet) return outlet;
 
-  const startRecording = () => {
-    const context: BugReportContext = {
-      projectId: initialContext?.projectId ?? null,
-      title: title.trim() || initialContext?.title || null,
-      description: description.trim() || initialContext?.description || null,
-      severity,
-      sourceUrl,
-      pageTitle,
-      appVersion: initialContext?.appVersion ?? null,
-      environment: initialContext?.environment ?? null,
-      reporterEmail:
-        reporterEmail.trim() || initialContext?.reporterEmail || null,
-      reporterName: initialContext?.reporterName ?? null,
-      reporterId: initialContext?.reporterId ?? null,
-      metadata: initialContext?.metadata ?? null,
-      returnUrl: initialContext?.returnUrl ?? sourceUrl,
-    };
-    const params = bugReportContextToSearchParams(context);
-    params.set("intent", "bug-report");
-    params.set("mode", "screen");
-    params.set("surface", "browser");
-    recorderWindowRef.current = openRecorder(
-      `${appBasePath()}/record?${params.toString()}`,
-    );
-  };
-
   return (
     <main className="min-h-screen bg-background text-foreground">
       <div className="mx-auto flex min-h-screen w-full max-w-xl flex-col justify-center px-4 py-5 sm:px-6">
         <section className="rounded-lg border bg-card p-4 shadow-sm sm:p-5">
-          <div className="mb-5 flex items-start gap-3">
-            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary text-primary-foreground">
-              <IconBug size={20} />
-            </div>
-            <div className="min-w-0">
-              <p className="text-xs font-medium uppercase tracking-[0.12em] text-muted-foreground">
-                {t("bugReportRoute.eyebrow")}
-              </p>
-              <h1 className="mt-1 text-xl font-semibold leading-tight">
-                {t("bugReportRoute.title")}
-              </h1>
-              <p className="mt-2 text-sm leading-6 text-muted-foreground">
-                {t("bugReportRoute.description")}
-              </p>
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label htmlFor="bug-title">
-                {t("bugReportRoute.issueTitleLabel")}
-              </Label>
-              <Input
-                id="bug-title"
-                value={title}
-                onChange={(event) => setTitle(event.target.value)}
-                placeholder={t("bugReportRoute.issueTitlePlaceholder")}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="bug-details">
-                {t("bugReportRoute.detailsLabel")}
-              </Label>
-              <Textarea
-                id="bug-details"
-                value={description}
-                onChange={(event) => setDescription(event.target.value)}
-                placeholder={t("bugReportRoute.detailsPlaceholder")}
-                className="min-h-24 resize-none"
-              />
-            </div>
-
-            <div className="grid gap-4 sm:grid-cols-[1fr_180px]">
-              <div className="space-y-2">
-                <Label htmlFor="bug-email">
-                  {t("bugReportRoute.emailLabel")}
-                </Label>
-                <Input
-                  id="bug-email"
-                  type="email"
-                  value={reporterEmail}
-                  onChange={(event) => setReporterEmail(event.target.value)}
-                  placeholder={t("bugReportRoute.emailPlaceholder")}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label>{t("bugReportRoute.severityLabel")}</Label>
-                <Select
-                  value={severity}
-                  onValueChange={(value) =>
-                    setSeverity(value as BugReportSeverity)
-                  }
-                >
-                  <SelectTrigger>
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="low">
-                      {t("bugReportRoute.severityLow")}
-                    </SelectItem>
-                    <SelectItem value="normal">
-                      {t("bugReportRoute.severityNormal")}
-                    </SelectItem>
-                    <SelectItem value="high">
-                      {t("bugReportRoute.severityHigh")}
-                    </SelectItem>
-                    <SelectItem value="urgent">
-                      {t("bugReportRoute.severityUrgent")}
-                    </SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-            </div>
-
-            <div className="rounded-md border bg-muted/40 px-3 py-2">
-              <p className="text-xs font-medium text-muted-foreground">
-                {t("bugReportRoute.sourceLabel")}
-              </p>
-              <p
-                className={cn(
-                  "mt-1 truncate text-sm",
-                  !sourceUrl && "text-muted-foreground",
-                )}
-              >
-                {sourceLabel}
-              </p>
-            </div>
-
-            <Button className="h-11 w-full" onClick={startRecording}>
-              {t("bugReportRoute.startRecording")}
-            </Button>
-          </div>
-
-          <div className="mt-5 flex items-start gap-2 rounded-md bg-muted/50 p-3 text-xs leading-5 text-muted-foreground">
-            <IconShieldCheck size={16} className="mt-0.5 shrink-0" />
-            <p>{t("bugReportRoute.privacyNote")}</p>
-          </div>
+          <BugReportForm
+            initialContext={initialContext}
+            onRecorderOpened={(recorderWindow) => {
+              recorderWindowRef.current = recorderWindow;
+            }}
+          />
         </section>
       </div>
     </main>

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -167,7 +167,7 @@ type SharePageLoaderData = {
   accessRequestToken?: string;
 };
 
-type SharePanel = "transcript" | "agent";
+type SharePanel = "comments" | "transcript" | "agent";
 
 type PendingAccountAction =
   | { intent: "comment"; atMs: number }
@@ -515,6 +515,15 @@ export default function ShareRoute() {
   const [panel, setPanel] = useState<SharePanel>("transcript");
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
   const commentsSectionRef = useRef<HTMLElement | null>(null);
+  const selectCommentsPanel = useCallback(() => {
+    setPanel("comments");
+    requestAnimationFrame(() => {
+      commentsSectionRef.current?.scrollIntoView({
+        behavior: "smooth",
+        block: "start",
+      });
+    });
+  }, []);
   const [downloading, setDownloading] = useState(false);
   const [accessRequestSent, setAccessRequestSent] = useState(false);
   const [accessRequestError, setAccessRequestError] = useState<string | null>(
@@ -1411,104 +1420,110 @@ export default function ShareRoute() {
       </header>
 
       <div className="flex w-full min-w-0 flex-none flex-col overflow-visible lg:col-start-1 lg:row-start-2 lg:min-h-0 lg:flex-1 lg:overflow-y-hidden">
-        <main className="overflow-visible lg:min-h-0 lg:flex-1 lg:overflow-y-auto">
-          <div className="mx-auto flex w-full flex-col gap-5 pb-10 sm:px-4 lg:pt-4">
-            <div className="relative aspect-video w-full">
-              <VideoPlayer
-                ref={playerRef}
-                onVideoElementChange={setTrackedVideoEl}
-                recordingId={recording.id}
-                videoUrl={recording.videoUrl}
-                mediaVersion={
-                  recording.mediaUpdatedAt ?? recording.videoSizeBytes ?? null
-                }
-                videoFormat={recording.videoFormat}
-                embedProvider={isLoomEmbedBacked ? "loom" : null}
-                durationMs={recording.durationMs}
-                startMs={resolveStartMs(startMs, recording.durationMs)}
-                persistPlaybackPosition={Boolean(session)}
-                editsJson={recording.editsJson}
-                thumbnailUrl={recording.thumbnailUrl}
-                role={viewerRole ?? (viewerCanEdit ? "owner" : "viewer")}
-                defaultSpeed={parsePlaybackSpeed(recording.defaultSpeed) ?? 1.2}
-                comments={comments}
-                chapters={chapters}
-                reactions={reactions}
-                transcriptSegments={transcriptSegments}
-                cta={firstCta}
-                onCtaClick={() => tracking.reportCtaClick()}
-                onTimeUpdate={(ms) => setCurrentMs(ms)}
-                onCommentClick={
-                  viewerCanUseFullscreenInteractions
-                    ? () => {
-                        requestAnimationFrame(() =>
-                          commentsSectionRef.current?.scrollIntoView({
-                            behavior: "smooth",
-                            block: "start",
-                          }),
-                        );
-                      }
-                    : undefined
-                }
-                onFullscreenChange={setIsPlayerFullscreen}
-                enableComments={
-                  recording.enableComments && viewerCanUseFullscreenInteractions
-                }
-                onAddComment={
-                  viewerCanUseFullscreenInteractions
-                    ? () => {
-                        if (!session) {
-                          requireSignIn("comment");
-                          return;
-                        }
-                        setCommentAtMs(resolvePlaybackMs());
-                        setCommentOpen(true);
-                      }
-                    : undefined
-                }
-                enableReactions={
-                  recording.enableReactions &&
-                  viewerCanUseFullscreenInteractions
-                }
-                onReact={
-                  viewerCanUseFullscreenInteractions
-                    ? reactToRecording
-                    : undefined
-                }
-                className="h-full w-full rounded-none sm:rounded-xl"
-              />
-              {commentOpen && viewerCanComment
-                ? (() => {
-                    const composer = (
-                      <TimestampedCommentBar
-                        recordingId={recording.id}
-                        atMs={commentAtMs}
-                        draft={commentDraft}
-                        onDraftChange={setCommentDraft}
-                        onClose={() => setCommentOpen(false)}
-                        onAdded={() => {
-                          void dataQ.refetch();
-                          if (resumedAccountActionRef.current === "comment") {
-                            resumedAccountActionRef.current = null;
-                            trackEvent("share_account_action_completed", {
-                              surface: "public_share",
-                              recording_id: recording.id,
-                              intent: "comment",
-                            });
+        <main className="overflow-visible lg:min-h-0 lg:flex-1 lg:overflow-hidden">
+          {/* Match the authenticated viewer's YouTube-like desktop measure so
+            the discussion stays close to the video on wide displays. */}
+          <div className="mx-auto flex w-full flex-col gap-5 pb-10 sm:px-4 lg:h-full lg:min-h-0 lg:max-w-[min(100%,1600px,calc(177.778dvh-35.556rem))] lg:pt-4">
+            <div className="flex w-full shrink-0 justify-center">
+              <div className="relative aspect-video w-full">
+                <VideoPlayer
+                  ref={playerRef}
+                  onVideoElementChange={setTrackedVideoEl}
+                  recordingId={recording.id}
+                  videoUrl={recording.videoUrl}
+                  mediaVersion={
+                    recording.mediaUpdatedAt ?? recording.videoSizeBytes ?? null
+                  }
+                  videoFormat={recording.videoFormat}
+                  embedProvider={isLoomEmbedBacked ? "loom" : null}
+                  durationMs={recording.durationMs}
+                  startMs={resolveStartMs(startMs, recording.durationMs)}
+                  persistPlaybackPosition={Boolean(session)}
+                  editsJson={recording.editsJson}
+                  thumbnailUrl={recording.thumbnailUrl}
+                  role={viewerRole ?? (viewerCanEdit ? "owner" : "viewer")}
+                  defaultSpeed={
+                    parsePlaybackSpeed(recording.defaultSpeed) ?? 1.2
+                  }
+                  comments={comments}
+                  chapters={chapters}
+                  reactions={reactions}
+                  transcriptSegments={transcriptSegments}
+                  cta={firstCta}
+                  onCtaClick={() => tracking.reportCtaClick()}
+                  onTimeUpdate={(ms) => setCurrentMs(ms)}
+                  onCommentClick={
+                    viewerCanUseFullscreenInteractions
+                      ? selectCommentsPanel
+                      : undefined
+                  }
+                  onFullscreenChange={setIsPlayerFullscreen}
+                  enableComments={
+                    recording.enableComments &&
+                    viewerCanUseFullscreenInteractions
+                  }
+                  onAddComment={
+                    viewerCanUseFullscreenInteractions
+                      ? () => {
+                          if (!session) {
+                            requireSignIn("comment");
+                            return;
                           }
-                        }}
-                      />
-                    );
-                    // The Fullscreen API only paints the player's own element,
-                    // so portal the composer there instead of exiting
-                    // fullscreen when it's open.
-                    const fullscreenContainer =
-                      isPlayerFullscreen && playerRef.current?.container;
-                    return fullscreenContainer
-                      ? createPortal(composer, fullscreenContainer)
-                      : composer;
-                  })()
-                : null}
+                          const liveMs = resolvePlaybackMs();
+                          setCurrentMs(liveMs);
+                          if (!isPlayerFullscreen) {
+                            selectCommentsPanel();
+                            return;
+                          }
+                          setCommentAtMs(liveMs);
+                          setCommentOpen(true);
+                        }
+                      : undefined
+                  }
+                  enableReactions={
+                    recording.enableReactions &&
+                    viewerCanUseFullscreenInteractions
+                  }
+                  onReact={
+                    viewerCanUseFullscreenInteractions
+                      ? reactToRecording
+                      : undefined
+                  }
+                  className="h-full w-full rounded-none sm:rounded-xl"
+                />
+                {commentOpen && viewerCanComment
+                  ? (() => {
+                      const composer = (
+                        <TimestampedCommentBar
+                          recordingId={recording.id}
+                          atMs={commentAtMs}
+                          draft={commentDraft}
+                          onDraftChange={setCommentDraft}
+                          onClose={() => setCommentOpen(false)}
+                          onAdded={() => {
+                            void dataQ.refetch();
+                            if (resumedAccountActionRef.current === "comment") {
+                              resumedAccountActionRef.current = null;
+                              trackEvent("share_account_action_completed", {
+                                surface: "public_share",
+                                recording_id: recording.id,
+                                intent: "comment",
+                              });
+                            }
+                          }}
+                        />
+                      );
+                      // The Fullscreen API only paints the player's own element,
+                      // so portal the composer there instead of exiting
+                      // fullscreen when it's open.
+                      const fullscreenContainer =
+                        isPlayerFullscreen && playerRef.current?.container;
+                      return fullscreenContainer
+                        ? createPortal(composer, fullscreenContainer)
+                        : composer;
+                    })()
+                  : null}
+              </div>
             </div>
 
             <section className="flex shrink-0 flex-col gap-3 px-4 pt-1 sm:px-0">
@@ -1619,11 +1634,42 @@ export default function ShareRoute() {
                 </div>
               ) : null}
             </section>
+          </div>
+        </main>
+      </div>
 
-            {recording.enableComments ? (
+      <Tabs
+        value={panel}
+        onValueChange={(value) => setPanel(value as SharePanel)}
+        className="contents"
+      >
+        <RecordingSidePanel
+          className="lg:col-start-2 lg:row-start-2"
+          tabs={
+            <ViewerTabsList>
+              {recording.enableComments ? (
+                <ViewerTabsTrigger value="comments">
+                  {t("sharePage.comments")}
+                </ViewerTabsTrigger>
+              ) : null}
+              <ViewerTabsTrigger value="transcript">
+                {t("sharePage.transcript")}
+              </ViewerTabsTrigger>
+              <ViewerTabsTrigger value="agent">
+                {t("sharePage.agent")}
+              </ViewerTabsTrigger>
+            </ViewerTabsList>
+          }
+        >
+          {recording.enableComments ? (
+            <TabsContent
+              forceMount
+              value="comments"
+              className="mt-0 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden"
+            >
               <section
                 ref={commentsSectionRef}
-                className="scroll-mt-14 flex min-h-0 flex-1 flex-col px-1 pb-5 pt-4"
+                className="flex min-h-0 flex-1 flex-col overflow-hidden px-3 pb-3 pt-3"
               >
                 <h2 className="mb-3 shrink-0 text-sm font-semibold">
                   {t("sharePage.comments")}
@@ -1655,29 +1701,8 @@ export default function ShareRoute() {
                   presentation="inline"
                 />
               </section>
-            ) : null}
-          </div>
-        </main>
-      </div>
-
-      <Tabs
-        value={panel}
-        onValueChange={(value) => setPanel(value as SharePanel)}
-        className="contents"
-      >
-        <RecordingSidePanel
-          className="lg:col-start-2 lg:row-start-2"
-          tabs={
-            <ViewerTabsList>
-              <ViewerTabsTrigger value="transcript">
-                {t("sharePage.transcript")}
-              </ViewerTabsTrigger>
-              <ViewerTabsTrigger value="agent">
-                {t("sharePage.agent")}
-              </ViewerTabsTrigger>
-            </ViewerTabsList>
-          }
-        >
+            </TabsContent>
+          ) : null}
           <TabsContent
             value="agent"
             className="mt-0 flex min-h-0 flex-1 flex-col overflow-y-auto"

package/corpus/templates/clips/changelog/2026-09-08-comments-and-desktop-window-controls.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-08
+---
+
+Fixed desktop comment threads by keeping them in a full-height viewer tab, polished the side-panel tabs and spacing, added move, minimize, and close controls to desktop Clips windows, corrected the shared New recording action’s split-button corners, made library sub-item selection clear in the sidebar, and added visible folder tiles plus scoped recording actions to library and space views.

package/corpus/templates/clips/changelog/2026-09-08-global-command-search.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-09-08
+---
+
+The Cmd+K command menu now searches and navigates across recordings, meetings, dictations, folders, and spaces.

package/corpus/templates/clips/changelog/2026-09-09-agent-sidebar-fits-below-toolbar.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+The Agent sidebar now fits below the app toolbar without clipping its composer.

package/corpus/templates/clips/changelog/2026-09-09-desktop-switches-stay-clear-in-dark-mode.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Desktop recorder switches now keep their checked state clear and legible in dark mode.

package/corpus/templates/clips/changelog/2026-09-09-recording-agent-uses-global-panel.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-09
+---
+
+Recording pages now open the same contextual Agent panel used throughout the app.

package/corpus/templates/clips/desktop/src/app.tsx

@@ -898,7 +898,7 @@ function SettingsSwitch({
       onCheckedChange={onCheckedChange}
       disabled={disabled}
       aria-label={label}
-      className="data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border"
+      tone="success"
     />
   );
 }
@@ -1351,7 +1351,7 @@ export function App({
     loadDevices,
     requestDeviceAccess,
   } = useMediaDevices({
-    bubbleActiveRef,
+    microphoneEnabled: micOn,
     popoverVisible,
     setCameraError,
     setRecError,

package/corpus/templates/clips/desktop/src/components/MediaDeviceRow.tsx

@@ -131,7 +131,7 @@ export function MediaDeviceRow({
               </DropdownMenuTrigger>
             ) : (
               <span
-                className="row-button row-button-placeholder row-label-muted"
+                className="row-button row-button-placeholder"
                 aria-disabled="true"
               >
                 {label}
@@ -191,8 +191,10 @@ export function MediaDeviceRow({
         </div>
       </div>
       {kind === "mic" && onSystemAudioToggle ? (
-        <div className="system-audio-row">
-          <span className="row-icon" aria-hidden>
+        <div
+          className={`row ${systemAudio ? "row-on" : "row-off"} system-audio-row`}
+        >
+          <span className="row-icon system-audio-icon" aria-hidden>
             <IconVolume2 size={20} stroke={1.75} />
           </span>
           <span className="system-audio-label">Record system audio</span>

package/corpus/templates/clips/desktop/src/components/SourceRow.tsx

@@ -115,6 +115,7 @@ export function SourceRow({
           </DropdownMenuRadioGroup>
           <DropdownMenuSeparator />
           <DropdownMenuItem
+            inset
             onSelect={() => {
               onChange("window");
               onChooseWindow?.();

package/corpus/templates/clips/desktop/src/components/Switch.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { cn } from "../lib/utils";
 import { Switch as UiSwitch } from "./ui/switch";
 
 interface SwitchProps extends Omit<
@@ -31,10 +30,8 @@ export const Switch = React.forwardRef<
       aria-label={label}
       disabled={disabled}
       data-tw-surface
-      className={cn(
-        "data-[state=checked]:border-success data-[state=checked]:bg-success data-[state=unchecked]:border-border",
-        className,
-      )}
+      tone="success"
+      className={className}
     />
   );
 });