refactor: add primitives, plan mode display, and new session model selector

src/shared/view/ui/Alert.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      data-slot="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="alert-title"
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };

src/shared/view/ui/Badge.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+
 import { cn } from '../../../lib/utils';
 
 const badgeVariants = cva(

src/shared/view/ui/Button.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+
 import { cn } from '../../../lib/utils';
 
 // Keep visual variants centralized so all button usages stay consistent.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium touch-manipulation transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex touch-manipulation items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

src/shared/view/ui/Card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-4', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+/**
+ * Use inside a CardHeader with `className="flex flex-row items-start justify-between"`.
+ * Positions an action (button/icon) at the trailing edge of the header.
+ */
+const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('ml-auto shrink-0', className)}
+      {...props}
+    />
+  )
+);
+CardAction.displayName = 'CardAction';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction };

src/shared/view/ui/Collapsible.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+interface CollapsibleContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsible() {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) throw new Error('Collapsible components must be used within <Collapsible>');
+  return ctx;
+}
+
+interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
+  ({ defaultOpen = false, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, children, ...props }, ref) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const onOpenChange = React.useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternalOpen(next);
+        controlledOnOpenChange?.(next);
+      },
+      [isControlled, controlledOnOpenChange]
+    );
+
+    const value = React.useMemo(() => ({ open, onOpenChange }), [open, onOpenChange]);
+
+    return (
+      <CollapsibleContext.Provider value={value}>
+        <div ref={ref} data-state={open ? 'open' : 'closed'} className={className} {...props}>
+          {children}
+        </div>
+      </CollapsibleContext.Provider>
+    );
+  }
+);
+Collapsible.displayName = 'Collapsible';
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ onClick, children, className, ...props }, ref) => {
+    const { open, onOpenChange } = useCollapsible();
+
+    const handleClick = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        onOpenChange(!open);
+        onClick?.(e);
+      },
+      [open, onOpenChange, onClick]
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={open}
+        data-state={open ? 'open' : 'closed'}
+        onClick={handleClick}
+        className={className}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+const CollapsibleContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { open } = useCollapsible();
+
+    return (
+      <div
+        ref={ref}
+        data-state={open ? 'open' : 'closed'}
+        className={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out',
+          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          className
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible };

src/shared/view/ui/Command.tsx

@@ -0,0 +1,320 @@
+import * as React from 'react';
+import { Search } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+
+/*
+ * Lightweight command palette — inspired by cmdk but no external deps.
+ *
+ * Architecture:
+ * - Command owns the search string and a flat list of registered item values.
+ * - Items register via context on mount and deregister on unmount.
+ * - Filtering, active index, and keyboard nav happen centrally in Command.
+ * - Items read their "is visible" / "is active" state from context.
+ */
+
+interface ItemEntry {
+  id: string;
+  value: string;       // searchable text (lowercase)
+  onSelect: () => void;
+  element: HTMLElement | null;
+}
+
+interface CommandContextValue {
+  search: string;
+  setSearch: (value: string) => void;
+  /** Set of visible item IDs after filtering (derived state, not a ref). */
+  visibleIds: Set<string>;
+  activeId: string | null;
+  setActiveId: (id: string | null) => void;
+  register: (entry: ItemEntry) => void;
+  unregister: (id: string) => void;
+  updateEntry: (id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => void;
+}
+
+const CommandContext = React.createContext<CommandContextValue | null>(null);
+
+function useCommand() {
+  const ctx = React.useContext(CommandContext);
+  if (!ctx) throw new Error('Command components must be used within <Command>');
+  return ctx;
+}
+
+/* ─── Command (root) ─────────────────────────────────────────────── */
+
+type CommandProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(
+  ({ className, children, ...props }, ref) => {
+    const [search, setSearch] = React.useState('');
+    const entriesRef = React.useRef<Map<string, ItemEntry>>(new Map());
+    // Bump this counter whenever the entry set changes so derived state recalculates
+    const [revision, setRevision] = React.useState(0);
+
+    const register = React.useCallback((entry: ItemEntry) => {
+      entriesRef.current.set(entry.id, entry);
+      setRevision(r => r + 1);
+    }, []);
+
+    const unregister = React.useCallback((id: string) => {
+      entriesRef.current.delete(id);
+      setRevision(r => r + 1);
+    }, []);
+
+    const updateEntry = React.useCallback((id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => {
+      const existing = entriesRef.current.get(id);
+      if (existing) {
+        Object.assign(existing, patch);
+      }
+    }, []);
+
+    // Derive visible IDs from search + entries
+    const visibleIds = React.useMemo(() => {
+      const lowerSearch = search.toLowerCase();
+      const ids = new Set<string>();
+      for (const [id, entry] of entriesRef.current) {
+        if (!lowerSearch || entry.value.includes(lowerSearch)) {
+          ids.add(id);
+        }
+      }
+      return ids;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [search, revision]);
+
+    // Ordered list of visible entries (preserves DOM order via insertion order)
+    const visibleEntries = React.useMemo(() => {
+      const result: ItemEntry[] = [];
+      for (const [, entry] of entriesRef.current) {
+        if (visibleIds.has(entry.id)) result.push(entry);
+      }
+      return result;
+    }, [visibleIds]);
+
+    // Active item tracking
+    const [activeId, setActiveId] = React.useState<string | null>(null);
+
+    // Reset active to first visible item when search or visible set changes
+    React.useEffect(() => {
+      setActiveId(visibleEntries.length > 0 ? visibleEntries[0].id : null);
+    }, [visibleEntries]);
+
+    const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        e.preventDefault();
+      } else {
+        return;
+      }
+
+      const entries = visibleEntries;
+      if (entries.length === 0) return;
+
+      if (e.key === 'Enter') {
+        const active = entries.find(entry => entry.id === activeId);
+        active?.onSelect();
+        return;
+      }
+
+      const currentIndex = entries.findIndex(entry => entry.id === activeId);
+      let nextIndex: number;
+      if (e.key === 'ArrowDown') {
+        nextIndex = currentIndex < entries.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : entries.length - 1;
+      }
+      const nextId = entries[nextIndex].id;
+      setActiveId(nextId);
+
+      // Scroll the active item into view
+      const nextEntry = entries[nextIndex];
+      nextEntry.element?.scrollIntoView({ block: 'nearest' });
+    }, [visibleEntries, activeId]);
+
+    const value = React.useMemo<CommandContextValue>(
+      () => ({ search, setSearch, visibleIds, activeId, setActiveId, register, unregister, updateEntry }),
+      [search, visibleIds, activeId, register, unregister, updateEntry]
+    );
+
+    return (
+      <CommandContext.Provider value={value}>
+        <div
+          ref={ref}
+          role="combobox"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          className={cn('flex flex-col', className)}
+          onKeyDown={handleKeyDown}
+          {...props}
+        >
+          {children}
+        </div>
+      </CommandContext.Provider>
+    );
+  }
+);
+Command.displayName = 'Command';
+
+/* ─── CommandInput ───────────────────────────────────────────────── */
+
+type CommandInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'>;
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
+  ({ className, placeholder = 'Search...', ...props }, ref) => {
+    const { search, setSearch } = useCommand();
+
+    return (
+      <div className="flex items-center border-b px-3" role="presentation">
+        <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+        <input
+          ref={ref}
+          type="text"
+          role="searchbox"
+          aria-autocomplete="list"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={placeholder}
+          className={cn(
+            'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none',
+            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CommandInput.displayName = 'CommandInput';
+
+/* ─── CommandList ────────────────────────────────────────────────── */
+
+const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="listbox"
+      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
+  )
+);
+CommandList.displayName = 'CommandList';
+
+/* ─── CommandEmpty ───────────────────────────────────────────────── */
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { search, visibleIds } = useCommand();
+
+    // Only show when there's a search term and zero matches
+    if (!search || visibleIds.size > 0) return null;
+
+    return (
+      <div ref={ref} className={cn('py-6 text-center text-sm text-muted-foreground', className)} {...props} />
+    );
+  }
+);
+CommandEmpty.displayName = 'CommandEmpty';
+
+/* ─── CommandGroup ───────────────────────────────────────────────── */
+
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  heading?: React.ReactNode;
+}
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+  ({ className, heading, children, ...props }, ref) => (
+    <div ref={ref} className={cn('overflow-hidden p-1', className)} role="group" aria-label={typeof heading === 'string' ? heading : undefined} {...props}>
+      {heading && (
+        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground" role="presentation">
+          {heading}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+);
+CommandGroup.displayName = 'CommandGroup';
+
+/* ─── CommandItem ────────────────────────────────────────────────── */
+
+interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+  ({ className, value, onSelect, disabled, children, ...props }, ref) => {
+    const { visibleIds, activeId, setActiveId, register, unregister, updateEntry } = useCommand();
+    const stableId = React.useId();
+    const elementRef = React.useRef<HTMLElement | null>(null);
+    const searchableText = value || (typeof children === 'string' ? children : '');
+
+    // Register on mount, unregister on unmount
+    React.useEffect(() => {
+      register({
+        id: stableId,
+        value: searchableText.toLowerCase(),
+        onSelect: onSelect || (() => {}),
+        element: elementRef.current,
+      });
+      return () => unregister(stableId);
+      // Only re-register when the identity changes, not onSelect
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stableId, searchableText, register, unregister]);
+
+    // Keep onSelect up-to-date without re-registering
+    React.useEffect(() => {
+      updateEntry(stableId, { onSelect: onSelect || (() => {}) });
+    }, [stableId, onSelect, updateEntry]);
+
+    // Keep element ref up-to-date
+    const setRef = React.useCallback((node: HTMLDivElement | null) => {
+      elementRef.current = node;
+      updateEntry(stableId, { element: node });
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    }, [stableId, updateEntry, ref]);
+
+    // Hidden by filter
+    if (!visibleIds.has(stableId)) return null;
+
+    const isActive = activeId === stableId;
+
+    return (
+      <div
+        ref={setRef}
+        role="option"
+        aria-selected={isActive}
+        aria-disabled={disabled || undefined}
+        data-active={isActive || undefined}
+        className={cn(
+          'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
+          isActive && 'bg-accent text-accent-foreground',
+          disabled && 'pointer-events-none opacity-50',
+          className
+        )}
+        onPointerMove={() => { if (!disabled && activeId !== stableId) setActiveId(stableId); }}
+        onClick={() => !disabled && onSelect?.()}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CommandItem.displayName = 'CommandItem';
+
+/* ─── CommandSeparator ───────────────────────────────────────────── */
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
+  )
+);
+CommandSeparator.displayName = 'CommandSeparator';
+
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator };

src/shared/view/ui/Confirmation.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+type ApprovalState = 'pending' | 'approved' | 'rejected' | undefined;
+
+interface ConfirmationContextValue {
+  approval: ApprovalState;
+}
+
+const ConfirmationContext = React.createContext<ConfirmationContextValue | null>(null);
+
+const useConfirmation = () => {
+  const context = React.useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error('Confirmation components must be used within Confirmation');
+  }
+  return context;
+};
+
+/* ─── Confirmation (root) ────────────────────────────────────────── */
+
+export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
+  approval?: ApprovalState;
+}
+
+export const Confirmation: React.FC<ConfirmationProps> = ({
+  className,
+  approval = 'pending',
+  children,
+  ...props
+}) => {
+  const contextValue = React.useMemo(() => ({ approval }), [approval]);
+
+  return (
+    <ConfirmationContext.Provider value={contextValue}>
+      <Alert className={cn('flex flex-col gap-2', className)} {...props}>
+        {children}
+      </Alert>
+    </ConfirmationContext.Provider>
+  );
+};
+Confirmation.displayName = 'Confirmation';
+
+/* ─── ConfirmationTitle ──────────────────────────────────────────── */
+
+export type ConfirmationTitleProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({
+  className,
+  ...props
+}) => (
+  <div
+    data-slot="confirmation-title"
+    className={cn('text-muted-foreground inline text-sm', className)}
+    {...props}
+  />
+);
+ConfirmationTitle.displayName = 'ConfirmationTitle';
+
+/* ─── ConfirmationRequest — visible only when pending ────────────── */
+
+export interface ConfirmationRequestProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationRequest: React.FC<ConfirmationRequestProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'pending') return null;
+  return <>{children}</>;
+};
+ConfirmationRequest.displayName = 'ConfirmationRequest';
+
+/* ─── ConfirmationAccepted — visible only when approved ──────────── */
+
+export interface ConfirmationAcceptedProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationAccepted: React.FC<ConfirmationAcceptedProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'approved') return null;
+  return <>{children}</>;
+};
+ConfirmationAccepted.displayName = 'ConfirmationAccepted';
+
+/* ─── ConfirmationRejected — visible only when rejected ──────────── */
+
+export interface ConfirmationRejectedProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationRejected: React.FC<ConfirmationRejectedProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'rejected') return null;
+  return <>{children}</>;
+};
+ConfirmationRejected.displayName = 'ConfirmationRejected';
+
+/* ─── ConfirmationActions — visible only when pending ────────────── */
+
+export type ConfirmationActionsProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({
+  className,
+  ...props
+}) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'pending') return null;
+
+  return (
+    <div
+      data-slot="confirmation-actions"
+      className={cn('flex items-center justify-end gap-2 self-end', className)}
+      {...props}
+    />
+  );
+};
+ConfirmationActions.displayName = 'ConfirmationActions';
+
+/* ─── ConfirmationAction — styled button ─────────────────────────── */
+
+export type ConfirmationActionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'default' | 'outline' | 'ghost' | 'destructive';
+};
+
+export const ConfirmationAction: React.FC<ConfirmationActionProps> = ({
+  variant = 'default',
+  ...props
+}) => (
+  <Button className="h-8 px-3 text-sm" variant={variant} type="button" {...props} />
+);
+ConfirmationAction.displayName = 'ConfirmationAction';
+
+export { useConfirmation };

src/shared/view/ui/DarkModeToggle.tsx

@@ -1,4 +1,5 @@
 import { Moon, Sun } from 'lucide-react';
+
 import { useTheme } from '../../../contexts/ThemeContext';
 import { cn } from '../../../lib/utils';
 

src/shared/view/ui/Dialog.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '../../../lib/utils';
+
+interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+function useDialog() {
+  const ctx = React.useContext(DialogContext);
+  if (!ctx) throw new Error('Dialog components must be used within <Dialog>');
+  return ctx;
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+const Dialog: React.FC<DialogProps> = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children }) => {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const triggerRef = React.useRef<HTMLElement | null>(null) as React.MutableRefObject<HTMLElement | null>;
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const onOpenChange = React.useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      controlledOnOpenChange?.(next);
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+
+  const value = React.useMemo(() => ({ open, onOpenChange, triggerRef }), [open, onOpenChange]);
+
+  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
+};
+
+const DialogTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(
+  ({ onClick, children, asChild, ...props }, ref) => {
+    const { onOpenChange, triggerRef } = useDialog();
+
+    const handleClick = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        onOpenChange(true);
+        onClick?.(e);
+      },
+      [onOpenChange, onClick]
+    );
+
+    // asChild: clone child element and compose onClick + capture ref
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<any>;
+      return React.cloneElement(child, {
+        onClick: (e: React.MouseEvent<HTMLElement>) => {
+          onOpenChange(true);
+          child.props.onClick?.(e);
+        },
+        ref: (node: HTMLElement | null) => {
+          triggerRef.current = node;
+          // Forward the outer ref
+          if (typeof ref === 'function') ref(node as any);
+          else if (ref) (ref as React.MutableRefObject<any>).current = node;
+        },
+      });
+    }
+
+    return (
+      <button
+        ref={(node) => {
+          triggerRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        type="button"
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+DialogTrigger.displayName = 'DialogTrigger';
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  onEscapeKeyDown?: () => void;
+  onPointerDownOutside?: () => void;
+}
+
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
+    const { open, onOpenChange, triggerRef } = useDialog();
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const previousFocusRef = React.useRef<HTMLElement | null>(null);
+
+    // Save the element that had focus before opening, restore on close
+    React.useEffect(() => {
+      if (open) {
+        previousFocusRef.current = document.activeElement as HTMLElement;
+      } else if (previousFocusRef.current) {
+        // Prefer the trigger, fall back to whatever was focused before
+        const restoreTarget = triggerRef.current || previousFocusRef.current;
+        restoreTarget?.focus();
+        previousFocusRef.current = null;
+      }
+    }, [open, triggerRef]);
+
+    React.useEffect(() => {
+      if (!open) return;
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onEscapeKeyDown?.();
+          onOpenChange(false);
+          return;
+        }
+
+        // Focus trap: Tab / Shift+Tab cycle within the dialog
+        if (e.key === 'Tab' && contentRef.current) {
+          const focusable = Array.from(
+            contentRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+          );
+          if (focusable.length === 0) return;
+
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown, true);
+
+      // Prevent body scroll
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown, true);
+        document.body.style.overflow = prev;
+      };
+    }, [open, onOpenChange, onEscapeKeyDown]);
+
+    // Auto-focus first focusable element on open
+    React.useEffect(() => {
+      if (open && contentRef.current) {
+        // Small delay to let the portal render
+        requestAnimationFrame(() => {
+          const first = contentRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+          first?.focus();
+        });
+      }
+    }, [open]);
+
+    if (!open) return null;
+
+    return createPortal(
+      <div className="fixed inset-0 z-50">
+        {/* Overlay */}
+        <div
+          className="fixed inset-0 animate-dialog-overlay-show bg-black/50 backdrop-blur-sm"
+          onClick={() => {
+            onPointerDownOutside?.();
+            onOpenChange(false);
+          }}
+          aria-hidden
+        />
+        {/* Content */}
+        <div
+          ref={(node) => {
+            contentRef.current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          }}
+          role="dialog"
+          aria-modal="true"
+          className={cn(
+            'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'rounded-xl border bg-popover text-popover-foreground shadow-lg',
+            'animate-dialog-content-show',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
+DialogContent.displayName = 'DialogContent';
+
+const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn('sr-only', className)} {...props} />
+  )
+);
+DialogTitle.displayName = 'DialogTitle';
+
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, useDialog };

src/shared/view/ui/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '../../../lib/utils';
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

src/shared/view/ui/LanguageSelector.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { Languages } from 'lucide-react';
+
 import { languages } from '../../../i18n/languages';
 
 type LanguageSelectorProps = {

src/shared/view/ui/PillBar.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+
 import { cn } from '../../../lib/utils';
 
 /* ── Container ─────────────────────────────────────────────────── */

src/shared/view/ui/Reasoning.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import * as React from 'react';
+import { BrainIcon, ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+import { Shimmer } from './Shimmer';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = React.createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = React.useContext(ReasoningContext);
+  if (!context) {
+    throw new Error('Reasoning components must be used within Reasoning');
+  }
+  return context;
+};
+
+/* ─── Reasoning (root) ───────────────────────────────────────────── */
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export interface ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+}
+
+export const Reasoning = React.memo<ReasoningProps>(
+  ({
+    className,
+    isStreaming = false,
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    const isExplicitlyClosed = defaultOpen === false;
+
+    // Controllable open state
+    const [internalOpen, setInternalOpen] = React.useState(resolvedDefaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const setIsOpen = React.useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
+
+    // Duration tracking
+    const [duration, setDuration] = React.useState<number | undefined>(durationProp);
+    const hasEverStreamedRef = React.useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = React.useState(false);
+    const startTimeRef = React.useRef<number | null>(null);
+
+    // Sync external duration prop
+    React.useEffect(() => {
+      if (durationProp !== undefined) setDuration(durationProp);
+    }, [durationProp]);
+
+    // Track streaming start/end for duration
+    React.useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming]);
+
+    // Auto-open when streaming starts
+    React.useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+
+    // Auto-close after streaming ends
+    React.useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+
+    const contextValue = React.useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+
+    return (
+      <ReasoningContext.Provider value={contextValue}>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn('not-prose', className)}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+Reasoning.displayName = 'Reasoning';
+
+/* ─── ReasoningTrigger ───────────────────────────────────────────── */
+
+export interface ReasoningTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
+}
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number): React.ReactNode => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = React.memo<ReasoningTriggerProps>(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          'flex w-full items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="h-4 w-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                'h-4 w-4 transition-transform',
+                isOpen ? 'rotate-180' : 'rotate-0'
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+ReasoningTrigger.displayName = 'ReasoningTrigger';
+
+/* ─── ReasoningContent ───────────────────────────────────────────── */
+
+export interface ReasoningContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ReasoningContent = React.memo<ReasoningContentProps>(
+  ({ className, children, ...props }) => (
+    <CollapsibleContent
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    >
+      {children}
+    </CollapsibleContent>
+  )
+);
+ReasoningContent.displayName = 'ReasoningContent';

src/shared/view/ui/ScrollArea.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '../../../lib/utils';
 
 type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;

src/shared/view/ui/Shimmer.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+interface ShimmerProps {
+  children: string;
+  className?: string;
+  as?: React.ElementType;
+}
+
+const Shimmer = React.memo<ShimmerProps>(({ children, className, as: Component = 'span' }) => {
+  return (
+    <Component
+      className={cn(
+        'animate-shimmer inline-block bg-[length:250%_100%] bg-clip-text text-transparent',
+        'bg-[linear-gradient(90deg,transparent_33%,hsl(var(--foreground))_50%,transparent_67%),linear-gradient(hsl(var(--muted-foreground)),hsl(var(--muted-foreground)))]',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+});
+Shimmer.displayName = 'Shimmer';
+
+export { Shimmer };

src/shared/view/ui/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+
 import { cn } from '../../../lib/utils';
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

src/shared/view/ui/index.ts

@@ -1,7 +1,15 @@
+export { Alert, AlertTitle, AlertDescription, alertVariants } from './Alert';
 export { Badge, badgeVariants } from './Badge';
 export { Button, buttonVariants } from './Button';
+export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from './Confirmation';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from './Card';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from './Command';
 export { default as DarkModeToggle } from './DarkModeToggle';
+export { Dialog, DialogTrigger, DialogContent, DialogTitle } from './Dialog';
 export { Input } from './Input';
 export { ScrollArea } from './ScrollArea';
+export { Reasoning, ReasoningTrigger, ReasoningContent, useReasoning } from './Reasoning';
+export { Shimmer } from './Shimmer';
 export { default as Tooltip } from './Tooltip';
 export { PillBar, Pill } from './PillBar';