@saadnvd1/agent-os 0.3.799 → 0.3.810

package/components/Media/MediaViewer.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { useRef, useState, type TouchEvent } from "react";
+import { Dialog, DialogOverlay, DialogPortal } from "@/components/ui/dialog";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { isCloseSwipe, type ViewerMedia } from "./viewer";
+
+/** Full-screen image or clip over everything; closes on its own, never its parent dialog. */
+export function MediaViewer({
+  media,
+  open,
+  onOpenChange,
+}: {
+  media: ViewerMedia;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const start = useRef<{ x: number; y: number } | null>(null);
+  const [drag, setDrag] = useState(0);
+
+  const onTouchStart = (e: TouchEvent) => {
+    const t = e.touches[0];
+    start.current = { x: t.clientX, y: t.clientY };
+  };
+  const onTouchMove = (e: TouchEvent) => {
+    if (!start.current) return;
+    setDrag(Math.max(0, e.touches[0].clientY - start.current.y));
+  };
+  const onTouchEnd = (e: TouchEvent) => {
+    const s = start.current;
+    start.current = null;
+    setDrag(0);
+    if (!s) return;
+    const t = e.changedTouches[0];
+    if (isCloseSwipe(t.clientX - s.x, t.clientY - s.y)) onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogPortal>
+        <DialogOverlay className="z-[70] bg-black/90" />
+        <DialogPrimitive.Content
+          aria-label={media.alt}
+          aria-describedby={undefined}
+          onClick={(e) => {
+            // The backdrop is this full-screen box; the media itself isn't a target.
+            if (e.target === e.currentTarget) onOpenChange(false);
+          }}
+          onTouchStart={onTouchStart}
+          onTouchMove={onTouchMove}
+          onTouchEnd={onTouchEnd}
+          onTouchCancel={() => {
+            start.current = null;
+            setDrag(0);
+          }}
+          style={{
+            transform: drag ? `translateY(${drag}px)` : undefined,
+            paddingTop: "max(1rem, env(safe-area-inset-top))",
+            paddingRight: "max(1rem, env(safe-area-inset-right))",
+            paddingBottom: "max(1rem, env(safe-area-inset-bottom))",
+            paddingLeft: "max(1rem, env(safe-area-inset-left))",
+          }}
+          className="fixed inset-0 z-[70] grid place-items-center outline-none"
+        >
+          <DialogPrimitive.Title className="sr-only">
+            {media.alt}
+          </DialogPrimitive.Title>
+          {media.kind === "image" ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={media.src}
+              alt={media.alt}
+              width={media.width}
+              height={media.height}
+              decoding="async"
+              className="max-h-full max-w-full rounded-lg object-contain"
+            />
+          ) : (
+            <video
+              key={media.src}
+              src={media.src}
+              poster={media.poster}
+              aria-label={media.alt}
+              width={media.width}
+              height={media.height}
+              muted
+              loop
+              playsInline
+              autoPlay={!reduced}
+              controls={reduced}
+              className="max-h-full max-w-full rounded-lg object-contain"
+            />
+          )}
+          <DialogPrimitive.Close
+            aria-label="Close"
+            className="absolute grid size-11 place-items-center rounded-full bg-black/60 text-white hover:bg-black/80 focus-visible:ring-2 focus-visible:ring-white focus-visible:outline-none"
+            style={{
+              top: "max(0.75rem, env(safe-area-inset-top))",
+              right: "max(0.75rem, env(safe-area-inset-right))",
+            }}
+          >
+            <X className="size-5" />
+          </DialogPrimitive.Close>
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    </Dialog>
+  );
+}

package/components/Media/viewer.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vitest";
+import { isCloseSwipe, pickSrc } from "./viewer";
+
+describe("pickSrc", () => {
+  const media = { src: "/a.png", srcDark: "/a-dark.png" };
+  it("uses the dark image in a dark theme", () => {
+    expect(pickSrc(media, true)).toBe("/a-dark.png");
+  });
+  it("uses the light image otherwise", () => {
+    expect(pickSrc(media, false)).toBe("/a.png");
+  });
+  it("falls back when there is no dark variant", () => {
+    expect(pickSrc({ src: "/a.png" }, true)).toBe("/a.png");
+  });
+});
+
+describe("isCloseSwipe", () => {
+  it("closes on a long downward drag", () => {
+    expect(isCloseSwipe(5, 120)).toBe(true);
+  });
+  it("ignores short drags, upward drags and sideways drags", () => {
+    expect(isCloseSwipe(0, 30)).toBe(false);
+    expect(isCloseSwipe(0, -200)).toBe(false);
+    expect(isCloseSwipe(150, 90)).toBe(false);
+  });
+});

package/components/Media/viewer.ts

@@ -0,0 +1,23 @@
+export interface ViewerMedia {
+  kind: "image" | "video";
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+  poster?: string;
+}
+
+/** The dark variant when the theme is dark and one exists. */
+export function pickSrc(
+  media: { src: string; srcDark?: string },
+  dark: boolean
+): string {
+  return dark && media.srcDark ? media.srcDark : media.src;
+}
+
+export const SWIPE_CLOSE_PX = 80;
+
+/** A mostly-vertical downward drag past the threshold closes the viewer. */
+export function isCloseSwipe(dx: number, dy: number): boolean {
+  return dy >= SWIPE_CLOSE_PX && dy > Math.abs(dx) * 1.2;
+}

package/components/Nav/HistoryButtons.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useLongPress } from "@/components/Chat/useLongPress";
+import { earlier, later, type MirrorEntry } from "@/lib/nav/history-mirror";
+import { isMac } from "@/lib/keybindings/chord";
+import { navHistory, navHistoryActions } from "@/stores/navHistory";
+
+const KEYS_BACK = () => (isMac() ? "⌘[" : "Alt+←");
+const KEYS_FORWARD = () => (isMac() ? "⌘]" : "Alt+→");
+
+function useReach() {
+  const snap = useSnapshot(navHistory);
+  const m = { entries: [...snap.entries], current: snap.current };
+  return { back: earlier(m), forward: later(m) };
+}
+
+function Entries({ entries }: { entries: MirrorEntry[] }) {
+  return entries.slice(0, 15).map((e) => (
+    <DropdownMenuItem
+      key={e.index}
+      className="min-h-11 md:min-h-0"
+      onSelect={() => navHistoryActions.goTo(e.index)}
+    >
+      <span className="truncate">{e.name || "Chat"}</span>
+    </DropdownMenuItem>
+  ));
+}
+
+/** One history button: tap goes a step; hold (touch) or right-click opens the list of chats it would pass. */
+function HistoryButton({
+  dir,
+  entries,
+  className,
+}: {
+  dir: "back" | "forward";
+  entries: MirrorEntry[];
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const hold = useLongPress(entries.length > 0 ? () => setOpen(true) : null);
+  const Icon = dir === "back" ? ArrowLeft : ArrowRight;
+  const label = dir === "back" ? "Back" : "Forward";
+  const hint = dir === "back" ? KEYS_BACK() : KEYS_FORWARD();
+  const go = () =>
+    dir === "back" ? navHistoryActions.back() : navHistoryActions.forward();
+  const button = (
+    <Button
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      disabled={entries.length === 0}
+      className={className}
+      onClick={(e) => {
+        e.stopPropagation();
+        go();
+      }}
+      onContextMenu={(e) => {
+        if (entries.length === 0) return;
+        e.preventDefault();
+        setOpen(true);
+      }}
+      {...hold}
+    >
+      <Icon className="h-4 w-4" />
+    </Button>
+  );
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>{button}</DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>{`${label} (${hint})`}</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent align="start" className="max-w-72">
+        <DropdownMenuLabel>
+          {dir === "back" ? "Earlier" : "Later"}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <Entries entries={entries} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** Desktop: back and forward through the chats and bookmarks visited. */
+export function HistoryButtons() {
+  const { back, forward } = useReach();
+  return (
+    <>
+      <HistoryButton dir="back" entries={back} className="h-7 w-7 shrink-0" />
+      <HistoryButton
+        dir="forward"
+        entries={forward}
+        className="h-7 w-7 shrink-0"
+      />
+    </>
+  );
+}
+
+/** Phone: the back button beside the menu; hold it for the list. */
+export function PhoneBackButton() {
+  const { back } = useReach();
+  return (
+    <HistoryButton
+      dir="back"
+      entries={back}
+      className="relative h-8 w-8 shrink-0 after:absolute after:-inset-1.5 after:content-['']"
+    />
+  );
+}

package/components/Pane/MobileTabBar.tsx

@@ -44,6 +44,7 @@ import { useCanAddAnalyst } from "@/components/Analyst/pair";
 import { MoveMenuItems } from "@/components/Tasks/MoveMenuItems";
 import { ChatBookmarksButton } from "@/components/Bookmarks/ChatBookmarksButton";
 import type { ViewMode } from "@/contexts/PaneContext";
+import { PhoneBackButton } from "@/components/Nav/HistoryButtons";
 import { MobileViewPicker } from "./MobileViewPicker";
 
 interface MobileTabBarProps {
@@ -169,6 +170,8 @@ export function MobileTabBar({
         </Button>
       )}
 
+      <PhoneBackButton />
+
       {/* Session/Tab navigation */}
       <div className="flex min-w-0 flex-1 items-center gap-1">
         <button

package/components/Pane/index.tsx

@@ -255,7 +255,7 @@ export const Pane = memo(function Pane({
       fileOpenActions.clearRequest();
       // TODO: Scroll to line (requires FileEditor enhancement)
     }
-  }, [fileOpenRequest, isFocused, session, fileEditor]);
+  }, [fileOpenRequest, isFocused, session, fileEditor, setViewMode]);
 
   // An artifact's file, opened in the Files view.
   const openInFiles = useCallback(
@@ -291,7 +291,7 @@ export const Pane = memo(function Pane({
 
   // Create onConnected callback for a specific tab
   const getTerminalConnectedHandler = useCallback(
-    (tab: (typeof paneData.tabs)[0]) => () => {
+    (tab: TabData) => () => {
       console.log(
         `[AgentOS] Terminal connected for pane: ${paneId}, tab: ${tab.id}`
       );

package/components/SessionList/useSessionSwitching.ts

@@ -4,11 +4,12 @@ import { MessageSquare } from "lucide-react";
 import { useKeybindings } from "@/hooks/useKeybindings";
 import { usePaletteCommands } from "@/hooks/usePaletteCommands";
 import { chordHint } from "@/lib/keybindings/chord";
+import { keysOf } from "@/lib/keybindings/keymap";
 import { fieldOwnsKey } from "@/lib/keybindings/focus";
 import { neighbourSession } from "@/lib/sidebar/visible-order";
 
-const PREVIOUS = "mod+up";
-const NEXT = "mod+down";
+const PREVIOUS = keysOf("session.previous");
+const NEXT = keysOf("session.next");
 
 // ⌘↑ / ⌘↓ (Ctrl off a Mac) select the row above or below the active one, as
 // a click would, in the order the sidebar shows. Nothing happens at either end.

package/components/Shortcuts/PendingKeys.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useSnapshot } from "valtio";
+import { shortcutsUi } from "@/stores/shortcutsUi";
+
+/** The first key of a sequence, shown until the second comes or time runs out. */
+export function PendingKeys() {
+  const { pending } = useSnapshot(shortcutsUi);
+  if (!pending) return null;
+  return (
+    <div
+      role="status"
+      className="bg-popover text-popover-foreground border-foreground/10 pointer-events-none fixed bottom-4 left-1/2 z-50 -translate-x-1/2 rounded-md border px-3 py-1.5 text-sm shadow-md"
+    >
+      <kbd className="font-mono font-medium uppercase">{pending}</kbd>
+      <span className="text-muted-foreground ml-2">then…</span>
+    </div>
+  );
+}

package/components/Shortcuts/ShortcutsButton.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Keyboard } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { shortcutsUiActions } from "@/stores/shortcutsUi";
+
+/** A footer icon that opens the shortcuts panel; on a phone it is the only way in. */
+export function ShortcutsButton() {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      title="Keyboard shortcuts (?)"
+      aria-label="Keyboard shortcuts"
+      onClick={() => shortcutsUiActions.open()}
+      className="text-muted-foreground relative h-8 w-8 after:absolute after:-inset-1.5 after:content-[''] md:after:hidden [@media(hover:none)]:md:h-11 [@media(hover:none)]:md:w-11"
+    >
+      <Keyboard className="h-4 w-4" />
+    </Button>
+  );
+}

package/components/Shortcuts/ShortcutsDialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { useSnapshot } from "valtio";
+import { Search } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Switch } from "@/components/ui/switch";
+import { useSingleKeys } from "@/hooks/useNavKeys";
+import { chordHint, isMac } from "@/lib/keybindings/chord";
+import {
+  isSequence,
+  searchKeymap,
+  type KeyEntry,
+  type KeyGroup,
+} from "@/lib/keybindings/keymap";
+import { shortcutsUi, shortcutsUiActions } from "@/stores/shortcutsUi";
+
+const GROUPS: KeyGroup[] = ["Go to", "Chats", "General", "Browser"];
+
+// The browser's own keys for back and forward, per platform.
+function hint(k: KeyEntry): string[] {
+  if (isSequence(k.keys)) return k.keys.split(" ").map((x) => x.toUpperCase());
+  if (k.browser) {
+    if (!isMac()) return [k.id === "history.back" ? "Alt+←" : "Alt+→"];
+    const arrow = k.keys.replace("[", "left").replace("]", "right");
+    return [chordHint(k.keys, true), chordHint(arrow, true)];
+  }
+  return [chordHint(k.keys)];
+}
+
+function Row({ k }: { k: KeyEntry }) {
+  const parts = hint(k);
+  return (
+    <li className="flex min-h-11 items-center justify-between gap-3 py-1 md:min-h-8">
+      <span className="min-w-0 text-sm">{k.label}</span>
+      <span className="flex shrink-0 items-center gap-1">
+        {isSequence(k.keys) ? (
+          parts.map((p, i) => <Kbd key={i}>{p}</Kbd>)
+        ) : (
+          <Kbd>{parts.join(" · ")}</Kbd>
+        )}
+      </span>
+    </li>
+  );
+}
+
+const Kbd = ({ children }: { children: React.ReactNode }) => (
+  <kbd className="bg-muted text-muted-foreground min-w-6 rounded border px-1.5 py-0.5 text-center font-mono text-xs">
+    {children}
+  </kbd>
+);
+
+/** Every shortcut, searchable, with the switch that turns the bare-key ones off. */
+export function ShortcutsDialog() {
+  const { open } = useSnapshot(shortcutsUi);
+  const [query, setQuery] = useState("");
+  const [singles, setSingles] = useSingleKeys();
+  const found = searchKeymap(query);
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        shortcutsUiActions.setOpen(o);
+        if (!o) setQuery("");
+      }}
+    >
+      <DialogContent className="flex max-h-[min(80dvh,640px)] flex-col gap-3 sm:max-w-lg">
+        <DialogTitle>Keyboard shortcuts</DialogTitle>
+        <DialogDescription className="sr-only">
+          Search the shortcuts and turn the single-key ones off
+        </DialogDescription>
+        <label className="border-foreground/10 flex items-center gap-2 rounded-md border px-3">
+          <Search className="text-muted-foreground h-4 w-4 shrink-0" />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search shortcuts…"
+            aria-label="Search shortcuts"
+            className="placeholder:text-muted-foreground h-11 min-w-0 flex-1 bg-transparent text-base outline-none sm:text-sm"
+          />
+        </label>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          {found.length === 0 && (
+            <p className="text-muted-foreground py-6 text-center text-sm">
+              No shortcut matches.
+            </p>
+          )}
+          {GROUPS.map((g) => {
+            const rows = found.filter((k) => k.group === g);
+            if (!rows.length) return null;
+            return (
+              <section key={g} className="mb-3">
+                <h3 className="label-mono text-muted-foreground mb-1">{g}</h3>
+                <ul>
+                  {rows.map((k) => (
+                    <Row key={k.id} k={k} />
+                  ))}
+                </ul>
+              </section>
+            );
+          })}
+        </div>
+        <label className="border-foreground/10 flex min-h-11 items-center justify-between gap-3 border-t pt-3 text-sm">
+          <span>
+            Single-key shortcuts
+            <span className="text-muted-foreground block text-xs">
+              Letters like C and G I, only when you are not typing. This browser
+              only.
+            </span>
+          </span>
+          <Switch checked={singles} onCheckedChange={setSingles} />
+        </label>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/SidebarFooter.tsx

@@ -1,6 +1,7 @@
 import { TipButton } from "@/components/Tips";
 import { WhatsNewButton } from "@/components/WhatsNew";
 import { ThemeToggle } from "@/components/ThemeToggle";
+import { ShortcutsButton } from "@/components/Shortcuts/ShortcutsButton";
 import {
   Tooltip,
   TooltipContent,
@@ -13,6 +14,7 @@ export function SidebarFooter() {
       <div className="flex items-center justify-between">
         <span className="label-mono text-muted-foreground">Theme</span>
         <div className="flex items-center">
+          <ShortcutsButton />
           <TipButton />
           <WhatsNewButton />
           <ThemeToggle />

package/components/Terminal/hooks/useTerminalConnection.ts

@@ -137,7 +137,8 @@ export function useTerminalConnection({
 
   // Main setup effect
   useEffect(() => {
-    if (!terminalRef.current) return;
+    const container = terminalRef.current;
+    if (!container) return;
 
     let cancelled = false;
     // Reset intentional close flag (may be true from previous cleanup)
@@ -220,9 +221,9 @@ export function useTerminalConnection({
 
       // Save scroll state before unmount
       const term = xtermRef.current;
-      if (term && callbacksRef.current.onBeforeUnmount && terminalRef.current) {
+      if (term && callbacksRef.current.onBeforeUnmount) {
         const buffer = term.buffer.active;
-        const viewport = terminalRef.current.querySelector(
+        const viewport = container.querySelector(
           ".xterm-viewport"
         ) as HTMLElement;
         callbacksRef.current.onBeforeUnmount({

package/components/Tips/TipDialog.tsx

@@ -61,7 +61,7 @@ export function TipDialog({
       <DialogContent
         showCloseButton={false}
         placement={wide ? "center" : "sheet"}
-        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[26rem]"
+        className="flex max-h-[85dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[26rem] md:max-w-[36rem]"
       >
         <div className="bg-muted-foreground/40 mx-auto mt-2 h-1 w-9 rounded-full md:hidden" />
         <div className="flex items-center gap-2 px-4 pt-3 pb-1">

package/components/Tips/TipMedia.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { Play } from "lucide-react";
+import { Maximize2, Play } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRef, useState } from "react";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { MediaViewer } from "@/components/Media/MediaViewer";
+import { pickSrc } from "@/components/Media/viewer";
 import type { Media } from "@/lib/tips/schema";
 
 /** A tip's still or clip, sized by its own dimensions so nothing jumps as it loads. */
@@ -11,18 +13,49 @@ export function TipMedia({ media }: { media: Media }) {
   const { resolvedTheme } = useTheme();
   const reduced = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [played, setPlayed] = useState(false);
+  const [expanded, setExpanded] = useState(false);
   const video = useRef<HTMLVideoElement>(null);
   const dark = !!resolvedTheme && !resolvedTheme.startsWith("light");
   const frame =
     "bg-muted relative max-h-[40dvh] w-full overflow-hidden rounded-lg";
   const style = { aspectRatio: `${media.width} / ${media.height}` };
+  const src = pickSrc(media, dark);
+  const expand = (
+    <>
+      <button
+        type="button"
+        aria-label={`Expand ${media.kind === "image" ? "image" : "clip"}: ${media.alt}`}
+        onClick={() => setExpanded(true)}
+        className="focus-visible:ring-ring absolute inset-0 cursor-zoom-in focus-visible:ring-2 focus-visible:outline-none"
+      >
+        <span
+          aria-hidden
+          className="absolute top-2 right-2 grid size-7 place-items-center rounded-md bg-black/60 text-white"
+        >
+          <Maximize2 className="size-3.5" />
+        </span>
+      </button>
+      <MediaViewer
+        media={{
+          kind: media.kind,
+          src,
+          alt: media.alt,
+          width: media.width,
+          height: media.height,
+          poster: media.kind === "video" ? media.poster : undefined,
+        }}
+        open={expanded}
+        onOpenChange={setExpanded}
+      />
+    </>
+  );
 
   if (media.kind === "image")
     return (
       <div className={frame} style={style}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
-          src={dark && media.srcDark ? media.srcDark : media.src}
+          src={src}
           alt={media.alt}
           width={media.width}
           height={media.height}
@@ -30,6 +63,7 @@ export function TipMedia({ media }: { media: Media }) {
           decoding="async"
           className="size-full object-contain"
         />
+        {expand}
       </div>
     );
 
@@ -51,6 +85,7 @@ export function TipMedia({ media }: { media: Media }) {
         preload={reduced ? "none" : "metadata"}
         className="size-full object-contain"
       />
+      {expand}
       {still && (
         <button
           type="button"
@@ -59,7 +94,7 @@ export function TipMedia({ media }: { media: Media }) {
             setPlayed(true);
             void video.current?.play();
           }}
-          className="absolute inset-0 grid place-items-center bg-black/20"
+          className="absolute top-1/2 left-1/2 z-10 -translate-x-1/2 -translate-y-1/2"
         >
           <span className="bg-background/90 grid size-11 place-items-center rounded-full shadow">
             <Play className="size-5" />