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

package/corpus/templates/clips/app/components/library/library-primary-actions.tsx

@@ -0,0 +1,48 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconVideoPlus } from "@tabler/icons-react";
+import { NavLink } from "react-router";
+
+import { ImportMenu } from "@/components/import-menu";
+
+import {
+  buildLibraryActionHrefs,
+  type LibraryActionScope,
+} from "./library-action-hrefs";
+import { PageHeaderActionGroup, PageHeaderPrimaryAction } from "./page-header";
+
+type LibraryPrimaryActionsProps = LibraryActionScope;
+
+export function LibraryPrimaryActions({
+  folderId,
+  spaceId,
+}: LibraryPrimaryActionsProps) {
+  const t = useT();
+  const { recordHref, uploadHref, importLoomHref } = buildLibraryActionHrefs({
+    folderId,
+    spaceId,
+  });
+
+  return (
+    <PageHeaderActionGroup>
+      <PageHeaderPrimaryAction asChild>
+        <NavLink to={recordHref} aria-label={t("navigation.newRecording")}>
+          <IconVideoPlus />
+          <span className="hidden sm:inline">
+            {t("navigation.newRecording")}
+          </span>
+        </NavLink>
+      </PageHeaderPrimaryAction>
+      <ImportMenu
+        uploadHref={uploadHref}
+        importLoomHref={importLoomHref}
+        iconOnly
+        triggerIcon="chevron"
+        size="sm"
+        variant="default"
+        className="w-8 self-stretch border-s border-primary-foreground/20 px-0 shadow-none"
+        menuSide="bottom"
+        menuAlign="end"
+      />
+    </PageHeaderActionGroup>
+  );
+}

package/corpus/templates/clips/app/components/library/page-header.tsx

@@ -2,18 +2,22 @@ import {
   type ComponentProps,
   createContext,
   forwardRef,
+  Fragment,
   ReactNode,
   useContext,
   useEffect,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
+import { NavLink } from "react-router";
 
 import {
   Breadcrumb,
   BreadcrumbItem,
+  BreadcrumbLink,
   BreadcrumbList,
   BreadcrumbPage,
+  BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
@@ -76,22 +80,58 @@ export const PageHeaderActionGroup = forwardRef<
   return (
     <ButtonGroup
       ref={ref}
-      className={cn("shrink-0 [&>*]:h-9", className)}
+      className={cn(
+        "shrink-0 [&>*]:h-9 has-[>input[data-button-group-ignore]]:[&>*:nth-last-child(2)]:!rounded-r-md",
+        className,
+      )}
       {...props}
     />
   );
 });
 PageHeaderActionGroup.displayName = "PageHeaderActionGroup";
 
-export function PageBreadcrumb({ label }: { label: string }) {
+export interface PageBreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+export function PageBreadcrumb({
+  items,
+}: {
+  items: readonly PageBreadcrumbItem[];
+}) {
+  if (items.length === 0) return null;
+
   return (
-    <Breadcrumb aria-label={label} className="min-w-0">
+    <Breadcrumb
+      aria-label={items.map((item) => item.label).join(" / ")}
+      className="min-w-0"
+    >
       <BreadcrumbList className="flex-nowrap overflow-hidden">
-        <BreadcrumbItem className="min-w-0">
-          <BreadcrumbPage className="truncate font-medium">
-            {label}
-          </BreadcrumbPage>
-        </BreadcrumbItem>
+        {items.map((item, index) => {
+          const current = index === items.length - 1;
+
+          return (
+            <Fragment key={`${item.to ?? "current"}:${item.label}:${index}`}>
+              {index > 0 ? <BreadcrumbSeparator className="shrink-0" /> : null}
+              <BreadcrumbItem className={current ? "min-w-0" : "shrink-0"}>
+                {current ? (
+                  <BreadcrumbPage className="truncate font-medium">
+                    {item.label}
+                  </BreadcrumbPage>
+                ) : item.to ? (
+                  <BreadcrumbLink asChild>
+                    <NavLink to={item.to} className="block max-w-48 truncate">
+                      {item.label}
+                    </NavLink>
+                  </BreadcrumbLink>
+                ) : (
+                  <span className="block max-w-48 truncate">{item.label}</span>
+                )}
+              </BreadcrumbItem>
+            </Fragment>
+          );
+        })}
       </BreadcrumbList>
     </Breadcrumb>
   );

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -461,7 +461,7 @@ export function RecordingCard({
 
           {/* Body */}
           <div className="relative z-10 flex flex-1 flex-col gap-2 p-4 pointer-events-none">
-            <div className="flex items-start gap-3">
+            <div className="flex items-center gap-3">
               <div className="min-w-0 flex-1">
                 {hasDefaultTitle ? (
                   <Skeleton
@@ -473,60 +473,6 @@ export function RecordingCard({
                     {displayTitle}
                   </div>
                 )}
-                <div className="mt-1.5 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                  <span className="inline-flex min-w-0 items-center gap-1.5">
-                    <ClipsAvatar
-                      email={recording.ownerEmail}
-                      alt={displayOwnerName}
-                      fallback={ownerInitials}
-                      className="h-4 w-4 shrink-0"
-                      fallbackClassName="bg-primary/15 text-[8px] text-primary"
-                    />
-                    <span className="min-w-0 truncate">{displayOwnerName}</span>
-                  </span>
-                  <span aria-hidden className="text-muted-foreground/60">
-                    •
-                  </span>
-                  <time dateTime={recording.createdAt} className="shrink-0">
-                    {relative}
-                  </time>
-                </div>
-                <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-                  <span className="inline-flex items-center gap-1.5">
-                    <PrivacyIcon
-                      visibility={recording.visibility}
-                      className="shrink-0"
-                    />
-                    <span>{visibilityLabel}</span>
-                  </span>
-                  <span aria-hidden className="text-muted-foreground/60">
-                    •
-                  </span>
-                  {recording.viewCount > 0 && !readOnly ? (
-                    <ViewedByPopover
-                      recordingId={recording.id}
-                      className="pointer-events-auto underline-offset-2 hover:underline hover:text-foreground"
-                    >
-                      {t("clipsFinalRaw.viewsCount", {
-                        count: recording.viewCount,
-                      })}
-                    </ViewedByPopover>
-                  ) : (
-                    <span>
-                      {t("clipsFinalRaw.viewsCount", {
-                        count: recording.viewCount,
-                      })}
-                    </span>
-                  )}
-                  {recording.agentViewCount > 0 ? (
-                    <AgentViewCount
-                      count={recording.agentViewCount}
-                      label={t("recordingInsights.agentViewsCount", {
-                        count: recording.agentViewCount,
-                      })}
-                    />
-                  ) : null}
-                </div>
               </div>
 
               {showActions && (
@@ -630,6 +576,63 @@ export function RecordingCard({
               )}
             </div>
 
+            <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-1.5 text-xs text-muted-foreground">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <ClipsAvatar
+                  email={recording.ownerEmail}
+                  alt={displayOwnerName}
+                  fallback={ownerInitials}
+                  className="h-4 w-4 shrink-0"
+                  fallbackClassName="bg-primary/15 text-[8px] text-primary"
+                />
+                <span className="min-w-0 truncate">{displayOwnerName}</span>
+              </div>
+
+              <div className="flex items-center justify-self-end gap-x-2 whitespace-nowrap">
+                {recording.viewCount > 0 && !readOnly ? (
+                  <ViewedByPopover
+                    recordingId={recording.id}
+                    className="pointer-events-auto underline-offset-2 hover:text-foreground hover:underline"
+                  >
+                    {t("clipsFinalRaw.viewsCount", {
+                      count: recording.viewCount,
+                    })}
+                  </ViewedByPopover>
+                ) : (
+                  <span>
+                    {t("clipsFinalRaw.viewsCount", {
+                      count: recording.viewCount,
+                    })}
+                  </span>
+                )}
+                {recording.agentViewCount > 0 ? (
+                  <AgentViewCount
+                    count={recording.agentViewCount}
+                    label={t("recordingInsights.agentViewsCount", {
+                      count: recording.agentViewCount,
+                    })}
+                  />
+                ) : null}
+              </div>
+
+              <time
+                dateTime={recording.createdAt}
+                className="whitespace-nowrap"
+              >
+                {relative}
+              </time>
+
+              <div className="flex items-center justify-self-end gap-1.5 whitespace-nowrap">
+                <span className="inline-flex items-center gap-1.5">
+                  <PrivacyIcon
+                    visibility={recording.visibility}
+                    className="shrink-0"
+                  />
+                  <span>{visibilityLabel}</span>
+                </span>
+              </div>
+            </div>
+
             {recording.tags.length > 0 && (
               <div className="flex items-center gap-1 truncate">
                 {recording.tags.slice(0, 2).map((t) => (

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -108,29 +108,15 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
     return () => cancelAnimationFrame(frame);
   }, [focusSearchInput, routeRequestsFocus, setSearchParams]);
 
-  // "/" is the inline search shortcut. Cmd+K belongs to the app command menu.
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (
-        e.key === "/" &&
-        !e.metaKey &&
-        !e.ctrlKey &&
-        !e.altKey &&
-        (e.target as HTMLElement)?.tagName?.toLowerCase() !== "input" &&
-        (e.target as HTMLElement)?.tagName?.toLowerCase() !== "textarea" &&
-        !(e.target as HTMLElement)?.isContentEditable
-      ) {
-        e.preventDefault();
-        focusSearchInput();
-      }
-      if (e.key === "Escape") {
-        setOpen(false);
-        inputRef.current?.blur();
-      }
+      if (e.key !== "Escape") return;
+      setOpen(false);
+      inputRef.current?.blur();
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [focusSearchInput]);
+  }, []);
 
   function pickResult(hit: SearchHit) {
     setOpen(false);
@@ -184,7 +170,7 @@ export function SearchBar({ className, side = "right" }: SearchBarProps) {
                 aria-hidden="true"
                 className="absolute end-1.5 top-1/2 h-5 -translate-y-1/2 px-1 font-mono text-[10px]"
               >
-                {shortcutLabel("/")}
+                {shortcutLabel("cmd+k")}
               </Kbd>
             )}
           </div>

package/corpus/templates/clips/app/components/library/sidebar-feedback-button.tsx

@@ -0,0 +1,48 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconMessageCircle } from "@tabler/icons-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { openBugReportDialog } from "@/lib/command-events";
+
+interface SidebarFeedbackButtonProps {
+  collapsed: boolean;
+}
+
+export function SidebarFeedbackButton({
+  collapsed,
+}: SidebarFeedbackButtonProps) {
+  const t = useT();
+  const label = t("bugReportRoute.sidebarCta");
+
+  const button = (
+    <Button
+      type="button"
+      size={collapsed ? "icon" : "sm"}
+      variant="ghost"
+      aria-label={collapsed ? label : undefined}
+      onClick={openBugReportDialog}
+      className={
+        collapsed
+          ? "size-9 bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
+          : "h-auto w-full justify-start gap-2 bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary"
+      }
+    >
+      <IconMessageCircle className="size-4 shrink-0 text-primary" />
+      {!collapsed && <span>{label}</span>}
+    </Button>
+  );
+
+  if (!collapsed) return button;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right">{label}</TooltipContent>
+    </Tooltip>
+  );
+}

package/corpus/templates/clips/app/components/player/comments-panel.tsx

@@ -506,7 +506,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
       )}
     >
       {isInlinePresentation && enableComments ? (
-        <div className="mb-5 shrink-0">{composer}</div>
+        <div className="mb-3 shrink-0">{composer}</div>
       ) : null}
       <div
         className={cn(
@@ -524,7 +524,7 @@ export function CommentsPanel(props: CommentsPanelProps) {
             isInlinePresentation={isInlinePresentation}
           />
         ) : (
-          <ul className="space-y-5">
+          <ul className="space-y-3">
             {sortedThreads.map((thread) => {
               const root = thread[0];
               const replies = thread.slice(1);