ai-design-system 0.1.92 → 0.1.93

package/components/composites/FilePreviewDialog/FilePreviewDialog.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
 import { FilePreviewDialog } from './FilePreviewDialog'
 
 const meta = {
@@ -14,5 +15,26 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {} as any,
+  args: {
+    open: true,
+    onOpenChange: fn(),
+    title: 'Sprint checklist',
+    description: 'specs/sprint-plan.md',
+    content: [
+      '## Tasks',
+      '- [x] Draft API contract',
+      '- [ ] Land UI stubs',
+      '- [ ] Wire preview',
+    ].join('\n'),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    open: true,
+    onOpenChange: fn(),
+    title: 'Untitled spec',
+    description: 'specs/untitled.md',
+    content: undefined,
+  },
 }

package/components/composites/ProjectSwitcher/ProjectSwitcher.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
 import { ProjectSwitcher } from './ProjectSwitcher'
 
 const meta = {
@@ -14,5 +15,23 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {} as any,
+  args: {
+    projects: [
+      { id: '1', name: 'Atlas' },
+      { id: '2', name: 'Beacon' },
+      { id: '3', name: 'Cascade' },
+    ],
+    selectedProjectId: '1',
+    onSelectProject: fn(),
+    onCreateProject: fn(),
+  },
+}
+
+export const Empty: Story = {
+  args: {
+    projects: [],
+    selectedProjectId: null,
+    onSelectProject: fn(),
+    onCreateProject: fn(),
+  },
 }

package/components/composites/ProjectSwitcher/ProjectSwitcher.tsx

@@ -31,7 +31,13 @@ export interface ProjectSwitcherProps {
 }
 
 export const ProjectSwitcher = React.memo<ProjectSwitcherProps>(
-  ({ projects, selectedProjectId, onSelectProject, onCreateProject, className }) => {
+  ({
+    projects = [],
+    selectedProjectId,
+    onSelectProject = () => {},
+    onCreateProject = () => {},
+    className,
+  }) => {
     const [open, setOpen] = React.useState(false)
 
     const selectedProject = projects.find((p) => String(p.id) === String(selectedProjectId))

package/components/composites/TaskQueue/TaskQueue.stories.tsx

@@ -0,0 +1,241 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TaskQueue } from "./TaskQueue";
+import type { TaskItem } from "./interfaces";
+import { PromptInput } from "@/components/composites/PromptInput";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
+
+const meta: Meta<typeof TaskQueue> = {
+  title: "Composites/TaskQueue",
+  component: TaskQueue,
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof TaskQueue>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample tasks based on 2.1-jobs.png inspiration
+const singleRunningTask: TaskItem[] = [
+  {
+    id: "task-1",
+    command: "npm install",
+    status: "running",
+  },
+];
+
+const multipleMixedTasks: TaskItem[] = [
+  {
+    id: "task-1",
+    command: "npm install",
+    status: "running",
+  },
+  {
+    id: "task-2",
+    command: "npm run build",
+    status: "queued",
+  },
+  {
+    id: "task-3",
+    command: "git push origin main",
+    status: "queued",
+  },
+];
+
+const completedAndFailedTasks: TaskItem[] = [
+  {
+    id: "task-1",
+    command: "pnpm install",
+    status: "completed",
+    duration: "4.2s",
+  },
+  {
+    id: "task-2",
+    command: "pnpm test",
+    status: "failed",
+    duration: "1.1s",
+    error: "Test failed with exit code 1",
+  },
+  {
+    id: "task-3",
+    command: "pnpm build",
+    status: "queued",
+  },
+];
+
+/**
+ * Single running task — Exact replica of 2.1-jobs.png inspiration.
+ * Displays "1 task running", spinner, "npm install", and stop button.
+ */
+export const SingleTaskRunning: Story = {
+  args: {
+    tasks: singleRunningTask,
+    variant: "standalone",
+    onStop: (id) => console.log(`Stopped task ${id}`),
+  },
+};
+
+/**
+ * Multiple tasks — Running task + queued tasks waiting in the queue.
+ */
+export const MultipleTasks: Story = {
+  args: {
+    tasks: multipleMixedTasks,
+    variant: "standalone",
+    onStop: (id) => console.log(`Stopped task ${id}`),
+    onCancel: (id) => console.log(`Cancelled task ${id}`),
+    onStopAll: () => console.log("Stopped all tasks"),
+  },
+};
+
+/**
+ * Docked with PromptInput — Exact recreation of the full antigravity bottom panel
+ * seen in 2.1-jobs.png. Shows TaskQueue flush atop PromptInput.
+ */
+export const DockedWithPromptInput: Story = {
+  render: () => {
+    return (
+      <div className="max-w-2xl mx-auto w-full p-4 flex flex-col">
+        <TaskQueue
+          tasks={singleRunningTask}
+          variant="docked"
+          onStop={(id) => console.log(`Stopped task ${id}`)}
+        />
+        <PromptInput
+          placeholder="Ask anything, @ to mention, / for actions"
+          onSubmit={(message) => console.log("Submitted:", message)}
+          tools={
+            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs font-normal gap-1 hover:text-foreground"
+                type="button"
+              >
+                <span>Gemini 3.8 Flash High</span>
+                <Icon name="chevron-down" size="xs" />
+              </Button>
+            </div>
+          }
+          className="rounded-t-none rounded-b-2xl border-t-0 border border-neutral-600 bg-background shadow-sm"
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Collapsed state — Collapsed header showing the summary count and chevron.
+ */
+export const Collapsed: Story = {
+  args: {
+    tasks: multipleMixedTasks,
+    defaultOpen: false,
+    variant: "standalone",
+    onStop: (id) => console.log(`Stopped task ${id}`),
+    onCancel: (id) => console.log(`Cancelled task ${id}`),
+  },
+};
+
+/**
+ * All queued tasks — When tasks are waiting to execute.
+ */
+export const AllQueued: Story = {
+  args: {
+    tasks: [
+      { id: "1", command: "npm test", status: "queued" },
+      { id: "2", command: "npm run lint", status: "queued" },
+    ],
+    variant: "standalone",
+    onCancel: (id) => console.log(`Cancelled task ${id}`),
+  },
+};
+
+/**
+ * Completed and failed tasks with retry support.
+ */
+export const CompletedAndFailed: Story = {
+  args: {
+    tasks: completedAndFailedTasks,
+    variant: "standalone",
+    onRetry: (id) => console.log(`Retried task ${id}`),
+    onCancel: (id) => console.log(`Cancelled task ${id}`),
+  },
+};
+
+/**
+ * Interactive story — Allows testing stopping and cancelling tasks with live state.
+ */
+export const Interactive: Story = {
+  render: () => {
+    const [tasks, setTasks] = React.useState<TaskItem[]>([
+      { id: "t1", command: "npm install", status: "running" },
+      { id: "t2", command: "npm run test", status: "queued" },
+      { id: "t3", command: "git push origin feat/task-queue", status: "queued" },
+    ]);
+
+    const handleStop = (id: string) => {
+      setTasks((prev) =>
+        prev.map((t) => (t.id === id ? { ...t, status: "cancelled" } : t))
+      );
+    };
+
+    const handleCancel = (id: string) => {
+      setTasks((prev) => prev.filter((t) => t.id !== id));
+    };
+
+    const handleRetry = (id: string) => {
+      setTasks((prev) =>
+        prev.map((t) => (t.id === id ? { ...t, status: "running" } : t))
+      );
+    };
+
+    const handleStopAll = () => {
+      setTasks((prev) =>
+        prev.map((t) =>
+          t.status === "running" ? { ...t, status: "cancelled" } : t
+        )
+      );
+    };
+
+    const handleReset = () => {
+      setTasks([
+        { id: "t1", command: "npm install", status: "running" },
+        { id: "t2", command: "npm run test", status: "queued" },
+        { id: "t3", command: "git push origin feat/task-queue", status: "queued" },
+      ]);
+    };
+
+    return (
+      <div className="max-w-xl mx-auto space-y-4">
+        <div className="flex justify-between items-center">
+          <span className="text-xs text-muted-foreground">
+            Try stopping or cancelling tasks:
+          </span>
+          <Button variant="outline" size="sm" onClick={handleReset}>
+            Reset Tasks
+          </Button>
+        </div>
+        <TaskQueue
+          tasks={tasks}
+          onStop={handleStop}
+          onCancel={handleCancel}
+          onRetry={handleRetry}
+          onStopAll={handleStopAll}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Empty state — Gracefully returns null when no tasks are present.
+ */
+export const EmptyState: Story = {
+  args: {
+    tasks: [],
+    showEmpty: false,
+  },
+};

package/components/composites/TaskQueue/TaskQueue.tsx

@@ -0,0 +1,270 @@
+"use client";
+
+import * as React from "react";
+import {
+  Queue,
+  QueueSection,
+  QueueSectionTrigger,
+  QueueSectionLabel,
+  QueueSectionContent,
+  QueueList,
+  QueueItem,
+  QueueItemContent,
+  QueueItemActions,
+  QueueItemAction,
+} from "@/components/ai-elements/queue";
+import { Button } from "@/components/primitives/Button";
+import { Icon } from "@/components/primitives/Icon";
+import { cn } from "@/lib/utils";
+import type { TaskQueueProps, TaskStatus } from "./interfaces";
+
+/**
+ * TaskQueue Composite
+ *
+ * Displays active and queued tasks/jobs with status indicators, command previews,
+ * and stop/cancel controls. Uses Queue AI element for structure, following the
+ * pattern established in FileQueue.
+ *
+ * Supports both standalone card mode and docked mode attaching directly above PromptInput.
+ * Recreates Antigravity jobs/tasks UI (inspirations/antigravity/2.1-jobs.png).
+ */
+
+const getStatusIcon = (status: TaskStatus) => {
+  switch (status) {
+    case "running":
+      return (
+        <Icon
+          name="loader-2"
+          size="sm"
+          className="animate-spin text-muted-foreground flex-shrink-0"
+        />
+      );
+    case "queued":
+    case "pending":
+      return (
+        <Icon
+          name="clock"
+          size="sm"
+          className="text-muted-foreground/60 flex-shrink-0"
+        />
+      );
+    case "completed":
+      return (
+        <Icon
+          name="check"
+          size="sm"
+          className="text-emerald-500 flex-shrink-0"
+        />
+      );
+    case "failed":
+      return (
+        <Icon
+          name="x"
+          size="sm"
+          className="text-destructive flex-shrink-0"
+        />
+      );
+    case "cancelled":
+      return (
+        <Icon
+          name="minus"
+          size="sm"
+          className="text-muted-foreground/60 flex-shrink-0"
+        />
+      );
+    default:
+      return null;
+  }
+};
+
+export const TaskQueue = React.memo<TaskQueueProps>(
+  ({
+    tasks,
+    title,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    onStop,
+    onCancel,
+    onRetry,
+    onStopAll,
+    onTaskClick,
+    variant = "standalone",
+    className,
+    showEmpty = false,
+    emptyMessage = "No tasks in queue",
+  }) => {
+    const runningTasks = React.useMemo(
+      () => tasks.filter((t) => t.status === "running"),
+      [tasks]
+    );
+
+    const queuedTasks = React.useMemo(
+      () => tasks.filter((t) => t.status === "queued" || t.status === "pending"),
+      [tasks]
+    );
+
+    const displayTitle = React.useMemo(() => {
+      if (title) return title;
+      const parts: string[] = [];
+      if (runningTasks.length > 0) {
+        parts.push(
+          `${runningTasks.length} task${runningTasks.length === 1 ? "" : "s"} running`
+        );
+      }
+      if (queuedTasks.length > 0) {
+        parts.push(`${queuedTasks.length} queued`);
+      }
+      if (parts.length > 0) {
+        return parts.join(", ");
+      }
+      if (tasks.length > 0) {
+        return `${tasks.length} task${tasks.length === 1 ? "" : "s"}`;
+      }
+      return emptyMessage;
+    }, [title, runningTasks.length, queuedTasks.length, tasks.length, emptyMessage]);
+
+    // Only display if at least 1 task exists or showEmpty is explicitly enabled
+    if (tasks.length === 0 && !showEmpty) {
+      return null;
+    }
+
+    const isDocked = variant === "docked";
+
+    return (
+      <Queue
+        className={cn(
+          "w-full transition-colors",
+          isDocked
+            ? "rounded-t-2xl rounded-b-none border-b-0 border-t border-x border-border/80 bg-card/95 backdrop-blur-md shadow-xs -mb-px p-1.5"
+            : "rounded-2xl border border-border bg-card text-card-foreground shadow-sm p-1.5",
+          className
+        )}
+      >
+        <QueueSection
+          defaultOpen={defaultOpen}
+          open={open}
+          onOpenChange={onOpenChange}
+          className="w-full"
+        >
+          <div className="flex items-center justify-between w-full">
+            <QueueSectionTrigger
+              className={cn(
+                "w-full px-3 py-2 bg-transparent hover:bg-muted/40 text-foreground transition-colors",
+                isDocked ? "rounded-t-xl" : "rounded-lg"
+              )}
+            >
+              <QueueSectionLabel
+                label={displayTitle}
+                className="w-full justify-between flex-row-reverse font-sans text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors"
+              />
+            </QueueSectionTrigger>
+
+            {runningTasks.length > 1 && onStopAll && (
+              <Button
+                variant="ghost"
+                size="sm"
+                type="button"
+                className="h-6 px-2 text-xs text-muted-foreground hover:text-destructive flex-shrink-0 mr-2"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStopAll();
+                }}
+              >
+                Stop all
+              </Button>
+            )}
+          </div>
+
+          <QueueSectionContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden">
+            <QueueList className="max-h-[260px] mt-1 -mb-0">
+              {tasks.length === 0 ? (
+                <div className="px-3 py-2 text-sm text-muted-foreground italic">
+                  {emptyMessage}
+                </div>
+              ) : (
+                tasks.map((task) => {
+                  const isClickable = Boolean(onTaskClick);
+
+                  return (
+                    <QueueItem
+                      key={task.id}
+                      className={cn(
+                        "flex flex-row items-center justify-between gap-3 px-3 py-1.5 rounded-lg text-sm transition-colors",
+                        "hover:bg-muted/40 group/item",
+                        isClickable && "cursor-pointer"
+                      )}
+                      onClick={isClickable ? () => onTaskClick?.(task) : undefined}
+                      role={isClickable ? "button" : undefined}
+                      tabIndex={isClickable ? 0 : undefined}
+                    >
+                      <div className="flex items-center gap-2.5 min-w-0 flex-1">
+                        {getStatusIcon(task.status)}
+
+                        <QueueItemContent className="font-mono text-sm text-foreground select-all">
+                          {task.command || task.title}
+                        </QueueItemContent>
+
+                        {task.duration && (
+                          <span className="text-xs text-muted-foreground/60 font-sans ml-1 flex-shrink-0">
+                            {task.duration}
+                          </span>
+                        )}
+                      </div>
+
+                      <QueueItemActions>
+                        {task.status === "running" && onStop && (
+                          <QueueItemAction
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onStop(task.id);
+                            }}
+                            aria-label={`Stop ${task.command || task.title}`}
+                            title="Stop task"
+                            className="size-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/60 opacity-100 group-hover:opacity-100"
+                          >
+                            <Icon name="circle-stop" size="sm" />
+                          </QueueItemAction>
+                        )}
+
+                        {(task.status === "queued" || task.status === "pending") && onCancel && (
+                          <QueueItemAction
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onCancel(task.id);
+                            }}
+                            aria-label={`Cancel ${task.command || task.title}`}
+                            title="Cancel task"
+                            className="size-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/60 opacity-100 group-hover:opacity-100"
+                          >
+                            <Icon name="x" size="sm" />
+                          </QueueItemAction>
+                        )}
+
+                        {task.status === "failed" && onRetry && (
+                          <QueueItemAction
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onRetry(task.id);
+                            }}
+                            aria-label={`Retry ${task.command || task.title}`}
+                            title="Retry task"
+                            className="size-6 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted/60 opacity-100 group-hover:opacity-100"
+                          >
+                            <Icon name="refresh-cw" size="sm" />
+                          </QueueItemAction>
+                        )}
+                      </QueueItemActions>
+                    </QueueItem>
+                  );
+                })
+              )}
+            </QueueList>
+          </QueueSectionContent>
+        </QueueSection>
+      </Queue>
+    );
+  }
+);
+
+TaskQueue.displayName = "TaskQueue";

package/components/composites/TaskQueue/index.ts

@@ -0,0 +1,2 @@
+export { TaskQueue } from "./TaskQueue";
+export type { TaskQueueProps, TaskItem, TaskStatus } from "./interfaces";

package/components/composites/TaskQueue/interfaces.ts

@@ -0,0 +1,103 @@
+export type TaskStatus =
+  | "running"
+  | "queued"
+  | "pending"
+  | "completed"
+  | "failed"
+  | "cancelled";
+
+export interface TaskItem {
+  /**
+   * Unique identifier for the task
+   */
+  id: string;
+  /**
+   * Command to display in monospace (e.g. "npm install")
+   */
+  command: string;
+  /**
+   * Optional title or label for the task
+   */
+  title?: string;
+  /**
+   * Current status of the task
+   */
+  status: TaskStatus;
+  /**
+   * Optional description or secondary information
+   */
+  description?: string;
+  /**
+   * Optional duration string (e.g. "2.4s" or "35s")
+   */
+  duration?: string;
+  /**
+   * Optional error message if the task failed
+   */
+  error?: string;
+}
+
+export interface TaskQueueProps {
+  /**
+   * List of tasks in the queue
+   */
+  tasks: TaskItem[];
+  /**
+   * Custom title or header text (e.g. "1 task running").
+   * Defaults to auto-computed summary:
+   * e.g. "1 task running", "2 tasks running", "1 task running, 2 queued"
+   */
+  title?: string;
+  /**
+   * Whether the queue is expanded/open (controlled)
+   */
+  open?: boolean;
+  /**
+   * Default open state (uncontrolled, defaults to true)
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback fired when open state changes
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Callback fired when stopping a running task
+   */
+  onStop?: (taskId: string) => void;
+  /**
+   * Callback fired when cancelling a queued task
+   */
+  onCancel?: (taskId: string) => void;
+  /**
+   * Callback fired when retrying a failed task
+   */
+  onRetry?: (taskId: string) => void;
+  /**
+   * Callback fired to stop all running tasks
+   */
+  onStopAll?: () => void;
+  /**
+   * Callback fired when a task item is clicked (e.g. to inspect terminal output or logs)
+   */
+  onTaskClick?: (task: TaskItem) => void;
+  /**
+   * Display mode:
+   * - 'standalone': self-contained card with full rounded corners
+   * - 'docked': attaches flush directly above PromptInput (matches 2.1-jobs.png)
+   * @default 'standalone'
+   */
+  variant?: "standalone" | "docked";
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+  /**
+   * Whether to render an empty state when tasks is empty
+   * @default false
+   */
+  showEmpty?: boolean;
+  /**
+   * Custom message when there are no tasks and showEmpty is true
+   */
+  emptyMessage?: string;
+}