@trycompai/design-system 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trycompai/design-system",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Design system for Comp AI - shadcn-style components with Tailwind CSS",
   "type": "module",
   "main": "./src/index.ts",
@@ -65,12 +65,6 @@
     "shadcn",
     "ui"
   ],
-  "scripts": {
-    "clean": "rm -rf .turbo node_modules",
-    "format": "prettier --write .",
-    "lint": "prettier --check .",
-    "typecheck": "tsc --noEmit"
-  },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
     "@carbon/icons-react": "^11.72.0",
@@ -97,7 +91,6 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
-    "@repo/typescript-config": "workspace:*",
     "@tailwindcss/postcss": "^4.1.10",
     "@types/node": "^22.18.0",
     "@types/react": "^19.2.7",
@@ -106,6 +99,13 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.0",
     "tailwindcss": "^4.1.8",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "clean": "rm -rf .turbo node_modules",
+    "format": "prettier --write .",
+    "lint": "prettier --check .",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/components/atoms/button.tsx

@@ -89,6 +89,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       iconRight,
       disabled,
       children,
+      render,
       ...props
     },
     ref,
@@ -102,6 +103,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={loading || undefined}
         disabled={isDisabled}
         className={buttonVariants({ variant, width, size })}
+        render={render}
+        nativeButton={!render}
         {...props}
       >
         {loading ? (

package/src/components/molecules/ai-chat.tsx

@@ -1,146 +1,150 @@
 'use client';
 
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Close, MagicWand, Send } from '@carbon/icons-react';
+import { Close, MagicWand, Send, Keyboard } from '@carbon/icons-react';
 import * as React from 'react';
 
-const aiChatTriggerVariants = cva(
-  'fixed bottom-6 right-6 z-50 flex items-center justify-center rounded-full transition-all duration-200 cursor-pointer',
-  {
-    variants: {
-      size: {
-        default: 'size-14',
-        sm: 'size-12',
-        lg: 'size-16',
-      },
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:scale-95',
-        secondary: 'bg-foreground text-background hover:bg-foreground/90 active:scale-95',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-      variant: 'default',
-    },
-  },
-);
-
-const aiChatPanelVariants = cva(
-  'fixed bottom-24 right-6 z-50 flex flex-col bg-background border border-border rounded-2xl overflow-hidden transition-all duration-200 origin-bottom-right',
-  {
-    variants: {
-      size: {
-        default: 'w-96 h-[500px]',
-        sm: 'w-80 h-[400px]',
-        lg: 'w-[450px] h-[600px]',
-      },
-    },
-    defaultVariants: {
-      size: 'default',
-    },
-  },
-);
-
-interface AIChatProps extends VariantProps<typeof aiChatTriggerVariants> {
+import { Kbd } from '../atoms/kbd';
+import { Tooltip, TooltipContent, TooltipTrigger } from './tooltip';
+
+interface AIChatProps {
   /** Whether the chat panel is open */
   open?: boolean;
   /** Default open state (uncontrolled) */
   defaultOpen?: boolean;
   /** Callback when open state changes */
   onOpenChange?: (open: boolean) => void;
-  /** Custom trigger icon */
-  triggerIcon?: React.ReactNode;
-  /** Panel size */
-  panelSize?: 'sm' | 'default' | 'lg';
   /** Content to render inside the chat panel */
   children?: React.ReactNode;
+  /** Keyboard shortcut to toggle (default: Cmd+J) */
+  shortcut?: string;
 }
 
 function AIChat({
   open: openProp,
   defaultOpen = false,
   onOpenChange,
-  triggerIcon,
-  size = 'default',
-  variant = 'default',
-  panelSize = 'default',
   children,
+  shortcut = 'j',
 }: AIChatProps) {
   const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
   const isOpen = openProp ?? internalOpen;
 
-  const handleToggle = () => {
+  const handleToggle = React.useCallback(() => {
     const newValue = !isOpen;
     if (openProp === undefined) {
       setInternalOpen(newValue);
     }
     onOpenChange?.(newValue);
-  };
+  }, [isOpen, openProp, onOpenChange]);
+
+  const handleClose = React.useCallback(() => {
+    if (openProp === undefined) {
+      setInternalOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [openProp, onOpenChange]);
+
+  // Keyboard shortcut listener
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key.toLowerCase() === shortcut && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        handleToggle();
+      }
+      // Close on Escape when open
+      if (e.key === 'Escape' && isOpen) {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [shortcut, handleToggle, handleClose, isOpen]);
 
   return (
     <>
-      {/* Chat Panel */}
+      {/* Chat Panel - persistent side panel, no backdrop */}
       <div
         data-slot="ai-chat-panel"
-        className={`${aiChatPanelVariants({ size: panelSize })} ${
-          isOpen ? 'scale-100 opacity-100' : 'scale-95 opacity-0 pointer-events-none'
+        className={`fixed top-14 right-0 bottom-0 z-30 w-full max-w-md flex flex-col bg-background border-l border-border transition-transform duration-300 ease-out ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
         }`}
         style={{
-          boxShadow: '0 8px 32px -4px rgb(0 0 0 / 0.12), 0 4px 16px -2px rgb(0 0 0 / 0.08)',
+          boxShadow: isOpen ? '-4px 0 24px -4px rgb(0 0 0 / 0.08)' : 'none',
         }}
       >
-        {children || <AIChatDefaultContent onClose={handleToggle} />}
+        {children || <AIChatDefaultContent onClose={handleClose} />}
       </div>
-
-      {/* Floating Trigger Button */}
-      <button
-        type="button"
-        data-slot="ai-chat-trigger"
-        onClick={handleToggle}
-        className={aiChatTriggerVariants({ size, variant })}
-        style={{
-          boxShadow: '0 4px 16px -2px rgb(0 0 0 / 0.15), 0 2px 8px -2px rgb(0 0 0 / 0.1)',
-        }}
-        aria-label={isOpen ? 'Close chat' : 'Open chat'}
-      >
-        <span
-          className={`absolute transition-all duration-200 ${
-            isOpen ? 'scale-0 opacity-0 rotate-90' : 'scale-100 opacity-100 rotate-0'
-          }`}
-        >
-          {triggerIcon || <MagicWand className="size-6" />}
-        </span>
-        <span
-          className={`absolute transition-all duration-200 ${
-            isOpen ? 'scale-100 opacity-100 rotate-0' : 'scale-0 opacity-0 -rotate-90'
-          }`}
-        >
-          <Close className="size-6" />
-        </span>
-      </button>
     </>
   );
 }
 
+// Navbar trigger button for AI chat
+interface AIChatTriggerProps {
+  onClick?: () => void;
+  isOpen?: boolean;
+  shortcut?: string;
+}
+
+function AIChatTrigger({ onClick, isOpen, shortcut = 'J' }: AIChatTriggerProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onClick}
+            className={`inline-flex items-center gap-2 h-8 px-3 rounded-lg text-sm font-medium transition-all cursor-pointer ${
+              isOpen
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted hover:bg-accent text-foreground'
+            }`}
+            aria-label={isOpen ? 'Close AI Chat' : 'Open AI Chat'}
+          >
+            <MagicWand className="size-4" />
+            <span className="hidden sm:inline">Ask AI</span>
+            <span className="hidden sm:inline-flex ml-1 opacity-60 text-xs bg-foreground/10 px-1.5 py-0.5 rounded">
+              {navigator?.platform?.includes('Mac') ? '⌘' : 'Ctrl+'}
+              {shortcut}
+            </span>
+          </button>
+        }
+      />
+      <TooltipContent side="bottom">
+        {isOpen ? 'Close AI Chat' : 'Open AI Chat'}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
 // Default content when no children provided
 function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
+  const [message, setMessage] = React.useState('');
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Focus input when panel opens
+  React.useEffect(() => {
+    const timer = setTimeout(() => inputRef.current?.focus(), 100);
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-2">
-          <span className="flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary">
-            <MagicWand className="size-4" />
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+        <div className="flex items-center gap-3">
+          <span className="flex size-9 items-center justify-center rounded-xl bg-primary/10 text-primary">
+            <MagicWand className="size-5" />
           </span>
           <div>
             <div className="font-semibold text-sm">AI Assistant</div>
-            <div className="text-xs text-muted-foreground">Ask me anything</div>
+            <div className="text-xs text-muted-foreground">Ask me anything about your compliance</div>
           </div>
         </div>
         <button
           type="button"
           onClick={onClose}
-          className="size-8 flex items-center justify-center rounded-md hover:bg-muted/50 text-muted-foreground hover:text-foreground transition-colors"
+          className="size-8 flex items-center justify-center rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
         >
           <Close className="size-4" />
         </button>
@@ -151,33 +155,50 @@ function AIChatDefaultContent({ onClose }: { onClose: () => void }) {
         <div className="flex flex-col gap-4">
           {/* AI Welcome Message */}
           <div className="flex gap-3">
-            <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary">
-              <MagicWand className="size-3.5" />
+            <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+              <MagicWand className="size-4" />
             </span>
-            <div className="flex-1 rounded-2xl rounded-tl-sm bg-muted/50 dark:bg-muted px-3 py-2 text-sm">
-              Hi! I'm your AI assistant. How can I help you today?
+            <div className="flex-1 rounded-2xl rounded-tl-md bg-muted px-4 py-3 text-sm">
+              <p className="mb-2">Hi! I can help you with:</p>
+              <ul className="space-y-1 text-muted-foreground">
+                <li>Understanding compliance requirements</li>
+                <li>Reviewing and creating policies</li>
+                <li>Analyzing evidence and controls</li>
+                <li>Answering questions about SOC 2, ISO 27001, and more</li>
+              </ul>
             </div>
           </div>
         </div>
       </div>
 
       {/* Input Area */}
-      <div className="p-3 border-t border-border">
-        <div className="flex items-center gap-2 rounded-xl bg-muted/50 dark:bg-muted px-3 py-2">
+      <div className="p-4 border-t border-border shrink-0">
+        <div className="flex items-center gap-2 rounded-xl bg-muted px-4 py-2.5">
           <input
+            ref={inputRef}
             type="text"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
             placeholder="Ask a question..."
             className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && message.trim()) {
+                // Handle send
+                setMessage('');
+              }
+            }}
           />
           <button
             type="button"
-            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+            disabled={!message.trim()}
+            className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
           >
             <Send className="size-4" />
           </button>
         </div>
-        <div className="mt-2 text-center text-xs text-muted-foreground">
-          Powered by AI
+        <div className="mt-3 flex items-center justify-center gap-2 text-xs text-muted-foreground">
+          <Keyboard className="size-3" />
+          <span>Press <Kbd>Esc</Kbd> to close</span>
         </div>
       </div>
     </>
@@ -189,7 +210,7 @@ function AIChatHeader({ children, ...props }: Omit<React.ComponentProps<'div'>,
   return (
     <div
       data-slot="ai-chat-header"
-      className="flex items-center justify-between px-4 py-3 border-b border-border"
+      className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0"
       {...props}
     >
       {children}
@@ -207,11 +228,11 @@ function AIChatBody({ children, ...props }: Omit<React.ComponentProps<'div'>, 'c
 
 function AIChatFooter({ children, ...props }: Omit<React.ComponentProps<'div'>, 'className'>) {
   return (
-    <div data-slot="ai-chat-footer" className="p-3 border-t border-border" {...props}>
+    <div data-slot="ai-chat-footer" className="p-4 border-t border-border shrink-0" {...props}>
       {children}
     </div>
   );
 }
 
-export { AIChat, AIChatHeader, AIChatBody, AIChatFooter, aiChatTriggerVariants, aiChatPanelVariants };
-export type { AIChatProps };
+export { AIChat, AIChatBody, AIChatFooter, AIChatHeader, AIChatTrigger };
+export type { AIChatProps, AIChatTriggerProps };

package/src/components/molecules/tabs.tsx

@@ -51,7 +51,7 @@ function TabsTrigger({ ...props }: Omit<TabsPrimitive.Tab.Props, 'className'>) {
   return (
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
-      className="gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none group-data-[variant=underline]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:mb-0 group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:border-none group-data-[variant=underline]/tabs-list:hover:bg-muted group-data-[variant=underline]/tabs-list:flex-none group-data-[variant=underline]/tabs-list:justify-start group-data-[variant=underline]/tabs-list:text-left dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-active:border-transparent dark:group-data-[variant=underline]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=underline]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=underline]/tabs-list:after:h-[3px] group-data-[variant=underline]/tabs-list:after:bottom-0 group-data-[variant=underline]/tabs-list:after:rounded-none group-data-[variant=underline]/tabs-list:h-auto group-data-[variant=underline]/tabs-list:data-active:after:opacity-100"
+      className="cursor-pointer gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none group-data-[variant=underline]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:bg-transparent group-data-[variant=underline]/tabs-list:data-active:bg-transparent group-data-[variant=underline]/tabs-list:px-4 group-data-[variant=underline]/tabs-list:py-3 group-data-[variant=underline]/tabs-list:mb-0 group-data-[variant=underline]/tabs-list:rounded-none group-data-[variant=underline]/tabs-list:border-none group-data-[variant=underline]/tabs-list:hover:bg-muted group-data-[variant=underline]/tabs-list:flex-none group-data-[variant=underline]/tabs-list:justify-start group-data-[variant=underline]/tabs-list:text-left dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=underline]/tabs-list:data-active:border-transparent dark:group-data-[variant=underline]/tabs-list:data-active:bg-transparent data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:after:bg-foreground group-data-[variant=underline]/tabs-list:after:bg-primary group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=underline]/tabs-list:after:h-[3px] group-data-[variant=underline]/tabs-list:after:bottom-0 group-data-[variant=underline]/tabs-list:after:rounded-none group-data-[variant=underline]/tabs-list:h-auto group-data-[variant=underline]/tabs-list:data-active:after:opacity-100"
       {...props}
     />
   );

package/src/components/organisms/app-shell.tsx

@@ -1,11 +1,12 @@
 import { cva, type VariantProps } from 'class-variance-authority';
-import { Search, SidePanelClose, SidePanelOpen } from '@carbon/icons-react';
+import { ChevronDown, Search, SidePanelClose, SidePanelOpen } from '@carbon/icons-react';
 import * as React from 'react';
 
 import { Kbd } from '../atoms/kbd';
 import { Stack } from '../atoms/stack';
-import { AIChat } from '../molecules/ai-chat';
+import { AIChat, AIChatTrigger } from '../molecules/ai-chat';
 import { InputGroup, InputGroupAddon, InputGroupInput } from '../molecules/input-group';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../molecules/tooltip';
 
 // ============ CONTEXT ============
 
@@ -27,6 +28,10 @@ type AppShellContextProps = {
   /** Sidebar variant for mobile drawer styling */
   sidebarVariant: 'default' | 'muted' | 'primary';
   setSidebarVariant: (variant: 'default' | 'muted' | 'primary') => void;
+  /** AI Chat state */
+  aiChatOpen: boolean;
+  setAIChatOpen: (open: boolean) => void;
+  toggleAIChat: () => void;
 };
 
 const AppShellContext = React.createContext<AppShellContextProps | null>(null);
@@ -69,9 +74,9 @@ const appShellSidebarVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background border-r border-border',
-        muted: 'bg-muted border-r border-border',
-        primary: 'bg-primary border-r border-primary-foreground/10',
+        default: 'bg-background',
+        muted: 'bg-muted',
+        primary: 'bg-primary',
       },
     },
     defaultVariants: {
@@ -80,7 +85,7 @@ const appShellSidebarVariants = cva(
   },
 );
 
-const appShellContentVariants = cva('flex flex-1 flex-col overflow-auto bg-background min-h-0', {
+const appShellContentVariants = cva('flex flex-1 flex-col overflow-auto bg-background min-h-0 border-l border-border', {
   variants: {
     padding: {
       none: '',
@@ -117,7 +122,7 @@ interface AppShellProps extends Omit<React.ComponentProps<'div'>, 'className'> {
   sidebarOpen?: boolean;
   /** Callback when sidebar state changes */
   onSidebarOpenChange?: (open: boolean) => void;
-  /** Show the floating AI chat button */
+  /** Enable AI chat feature */
   showAIChat?: boolean;
   /** Custom content for the AI chat panel */
   aiChatContent?: React.ReactNode;
@@ -198,6 +203,9 @@ function AppShell({
   // Mobile drawer state (always starts closed)
   const [mobileDrawerOpen, setMobileDrawerOpen] = React.useState(false);
 
+  // AI Chat state
+  const [aiChatOpen, setAIChatOpen] = React.useState(false);
+
   // Content for mobile drawer (populated by Rail and Sidebar components)
   const [railContent, setRailContent] = React.useState<React.ReactNode>(null);
   const [sidebarContent, setSidebarContent] = React.useState<React.ReactNode>(null);
@@ -222,6 +230,10 @@ function AppShell({
     setMobileDrawerOpen(!mobileDrawerOpen);
   }, [mobileDrawerOpen]);
 
+  const toggleAIChat = React.useCallback(() => {
+    setAIChatOpen(!aiChatOpen);
+  }, [aiChatOpen]);
+
   // Listen for Cmd+\ to toggle sidebar (desktop) or mobile drawer
   React.useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -255,8 +267,11 @@ function AppShell({
       setSidebarContent,
       sidebarVariant,
       setSidebarVariant,
+      aiChatOpen,
+      setAIChatOpen,
+      toggleAIChat,
     }),
-    [sidebarOpen, setSidebarOpen, toggleSidebar, mobileDrawerOpen, toggleMobileDrawer, railContent, sidebarContent, sidebarVariant],
+    [sidebarOpen, setSidebarOpen, toggleSidebar, mobileDrawerOpen, toggleMobileDrawer, railContent, sidebarContent, sidebarVariant, aiChatOpen, toggleAIChat],
   );
 
   return (
@@ -268,7 +283,11 @@ function AppShell({
         {...props}
       >
         {children}
-        {showAIChat && <AIChat>{aiChatContent}</AIChat>}
+        {showAIChat && (
+          <AIChat open={aiChatOpen} onOpenChange={setAIChatOpen}>
+            {aiChatContent}
+          </AIChat>
+        )}
       </div>
     </AppShellContext.Provider>
   );
@@ -332,7 +351,7 @@ function AppShellBody({ children, ...props }: AppShellBodyProps) {
   const { mobileDrawerOpen, setMobileDrawerOpen, railContent, sidebarContent, sidebarVariant } = useAppShell();
 
   return (
-    <div data-slot="app-shell-body" className="flex flex-1 overflow-hidden bg-background/50 min-h-0 gap-0" {...props}>
+    <div data-slot="app-shell-body" className=" flex flex-1 overflow-hidden bg-background/50 min-h-0 gap-0" {...props}>
       {/* Mobile drawer - shows both rail and sidebar */}
       <div className="md:hidden">
         {/* Backdrop */}
@@ -376,7 +395,7 @@ function AppShellMain({ children, ...props }: Omit<React.ComponentProps<'div'>,
   return (
     <div
       data-slot="app-shell-main"
-      className="flex flex-1 min-h-0 ml-2 mr-2 mb-2 rounded-xl overflow-hidden bg-background"
+      className="flex flex-1 min-h-0 ml-2 mr-2 mb-2 rounded-xl overflow-hidden bg-background border-border border"
       {...props}
     >
       {children}
@@ -531,23 +550,35 @@ function AppShellRailItem({ isActive, icon, label, ...props }: AppShellRailItemP
     }
   }, [isActive, context, itemId]);
 
-  return (
+  const button = (
     <button
       ref={buttonRef}
       data-slot="app-shell-rail-item"
       data-active={isActive}
-      className={`flex size-10 items-center justify-center rounded-md transition-all duration-200 cursor-pointer ${
+      className={`flex size-10 items-center justify-center rounded-lg transition-all duration-200 cursor-pointer ${
         isActive
-          ? 'bg-primary/10 text-primary'
-          : 'text-muted-foreground hover:text-foreground hover:bg-background/50'
+          ? 'bg-primary text-primary-foreground shadow-md'
+          : 'text-muted-foreground hover:text-foreground hover:bg-accent dark:hover:bg-muted hover:shadow active:scale-95'
       }`}
-      title={label}
       aria-label={label}
       {...props}
     >
       <span className="size-5 [&>svg]:size-5">{icon}</span>
     </button>
   );
+
+  if (label) {
+    return (
+      <Tooltip>
+        <TooltipTrigger render={button} />
+        <TooltipContent side="right" sideOffset={8}>
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
 }
 
 function AppShellSidebar({
@@ -716,7 +747,7 @@ function AppShellSidebarHeader({ icon, title, description, action, children, ...
 
 function AppShellNav({ children, ...props }: AppShellNavProps) {
   return (
-    <nav data-slot="app-shell-nav" className="flex-1 space-y-4 py-2" {...props}>
+    <nav data-slot="app-shell-nav" className="flex-1 space-y-1 py-2" {...props}>
       {children}
     </nav>
   );
@@ -738,7 +769,7 @@ function AppShellNavGroup({ label, children, ...props }: AppShellNavGroupProps)
           {label}
         </div>
       )}
-      <Stack gap="1">{children}</Stack>
+      <div className="space-y-0.5">{children}</div>
     </div>
   );
 }
@@ -749,34 +780,102 @@ function AppShellNavItem({ isActive, icon, children, ...props }: AppShellNavItem
       data-slot="app-shell-nav-item"
       data-active={isActive}
       className={[
-        'flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-sm cursor-pointer',
-        // Smooth transitions for premium feel
+        'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer',
+        'transition-all duration-150 ease-out',
+        isActive
+          ? 'bg-muted text-foreground font-medium'
+          : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+      ].join(' ')}
+      {...props}
+    >
+      {icon && <span className="size-4 shrink-0 [&>svg]:size-4">{icon}</span>}
+      {children}
+    </button>
+  );
+}
+
+interface AppShellNavItemCollapsibleProps extends Omit<React.ComponentProps<'div'>, 'className'> {
+  /** Whether any child is currently active */
+  isActive?: boolean;
+  /** Whether the collapsible is expanded */
+  defaultOpen?: boolean;
+  icon?: React.ReactNode;
+  label: string;
+}
+
+function AppShellNavItemCollapsible({
+  isActive,
+  defaultOpen,
+  icon,
+  label,
+  children,
+  ...props
+}: AppShellNavItemCollapsibleProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen ?? isActive ?? false);
+
+  // Auto-expand when a child becomes active
+  React.useEffect(() => {
+    if (isActive) {
+      setIsOpen(true);
+    }
+  }, [isActive]);
+
+  return (
+    <div data-slot="app-shell-nav-item-collapsible" {...props}>
+      {/* Parent trigger */}
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={[
+          'flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm cursor-pointer',
+          'transition-all duration-150 ease-out',
+          isActive || isOpen
+            ? 'text-foreground font-semibold'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+        ].join(' ')}
+      >
+        {icon && <span className="size-4 shrink-0 [&>svg]:size-4">{icon}</span>}
+        <span className="flex-1 text-left">{label}</span>
+        <ChevronDown
+          className={`size-4 text-muted-foreground transition-transform duration-200 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {/* Children - collapsible card area */}
+      <div
+        className={`overflow-hidden transition-all duration-200 ease-out ${
+          isOpen ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'
+        }`}
+      >
+        <div className="mt-1 ml-2 rounded-xl bg-muted/40 dark:bg-muted/20 p-1.5 space-y-0.5">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Sub-item for collapsible nav (no icon, smaller padding)
+interface AppShellNavSubItemProps extends Omit<React.ComponentProps<'button'>, 'className'> {
+  isActive?: boolean;
+}
+
+function AppShellNavSubItem({ isActive, children, ...props }: AppShellNavSubItemProps) {
+  return (
+    <button
+      data-slot="app-shell-nav-sub-item"
+      data-active={isActive}
+      className={[
+        'flex w-full items-center rounded-lg px-3 py-2 text-sm cursor-pointer',
         'transition-all duration-150 ease-out',
-        // Subtle scale on hover for premium touch
-        'active:scale-[0.98]',
-        // Base styles for default/muted sidebar variants
         isActive
-          ? [
-              // Active state - default variant: softer in light, stronger in dark
-              '[[data-variant=default]_&]:bg-muted/50 [[data-variant=default]_&]:dark:bg-muted [[data-variant=default]_&]:text-foreground',
-              // Active state - muted variant (gray bg sidebar): use white bg
-              '[[data-variant=muted]_&]:bg-background [[data-variant=muted]_&]:text-foreground [[data-variant=muted]_&]:shadow-sm',
-              // Active state - primary variant: use white/10 overlay
-              '[[data-variant=primary]_&]:bg-primary-foreground/15 [[data-variant=primary]_&]:text-primary-foreground',
-              'font-medium',
-            ].join(' ')
-          : [
-              // Inactive - default/muted variants
-              'text-muted-foreground hover:text-foreground',
-              '[[data-variant=default]_&]:hover:bg-muted/30 [[data-variant=default]_&]:dark:hover:bg-muted/60',
-              '[[data-variant=muted]_&]:hover:bg-background/60',
-              // Inactive - primary variant
-              '[[data-variant=primary]_&]:text-primary-foreground/70 [[data-variant=primary]_&]:hover:text-primary-foreground [[data-variant=primary]_&]:hover:bg-primary-foreground/10',
-            ].join(' '),
+          ? 'bg-background text-foreground font-medium shadow-sm'
+          : 'text-muted-foreground hover:text-foreground hover:bg-background/50',
       ].join(' ')}
       {...props}
     >
-      {icon && <span className="size-4 shrink-0 [&>svg]:size-4 transition-transform duration-150 group-hover:scale-110">{icon}</span>}
       {children}
     </button>
   );
@@ -798,8 +897,15 @@ function AppShellNavFooter({ children, ...props }: AppShellNavFooterProps) {
   );
 }
 
+// AI Chat trigger for navbar - uses context to control AI chat panel
+function AppShellAIChatTrigger() {
+  const { aiChatOpen, toggleAIChat } = useAppShell();
+  return <AIChatTrigger onClick={toggleAIChat} isOpen={aiChatOpen} />;
+}
+
 export {
   AppShell,
+  AppShellAIChatTrigger,
   AppShellBody,
   AppShellContent,
   AppShellMain,
@@ -808,6 +914,8 @@ export {
   AppShellNavFooter,
   AppShellNavGroup,
   AppShellNavItem,
+  AppShellNavItemCollapsible,
+  AppShellNavSubItem,
   AppShellRail,
   AppShellRailItem,
   AppShellSearch,

package/src/styles/globals.css

@@ -138,7 +138,7 @@
     --success: oklch(0.7 0.16 145);
     --warning: oklch(0.8 0.15 85);
     --info: oklch(0.7 0.15 250);
-    --border: oklch(0.2 0 0);
+    --border: oklch(0.28 0 0);
     --input: oklch(1 0 0 / 15%);
     --ring: oklch(0.556 0 0);
     --chart-1: oklch(0.845 0.143 164.978);
@@ -152,7 +152,7 @@
     --sidebar-primary-foreground: oklch(0.262 0.051 172.552);
     --sidebar-accent: oklch(0.22 0 0);
     --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(0.2 0 0);
+    --sidebar-border: oklch(0.28 0 0);
     --sidebar-ring: oklch(0.556 0 0);
   }
 }