ai-design-system 0.1.115 → 0.1.117

package/components/composites/DocumentTabBar/DocumentTabBar.tsx

@@ -5,10 +5,11 @@
  * Displays open documents as closeable tabs with dirty indicators.
  */
 
-import React from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Tabs, TabsList, TabsTrigger, Button, ScrollArea } from '@/components/primitives'
 import { Icon } from '@/components/primitives/Icon'
 import { cn } from '@/lib/utils'
+
 export interface DocumentFile {
   id: string
   name: string
@@ -50,6 +51,12 @@ export interface DocumentTabBarProps {
    * Callback to open/toggle the file explorer (e.g. mobile drawer)
    */
   onToggleExplorer?: () => void
+
+  /**
+   * Whether to show navigation scroll arrows when tabs overflow
+   * @default true
+   */
+  showScrollArrows?: boolean
 }
 
 /**
@@ -62,13 +69,103 @@ export interface DocumentTabBarProps {
  * - Close button (X)
  * 
  * Features:
- * - Scrollable when tabs overflow horizontally
+ * - Scrollable when tabs overflow horizontally with multi-device support
+ * - Mouse wheel vertical-to-horizontal scroll translation
+ * - Auto-scroll active tab into view
+ * - Overflow indicators (edge gradients & navigation chevrons)
  * - Accessible tab navigation via Radix UI Tabs
  * - Close button to remove tabs
  * - Dirty state indicator
  */
 export const DocumentTabBar = React.memo<DocumentTabBarProps>(
-  ({ tabs, activeTabId, onTabSelect, onTabClose, onToggleExplorer, className }) => {
+  ({
+    tabs,
+    activeTabId,
+    onTabSelect,
+    onTabClose,
+    onToggleExplorer,
+    className,
+    showScrollArrows = true,
+  }) => {
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+    const [canScrollLeft, setCanScrollLeft] = useState(false)
+    const [canScrollRight, setCanScrollRight] = useState(false)
+
+    const getViewport = useCallback((): HTMLElement | null => {
+      return (
+        scrollContainerRef.current?.querySelector<HTMLElement>(
+          '[data-slot="scroll-area-viewport"]'
+        ) ?? null
+      )
+    }, [])
+
+    const updateScrollState = useCallback(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+      const { scrollLeft, scrollWidth, clientWidth } = viewport
+      setCanScrollLeft(scrollLeft > 2)
+      setCanScrollRight(scrollLeft + clientWidth < scrollWidth - 2)
+    }, [getViewport])
+
+    useEffect(() => {
+      const viewport = getViewport()
+      if (!viewport) return
+
+      updateScrollState()
+      viewport.addEventListener('scroll', updateScrollState, { passive: true })
+
+      const resizeObserver = new ResizeObserver(() => {
+        updateScrollState()
+      })
+      resizeObserver.observe(viewport)
+
+      return () => {
+        viewport.removeEventListener('scroll', updateScrollState)
+        resizeObserver.disconnect()
+      }
+    }, [getViewport, updateScrollState, tabs])
+
+    // Convert mouse wheel vertical scroll to horizontal scroll
+    const handleWheel = useCallback(
+      (e: React.WheelEvent) => {
+        if (e.deltaY === 0) return
+        const viewport = getViewport()
+        if (viewport) {
+          viewport.scrollLeft += e.deltaY
+        }
+      },
+      [getViewport]
+    )
+
+    // Auto-scroll active tab into view
+    useEffect(() => {
+      if (!activeTabId || !scrollContainerRef.current) return
+      const activeEl = scrollContainerRef.current.querySelector<HTMLElement>(
+        '[data-state="active"]'
+      )
+      if (activeEl) {
+        activeEl.scrollIntoView({
+          behavior: 'smooth',
+          block: 'nearest',
+          inline: 'nearest',
+        })
+      }
+    }, [activeTabId, tabs])
+
+    const handleScrollLeft = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: -200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
+    const handleScrollRight = useCallback(() => {
+      const viewport = getViewport()
+      if (viewport) {
+        viewport.scrollBy({ left: 200, behavior: 'smooth' })
+      }
+    }, [getViewport])
+
     if (tabs.length === 0 && !onToggleExplorer) {
       return null
     }
@@ -76,7 +173,7 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
     return (
       <div
         className={cn(
-          'flex items-center border-b border-border bg-background',
+          'flex items-center border-b border-border bg-background relative',
           className
         )}
         data-slot="document-tab-bar"
@@ -92,67 +189,114 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
             <Icon name="folder" size="xs" />
           </Button>
         )}
+
         {tabs.length > 0 && (
-          <ScrollArea className="flex-1">
-            <Tabs
-              value={activeTabId || tabs[0]?.id}
-              onValueChange={onTabSelect}
-              className="h-auto flex-1"
-            >
-            <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
-              {tabs.map((tab) => (
+          <div
+            ref={scrollContainerRef}
+            onWheel={handleWheel}
+            className="flex-1 min-w-0 flex items-center relative"
+          >
+            {showScrollArrows && canScrollLeft && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollLeft}
+                className="h-10 w-7 shrink-0 rounded-none border-r border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs left"
+              >
+                <Icon name="chevron-left" size="xs" />
+              </Button>
+            )}
+
+            <div className="flex-1 min-w-0 relative h-10">
+              {canScrollLeft && (
                 <div
-                  key={tab.id}
-                  className="flex items-center border-r border-border/50 last:border-r-0"
+                  className="pointer-events-none absolute left-0 top-0 bottom-0 w-5 bg-gradient-to-r from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+
+              <ScrollArea orientation="horizontal" className="w-full h-10">
+                <Tabs
+                  value={activeTabId || tabs[0]?.id}
+                  onValueChange={onTabSelect}
+                  className="h-auto flex-1"
                 >
-                  <TabsTrigger
-                    value={tab.id}
-                    className={cn(
-                      'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
-                      'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
-                      'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
-                      'flex items-center gap-1.5 sm:gap-2 h-10',
-                      'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
-                      'transition-colors'
-                    )}
-                  >
-                    <div className="flex items-center gap-1.5 sm:gap-2">
-                      {/* Dirty indicator */}
-                      {tab.isDirty && (
-                        <Icon
-                          name="circle"
-                          className="size-2 fill-primary text-primary"
-                          aria-label="unsaved changes"
-                        />
-                      )}
-                      {/* Tab name */}
-                      <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
-                    </div>
-                  </TabsTrigger>
-
-                  {/* Close button */}
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onTabClose?.(tab.id)
-                    }}
-                    className={cn(
-                      'h-8 w-8 mr-0.5',
-                      'hover:bg-destructive/10 hover:text-destructive',
-                      'focus-visible:ring-2 focus-visible:ring-ring',
-                      'transition-colors'
-                    )}
-                    aria-label={`Close ${tab.name}`}
-                  >
-                    <Icon name="x" size="xs" />
-                  </Button>
-                </div>
-              ))}
-            </TabsList>
-          </Tabs>
-        </ScrollArea>
+                  <TabsList className="h-10 rounded-none border-none bg-transparent p-0 w-full justify-start gap-0">
+                    {tabs.map((tab) => (
+                      <div
+                        key={tab.id}
+                        className="flex items-center shrink-0 border-r border-border/50 last:border-r-0"
+                      >
+                        <TabsTrigger
+                          value={tab.id}
+                          className={cn(
+                            'data-[state=inactive]:bg-muted/20 data-[state=inactive]:text-muted-foreground',
+                            'rounded-none border-b-2 border-transparent data-[state=active]:border-primary',
+                            'px-2.5 sm:px-3 py-2 text-xs sm:text-sm font-medium whitespace-nowrap',
+                            'flex items-center gap-1.5 sm:gap-2 h-10',
+                            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
+                            'transition-colors'
+                          )}
+                        >
+                          <div className="flex items-center gap-1.5 sm:gap-2">
+                            {/* Dirty indicator */}
+                            {tab.isDirty && (
+                              <Icon
+                                name="circle"
+                                className="size-2 fill-primary text-primary"
+                                aria-label="unsaved changes"
+                              />
+                            )}
+                            {/* Tab name */}
+                            <span className="truncate max-w-[120px] sm:max-w-[200px]">{tab.name}</span>
+                          </div>
+                        </TabsTrigger>
+
+                        {/* Close button */}
+                        <Button
+                          variant="ghost"
+                          size="icon-sm"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onTabClose?.(tab.id)
+                          }}
+                          className={cn(
+                            'h-8 w-8 mr-0.5',
+                            'hover:bg-destructive/10 hover:text-destructive',
+                            'focus-visible:ring-2 focus-visible:ring-ring',
+                            'transition-colors'
+                          )}
+                          aria-label={`Close ${tab.name}`}
+                        >
+                          <Icon name="x" size="xs" />
+                        </Button>
+                      </div>
+                    ))}
+                  </TabsList>
+                </Tabs>
+              </ScrollArea>
+
+              {canScrollRight && (
+                <div
+                  className="pointer-events-none absolute right-0 top-0 bottom-0 w-5 bg-gradient-to-l from-background to-transparent z-10"
+                  aria-hidden="true"
+                />
+              )}
+            </div>
+
+            {showScrollArrows && canScrollRight && (
+              <Button
+                variant="ghost"
+                size="icon-sm"
+                onClick={handleScrollRight}
+                className="h-10 w-7 shrink-0 rounded-none border-l border-border/50 text-muted-foreground hover:text-foreground transition-colors z-10"
+                aria-label="Scroll tabs right"
+              >
+                <Icon name="chevron-right" size="xs" />
+              </Button>
+            )}
+          </div>
         )}
       </div>
     )
@@ -160,3 +304,4 @@ export const DocumentTabBar = React.memo<DocumentTabBarProps>(
 )
 
 DocumentTabBar.displayName = 'DocumentTabBar'
+

package/components/composites/DocumentTabBar/index.ts

@@ -1,2 +1,2 @@
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'

package/components/composites/SessionHeader/SessionHeader.tsx

@@ -17,10 +17,24 @@ export interface ChatSessionInfo {
 }
 
 import type { FileDownloadResult } from '@/components/composites/FileTreeExplorer';
+import { formatDayLabel } from '@/lib/date';
 
 
 export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string;
+  /**
+   * What a session is called.
+   * - "title": the session's own title (default).
+   * - "date": the day it was created, as "21 Aug 2025", in the reader's time
+   *   zone. For a surface that keeps one session per day, where the day is
+   *   what tells sessions apart and a first message is not.
+   * @default "title"
+   */
+  titleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" titles. Defaults to the reader's own.
+   */
+  timeZone?: string;
   sessions?: ChatSessionInfo[];
   activeSessionId?: string | null;
   onNewSession?: () => void;
@@ -48,7 +62,7 @@ export interface SessionHeaderProps extends React.HTMLAttributes<HTMLDivElement>
  * and a dropdown history of past sessions.
  */
 export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps>(
-  ({ title, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
+  ({ title, titleFormat = 'title', timeZone, sessions, activeSessionId, onNewSession, onCloseSession, onSelectSession, onDownloadSession, showActions = true, showNewSession = true, showDownloadSession = true, onOverview, showOverview = true, className, ...props }, ref) => {
     const activeSession = sessions?.find(s => s.id === activeSessionId);
     const downloadRef = React.useRef<HTMLAnchorElement>(null);
 
@@ -66,9 +80,16 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
       URL.revokeObjectURL(url);
     }, [onDownloadSession]);
 
-    const displayTitle = title || (activeSessionId 
-      ? (activeSession?.title || 'Untitled Session')
-      : 'New Session');
+    const byDate = titleFormat === 'date';
+    const sessionLabel = (session: ChatSessionInfo | undefined): string => {
+      if (!byDate) return session?.title || 'Untitled Session';
+      // A session not yet in the list is the one being started now: today's.
+      return formatDayLabel(session?.created_at ?? new Date(), { timeZone }) || 'Untitled Session';
+    };
+
+    const displayTitle = title || (activeSessionId
+      ? sessionLabel(activeSession)
+      : byDate ? formatDayLabel(new Date(), { timeZone }) : 'New Session');
 
     return (
       <div 
@@ -121,8 +142,11 @@ export const SessionHeader = React.forwardRef<HTMLDivElement, SessionHeaderProps
                       onClick={() => onSelectSession?.(session.id)}
                       className="flex flex-col items-start py-2 cursor-pointer"
                     >
-                      <span className="text-sm font-medium truncate w-full">{session.title || 'Untitled Session'}</span>
-                      <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      <span className="text-sm font-medium truncate w-full">{sessionLabel(session)}</span>
+                      {/* The date is the title in "date" mode; repeating it underneath says nothing. */}
+                      {!byDate && (
+                        <span className="text-xs text-muted-foreground">{new Date(session.created_at).toLocaleString()}</span>
+                      )}
                     </DropdownMenuItem>
                   ))
                 ) : (

package/components/composites/index.ts

@@ -75,7 +75,7 @@ export type { ModeToggleProps } from './ModeToggle'
 
 // DocumentTabBar Composite
 export { DocumentTabBar } from './DocumentTabBar'
-export type { DocumentTabBarProps } from './DocumentTabBar'
+export type { DocumentTabBarProps, DocumentFile } from './DocumentTabBar'
 
 // DefaultSwitcher Composite
 export { DefaultSwitcher } from './DefaultSwitcher'

package/components/features/ChatPanel/ChatPanel.tsx

@@ -220,6 +220,17 @@ export interface ChatPanelProps {
    * Title override for the session header
    */
   sessionTitle?: string;
+  /**
+   * What sessions are called in the header and the history list: their own
+   * title ("title", default) or the day they were created ("date", shown as
+   * "21 Aug 2025" in the reader's time zone).
+   * @default "title"
+   */
+  sessionTitleFormat?: 'title' | 'date';
+  /**
+   * IANA time zone for "date" session titles. Defaults to the reader's own.
+   */
+  sessionTimeZone?: string;
   /**
    * Whether to show action buttons in the session header
    * @default true
@@ -304,6 +315,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     enableSpeech = true,
     showHeader = true,
     sessionTitle,
+    sessionTitleFormat = 'title',
+    sessionTimeZone,
     showSessionActions = true,
     showNewSession = true,
     showDownloadSession = true,
@@ -468,6 +481,8 @@ export const ChatPanel = React.memo<ChatPanelProps>(
         {showHeader && (
           <SessionHeader
             title={sessionTitle}
+            titleFormat={sessionTitleFormat}
+            timeZone={sessionTimeZone}
             showActions={showSessionActions}
             showNewSession={showNewSession}
             showDownloadSession={showDownloadSession}

package/components/index.ts

@@ -94,6 +94,9 @@ export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
 
 // Utilities
 export { cn } from '@/lib/utils';
+// Calendar days in the reader's time zone
+export { formatDayLabel, dayKey, isSameDay, userTimeZone } from '@/lib/date';
+export type { DayOptions } from '@/lib/date';
 export { ButtonSwitcher } from './composites';
 export type { ButtonSwitcherProps, ButtonSwitcherItem } from './composites';
 

package/components/ui/scroll-area.tsx

@@ -5,11 +5,17 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
+export interface ScrollAreaProps
+  extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {
+  orientation?: "vertical" | "horizontal" | "both"
+}
+
 function ScrollArea({
   className,
   children,
+  orientation = "vertical",
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: ScrollAreaProps) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
@@ -22,7 +28,12 @@ function ScrollArea({
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
+      {(orientation === "vertical" || orientation === "both") && (
+        <ScrollBar orientation="vertical" />
+      )}
+      {(orientation === "horizontal" || orientation === "both") && (
+        <ScrollBar orientation="horizontal" className="h-1.5 border-t border-t-transparent" />
+      )}
       <ScrollAreaPrimitive.Corner />
     </ScrollAreaPrimitive.Root>
   )