@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/blog/blog-types.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from 'react'
+
+export type BlogPostAuthor = {
+  readonly avatar?: string
+  readonly bio?: string
+  readonly name: string
+  readonly role?: string
+}
+
+export type BlogPostSummary = {
+  readonly author: BlogPostAuthor
+  readonly category: string
+  readonly coverImage: string
+  readonly date: string
+  readonly excerpt: string
+  readonly href: string
+  readonly id: string
+  readonly isFeatured?: boolean
+  readonly readingTime: string
+  readonly tags?: readonly string[]
+  readonly title: string
+}
+
+export type BlogPostArticle = BlogPostSummary & {
+  readonly contentHtml?: string
+  readonly relatedPosts?: readonly BlogPostSummary[]
+  readonly tableOfContents?: readonly {
+    readonly href: string
+    readonly id: string
+    readonly level: number
+    readonly title: string
+  }[]
+}
+
+export type BlogCardProps = {
+  readonly className?: string
+  readonly onSelect?: (postId: string) => void
+  readonly post: BlogPostSummary
+  readonly variant?: 'compact' | 'horizontal' | 'standard'
+}
+
+export type BlogReaderProps = {
+  readonly article: BlogPostArticle
+  readonly children?: ReactNode
+  readonly className?: string
+  readonly onShare?: (platform: 'twitter' | 'linkedin' | 'copy') => void
+}

package/src/blocks/blog/index.ts

@@ -0,0 +1,3 @@
+export * from './blog-card'
+export * from './blog-reader'
+export * from './blog-types'

package/src/blocks/chat-composer/chat-composer.tsx

@@ -0,0 +1,140 @@
+import { FileImageIcon, MicIcon, PaperclipIcon, SquareIcon, XIcon } from 'lucide-react'
+import { useRef, useState, type ChangeEvent, type ClipboardEvent, type DragEvent, type KeyboardEvent, type RefObject } from 'react'
+
+import { Button } from '../../components/button'
+import { Textarea } from '../../components/textarea'
+import { cn } from '../../lib/utils'
+
+export type ChatComposerAttachment = {
+  file: File
+  id: string
+  name: string
+  previewUrl?: string
+  type: string
+}
+
+export type ChatComposerProps = {
+  attachments?: readonly ChatComposerAttachment[]
+  className?: string
+  disabled?: boolean
+  isRecording?: boolean
+  isWorking?: boolean
+  onAddFiles?: (files: File[]) => void
+  onLongTextPaste?: (file: File) => void
+  onRemoveAttachment?: (id: string) => void
+  onSteer?: () => void
+  onStop?: () => void
+  onSubmit: () => void
+  onValueChange: (value: string) => void
+  onVoiceToggle?: () => void
+  placeholder?: string
+  queuedSteerCount?: number
+  textareaRef?: RefObject<HTMLTextAreaElement | null>
+  value: string
+}
+
+export function ChatComposer({
+  attachments = [],
+  className,
+  disabled = false,
+  isRecording = false,
+  isWorking = false,
+  onAddFiles,
+  onLongTextPaste,
+  onRemoveAttachment,
+  onSteer,
+  onStop,
+  onSubmit,
+  onValueChange,
+  onVoiceToggle,
+  placeholder = 'Share an idea, question, or draft…',
+  queuedSteerCount = 0,
+  textareaRef,
+  value,
+}: ChatComposerProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  function addFiles(files: FileList | null): void {
+    if (!files?.length) return
+    onAddFiles?.(Array.from(files))
+  }
+
+  function handleInputChange(event: ChangeEvent<HTMLInputElement>): void {
+    addFiles(event.target.files)
+    event.target.value = ''
+  }
+
+  function handleDrop(event: DragEvent<HTMLDivElement>): void {
+    event.preventDefault()
+    setIsDragging(false)
+    addFiles(event.dataTransfer.files)
+  }
+
+  function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+    if (event.key !== 'Enter' || event.shiftKey) return
+    event.preventDefault()
+    if (isWorking) onSteer?.()
+    else onSubmit()
+  }
+
+  function handlePaste(event: ClipboardEvent<HTMLTextAreaElement>): void {
+    if (event.clipboardData.files.length) {
+      addFiles(event.clipboardData.files)
+      return
+    }
+    const text = event.clipboardData.getData('text/plain')
+    if (text.length < 12_000 || !onLongTextPaste) return
+    event.preventDefault()
+    onLongTextPaste(new File([text], `zetro-paste-${Date.now()}.txt`, { type: 'text/plain' }))
+  }
+
+  return (
+    <div
+      className={cn('relative mx-auto w-4/5 rounded-md transition-colors', isDragging && 'ring-2 ring-primary/50', className)}
+      onDragEnter={() => setIsDragging(true)}
+      onDragLeave={(event) => {
+        if (event.currentTarget === event.target) setIsDragging(false)
+      }}
+      onDragOver={(event) => event.preventDefault()}
+      onDrop={handleDrop}
+    >
+      <input ref={fileInputRef} className="sr-only" multiple type="file" onChange={handleInputChange} />
+      {attachments.length ? (
+        <div className="absolute inset-x-3 top-3 z-10 flex flex-wrap gap-1.5">
+          {attachments.map((attachment) => (
+            <div key={attachment.id} className="flex h-8 max-w-48 items-center gap-1.5 rounded-sm border bg-background px-1.5 text-xs shadow-sm">
+              {attachment.previewUrl ? <img alt="" className="size-5 rounded-sm object-cover" src={attachment.previewUrl} /> : <FileImageIcon className="size-3.5 text-muted-foreground" />}
+              <span className="truncate">{attachment.name}</span>
+              <Button aria-label={`Remove ${attachment.name}`} className="size-5" size="icon-xs" variant="ghost" onClick={() => onRemoveAttachment?.(attachment.id)}><XIcon /></Button>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <Textarea
+        aria-label="Message"
+        className={cn(
+          'h-[7.25rem] min-h-0 max-h-[7.25rem] w-full resize-none border-foreground/20 pb-10 pr-28 leading-5 [field-sizing:fixed] [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1',
+          attachments.length && 'pt-12',
+        )}
+        disabled={disabled}
+        placeholder={isDragging ? 'Drop files to attach' : placeholder}
+        rows={5}
+        ref={textareaRef}
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+        onPaste={handlePaste}
+      />
+      <div className="absolute bottom-3 left-3 flex items-center gap-1">
+        <Button aria-label="Attach files" disabled={disabled} size="icon-xs" variant="ghost" onClick={() => fileInputRef.current?.click()}><PaperclipIcon /></Button>
+        <Button aria-label="Attach image" disabled={disabled} size="icon-xs" variant="ghost" onClick={() => fileInputRef.current?.click()}><FileImageIcon /></Button>
+        <Button aria-label={isRecording ? 'Stop voice input' : 'Start voice input'} className={isRecording ? 'bg-destructive/10 text-destructive hover:bg-destructive/15' : undefined} disabled={disabled} size="icon-xs" variant="ghost" onClick={onVoiceToggle}><MicIcon /></Button>
+      </div>
+      <div className="absolute right-3 bottom-3 flex items-center gap-1">
+        {isWorking ? <Button aria-label="Steer response" disabled={!value.trim()} size="sm" variant="ghost" onClick={onSteer}>Steer{queuedSteerCount ? ` (${queuedSteerCount})` : ''}</Button> : null}
+        <Button aria-label={isWorking ? 'Stop response' : 'Send message'} className={isWorking ? 'shimmer-surface shimmer-surface-orange' : undefined} disabled={!isWorking && !value.trim() && !attachments.length} size="icon-sm" onClick={isWorking ? onStop : onSubmit}>{isWorking ? <SquareIcon /> : <span aria-hidden="true">↑</span>}</Button>
+      </div>
+    </div>
+  )
+}

package/src/blocks/chat-composer/index.ts

@@ -0,0 +1 @@
+export { ChatComposer, type ChatComposerAttachment, type ChatComposerProps } from './chat-composer'

package/src/blocks/chat-history/chat-history.tsx

@@ -0,0 +1,59 @@
+import { ArchiveIcon, PencilIcon, PinIcon, PlusIcon, SearchIcon, Trash2Icon } from 'lucide-react'
+import { useMemo, useState } from 'react'
+
+import { Button } from '../../components/button'
+import { Input } from '../../components/input'
+import { cn } from '../../lib/utils'
+
+export type ChatHistoryItem = {
+  id: string
+  pinned?: boolean
+  subtitle?: string
+  title: string
+}
+
+export type ChatHistoryProps = {
+  activeId?: string
+  className?: string
+  emptyLabel?: string
+  items: readonly ChatHistoryItem[]
+  onArchive?: (id: string) => void
+  onCreate: () => void
+  onDelete?: (id: string) => void
+  onPin?: (id: string) => void
+  onRename?: (id: string) => void
+  onSelect: (id: string) => void
+}
+
+export function ChatHistory({ activeId, className, emptyLabel = 'No conversations yet', items, onArchive, onCreate, onDelete, onPin, onRename, onSelect }: ChatHistoryProps) {
+  const [query, setQuery] = useState('')
+  const filteredItems = useMemo(() => items.filter((item) => item.title.toLocaleLowerCase().includes(query.toLocaleLowerCase())), [items, query])
+
+  return (
+    <div className={cn('flex min-h-0 flex-1 flex-col gap-3 px-2 py-3', className)}>
+      <Button className="w-full" onClick={onCreate}><PlusIcon />New conversation</Button>
+      <div className="relative">
+        <SearchIcon aria-hidden="true" className="pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2 text-muted-foreground" />
+        <Input aria-label="Search conversation history" className="pl-8" placeholder="Search history" value={query} onChange={(event) => setQuery(event.target.value)} />
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-1">
+          {filteredItems.map((item) => (
+            <div key={item.id} className="group/history-item relative overflow-hidden">
+              <Button className="w-full justify-start truncate" size="sm" variant={item.id === activeId ? 'secondary' : 'ghost'} onClick={() => onSelect(item.id)}>{item.pinned ? <PinIcon className="size-3" /> : null}{item.title}</Button>
+              {onRename || onPin || onArchive || onDelete ? (
+                <div className="invisible absolute top-1/2 right-0 flex -translate-y-1/2 items-center rounded-sm bg-background/95 opacity-0 transition-opacity group-hover/history-item:visible group-hover/history-item:opacity-100 group-focus-within/history-item:visible group-focus-within/history-item:opacity-100">
+                  {onRename ? <Button aria-label={`Rename ${item.title}`} size="icon-xs" variant="ghost" onClick={() => onRename(item.id)}><PencilIcon /></Button> : null}
+                  {onPin ? <Button aria-label={`${item.pinned ? 'Unpin' : 'Pin'} ${item.title}`} size="icon-xs" variant="ghost" onClick={() => onPin(item.id)}><PinIcon /></Button> : null}
+                  {onArchive ? <Button aria-label={`Archive ${item.title}`} size="icon-xs" variant="ghost" onClick={() => onArchive(item.id)}><ArchiveIcon /></Button> : null}
+                  {onDelete ? <Button aria-label={`Delete ${item.title}`} size="icon-xs" variant="ghost" onClick={() => onDelete(item.id)}><Trash2Icon /></Button> : null}
+                </div>
+              ) : null}
+            </div>
+          ))}
+          {!filteredItems.length ? <p className="px-2 py-4 text-center text-xs text-muted-foreground">{emptyLabel}</p> : null}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/chat-history/index.ts

@@ -0,0 +1 @@
+export { ChatHistory, type ChatHistoryItem, type ChatHistoryProps } from './chat-history'

package/src/blocks/chat-response-progress/chat-response-progress.tsx

@@ -0,0 +1,34 @@
+import { Badge } from '../../components/badge'
+import { Separator } from '../../components/separator'
+
+export type ChatResponseProgressProps = {
+  elapsedSeconds: number
+  label?: string
+  tone?: 'default' | 'orange'
+}
+
+export type ChatDateDividerProps = {
+  label: string
+}
+
+export function ChatDateDivider({ label }: ChatDateDividerProps) {
+  return (
+    <div className="flex items-center gap-3 py-2">
+      <Separator className="w-auto flex-1 basis-0 border-t border-muted-foreground/35 bg-transparent" />
+      <Badge className="rounded-sm px-2 text-muted-foreground" variant="outline">{label}</Badge>
+      <Separator className="w-auto flex-1 basis-0 border-t border-muted-foreground/35 bg-transparent" />
+    </div>
+  )
+}
+
+export function ChatResponseProgress({ elapsedSeconds, label = 'Working', tone = 'default' }: ChatResponseProgressProps) {
+  return (
+    <div aria-live="polite" className="py-0 text-left">
+      <span className={`shimmer text-xs font-medium ${tone === 'orange' ? 'shimmer-orange' : ''}`}>{label} for {elapsedSeconds}s</span>
+    </div>
+  )
+}
+
+export function ChatTurnDivider() {
+  return <Separator className="w-full border-t border-muted-foreground/20 bg-transparent" />
+}

package/src/blocks/chat-response-progress/index.ts

@@ -0,0 +1,2 @@
+export { ChatDateDivider, ChatResponseProgress, ChatTurnDivider } from './chat-response-progress'
+export type { ChatDateDividerProps, ChatResponseProgressProps } from './chat-response-progress'

package/src/blocks/chat-runtime-controls/chat-runtime-controls.tsx

@@ -0,0 +1,56 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../components/select'
+import { Separator } from '../../components/separator'
+import { Button } from '../../components/button'
+import { RefreshCwIcon } from 'lucide-react'
+
+export type ChatRuntimeControlsProps = {
+  connected: boolean
+  message: string
+  model: string
+  models: readonly string[]
+  onModelChange: (value: string) => void
+  onProviderChange: (value: string) => void
+  onReasoningChange: (value: string) => void
+  onReconnect: () => void
+  provider: string
+  providers: readonly string[]
+  reasoning: string
+  reasoningLevels: readonly string[]
+}
+
+export function ChatRuntimeControls({
+  connected,
+  message,
+  model,
+  models,
+  onModelChange,
+  onProviderChange,
+  onReasoningChange,
+  onReconnect,
+  provider,
+  providers,
+  reasoning,
+  reasoningLevels,
+}: ChatRuntimeControlsProps) {
+  return (
+    <div className="flex shrink-0 items-center gap-2">
+      <RuntimeSelect ariaLabel="Provider" disabled={!connected} items={providers} onValueChange={onProviderChange} value={provider} />
+      <Separator className="-mx-1 h-4 bg-muted-foreground/40" orientation="vertical" />
+      <RuntimeSelect ariaLabel="Model" disabled={!connected} items={models} onValueChange={onModelChange} value={model} />
+      <Separator className="-mx-1 h-4 bg-muted-foreground/40" orientation="vertical" />
+      <RuntimeSelect ariaLabel="Reasoning" disabled={!connected} items={reasoningLevels} onValueChange={onReasoningChange} value={reasoning} />
+      {connected ? <span aria-label="Connected to local Codex" className="size-2.5 rounded-full bg-green-500 shadow-[0_0_9px_2px_rgb(34_197_94_/_0.7)]" role="status" title={message} /> : <Button aria-label="Reconnect to local Codex" className="h-7 gap-1 rounded-sm px-2 text-xs" size="sm" variant="outline" onClick={onReconnect}><RefreshCwIcon className="size-3" />Reconnect</Button>}
+    </div>
+  )
+}
+
+function RuntimeSelect({ ariaLabel, disabled, items, onValueChange, value }: { ariaLabel: string; disabled: boolean; items: readonly string[]; onValueChange: (value: string) => void; value: string }) {
+  return (
+    <Select disabled={disabled} onValueChange={(nextValue) => { if (nextValue) onValueChange(nextValue) }} value={value}>
+      <SelectTrigger aria-label={ariaLabel} className="max-w-32 rounded-sm border-transparent bg-transparent px-2 hover:bg-accent" size="sm"><SelectValue /></SelectTrigger>
+      <SelectContent align="end" alignItemWithTrigger={false} className="rounded-sm" side="bottom" sideOffset={6}>
+        {items.map((item) => <SelectItem key={item} value={item}>{item}</SelectItem>)}
+      </SelectContent>
+    </Select>
+  )
+}

package/src/blocks/chat-runtime-controls/index.ts

@@ -0,0 +1,2 @@
+export { ChatRuntimeControls } from './chat-runtime-controls'
+export type { ChatRuntimeControlsProps } from './chat-runtime-controls'

package/src/blocks/chat-runtime-trace/chat-runtime-trace.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { CircleAlertIcon, CircleCheckIcon, EyeIcon, FilePenLineIcon, LoaderCircleIcon, MessageSquareIcon, SearchIcon, TerminalIcon } from 'lucide-react'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../components/collapsible'
+import { cn } from '../../lib/utils'
+
+export type ChatRuntimeTraceEvent = {
+  message: string
+  raw?: string
+  type: string
+}
+
+export type ChatRuntimeTraceProps = {
+  className?: string
+  elapsedSeconds: number
+  events: readonly ChatRuntimeTraceEvent[]
+  isWorking: boolean
+}
+
+export function ChatRuntimeTrace({ className, elapsedSeconds, events, isWorking }: ChatRuntimeTraceProps) {
+  const [open, setOpen] = useState(isWorking)
+  const latestEvent = events.at(-1)
+
+  useEffect(() => setOpen(isWorking), [isWorking])
+
+  if (!events.length) return null
+
+  return (
+    <Collapsible className={cn("w-full shrink-0 border-y border-border/50", className)} open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="group/runtime-trace flex w-full items-center gap-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground">
+        <TerminalIcon className="size-3 shrink-0" />
+        <span className={isWorking ? 'shimmer shimmer-orange font-medium' : 'font-medium'}>{isWorking ? `${phaseLabel(latestEvent?.type)} · Working for ${elapsedSeconds}s` : `Completed · ${events.length} visible events`}</span>
+        <span className="ml-auto">{events.length} events</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="pb-2">
+        <div className="max-h-44 space-y-1 overflow-y-auto pr-1 [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70 [&::-webkit-scrollbar]:w-1">
+          {events.map((event, index) => <TraceEvent key={`${event.raw ?? event.message}-${index}`} event={event} />)}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function phaseLabel(type?: string): string {
+  if (type === 'command') return 'Running read-only command'
+  if (type === 'request') return 'Checking sources'
+  if (type === 'review') return 'Reviewing context'
+  if (type === 'change') return 'Recording file activity'
+  return 'Compacting auto'
+}
+
+function TraceEvent({ event }: { event: ChatRuntimeTraceEvent }) {
+  const [open, setOpen] = useState(false)
+  const content = event.raw ?? event.message
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="group/runtime-event flex w-full items-center gap-2 rounded-sm px-1 py-1 text-left text-xs text-muted-foreground hover:bg-muted/50 hover:text-foreground">
+        <EventIcon type={event.type} />
+        <span className="truncate">{event.message}</span>
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-1 pb-1">
+        <pre className="max-h-32 overflow-auto rounded-sm bg-muted/50 p-2 font-mono text-[11px] leading-4 text-foreground [scrollbar-color:var(--border)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/70 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar]:w-1">{content}</pre>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+function EventIcon({ type }: { type: string }) {
+  const Icon = type === 'command' ? TerminalIcon : type === 'response' ? MessageSquareIcon : type === 'request' ? SearchIcon : type === 'review' ? EyeIcon : type === 'change' ? FilePenLineIcon : type === 'complete' ? CircleCheckIcon : type === 'error' ? CircleAlertIcon : LoaderCircleIcon
+  return <Icon aria-label={type} className={cn('size-3 shrink-0', type === 'processing' && 'animate-spin')} />
+}

package/src/blocks/chat-runtime-trace/index.ts

@@ -0,0 +1,2 @@
+export { ChatRuntimeTrace } from './chat-runtime-trace'
+export type { ChatRuntimeTraceEvent, ChatRuntimeTraceProps } from './chat-runtime-trace'

package/src/blocks/codex-connection-settings/codex-connection-settings.tsx

@@ -0,0 +1,42 @@
+import { type ReactNode, useState } from "react";
+import { CopyIcon, ExternalLinkIcon, KeyRoundIcon, LaptopIcon, RefreshCwIcon, ShieldCheckIcon } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@devxcrew/react-ui/components/alert";
+import { Button } from "@devxcrew/react-ui/components/button";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@devxcrew/react-ui/components/sheet";
+import { Switch } from "@devxcrew/react-ui/components/switch";
+
+export type CodexDeviceCode = { message: string; status: "idle" | "awaiting" | "connected" | "failed"; userCode?: string; verificationUrl?: string };
+export type CodexConnectionSettingsProps = { connected: boolean; deviceCode: CodexDeviceCode; message: string; onConnectLocal: () => void; onCopyCode: () => void; onCopyUrl: () => void; onGenerateDeviceCode: () => void; onOpenBrowser: () => void; onOpenChange: (open: boolean) => void; open: boolean };
+
+export function CodexConnectionSettings({ connected, deviceCode, message, onConnectLocal, onCopyCode, onCopyUrl, onGenerateDeviceCode, onOpenBrowser, onOpenChange, open }: CodexConnectionSettingsProps) {
+  const [useDeviceCode, setUseDeviceCode] = useState(false);
+  const [checkingLocal, setCheckingLocal] = useState(false);
+  const awaitingCode = deviceCode.status === "awaiting";
+
+  async function checkLocalCodex(): Promise<void> {
+    setCheckingLocal(true);
+    try {
+      await onConnectLocal();
+    } finally {
+      setCheckingLocal(false);
+    }
+  }
+
+  return <Sheet open={open} onOpenChange={onOpenChange}><SheetContent className="gap-0 p-0 sm:max-w-md" side="right">
+    <SheetHeader className="border-b pr-12"><SheetTitle>Codex connection</SheetTitle><SheetDescription>Choose how this Zetro workspace connects to Codex.</SheetDescription></SheetHeader>
+    <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
+      <section className="flex items-center gap-3" aria-live="polite"><span className={connected ? "size-2 shrink-0 rounded-full bg-emerald-500 shadow-[0_0_0_4px_rgb(16_185_129_/_0.13),0_0_12px_rgb(16_185_129_/_0.8)]" : "size-2 shrink-0 rounded-full bg-muted-foreground/50"} /><div className="min-w-0"><p className="text-sm font-medium">{connected ? "Connected" : "Not connected"}</p><p className="mt-0.5 text-sm text-muted-foreground">{message}</p></div></section>
+      <ConnectionMethod title="Local Codex" description="Use the Codex CLI already installed on this computer." icon={<LaptopIcon className="size-4" />}><Button disabled={checkingLocal} variant="outline" onClick={checkLocalCodex}><RefreshCwIcon className={checkingLocal ? "animate-spin" : undefined} /> {checkingLocal ? "Checking local Codex" : "Check local Codex"}</Button></ConnectionMethod>
+      <ConnectionMethod title="Device code" description="Sign in using a short-lived code in your browser." icon={<KeyRoundIcon className="size-4" />} trailing={<Switch aria-label="Use device-code connection" checked={useDeviceCode} onCheckedChange={setUseDeviceCode} />}>
+        <Button disabled={!useDeviceCode} onClick={onGenerateDeviceCode}><KeyRoundIcon /> Generate device code</Button>
+      </ConnectionMethod>
+      {useDeviceCode && awaitingCode ? <div className="flex flex-col gap-3 rounded-md border border-border/70 p-3"><div className="flex items-center gap-2"><p className="flex-1 text-sm font-medium">One-time device code</p><Button aria-label="Copy device code" size="icon-xs" variant="ghost" onClick={onCopyCode}><CopyIcon /></Button></div><code className="w-fit rounded-sm border bg-muted px-3 py-2 text-base font-semibold tracking-[0.12em]">{deviceCode.userCode}</code><p className="text-sm text-muted-foreground">{deviceCode.message}</p><div className="flex flex-wrap gap-2"><Button variant="outline" onClick={onOpenBrowser}><ExternalLinkIcon /> Open browser</Button><Button variant="outline" onClick={onCopyUrl}><CopyIcon /> Copy URL</Button></div><p className="text-sm leading-6 text-muted-foreground">This code is held only in running memory and is not added to Zetro history, storage, or logs.</p></div> : null}
+      {deviceCode.status === "failed" ? <Alert variant="destructive"><ShieldCheckIcon /><AlertTitle>Device code unavailable</AlertTitle><AlertDescription>{deviceCode.message}</AlertDescription></Alert> : null}
+    </div>
+    <SheetFooter className="border-t"><Button className="w-full" disabled={checkingLocal} variant="outline" onClick={checkLocalCodex}><RefreshCwIcon className={checkingLocal ? "animate-spin" : undefined} /> {checkingLocal ? "Checking local Codex" : "Recheck local Codex"}</Button></SheetFooter>
+  </SheetContent></Sheet>;
+}
+
+function ConnectionMethod({ children, description, icon, title, trailing }: { children: ReactNode; description: string; icon: ReactNode; title: string; trailing?: ReactNode }) {
+  return <section className="flex flex-col gap-3 rounded-md border border-border/70 p-3"><div className="flex items-start gap-2"><span className="mt-0.5 text-muted-foreground">{icon}</span><div className="min-w-0 flex-1"><p className="text-sm font-medium">{title}</p><p className="mt-0.5 text-sm leading-5 text-muted-foreground">{description}</p></div>{trailing}</div>{children}</section>;
+}

package/src/blocks/codex-connection-settings/index.ts

@@ -0,0 +1 @@
+export { CodexConnectionSettings, type CodexConnectionSettingsProps, type CodexDeviceCode } from "./codex-connection-settings";

package/src/blocks/dropzone/dropzone-file-item.tsx

@@ -0,0 +1,113 @@
+import { AlertCircle, CheckCircle2, File, RefreshCw, X } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import type { DropzoneFile } from './dropzone-types'
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
+}
+
+export function DropzoneFileItem({
+  file,
+  onRemove,
+  onRetry,
+}: {
+  file: DropzoneFile
+  onRemove?: (id: string) => void
+  onRetry?: (id: string) => void
+}) {
+  const isUploading = file.status === 'uploading'
+  const isComplete = file.status === 'complete'
+  const isError = file.status === 'error'
+
+  return (
+    <div
+      className={cn(
+        'group flex flex-col gap-1.5 rounded-xl border border-border/80 bg-card p-3 shadow-2xs transition-colors',
+        isError && 'border-destructive/40 bg-destructive/5',
+        isComplete && 'border-emerald-500/30 bg-emerald-500/5',
+      )}
+    >
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex min-w-0 items-center gap-2.5">
+          {file.previewUrl ? (
+            <img
+              alt={file.name}
+              className="size-8 rounded-lg object-cover ring-1 ring-border"
+              src={file.previewUrl}
+            />
+          ) : (
+            <div className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+              <File className="size-4" />
+            </div>
+          )}
+
+          <div className="min-w-0">
+            <p className="truncate text-xs font-medium text-foreground">{file.name}</p>
+            <p className="text-[11px] text-muted-foreground">{formatBytes(file.sizeBytes)}</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-1">
+          {isComplete && (
+            <span title="Upload complete">
+              <CheckCircle2 className="size-4 text-emerald-500" />
+            </span>
+          )}
+
+          {isError && (
+            <>
+              <span title="Upload failed">
+                <AlertCircle className="size-4 text-destructive" />
+              </span>
+              {onRetry && (
+                <button
+                  aria-label="Retry upload"
+                  className="rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+                  type="button"
+                  onClick={() => onRetry(file.id)}
+                >
+                  <RefreshCw className="size-3.5" />
+                </button>
+              )}
+            </>
+          )}
+
+          {onRemove && (
+            <button
+              aria-label={`Remove ${file.name}`}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
+              type="button"
+              onClick={() => onRemove(file.id)}
+            >
+              <X className="size-3.5" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {isUploading && (
+        <div
+          aria-label={`Uploading ${file.name}`}
+          aria-valuemax={100}
+          aria-valuemin={0}
+          aria-valuenow={file.progress ?? 0}
+          className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted"
+          role="progressbar"
+        >
+          <div
+            className="h-full rounded-full bg-primary transition-all duration-300"
+            style={{ width: `${Math.min(100, Math.max(0, file.progress ?? 0))}%` }}
+          />
+        </div>
+      )}
+
+      {isError && file.errorMessage && (
+        <p className="text-[11px] font-medium text-destructive">{file.errorMessage}</p>
+      )}
+    </div>
+  )
+}

package/src/blocks/dropzone/dropzone-types.ts

@@ -0,0 +1,32 @@
+export type DropzoneFileStatus = 'idle' | 'uploading' | 'complete' | 'error'
+
+export interface DropzoneFile {
+  errorMessage?: string
+  file?: File
+  id: string
+  name: string
+  previewUrl?: string
+  progress?: number
+  sizeBytes: number
+  status: DropzoneFileStatus
+  type: string
+}
+
+export interface DropzoneProps {
+  accept?: readonly string[]
+  allowMultiple?: boolean
+  ariaLabel?: string
+  className?: string
+  disabled?: boolean
+  emptyMessage?: string
+  files?: readonly DropzoneFile[]
+  hint?: string
+  maxFiles?: number
+  maxSizeBytes?: number
+  onClearFiles?: () => void
+  onFilesDrop?: (acceptedFiles: File[], rejectedFiles: { error: string; file: File }[]) => void
+  onRemoveFile?: (fileId: string) => void
+  onRetryFile?: (fileId: string) => void
+  showFileList?: boolean
+  title?: string
+}