@hanzo/ui 5.0.0 → 5.0.2

package/README.md

@@ -1,29 +1,10 @@
-# @hanzo/ui v5
+# @hanzo/ui
 
-[![npm version](https://img.shields.io/npm/v/@hanzo/ui.svg)](https://www.npmjs.com/package/@hanzo/ui)
-[![npm downloads](https://img.shields.io/npm/dm/@hanzo/ui.svg)](https://www.npmjs.com/package/@hanzo/ui)
-[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@hanzo/ui)](https://bundlephobia.com/package/@hanzo/ui)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)
+A comprehensive UI component library for Hanzo applications, built with React and TypeScript.
 
-Modern React component library built on shadcn/ui v4 with Hanzo branding, featuring 50+ accessible components, 35+ hooks, and comprehensive TypeScript support.
+## Version 4.5.6
 
-## ✨ Features
-
-- 🎨 **Multi-Brand Theming** - Built-in support for Hanzo, Lux, and Zoo brands
-- 📦 **50+ Components** - Comprehensive UI components based on shadcn/ui v4
-- 🪝 **35+ Custom Hooks** - Powerful React hooks for common patterns
-- 🛠️ **25+ Utilities** - Helper functions and utilities
-- 🌙 **Dark Mode** - Native dark mode with system preference detection
-- ♿ **Accessible** - WCAG 2.1 AA compliant components
-- 📱 **Responsive** - Mobile-first responsive design
-- 🎯 **Tree Shakeable** - Import only what you need
-- 💅 **Tailwind CSS** - Utility-first styling with Tailwind v3.4+
-- 🎭 **OKLCH Colors** - Modern color system with OKLCH color space
-- 🤖 **AI Components** - Chat interfaces and AI-specific components
-- 📋 **Copy/Paste** - Components can be copied directly into your project
-
-## 📦 Installation
+## Installation
 
 ```bash
 npm install @hanzo/ui
@@ -33,190 +14,216 @@ pnpm add @hanzo/ui
 yarn add @hanzo/ui
 ```
 
-## 🚀 Quick Start
-
-### 1. Configure Tailwind CSS
-
-Add the Hanzo UI preset to your `tailwind.config.js`:
-
-```js
-// tailwind.config.js
-import hanzoPreset from '@hanzo/ui/tailwind-preset'
-
-export default {
-  presets: [hanzoPreset],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@hanzo/ui/dist/**/*.{js,mjs}'
-  ],
-  // ... your config
-}
-```
-
-### 2. Import Components
-
-```tsx
-// Import utilities
-import { cn } from '@hanzo/ui'
-
-// Import components
-import { Button, Card, Dialog } from '@hanzo/ui/components'
-
-// Or import individually
-import { Button } from '@hanzo/ui/components/button'
-import { Card } from '@hanzo/ui/components/card'
-
-// Import AI components
-import { ChatInterface } from '@hanzo/ui/ai'
-
-// Import block patterns
-import { AuthForm } from '@hanzo/ui/blocks'
-```
-
-### 3. Use Components
-
-```tsx
-export function App() {
-  return (
-    <Card className="p-6">
-      <h1>Welcome to Hanzo UI</h1>
-      <Button variant="default" size="lg">
-        Get Started
-      </Button>
-    </Card>
-  )
-}
-```
-
-## 📚 Component Categories
-
-### Core Components
-- **Layout**: Container, Grid, Stack, Spacer
-- **Typography**: Heading, Text, Label
-- **Buttons**: Button, IconButton, ButtonGroup
-- **Forms**: Input, Textarea, Select, Checkbox, Radio, Switch
-- **Feedback**: Alert, Toast, Progress, Skeleton
-- **Overlay**: Dialog, Sheet, Popover, Tooltip
-- **Navigation**: Tabs, Breadcrumb, Pagination
-- **Data Display**: Table, DataTable, Card, Badge
-- **Media**: Avatar, Image, Video
-
-### AI Components
-- Chat Interface
-- Message Components
-- Code Block with Syntax Highlighting
-- Streaming Support
-- Tool Use Display
-
-### Block Patterns
-- Authentication Forms
-- Dashboard Layouts
-- Marketing Sections
-- E-commerce Patterns
-- Landing Pages
-
-## 🎨 Theming
-
-### Using CSS Variables
-
-Hanzo UI uses CSS variables for theming. You can customize the theme by overriding these variables:
-
-```css
-@layer base {
-  :root {
-    --hanzo-background: 0 0% 100%;
-    --hanzo-foreground: 0 0% 3.9%;
-    --hanzo-primary: 0 0% 9%;
-    --hanzo-primary-foreground: 0 0% 98%;
-    /* ... more variables */
-  }
-
-  .dark {
-    --hanzo-background: 0 0% 3.9%;
-    --hanzo-foreground: 0 0% 98%;
-    /* ... dark mode variables */
-  }
-}
-```
-
-### Multiple Brands
-
-Switch between brand themes:
+## Components
+
+### Primitives
+
+Core UI components based on Radix UI primitives:
+
+- **Accordion** - Collapsible content panels
+- **Alert** - Informative alert messages
+- **AlertDialog** - Modal dialogs for important alerts
+- **Avatar** - User avatar display
+- **Badge** - Status and label badges
+- **Breadcrumb** - Navigation breadcrumbs
+- **Button** - Interactive buttons with variants
+- **Calendar** - Date picker calendar
+- **Card** - Container cards for content
+- **Carousel** - Image/content carousel
+- **Checkbox** - Checkbox input
+- **Collapsible** - Collapsible content sections
+- **Combobox** - Searchable select dropdown
+- **Command** - Command palette component
+- **ContextMenu** - Right-click context menus
+- **Dialog** - Modal dialogs
+- **Drawer** - Slide-out drawer panels
+- **DropdownMenu** - Dropdown menu component
+- **Form** - Form components with validation
+- **HoverCard** - Hover-triggered info cards
+- **Input** - Text input field
+- **InputOTP** - One-time password input
+- **Label** - Form labels
+- **NavigationMenu** - Navigation menu bar
+- **Popover** - Popover overlays
+- **Progress** - Progress indicators
+- **RadioGroup** - Radio button groups
+- **ResizablePanel** - Resizable panel layouts
+- **ScrollArea** - Custom scrollable areas
+- **SearchInput** - Search input with icon
+- **Select** - Select dropdown
+- **Separator** - Visual separator line
+- **Sheet** - Side sheet panels
+- **Skeleton** - Loading skeleton screens
+- **Slider** - Range slider input
+- **Switch** - Toggle switch
+- **Table** - Data tables
+- **Tabs** - Tabbed interfaces
+- **TextArea** - Multi-line text input
+- **TextField** - Enhanced text input
+- **Toast** - Toast notifications (via Sonner)
+- **Toggle** - Toggle buttons
+- **ToggleGroup** - Grouped toggle buttons
+- **Tooltip** - Hover tooltips
+- **VideoPlayer** - Video playback component
+
+### Assets
+
+Icon components and visual assets:
+
+#### AI Provider Icons
+- **AnthropicIcon** - Anthropic AI logo
+- **OpenAIIcon** - OpenAI logo
+- **GeminiIcon** - Google Gemini logo
+- **DeepSeekIcon** - DeepSeek logo
+- **MistralIcon** - Mistral AI logo
+- **MetaIcon** - Meta AI logo
+- **GroqIcon** - Groq logo
+- **OllamaIcon** - Ollama logo
+- **HanzoIcon** - Hanzo AI logo
+- **TogetherAI** - Together AI logo
+- **ExoIcon** - Exo logo
+- **GrokIcon** - Grok logo
+- **LmStudioIcon** - LM Studio logo
+- **OpenRouterIcon** - OpenRouter logo
+- **PerplexityIcon** - Perplexity logo
+- **QwenIcon** - Qwen logo
+- **AyaCohereIcon** - Aya/Cohere logo
+
+#### Feature Icons
+- **AIAgentIcon** - AI agent indicator
+- **AisIcon** - AI services icon
+- **ReactJsIcon** - React.js logo
+- **ReasoningIcon** - AI reasoning indicator
+- **ToolsIcon** - Tools/utilities icon
+- **TracingIcon** - Tracing/monitoring icon
+- **ScheduledTasksIcon** - Scheduled tasks icon
+- **SendIcon** - Send/submit icon
+
+#### File Type Icons
+- **FileTypeIcon** - Dynamic file type icon based on extension
+- **DirectoryTypeIcon** - Folder/directory icon
+
+### Utilities
+
+Helper functions and hooks:
+
+- **cn()** - Class name utility (clsx + tailwind-merge)
+- **markdown()** - Markdown to JSX converter
+- **formatText()** - Text formatting utilities
+- **useDebounce()** - Debounce hook
+- **useMap()** - Map state management hook
+- **formatDateToLocaleStringWithTime()** - Date formatting
+- **getFileExt()** - File extension extraction
+- **hexToRgb()** - Color conversion utilities
+
+### Custom Components
+
+Additional enhanced components:
+
+- **ChatInput** - Chat message input
+- **ChatInputArea** - Multi-line chat input
+- **ChatSettingsIcon** - Chat settings icon
+- **CopyToClipboardIcon** - Copy to clipboard button
+- **DotsLoader** - Loading dots animation
+- **FileList** - File list display
+- **FileUploader** - File upload component
+- **JsonForm** - JSON-based dynamic forms
+- **MarkdownText** - Markdown renderer
+- **PrettyJsonPrint** - Formatted JSON display
+
+## Styling
+
+The library uses Tailwind CSS for styling. Make sure your application includes Tailwind CSS configuration.
+
+## Dependencies
+
+Key peer dependencies:
+- React 18.3.1+
+- React DOM 18.3.1+
+- @hookform/resolvers ^3.3.2
+- react-hook-form 7.51.4
+- lucide-react 0.456.0
+- next-themes ^0.2.1
+- embla-carousel ^8.1.6
+
+## Usage Examples
+
+### Basic Button
 
 ```tsx
-import { ThemeProvider } from '@hanzo/ui/components/theme-provider'
+import { Button } from '@hanzo/ui';
 
 function App() {
   return (
-    <ThemeProvider defaultTheme="hanzo" storageKey="ui-theme">
-      {/* Your app */}
-    </ThemeProvider>
-  )
+    <Button variant="primary" onClick={() => console.log('clicked')}>
+      Click me
+    </Button>
+  );
 }
 ```
 
-## 🔧 Advanced Usage
-
-### Custom Styling with cn()
-
-The `cn()` utility combines clsx and tailwind-merge:
+### Alert Dialog
 
 ```tsx
-import { cn } from '@hanzo/ui'
-
-function CustomButton({ className, ...props }) {
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel
+} from '@hanzo/ui';
+
+function ConfirmDialog() {
   return (
-    <button
-      className={cn(
-        'px-4 py-2 rounded-lg bg-primary text-primary-foreground',
-        'hover:bg-primary/90 transition-colors',
-        className
-      )}
-      {...props}
-    />
-  )
+    <AlertDialog>
+      <AlertDialogTrigger>
+        <Button>Open Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
 }
 ```
 
-### TypeScript Support
-
-All components are fully typed:
+### AI Provider Icons
 
 ```tsx
-import type { ButtonProps } from '@hanzo/ui/components/button'
+import { OpenAIIcon, AnthropicIcon, GeminiIcon } from '@hanzo/ui/assets';
 
-interface CustomButtonProps extends ButtonProps {
-  customProp?: string
-}
-
-export function CustomButton({ customProp, ...props }: CustomButtonProps) {
-  return <Button {...props} />
+function AIProviders() {
+  return (
+    <div className="flex gap-4">
+      <OpenAIIcon className="h-6 w-6" />
+      <AnthropicIcon className="h-6 w-6" />
+      <GeminiIcon className="h-6 w-6" />
+    </div>
+  );
 }
 ```
 
-## 📖 Documentation
-
-- [Full Documentation](https://ui.hanzo.ai)
-- [Component Examples](https://ui.hanzo.ai/components)
-- [Migration Guide](https://ui.hanzo.ai/docs/migration)
-- [Storybook](https://ui.hanzo.ai/storybook)
-
-## 🤝 Contributing
-
-Contributions are welcome! Please read our [Contributing Guide](https://github.com/hanzoai/ui/blob/main/CONTRIBUTING.md) for details.
-
-## 📄 License
+## License
 
-MIT © [Hanzo AI](https://hanzo.ai)
+BSD-3-Clause
 
-## 🔗 Links
+## Author
 
-- [GitHub Repository](https://github.com/hanzoai/ui)
-- [NPM Package](https://www.npmjs.com/package/@hanzo/ui)
-- [Documentation](https://ui.hanzo.ai)
-- [Storybook](https://ui.hanzo.ai/storybook)
-- [Discord Community](https://discord.gg/hanzo)
+Hanzo AI, Inc.
 
----
+## Repository
 
-Built with ❤️ by [Hanzo AI](https://hanzo.ai)
+https://github.com/hanzoai/react-sdk

package/assets/ai-icons.tsx

@@ -0,0 +1,207 @@
+// AI provider icon implementations
+import React from 'react';
+import { cn } from '../src/utils';
+import { BrainIcon, ServerIcon, BotIcon, SparklesIcon, CpuIcon, ZapIcon, RocketIcon, ActivityIcon, NetworkIcon } from 'lucide-react';
+
+// Simple placeholder icons for AI providers - replace with actual brand icons when available
+export const AnthropicIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <BrainIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+AnthropicIcon.displayName = 'AnthropicIcon';
+
+export const AyaCohereIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <SparklesIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+AyaCohereIcon.displayName = 'AyaCohereIcon';
+
+export const DeepSeekIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <CpuIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+DeepSeekIcon.displayName = 'DeepSeekIcon';
+
+export const ExoIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ServerIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+ExoIcon.displayName = 'ExoIcon';
+
+export const GeminiIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <SparklesIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+GeminiIcon.displayName = 'GeminiIcon';
+
+export const GoogleIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
+    </svg>
+  )
+);
+GoogleIcon.displayName = 'GoogleIcon';
+
+export const GrokIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ZapIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+GrokIcon.displayName = 'GrokIcon';
+
+export const GroqIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <RocketIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+GroqIcon.displayName = 'GroqIcon';
+
+export const LmStudioIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ServerIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+LmStudioIcon.displayName = 'LmStudioIcon';
+
+export const MetaIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 2c4.41 0 8 3.59 8 8s-3.59 8-8 8-8-3.59-8-8 3.59-8 8-8z"/>
+    </svg>
+  )
+);
+MetaIcon.displayName = 'MetaIcon';
+
+export const MistralIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ActivityIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+MistralIcon.displayName = 'MistralIcon';
+
+export const OllamaIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ServerIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+OllamaIcon.displayName = 'OllamaIcon';
+
+export const OpenAIIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <BotIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+OpenAIIcon.displayName = 'OpenAIIcon';
+
+export const OpenRouterIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <NetworkIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+OpenRouterIcon.displayName = 'OpenRouterIcon';
+
+export const PerplexityIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <SparklesIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+PerplexityIcon.displayName = 'PerplexityIcon';
+
+export const QwenIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <CpuIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+QwenIcon.displayName = 'QwenIcon';
+
+export const HanzoIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
+    </svg>
+  )
+);
+HanzoIcon.displayName = 'HanzoIcon';
+
+export const TogetherAI = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <NetworkIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+TogetherAI.displayName = 'TogetherAI';
+
+// Generic AI icon for providers without specific icons
+export const AisIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <BrainIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+AisIcon.displayName = 'AisIcon';
+
+// Also export the ScheduledTasksIcon and SendIcon that might be needed
+export const ScheduledTasksIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ActivityIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+ScheduledTasksIcon.displayName = 'ScheduledTasksIcon';
+
+export const SendIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}>
+      <line x1="22" y1="2" x2="11" y2="13"></line>
+      <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+    </svg>
+  )
+);
+SendIcon.displayName = 'SendIcon';
+
+export const ReactJsIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" strokeWidth="2"/>
+      <circle cx="12" cy="12" r="3" fill="currentColor"/>
+      <circle cx="12" cy="6" r="2" fill="currentColor"/>
+      <circle cx="18" cy="15" r="2" fill="currentColor"/>
+      <circle cx="6" cy="15" r="2" fill="currentColor"/>
+      <path d="M12 12 L12 6 M12 12 L18 15 M12 12 L6 15" stroke="currentColor" strokeWidth="1.5"/>
+    </svg>
+  )
+);
+ReactJsIcon.displayName = 'ReactJsIcon';
+
+export const ReasoningIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <BrainIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+ReasoningIcon.displayName = 'ReasoningIcon';
+
+export const ToolsIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <svg ref={ref} className={cn("h-4 w-4", className)} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" {...props}>
+      <path d="M14 2l1.5 1.5v5.5L21 9v6l-5.5-.5V21L14 22l-2-7-2 7-1.5-1V14.5L3 15V9l5.5.5V4L10 2h4z"/>
+    </svg>
+  )
+);
+ToolsIcon.displayName = 'ToolsIcon';
+
+export const AIAgentIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <BotIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+AIAgentIcon.displayName = 'AIAgentIcon';
+
+export const TracingIcon = React.forwardRef<SVGSVGElement, React.SVGProps<SVGSVGElement>>(
+  ({ className, ...props }, ref) => (
+    <ActivityIcon ref={ref} className={cn("h-4 w-4", className)} {...props} />
+  )
+);
+TracingIcon.displayName = 'TracingIcon';

package/assets/crypto.tsx

@@ -0,0 +1,33 @@
+import { cn } from '../src/utils';
+
+export const EthereumIcon = ({ className }: { className?: string }) => (
+  <svg
+    className={cn('shrink-0', className)}
+    width="16"
+    height="16"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="#fff"
+      d="M12 3v6.65l5.625 2.516zm0 0-5.625 9.166L12 9.651zm0 13.477v4.522l5.625-7.784zM12 21v-4.523l-5.625-3.262z"
+    />
+  </svg>
+);
+
+export const USDCIcon = ({ className }: { className?: string }) => (
+  <svg
+    width="16"
+    className={cn('shrink-0', className)}
+    height="16"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <path
+      fill="#fff"
+      fillRule="evenodd"
+      d="M12 21c4.99 0 9-4.01 9-9s-4.01-9-9-9-9 4.01-9 9 4.01 9 9 9m2.475-7.578c0-1.31-.787-1.76-2.362-1.946-1.125-.152-1.35-.45-1.35-.978 0-.523.377-.86 1.125-.86.675 0 1.052.224 1.237.787.04.112.152.185.265.185h.596a.256.256 0 0 0 .264-.259v-.039c-.152-.827-.827-1.614-1.687-1.687v-.827c0-.152-.113-.265-.298-.298h-.495c-.152 0-.293.112-.332.298v.827c-1.125.151-1.873 1.012-1.873 1.951 0 1.238.748 1.722 2.323 1.913 1.052.185 1.39.41 1.39 1.012 0 .597-.53 1.013-1.238 1.013-.98 0-1.316-.416-1.429-.979-.034-.146-.146-.225-.259-.225h-.641a.256.256 0 0 0-.259.264v.04c.146.934.748 1.575 1.986 1.76v.833c0 .152.112.253.298.293h.54c.146 0 .248-.102.287-.293v-.833c1.125-.185 1.912-.939 1.912-1.952"
+      clipRule="evenodd"
+    />
+  </svg>
+);