@agent-native/core 0.72.4 → 0.74.0

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -15,6 +15,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconPlus,
+  IconSettings,
 } from "@tabler/icons-react";
 import {
   AgentSidebar,
@@ -212,6 +213,12 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
       icon: IconTrash,
       match: (p) => p.startsWith("/trash"),
     },
+    {
+      to: "/settings",
+      label: "Settings",
+      icon: IconSettings,
+      match: (p) => p.startsWith("/settings"),
+    },
   ];
 
   return (

package/corpus/templates/clips/app/components/player/player-controls.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, type FocusEvent } from "react";
 import {
   IconPlayerPlay,
   IconPlayerPause,
@@ -24,6 +24,11 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import { PLAYBACK_SPEED_OPTIONS } from "@/lib/playback-speed";
 
 export const SPEED_OPTIONS = PLAYBACK_SPEED_OPTIONS;
@@ -85,7 +90,14 @@ export function PlayerControls(props: PlayerControlsProps) {
     menuPortalContainer,
   } = props;
 
-  const [volumeHover, setVolumeHover] = useState(false);
+  const [volumePopoverOpen, setVolumePopoverOpen] = useState(false);
+
+  const handleVolumeBlur = (event: FocusEvent<HTMLDivElement>) => {
+    const nextFocusedElement = event.relatedTarget as Node | null;
+    if (!event.currentTarget.contains(nextFocusedElement)) {
+      setVolumePopoverOpen(false);
+    }
+  };
 
   return (
     <div className="px-3 pb-2 pt-10 bg-gradient-to-t from-black/80 via-black/50 to-transparent">
@@ -112,38 +124,56 @@ export function PlayerControls(props: PlayerControlsProps) {
         </IconBtn>
 
         <div
-          className="flex items-center gap-1"
-          onMouseEnter={() => setVolumeHover(true)}
-          onMouseLeave={() => setVolumeHover(false)}
+          className="relative flex shrink-0 items-center"
+          onMouseEnter={() => setVolumePopoverOpen(true)}
+          onMouseLeave={() => setVolumePopoverOpen(false)}
+          onFocus={() => setVolumePopoverOpen(true)}
+          onBlur={handleVolumeBlur}
         >
-          <IconBtn onClick={onToggleMute} tooltip="Mute (M)">
-            {muted || volume === 0 ? (
-              <IconVolumeOff className="h-5 w-5" />
-            ) : (
-              <IconVolume className="h-5 w-5" />
-            )}
-          </IconBtn>
-          <div
-            className={cn(
-              "transition-all overflow-hidden",
-              volumeHover ? "w-20" : "w-0",
-            )}
-          >
-            <input
-              type="range"
-              min={0}
-              max={1}
-              step={0.05}
-              value={muted ? 0 : volume}
-              onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
-              className="w-full accent-primary cursor-pointer"
-            />
-          </div>
+          <Popover open={volumePopoverOpen} onOpenChange={setVolumePopoverOpen}>
+            <PopoverTrigger asChild>
+              <button
+                type="button"
+                onClick={onToggleMute}
+                className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-white hover:bg-white/10"
+                aria-label={muted || volume === 0 ? "Unmute" : "Mute"}
+              >
+                {muted || volume === 0 ? (
+                  <IconVolumeOff className="h-5 w-5" />
+                ) : (
+                  <IconVolume className="h-5 w-5" />
+                )}
+              </button>
+            </PopoverTrigger>
+            <PopoverContent
+              side="top"
+              align="center"
+              sideOffset={8}
+              portalled={false}
+              className="w-auto border-white/10 bg-black/90 p-2 text-white shadow-2xl backdrop-blur-md"
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+            >
+              <div className="flex h-24 w-8 items-center justify-center">
+                <input
+                  aria-label="Volume"
+                  aria-orientation="vertical"
+                  type="range"
+                  min={0}
+                  max={1}
+                  step={0.05}
+                  value={muted ? 0 : volume}
+                  onChange={(e) => onVolumeChange(parseFloat(e.target.value))}
+                  className="h-2 w-24 -rotate-90 cursor-pointer accent-white"
+                />
+              </div>
+            </PopoverContent>
+          </Popover>
         </div>
 
-        <span className="text-xs font-mono tabular-nums text-white/90 px-2">
+        <span className="shrink-0 whitespace-nowrap px-1 font-mono text-[10px] leading-none tabular-nums text-white/85 sm:text-[11px]">
           {msToClock(currentMs)}
-          <span className="text-white/50"> / {msToClock(durationMs)}</span>
+          <span className="text-white/50">/{msToClock(durationMs)}</span>
         </span>
 
         <div className="flex-1" />
@@ -162,7 +192,7 @@ export function PlayerControls(props: PlayerControlsProps) {
           <Tooltip>
             <TooltipTrigger asChild>
               <DropdownMenuTrigger asChild>
-                <button className="h-8 px-2 rounded-md hover:bg-white/10 text-xs font-medium tabular-nums">
+                <button className="h-8 shrink-0 rounded-md px-2 text-xs font-medium tabular-nums hover:bg-white/10">
                   {speed}x
                 </button>
               </DropdownMenuTrigger>
@@ -237,7 +267,7 @@ function IconBtn({
         <button
           onClick={onClick}
           className={cn(
-            "h-8 w-8 rounded-md flex items-center justify-center",
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-md",
             active ? "bg-white/20 text-white" : "text-white hover:bg-white/10",
           )}
         >

package/corpus/templates/clips/app/lib/capture-install-options.ts

@@ -1,14 +1,48 @@
-function isTruthy(value: unknown): boolean {
+function isFalsy(value: unknown): boolean {
   if (typeof value !== "string") return false;
-  return ["1", "true", "yes", "on"].includes(value.trim().toLowerCase());
+  return ["0", "false", "no", "off"].includes(value.trim().toLowerCase());
+}
+
+function normalizeHostname(hostname: string | undefined): string {
+  return (hostname ?? "").trim().toLowerCase();
+}
+
+export function supportsPublishedClipsChromeExtensionHost(
+  hostname: string | undefined,
+): boolean {
+  const normalized = normalizeHostname(hostname);
+  return (
+    normalized === "clips.agent-native.com" ||
+    normalized === "localhost" ||
+    normalized === "127.0.0.1"
+  );
+}
+
+export function resolveClipsChromeExtensionEnabled({
+  enabledSetting,
+  hostname,
+}: {
+  enabledSetting?: string;
+  hostname?: string;
+}): boolean {
+  const normalizedSetting = enabledSetting?.trim();
+  if (normalizedSetting) return !isFalsy(normalizedSetting);
+  return supportsPublishedClipsChromeExtensionHost(hostname);
+}
+
+function getCurrentHostname(): string | undefined {
+  return typeof window === "undefined" ? undefined : window.location.hostname;
 }
 
 const chromeExtensionUrl =
   import.meta.env.VITE_CLIPS_CHROME_EXTENSION_URL?.trim() ??
   "https://chromewebstore.google.com/detail/baoipacpchggcdigagnajakiidcgcffn";
 
-export const clipsChromeExtensionEnabled = isTruthy(
-  import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
-);
+// The published extension manifest only trusts first-party Clips/local origins.
+// Custom deployments can opt in after publishing a matching extension/listing.
+export const clipsChromeExtensionEnabled = resolveClipsChromeExtensionEnabled({
+  enabledSetting: import.meta.env.VITE_CLIPS_CHROME_EXTENSION_ENABLED,
+  hostname: getCurrentHostname(),
+});
 
 export const clipsChromeExtensionUrl = chromeExtensionUrl || null;