ai-design-system 0.1.93 → 0.1.94

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

@@ -2,9 +2,7 @@ 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",
@@ -90,41 +88,6 @@ export const MultipleTasks: Story = {
   },
 };
 
-/**
- * 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.

package/components/features/ChatPanel/ChatPanel.mocks.ts

@@ -10,6 +10,7 @@
 import type { RefinementMessage } from './ChatPanel'
 import type { FileChangeData } from '@/components/composites/FileQueue'
 import type { ActionRequest } from '@/components/composites/ApprovalCard'
+import type { TaskItem } from '@/components/composites/TaskQueue'
 
 /**
  * Sample conversation history for input state
@@ -224,3 +225,30 @@ export const sampleFileChanges: FileChangeData[] = [
     path: 'src/components/primitives/Button/button-accessibility.test.tsx',
   },
 ]
+
+export const sampleRunningTasks: TaskItem[] = [
+  {
+    id: 'task-1',
+    command: 'npm install',
+    status: 'running',
+  },
+]
+
+export const sampleMultipleTasks: 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',
+  },
+]
+

package/components/features/ChatPanel/ChatPanel.stories.tsx

@@ -8,6 +8,8 @@ import {
   sampleFileChanges,
   approvalQuestionRequest,
   approvalMultiQuestionRequest,
+  sampleRunningTasks,
+  sampleMultipleTasks,
 } from "./ChatPanel.mocks";
 import * as React from "react";
 
@@ -214,3 +216,60 @@ export const WithStateManagement: Story = {
     },
   },
 };
+
+/**
+ * With Running Task — Recreates 2.1-jobs.png bottom panel with TaskQueue docked flush above PromptInput.
+ */
+export const WithRunningTask: Story = {
+  args: {
+    messages: inputStateMessages,
+    tasks: sampleRunningTasks,
+    placeholder: "Ask anything, @ to mention, / for actions",
+    onSubmit: (message: PromptInputMessage) => {
+      console.log("Submitted:", message);
+    },
+    onTaskStop: (id: string) => {
+      console.log(`Stopped task ${id}`);
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "ChatPanel displaying an active background running task (npm install) docked directly above PromptInput, reproducing the antigravity inspiration from 2.1-jobs.png.",
+      },
+    },
+  },
+};
+
+/**
+ * With Multiple Tasks — Running task and queued tasks docked above PromptInput.
+ */
+export const WithMultipleTasks: Story = {
+  args: {
+    messages: inputStateMessages,
+    tasks: sampleMultipleTasks,
+    placeholder: "Ask anything, @ to mention, / for actions",
+    onSubmit: (message: PromptInputMessage) => {
+      console.log("Submitted:", message);
+    },
+    onTaskStop: (id: string) => {
+      console.log(`Stopped task ${id}`);
+    },
+    onTaskCancel: (id: string) => {
+      console.log(`Cancelled task ${id}`);
+    },
+    onTaskStopAll: () => {
+      console.log("Stopped all tasks");
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "ChatPanel displaying multiple running and queued tasks docked directly above PromptInput.",
+      },
+    },
+  },
+};
+

package/components/features/ChatPanel/ChatPanel.tsx

@@ -4,7 +4,9 @@ import * as React from "react";
 import { AIConversation } from "@/components/blocks/AIConversation";
 import { FileChangeQueue } from "@/components/blocks/FileChangeQueue";
 import { PromptInput, type PromptInputContextProps } from "@/components/composites/PromptInput";
+import { TaskQueue, type TaskItem } from "@/components/composites/TaskQueue";
 import { ApprovalCard } from "@/components/composites/ApprovalCard";
+import { cn } from "@/lib/utils";
 import type { ToolCall } from "@/components/composites/ToolCallDisplay";
 import type { SubAgent } from "@/components/composites/AgentIndicator";
 import type { FileChangeData } from "@/components/composites/FileQueue";
@@ -168,6 +170,30 @@ export interface ChatPanelProps {
   isSavingWorkspace?: boolean;
   /** Context window usage configuration for the prompt input */
   context?: PromptInputContextProps;
+  /**
+   * Background tasks or jobs currently running or queued
+   */
+  tasks?: TaskItem[];
+  /**
+   * Handler when a task is stopped
+   */
+  onTaskStop?: (taskId: string) => void;
+  /**
+   * Handler when a queued task is cancelled
+   */
+  onTaskCancel?: (taskId: string) => void;
+  /**
+   * Handler when a failed task is retried
+   */
+  onTaskRetry?: (taskId: string) => void;
+  /**
+   * Handler to stop all tasks
+   */
+  onTaskStopAll?: () => void;
+  /**
+   * Handler when a task item is clicked (e.g. to inspect terminal output or logs)
+   */
+  onTaskClick?: (task: TaskItem) => void;
 }
 
 /**
@@ -205,6 +231,12 @@ export const ChatPanel = React.memo<ChatPanelProps>(
     isCurrentVersionSaved,
     isSavingWorkspace,
     context,
+    tasks = [],
+    onTaskStop,
+    onTaskCancel,
+    onTaskRetry,
+    onTaskStopAll,
+    onTaskClick,
   }) => {
     // File change queue state
     const [fileChangeState, setFileChangeState] = React.useState<
@@ -379,7 +411,18 @@ export const ChatPanel = React.memo<ChatPanelProps>(
           isSavingWorkspace={isSavingWorkspace}
           className="flex-1 min-h-0"
         />
-        <div className="sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6">
+        <div className="sticky bottom-0 z-10 p-4 bg-gradient-to-t from-card via-card to-transparent pt-6 flex flex-col">
+          {tasks.length > 0 && !dialog && (
+            <TaskQueue
+              tasks={tasks}
+              variant="docked"
+              onStop={onTaskStop}
+              onCancel={onTaskCancel}
+              onRetry={onTaskRetry}
+              onStopAll={onTaskStopAll}
+              onTaskClick={onTaskClick}
+            />
+          )}
           <PromptInput
             dialog={dialog}
             placeholder={placeholder}
@@ -389,7 +432,12 @@ export const ChatPanel = React.memo<ChatPanelProps>(
             loading={isAgentRunning}
             onStop={onStop}
             context={context}
-            className="rounded-2xl border border-neutral-600 bg-background shadow-sm overflow-hidden"
+            className={cn(
+              "border border-neutral-600 bg-background shadow-sm overflow-hidden",
+              tasks.length > 0 && !dialog
+                ? "rounded-t-none rounded-b-2xl border-t-0"
+                : "rounded-2xl"
+            )}
           />
         </div>
       </div>