ai-design-system 0.1.0

package/components/composites/AgentIndicator/AgentIndicator.stories.tsx

@@ -0,0 +1,154 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AgentIndicator } from './AgentIndicator'
+
+const meta: Meta<typeof AgentIndicator> = {
+  title: 'Composites/AgentIndicator',
+  component: AgentIndicator,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+} satisfies Meta<typeof AgentIndicator>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Pending: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_1',
+      name: 'task',
+      subAgentName: 'content_writer',
+      input: 'Generate tutorial narration for React hooks',
+      status: 'pending',
+    },
+    isSelected: false,
+  },
+}
+
+export const Active: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_2',
+      name: 'task',
+      subAgentName: 'video_producer',
+      input: 'Compile video segments with transitions',
+      status: 'active',
+    },
+    isSelected: false,
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_3',
+      name: 'task',
+      subAgentName: 'project_analyzer',
+      input: 'Analyze codebase structure and dependencies',
+      output: 'Analysis complete: 15 components, 8 utilities, 3 services',
+      status: 'completed',
+    },
+    isSelected: false,
+  },
+}
+
+export const Error: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_4',
+      name: 'task',
+      subAgentName: 'asset_generator',
+      input: 'Generate audio narration from script',
+      output: 'Failed: API key invalid',
+      status: 'error',
+    },
+    isSelected: false,
+  },
+}
+
+export const Selected: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_5',
+      name: 'task',
+      subAgentName: 'segmentation',
+      input: 'Create video timeline with chapter markers',
+      output: 'Created 8 segments with timing metadata',
+      status: 'completed',
+    },
+    isSelected: true,
+  },
+}
+
+export const LongInput: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_6',
+      name: 'task',
+      subAgentName: 'use_case_discoverer',
+      input:
+        'Identify educational use cases for this codebase by analyzing the project structure, reading key files, identifying learning objectives, and generating comprehensive tutorial content that demonstrates best practices.',
+      status: 'active',
+    },
+    isSelected: false,
+  },
+}
+
+export const ObjectInput: Story = {
+  args: {
+    subAgent: {
+      id: 'agent_7',
+      name: 'task',
+      subAgentName: 'coding_tutorial_generator',
+      input: {
+        project_path: '/app/examples/react-hooks',
+        tutorial_type: 'beginner',
+        topics: ['useState', 'useEffect', 'custom hooks'],
+        duration: 300,
+      },
+      status: 'pending',
+    },
+    isSelected: false,
+  },
+}
+
+export const MultipleAgents: Story = {
+  render: () => (
+    <div className="space-y-2 max-w-md">
+      <AgentIndicator
+        subAgent={{
+          id: 'agent_1',
+          name: 'task',
+          subAgentName: 'project_analyzer',
+          input: 'Analyze codebase structure',
+          output: 'Analysis complete',
+          status: 'completed',
+        }}
+        isSelected={false}
+      />
+      <AgentIndicator
+        subAgent={{
+          id: 'agent_2',
+          name: 'task',
+          subAgentName: 'content_writer',
+          input: 'Generate narration script',
+          status: 'active',
+        }}
+        isSelected={true}
+      />
+      <AgentIndicator
+        subAgent={{
+          id: 'agent_3',
+          name: 'task',
+          subAgentName: 'video_producer',
+          input: 'Compile final video',
+          status: 'pending',
+        }}
+        isSelected={false}
+      />
+    </div>
+  ),
+}

package/components/composites/AgentIndicator/AgentIndicator.tsx

@@ -0,0 +1,102 @@
+import * as React from "react"
+import { Button } from "@/components/primitives/Button"
+import { Badge } from "@/components/primitives/Badge"
+import { cn } from "@/lib/utils"
+
+/**
+ * AgentIndicator Block
+ *
+ * A block component that displays agent working status with visual indicators.
+ * Copied logic from reference SubAgentIndicator implementation.
+ */
+
+export interface SubAgent {
+  id: string
+  name: string
+  subAgentName: string
+  input: string | Record<string, unknown>
+  output?: string | Record<string, unknown>
+  status: "pending" | "active" | "completed" | "error"
+}
+
+export interface AgentIndicatorProps {
+  /**
+   * Sub-agent data to display
+   */
+  subAgent: SubAgent
+  /**
+   * Click handler for agent selection
+   */
+  onClick: () => void
+  /**
+   * Whether this agent is currently selected
+   */
+  isSelected?: boolean
+}
+
+/**
+ * AgentIndicator component - displays agent working status with visual indicators
+ */
+export const AgentIndicator = React.memo<AgentIndicatorProps>(
+  ({ subAgent, onClick, isSelected = false }) => {
+    const getStatusIcon = React.useCallback(() => {
+      switch (subAgent.status) {
+        case "completed":
+          return "✅"
+        case "error":
+          return "❌"
+        case "active":
+          return "⚡"
+        case "pending":
+        default:
+          return "⏳"
+      }
+    }, [subAgent.status])
+
+    const getStatusVariant = React.useCallback(() => {
+      switch (subAgent.status) {
+        case "completed":
+          return "default" as const
+        case "error":
+          return "destructive" as const
+        case "active":
+          return "secondary" as const
+        case "pending":
+        default:
+          return "outline" as const
+      }
+    }, [subAgent.status])
+
+    const inputDisplay = React.useMemo(() => {
+      return typeof subAgent.input === "string"
+        ? subAgent.input
+        : JSON.stringify(subAgent.input)
+    }, [subAgent.input])
+
+    return (
+      <Button
+        variant={isSelected ? "default" : "ghost"}
+        onClick={onClick}
+        className={cn(
+          "h-auto p-3 justify-start text-left",
+          isSelected && "ring-2 ring-primary"
+        )}
+        aria-label={`View ${subAgent.subAgentName} details`}
+      >
+        <div className="flex flex-col items-start gap-2 w-full">
+          <div className="flex items-center gap-2">
+            <span className="text-sm">{getStatusIcon()}</span>
+            <Badge variant={getStatusVariant()} className="text-xs">
+              {subAgent.subAgentName}
+            </Badge>
+          </div>
+          <p className="text-xs text-muted-foreground text-left line-clamp-2">
+            {inputDisplay}
+          </p>
+        </div>
+      </Button>
+    )
+  }
+)
+
+AgentIndicator.displayName = "AgentIndicator"

package/components/composites/AgentIndicator/index.ts

@@ -0,0 +1,8 @@
+/**
+ * AgentIndicator Block
+ *
+ * Central export point for the AgentIndicator block component and its related types.
+ */
+export { AgentIndicator } from './AgentIndicator'
+
+export type { AgentIndicatorProps, SubAgent } from './AgentIndicator'

package/components/composites/AppHeader/AppHeader.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AppHeader } from './AppHeader'
+import { Button } from '@/components/primitives/Button'
+import { SidebarProvider, Sidebar, SidebarInset } from '@/components/primitives/Sidebar'
+
+const meta = {
+  title: 'Composites/AppHeader',
+  component: AppHeader,
+  tags: ['autodocs'],
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof AppHeader>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar />
+      <SidebarInset>
+        <AppHeader title="Dashboard" />
+      </SidebarInset>
+    </SidebarProvider>
+  ),
+}
+
+export const WithActions: Story = {
+  render: () => (
+    <SidebarProvider>
+      <Sidebar />
+      <SidebarInset>
+        <AppHeader
+          title="Dashboard"
+          actions={
+            <>
+              <Button variant="outline" size="sm">
+                Export
+              </Button>
+              <Button size="sm">New Item</Button>
+            </>
+          }
+        />
+      </SidebarInset>
+    </SidebarProvider>
+  ),
+}

package/components/composites/AppHeader/AppHeader.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { SidebarTrigger } from "@/components/primitives/Sidebar"
+import { Separator } from "@/components/primitives/Separator"
+
+export interface AppHeaderProps {
+  title?: string
+  actions?: React.ReactNode
+  className?: string
+}
+
+export const AppHeader = React.memo<AppHeaderProps>(({ title, actions, className }) => {
+  return (
+    <header className={`flex h-14 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-14 ${className || ""}`}>
+      <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
+        <SidebarTrigger className="-ml-1" />
+        <Separator orientation="vertical" className="mx-2 data-[orientation=vertical]:h-4" />
+        {title && <h1 className="text-base font-medium">{title}</h1>}
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
+      </div>
+    </header>
+  )
+})
+
+AppHeader.displayName = "AppHeader"

package/components/composites/AppHeader/index.ts

@@ -0,0 +1,2 @@
+export { AppHeader } from './AppHeader'
+export type { AppHeaderProps } from './AppHeader'

package/components/composites/CommentBox/CommentBox.stories.tsx

@@ -0,0 +1,192 @@
+/**
+ * CommentBox Stories
+ * 
+ * Demonstrates the CommentBox component with various annotation types
+ */
+
+import type { Meta, StoryObj } from '@storybook/react'
+import type { JSONContent } from '@tiptap/core'
+import { CommentBox } from './CommentBox'
+import type { CommentBoxProps, Annotation } from '@/types/ai-editor'
+
+const meta: Meta<typeof CommentBox> = {
+  title: 'Composites/CommentBox',
+  component: CommentBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof CommentBox>
+
+// Sample comment annotation
+const commentAnnotation: Annotation = {
+  type: 'comment',
+  id: 'comment-1',
+  range: { from: 0, to: 10 },
+  createdAt: Date.now() - 2 * 60 * 60 * 1000, // 2 hours ago
+  userId: 'user-1',
+  data: {
+    thread: [
+      {
+        id: 'thread-1',
+        userId: 'user-1',
+        userName: 'John Doe',
+        contentRich: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'This section needs clarification.' }],
+            },
+          ],
+        },
+        timestamp: Date.now() - 2 * 60 * 60 * 1000,
+      },
+      {
+        id: 'thread-2',
+        userId: 'user-2',
+        userName: 'Jane Smith',
+        contentRich: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'I agree, let me add more details.' }],
+            },
+          ],
+        },
+        timestamp: Date.now() - 1 * 60 * 60 * 1000,
+      },
+    ],
+  },
+}
+
+// Sample suggestion annotation
+const suggestionAnnotation: Annotation = {
+  type: 'suggestion',
+  id: 'suggestion-1',
+  range: { from: 0, to: 20 },
+  createdAt: Date.now() - 30 * 60 * 1000, // 30 minutes ago
+  userId: 'ai-1',
+  data: {
+    action: 'modify',
+    oldText: 'some has suggestions',
+    newText: 'others have AI suggestions',
+    reason: 'More descriptive wording',
+    thread: [
+      {
+        id: 'thread-3',
+        userId: 'user-1',
+        userName: 'John Doe',
+        contentRich: {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Good suggestion!' }],
+            },
+          ],
+        },
+        timestamp: Date.now() - 15 * 60 * 1000,
+      },
+    ],
+  },
+}
+
+// Sample block addition annotation
+const blockAdditionAnnotation: Annotation = {
+  type: 'block-addition',
+  id: 'addition-1',
+  range: { from: 0, to: 0 },
+  createdAt: Date.now() - 10 * 60 * 1000, // 10 minutes ago
+  userId: 'ai-1',
+  data: {
+    content: {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is a new paragraph suggested by AI.',
+            },
+          ],
+        },
+      ],
+    },
+    reason: 'Adding context for better understanding',
+    thread: [],
+  },
+}
+
+/**
+ * New comment box (no annotation)
+ */
+export const NewComment: Story = {
+  args: {
+    annotation: undefined,
+    position: { x: 100, y: 100 },
+    visible: true,
+    currentUserId: 'user-1',
+    onClose: () => console.log('Close'),
+    onCommentAdd: (content) => console.log('Add comment:', content),
+  },
+}
+
+/**
+ * Existing comment with thread
+ */
+export const ExistingComment: Story = {
+  args: {
+    annotation: commentAnnotation,
+    position: { x: 100, y: 100 },
+    visible: true,
+    currentUserId: 'user-1',
+    onClose: () => console.log('Close'),
+    onCommentReply: (id, content) => console.log('Reply to:', id, content),
+  },
+}
+
+/**
+ * Suggestion with diff display
+ */
+export const SuggestionWithDiff: Story = {
+  args: {
+    annotation: suggestionAnnotation,
+    position: { x: 100, y: 100 },
+    visible: true,
+    currentUserId: 'user-1',
+    onClose: () => console.log('Close'),
+    onCommentReply: (id, content) => console.log('Reply to:', id, content),
+  },
+}
+
+/**
+ * Block addition
+ */
+export const BlockAddition: Story = {
+  args: {
+    annotation: blockAdditionAnnotation,
+    position: { x: 100, y: 100 },
+    visible: true,
+    currentUserId: 'user-1',
+    onClose: () => console.log('Close'),
+    onCommentReply: (id, content) => console.log('Reply to:', id, content),
+  },
+}
+
+/**
+ * Hidden state
+ */
+export const Hidden: Story = {
+  args: {
+    annotation: commentAnnotation,
+    position: { x: 100, y: 100 },
+    visible: false,
+    currentUserId: 'user-1',
+  },
+}