@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/agent/ContextDialog.tsx

@@ -2,6 +2,8 @@ import type { ContextUsage } from '@workerdeck/protocol'
 import { Dialog, DialogBody, DialogContent, DialogHeader } from '../ui/Dialog.tsx'
 import { cn } from '../../lib/utils.ts'
 import { formatTokens } from '../../lib/format.ts'
+import { cssColor } from '../../lib/css.ts'
+import { meterTintClass } from '../../lib/status.ts'
 
 export interface ContextDialogProps {
   usage?: ContextUsage
@@ -10,75 +12,52 @@ export interface ContextDialogProps {
   className?: string
 }
 
-/** The CLI reports category colors as its own theme token names ('inactive',
- * 'promptBorder', ...), not CSS colors — only pass through what CSS can render. */
-const cssColor = (color: string): string | undefined =>
-  typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
-
-const usageTint = (pct: number) => (pct >= 90 ? 'bg-danger' : pct >= 70 ? 'bg-warning' : 'bg-accent')
-
-/**
- * What is in the model's context window right now, category by category.
- *
- * One of the three panels the status bar opens. Context, usage and session info
- * are different questions asked at different moments, so they are different
- * screens rather than one "details" list you scroll past two answers to reach.
- */
 export function ContextDialog({ usage, open, onOpenChange, className }: ContextDialogProps) {
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className={className}>
-        <DialogHeader title='Context' description={usage?.model} />
+        <DialogHeader title="Context" description={usage?.model} />
         <DialogBody>
           {!usage ? (
-            <p className='py-6 text-center text-body-sm text-fg-4'>
+            <p className="py-6 text-center text-body-sm text-fg-4">
               No reading yet — the context window is measured after a turn completes.
             </p>
           ) : (
             <>
-              <div className='flex items-baseline justify-between gap-4'>
-                <span className='text-label text-fg-3'>Used</span>
-                <span className='font-mono text-body-sm text-fg-1'>
-                  {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} ·{' '}
-                  {usage.percentage.toFixed(0)}%
+              <div className="flex items-baseline justify-between gap-4">
+                <span className="text-label text-fg-3">Used</span>
+                <span className="font-mono text-body-sm text-fg-1">
+                  {formatTokens(usage.totalTokens)} / {formatTokens(usage.maxTokens)} · {usage.percentage.toFixed(0)}%
                 </span>
               </div>
-              <div className='mt-2 h-2 overflow-hidden rounded-full bg-border'>
+              <div className="mt-2 h-2 overflow-hidden rounded-full bg-border">
                 <div
-                  className={cn('h-full rounded-full', usageTint(usage.percentage))}
+                  className={cn('h-full rounded-full', meterTintClass(usage.percentage))}
                   style={{ width: `${Math.min(100, Math.max(2, usage.percentage))}%` }}
                 />
               </div>
-              {/* Codex reports occupancy with no breakdown, so an engine can send
-                  a real reading and an empty `categories`. A "Breakdown" heading
-                  over nothing reads as a failed load; the row above already says
-                  everything that is known. */}
               {usage.categories.length > 0 ? (
-                <div className='mt-5'>
-                  <h3 className='text-label font-medium text-fg-3'>Breakdown</h3>
-                  <div className='mt-2 flex flex-col gap-3'>
+                <div className="mt-5">
+                  <h3 className="text-label font-medium text-fg-3">Breakdown</h3>
+                  <div className="mt-2 flex flex-col gap-3">
                     {usage.categories.map((category) => {
                       const share = (category.tokens / Math.max(usage.maxTokens, 1)) * 100
                       const color = cssColor(category.color)
                       return (
                         <div key={category.name}>
-                          <div className='flex items-baseline justify-between gap-3'>
-                            <span className='flex min-w-0 items-center gap-2'>
+                          <div className="flex items-baseline justify-between gap-3">
+                            <span className="flex min-w-0 items-center gap-2">
                               <span
-                                className='size-2 shrink-0 rounded-full bg-fg-4'
+                                className="size-2 shrink-0 rounded-full bg-fg-4"
                                 style={color ? { backgroundColor: color } : undefined}
                               />
-                              <span className='truncate text-body-sm text-fg-1'>
-                                {category.name}
-                              </span>
-                            </span>
-                            <span className='shrink-0 font-mono text-label text-fg-3'>
-                              {formatTokens(category.tokens)}
+                              <span className="truncate text-body-sm text-fg-1">{category.name}</span>
                             </span>
+                            <span className="shrink-0 font-mono text-label text-fg-3">{formatTokens(category.tokens)}</span>
                           </div>
-                          <div className='mt-1 h-1 overflow-hidden rounded-full bg-border'>
+                          <div className="mt-1 h-1 overflow-hidden rounded-full bg-border">
                             <div
-                              className='h-full rounded-full bg-fg-4'
+                              className="h-full rounded-full bg-fg-4"
                               style={{
                                 width: `${Math.min(100, share)}%`,
                                 backgroundColor: color,

package/src/components/agent/ContextRing.tsx

@@ -4,37 +4,15 @@ import { cn } from '../../lib/utils.ts'
 import { formatTokens } from '../../lib/format.ts'
 import { meterColorClass } from '../../lib/status.ts'
 
-/**
- * How full a session's context window is, sized for a **list row**.
- *
- * The reading the session screen has always drawn, moved somewhere it answers a
- * question the session screen cannot: *which* of these thirty sessions is
- * bloating. That is also why it is a ring and not a number — across a list, a
- * ring is read at a glance and `71%` has to be read one row at a time.
- *
- * **Absent draws nothing, and absent is not zero.** A promptless session, a
- * parked one from before the field existed, or an engine that reports no window
- * has no reading; an empty ring would claim its context is empty rather than
- * unknown. The title carries the exact numbers for anyone who wants them.
- *
- * Shared rather than spelled per client: the dashboard's row and the VS Code
- * sidebar's card both draw it, and two copies would be two sets of thresholds
- * the day one of them is nudged.
- */
-export function ContextRing({
-  usage,
-  size = 11,
-  className,
-}: {
-  usage: ContextReading | undefined
-  size?: number
-  className?: string
-}) {
-  if (usage === undefined) return null
+export function ContextRing({ usage, size = 11, className }: { usage: ContextReading | undefined; size?: number; className?: string }) {
+  if (usage === undefined) {
+    return null
+  }
   return (
     <span
       title={`Context ${usage.percentage.toFixed(0)}% · ${formatTokens(usage.totalTokens)} / ${formatTokens(usage.maxTokens)}`}
-      className={cn('shrink-0 leading-none', meterColorClass(usage.percentage), className)}>
+      className={cn('shrink-0 leading-none', meterColorClass(usage.percentage), className)}
+    >
       <ProgressRing value={usage.percentage} size={size} strokeWidth={2} />
     </span>
   )

package/src/components/agent/Conversation.tsx

@@ -8,40 +8,28 @@ export interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>,
   children: ReactNode
 }
 
-/** Scroll container that stays pinned to the bottom while streaming, unless the user
- * scrolls up — plus a floating scroll-to-bottom button.
- *
- * **Nothing here animates its scroll position.** `initial` and `resize` are both
- * `'instant'` and are no longer configurable: the follow spring's job is to
- * *stay* at the bottom, not to travel there, and every travel a reader has ever
- * complained about on this surface was an animation we asked for. The `resize`
- * prop used to exist so a caller could pick, which required the caller to know
- * whether the transcript was streaming or replaying — a latch's worth of
- * machinery to decide something that has one right answer. */
 export function Conversation({ className, children, ...props }: ConversationProps) {
   return (
     <StickToBottom
-      data-slot='conversation'
+      data-slot="conversation"
       className={cn('relative flex-1 overflow-y-auto', className)}
-      initial='instant'
-      resize='instant'
-      role='log'
-      {...props}>
+      initial="instant"
+      resize="instant"
+      role="log"
+      {...props}
+    >
       {children}
     </StickToBottom>
   )
 }
 
-export function ConversationContent({
-  className,
-  children,
-  ...props
-}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+export function ConversationContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
   return (
     <StickToBottom.Content
-      data-slot='conversation-content'
+      data-slot="conversation-content"
       className={cn('mx-auto flex w-full max-w-[var(--wd-transcript-max-width)] flex-col gap-4 px-4 py-4', className)}
-      {...props}>
+      {...props}
+    >
       {children}
     </StickToBottom.Content>
   )
@@ -49,19 +37,19 @@ export function ConversationContent({
 
 export function ConversationScrollButton({ className }: { className?: string }) {
   const { isAtBottom, scrollToBottom } = useStickToBottomContext()
-  if (isAtBottom) return null
+  if (isAtBottom) {
+    return null
+  }
   return (
     <Button
-      variant='outline'
-      size='icon'
-      aria-label='Scroll to bottom'
-      data-slot='conversation-scroll-button'
-      className={cn(
-        'absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-(--shadow-md)',
-        className,
-      )}
-      onClick={() => void scrollToBottom('instant')}>
-      <ArrowDown className='size-4' />
+      variant="outline"
+      size="icon"
+      aria-label="Scroll to bottom"
+      data-slot="conversation-scroll-button"
+      className={cn('absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full shadow-(--shadow-md)', className)}
+      onClick={() => void scrollToBottom('instant')}
+    >
+      <ArrowDown className="size-4" />
     </Button>
   )
 }

package/src/components/agent/EditorTabs.tsx

@@ -13,32 +13,15 @@ export interface EditorTabsProps {
   className?: string
 }
 
-/**
- * The open-file tab strip.
- *
- * Hand-rolled rather than built on `@base-ui/react`'s `Tabs`: a VS Code tab
- * carries a close button, and a `<button>` inside a `<button>` is invalid HTML —
- * getting the primitive to render something else costs more than the roving
- * tabindex it would have provided. So that part is here, explicitly, along with
- * the two affordances that actually make a tab strip feel right: middle-click to
- * close, and the active tab scrolling itself into view.
- *
- * Deliberately state-free. Which files are open, which is focused and what
- * closing does are all decided by `useOpenFiles`.
- */
 export function EditorTabs({ files, activePath, onActivate, onClose, className }: EditorTabsProps) {
   return (
-    // Grouped, so moving along the strip shows each tab's path immediately
-    // instead of re-serving the open delay on every tab.
     <TooltipProvider delay={500} closeDelay={0}>
       <div
-        data-slot='editor-tabs'
-        role='tablist'
-        aria-label='Open files'
-        className={cn(
-          'flex shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface',
-          className,
-        )}>
+        data-slot="editor-tabs"
+        role="tablist"
+        aria-label="Open files"
+        className={cn('flex shrink-0 items-stretch overflow-x-auto border-b border-border bg-surface', className)}
+      >
         {files.map((file) => (
           <Tab
             key={file.path}
@@ -49,7 +32,9 @@ export function EditorTabs({ files, activePath, onActivate, onClose, className }
             onArrow={(direction) => {
               const index = files.findIndex((f) => f.path === file.path)
               const next = files[index + direction]
-              if (next) onActivate(next.path)
+              if (next) {
+                onActivate(next.path)
+              }
             }}
           />
         ))}
@@ -73,41 +58,41 @@ function Tab({
 }) {
   const dirty = isDirty(file)
   const ref = useRef<HTMLDivElement>(null)
-  // Opening a file from the tree can push the new tab off the end of the strip;
-  // the point of opening it was to look at it. `nearest` scrolls the minimum, so
-  // a tab already on screen stays exactly where it is.
   useEffect(() => {
-    if (active) ref.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    if (active) {
+      ref.current?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
   }, [active])
 
   const onAuxClick = (event: ReactMouseEvent) => {
-    // Middle click. `auxclick` rather than `mousedown` so it matches how every
-    // other middle-click target on the platform behaves.
-    if (event.button !== 1) return
+    if (event.button !== 1) {
+      return
+    }
     event.preventDefault()
     onClose()
   }
 
   return (
-    // The tab *is* the trigger (`render`), and it carries the full path — which
-    // is why the viewer no longer spends a whole row on a line of monospace
-    // nobody reads. No `title` alongside it: the browser's native tooltip would
-    // show up underneath this one.
     <Tip
-      side='bottom'
+      side="bottom"
       render={
         <div
           ref={ref}
-          role='tab'
+          role="tab"
           tabIndex={active ? 0 : -1}
           aria-selected={active}
           onClick={onActivate}
           onAuxClick={onAuxClick}
           onKeyDown={(event) => {
-            if (event.key === 'ArrowRight') onArrow(1)
-            else if (event.key === 'ArrowLeft') onArrow(-1)
-            else if (event.key === 'Enter' || event.key === ' ') onActivate()
-            else return
+            if (event.key === 'ArrowRight') {
+              onArrow(1)
+            } else if (event.key === 'ArrowLeft') {
+              onArrow(-1)
+            } else if (event.key === 'Enter' || event.key === ' ') {
+              onActivate()
+            } else {
+              return
+            }
             event.preventDefault()
           }}
           className={cn(
@@ -118,45 +103,32 @@ function Tab({
         />
       }
       content={
-        <span className='flex flex-col gap-0.5'>
-          <span className='font-mono break-all'>{file.path}</span>
-          {file.bytes !== undefined ? (
-            <span className='text-fg-4'>{formatBytes(file.bytes)}</span>
-          ) : null}
+        <span className="flex flex-col gap-0.5">
+          <span className="font-mono break-all">{file.path}</span>
+          {file.bytes !== undefined ? <span className="text-fg-4">{formatBytes(file.bytes)}</span> : null}
         </span>
-      }>
-      <span className={cn('max-w-40 truncate font-mono text-label', dirty && 'italic')}>
-        {file.name}
-      </span>
-      {/* Errors are the one state the strip shows, because a failed tab
-          otherwise looks identical to a loaded one until you focus it. */}
-      {file.status === 'error' ? <span className='shrink-0 text-danger'>!</span> : null}
+      }
+    >
+      <span className={cn('max-w-40 truncate font-mono text-label', dirty && 'italic')}>{file.name}</span>
+      {file.status === 'error' ? <span className="shrink-0 text-danger">!</span> : null}
       <button
-        type='button'
+        type="button"
         aria-label={dirty ? `Close ${file.name} (unsaved changes)` : `Close ${file.name}`}
         onClick={(event) => {
-          // Without this the click also activates the tab being closed, which
-          // fights the reducer's focus-the-neighbour rule.
           event.stopPropagation()
           onClose()
         }}
         className={cn(
           'shrink-0 rounded p-0.5 text-fg-4 transition-opacity hover:bg-surface-hover hover:text-fg-1',
-          // Always reachable by keyboard and on touch; only *shown* on hover for
-          // the tab you are pointing at, as VS Code does.
-          active || dirty
-            ? 'opacity-70'
-            : 'opacity-0 group-hover:opacity-70 focus-visible:opacity-100',
-        )}>
-        {/* VS Code's move: a dirty tab shows a dot where the ✕ goes, and the ✕
-            comes back when you point at it — so unsaved work is visible at rest
-            without taking away the way to close it. */}
+          active || dirty ? 'opacity-70' : 'opacity-0 group-hover:opacity-70 focus-visible:opacity-100',
+        )}
+      >
         <span className={cn('block', dirty && 'group-hover:hidden')}>
-          {dirty ? <span className='block size-3 rounded-full bg-fg-2' /> : <X className='size-3' />}
+          {dirty ? <span className="block size-3 rounded-full bg-fg-2" /> : <X className="size-3" />}
         </span>
         {dirty ? (
-          <span className='hidden group-hover:block'>
-            <X className='size-3' />
+          <span className="hidden group-hover:block">
+            <X className="size-3" />
           </span>
         ) : null}
       </button>

package/src/components/agent/EngineIcon.tsx

@@ -1,22 +1,6 @@
 import { cn } from '../../lib/utils.ts'
 
-/**
- * The engine's own mark, monochrome.
- *
- * Inlined rather than depended on: the React package these come from
- * (`@lobehub/icons`) pulls antd, `@lobehub/ui` and a second copy of
- * lucide-react — an absurd amount of bundle for a few glyphs in a sidebar.
- * These are paths from `@lobehub/icons-static-svg` (MIT, © LobeHub), already
- * `fill="currentColor"` single-path marks, so they take the row's colour like
- * any other glyph and need no light/dark variants.
- *
- * The marks are trademarks of their owners (Anthropic, OpenAI, Google,
- * DeepSeek, Moonshot), used here only to identify which engine a session runs
- * on.
- *
- * Codex is drawn as OpenAI: the session's engine *is* OpenAI's, and OpenAI's
- * mark is the one a person recognises at 12px.
- */
+// Paths from `@lobehub/icons-static-svg` (MIT, © LobeHub), inlined. The marks are trademarks of their owners, used only to identify a session's engine.
 const PATHS: Record<string, { title: string; d: string }> = {
   claude: {
     title: 'Claude',
@@ -40,44 +24,35 @@ const PATHS: Record<string, { title: string; d: string }> = {
   },
 }
 
-/**
- * Which mark a session wears.
- *
- * The two first-party engines are named directly. A `provider` session is
- * whatever the host wired up, so its *model* is the only thing that says whose
- * it is — sniffed loosely on purpose (`gemini-2.5-pro`, `deepseek-chat`,
- * `kimi-k2`), and falling through to no mark rather than guessing wrong.
- */
 export function engineMark(engine: string, model?: string): string | undefined {
-  if (engine === 'claude') return 'claude'
-  if (engine === 'codex') return 'codex'
+  if (engine === 'claude') {
+    return 'claude'
+  }
+  if (engine === 'codex') {
+    return 'codex'
+  }
   const id = model?.toLowerCase() ?? ''
-  if (!id) return undefined
-  if (id.includes('gemini')) return 'gemini'
-  if (id.includes('deepseek')) return 'deepseek'
-  if (id.includes('moonshot') || id.includes('kimi')) return 'moonshot'
-  if (id.includes('claude')) return 'claude'
+  if (!id) {
+    return undefined
+  }
+  if (id.includes('gemini')) {
+    return 'gemini'
+  }
+  if (id.includes('deepseek')) {
+    return 'deepseek'
+  }
+  if (id.includes('moonshot') || id.includes('kimi')) {
+    return 'moonshot'
+  }
+  if (id.includes('claude')) {
+    return 'claude'
+  }
   if (id.startsWith('gpt') || id.startsWith('o1') || id.startsWith('o3') || id.includes('openai')) {
     return 'codex'
   }
   return undefined
 }
 
-/**
- * Which engines wear their vendor's colour, and **how far it reaches**.
- *
- * `MARK` is the glyph, `TEXT` is the model name beside it. They are the same for
- * Anthropic and deliberately not for OpenAI, because the two brands differ in
- * kind rather than in hue: coral is an accent, and OpenAI's guidelines forbid
- * adding colour to the mark at all, so theirs is pure white/black. At full
- * contrast that is right on a 12px glyph and wrong on an 11px label — a
- * pure-white model name is *brighter than the session title above it*, which
- * inverts the row's whole hierarchy to say something the mark has already said.
- * So OpenAI's name keeps the muted line it always had, which is also the most
- * literal reading of "don't add any colors".
- *
- * Anything absent falls through to muted on both counts.
- */
 const VENDOR_MARK: Record<string, string> = {
   claude: 'text-vendor-claude',
   codex: 'text-vendor-openai',
@@ -86,35 +61,16 @@ const VENDOR_TEXT: Record<string, string> = {
   claude: 'text-vendor-claude',
 }
 
-/** The colour a session's engine mark wears. Pass it to `EngineIcon`'s
- *  `className` rather than to a parent: the svg carries its own `text-fg-3`,
- *  and only a class on the element itself is merged over it. */
 export function vendorMarkClass(engine: string, model?: string): string {
   return VENDOR_MARK[engineMark(engine, model) ?? ''] ?? 'text-fg-3'
 }
 
-/** The colour the model *name* wears beside that mark — muted unless the vendor
- *  is one whose accent survives at label size. See `VENDOR_TEXT`.
- *
- *  The fallback is `text-fg-3` rather than the metadata line's own `text-fg-4`,
- *  so an unbranded model still sits one step above the project and gateway
- *  beside it — the order the spec lists them in, held without a colour. */
 export function vendorTextClass(engine: string, model?: string): string {
   return VENDOR_TEXT[engineMark(engine, model) ?? ''] ?? 'text-fg-3'
 }
 
-export function EngineIcon({
-  engine,
-  model,
-  className,
-}: {
-  engine: string
-  model?: string
-  className?: string
-}) {
+export function EngineIcon({ engine, model, className }: { engine: string; model?: string; className?: string }) {
   const mark = PATHS[engineMark(engine, model) ?? '']
-  // An engine this build has never heard of still gets a slot, so the second
-  // line doesn't reflow around a missing glyph.
   if (!mark) {
     return (
       <span aria-hidden title={engine} className={cn('shrink-0 text-fg-3', className)}>
@@ -124,12 +80,13 @@ export function EngineIcon({
   }
   return (
     <svg
-      viewBox='0 0 24 24'
-      fill='currentColor'
-      fillRule='evenodd'
-      role='img'
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      fillRule="evenodd"
+      role="img"
       aria-label={mark.title}
-      className={cn('size-3 shrink-0 text-fg-3', className)}>
+      className={cn('size-3 shrink-0 text-fg-3', className)}
+    >
       <title>{mark.title}</title>
       <path d={mark.d} />
     </svg>

package/src/components/agent/EntryIcon.tsx

@@ -0,0 +1,16 @@
+import { File, Folder, Link2 } from 'lucide-react'
+import type { HostDirEntry } from '@workerdeck/protocol'
+
+/**
+ * The icon for one host directory entry. A symlink is drawn as a link and never silently
+ * resolved — the caller decides what a symlink means, the tree only says it is one.
+ */
+export function EntryIcon({ type }: { type: HostDirEntry['type'] }) {
+  if (type === 'dir') {
+    return <Folder className="size-3.5 shrink-0 text-accent" />
+  }
+  if (type === 'symlink') {
+    return <Link2 className="size-3.5 shrink-0 text-fg-4" />
+  }
+  return <File className="size-3.5 shrink-0 text-fg-4" />
+}

package/src/components/agent/FileCard.tsx

@@ -7,28 +7,21 @@ export type FileDeliveredItem = Extract<TranscriptItem, { kind: 'file_delivered'
 
 export interface FileCardProps {
   item: FileDeliveredItem
-  /** Download URL for the delivered path (the server's session file route).
-   * Without it the card renders informational only. */
   href?: string
   className?: string
 }
 
-/** A file the agent handed over (`file_delivered`): name, size, download link.
- * The file lives in the session's in-memory VFS — the link works while the
- * session lives. */
 export function FileCard({ item, href, className }: FileCardProps) {
   const name = item.path.split('/').pop() || item.path
   return (
     <div
-      data-slot='file-delivered'
-      className={cn(
-        'flex w-full items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2.5',
-        className,
-      )}>
-      <FileText className='size-4 shrink-0 text-fg-3' />
-      <div className='min-w-0 flex-1'>
-        <div className='truncate font-mono text-body-sm font-medium text-fg-1'>{name}</div>
-        <div className='truncate text-label text-fg-4'>
+      data-slot="file-delivered"
+      className={cn('flex w-full items-center gap-3 rounded-lg border border-border bg-surface px-3 py-2.5', className)}
+    >
+      <FileText className="size-4 shrink-0 text-fg-3" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate font-mono text-body-sm font-medium text-fg-1">{name}</div>
+        <div className="truncate text-label text-fg-4">
           {formatBytes(item.bytes)}
           {item.description ? ` · ${item.description}` : ''}
         </div>
@@ -40,8 +33,9 @@ export function FileCard({ item, href, className }: FileCardProps) {
           className={cn(
             'flex shrink-0 items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5',
             'text-body-sm text-fg-2 transition-colors hover:bg-surface-hover',
-          )}>
-          <Download className='size-3.5' />
+          )}
+        >
+          <Download className="size-3.5" />
           Download
         </a>
       ) : null}