@andorra-labs/code 0.0.0-stage → 0.1.4

package/dist/src/skills/bundled/ai-elements/references/stack-trace.md

@@ -0,0 +1,225 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/stack-trace.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# Stack Trace
+
+Displays formatted JavaScript/Node.js error stack traces with syntax highlighting and collapsible frames.
+
+The `StackTrace` component displays formatted JavaScript/Node.js error stack traces with clickable file paths, internal frame dimming, and collapsible content.
+
+See `scripts/stack-trace.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add stack-trace
+```
+
+## Usage with AI SDK
+
+Build an error display tool that shows stack traces from AI-generated code using the [`useChat`](https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-chat) hook.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import {
+  StackTrace,
+  StackTraceHeader,
+  StackTraceError,
+  StackTraceErrorType,
+  StackTraceErrorMessage,
+  StackTraceActions,
+  StackTraceCopyButton,
+  StackTraceExpandButton,
+  StackTraceContent,
+  StackTraceFrames,
+} from "@/components/ai-elements/stack-trace";
+
+export default function Page() {
+  const { messages } = useChat({
+    api: "/api/run-code",
+  });
+
+  return (
+    <div className="max-w-4xl mx-auto p-6">
+      {messages.map((message) => {
+        const toolInvocations = message.parts?.filter((part) => part.type === "tool-invocation");
+
+        return toolInvocations?.map((tool) => {
+          if (tool.toolName === "runCode" && tool.result?.error) {
+            return (
+              <StackTrace key={tool.toolCallId} trace={tool.result.error} defaultOpen>
+                <StackTraceHeader>
+                  <StackTraceError>
+                    <StackTraceErrorType />
+                    <StackTraceErrorMessage />
+                  </StackTraceError>
+                  <StackTraceActions>
+                    <StackTraceCopyButton />
+                    <StackTraceExpandButton />
+                  </StackTraceActions>
+                </StackTraceHeader>
+                <StackTraceContent>
+                  <StackTraceFrames />
+                </StackTraceContent>
+              </StackTrace>
+            );
+          }
+          return null;
+        });
+      })}
+    </div>
+  );
+}
+```
+
+Add the following route to your backend:
+
+```tsx title="api/run-code/route.ts"
+import { streamText, tool } from "ai";
+import { z } from "zod";
+
+export async function POST(req: Request) {
+  const { messages } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages,
+    tools: {
+      runCode: tool({
+        description: "Execute JavaScript code and return any errors",
+        parameters: z.object({
+          code: z.string(),
+        }),
+        execute: async ({ code }) => {
+          try {
+            // Execute code in sandbox
+            eval(code);
+            return { success: true };
+          } catch (error) {
+            return { error: (error as Error).stack };
+          }
+        },
+      }),
+    },
+  });
+
+  return result.toDataStreamResponse();
+}
+```
+
+## Features
+
+- Parses standard JavaScript/Node.js stack trace format
+- Highlights error type in red
+- Dims internal frames (node_modules, node: paths)
+- Collapsible content with smooth animation
+- Copy full stack trace to clipboard
+- Clickable file paths with line/column numbers
+
+## Examples
+
+### Collapsed by Default
+
+See `scripts/stack-trace-collapsed.tsx` for this example.
+
+### Hide Internal Frames
+
+See `scripts/stack-trace-no-internal.tsx` for this example.
+
+## Props
+
+### `<StackTrace />`
+
+| Prop              | Type                                                     | Default | Description                                                                                   |
+| ----------------- | -------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `trace`           | `string`                                                 | -       | The raw stack trace string to parse and display.                                              |
+| `open`            | `boolean`                                                | -       | Controlled open state.                                                                        |
+| `defaultOpen`     | `boolean`                                                | `false` | Whether the content is expanded by default.                                                   |
+| `onOpenChange`    | `(open: boolean) => void`                                | -       | Callback when open state changes.                                                             |
+| `onFilePathClick` | `(path: string, line?: number, column?: number) => void` | -       | Callback when a file path is clicked. Receives the file path, line number, and column number. |
+| `children`        | `React.ReactNode`                                        | -       | Child elements (StackTraceHeader, StackTraceContent, etc.).                                   |
+| `className`       | `string`                                                 | -       | Additional CSS classes.                                                                       |
+| `...props`        | `React.HTMLAttributes<HTMLDivElement>`                   | -       | Any other props are spread to the root div.                                                   |
+
+### `<StackTraceHeader />`
+
+| Prop        | Type                                              | Default | Description                                                       |
+| ----------- | ------------------------------------------------- | ------- | ----------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                                 | -       | Header content (typically StackTraceError and StackTraceActions). |
+| `className` | `string`                                          | -       | Additional CSS classes.                                           |
+| `...props`  | `React.ComponentProps<typeof CollapsibleTrigger>` | -       | Any other props are spread to the CollapsibleTrigger.             |
+
+### `<StackTraceError />`
+
+| Prop        | Type                                   | Default | Description                                                               |
+| ----------- | -------------------------------------- | ------- | ------------------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                      | -       | Error content (typically StackTraceErrorType and StackTraceErrorMessage). |
+| `className` | `string`                               | -       | Additional CSS classes.                                                   |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.                          |
+
+### `<StackTraceErrorType />`
+
+| Prop        | Type                                    | Default | Description                                              |
+| ----------- | --------------------------------------- | ------- | -------------------------------------------------------- |
+| `children`  | `React.ReactNode`                       | -       | Custom content. Defaults to the parsed error type (e.g., |
+| `className` | `string`                                | -       | Additional CSS classes.                                  |
+| `...props`  | `React.HTMLAttributes<HTMLSpanElement>` | -       | Any other props are spread to the span element.          |
+
+### `<StackTraceErrorMessage />`
+
+| Prop        | Type                                    | Default | Description                                           |
+| ----------- | --------------------------------------- | ------- | ----------------------------------------------------- |
+| `children`  | `React.ReactNode`                       | -       | Custom content. Defaults to the parsed error message. |
+| `className` | `string`                                | -       | Additional CSS classes.                               |
+| `...props`  | `React.HTMLAttributes<HTMLSpanElement>` | -       | Any other props are spread to the span element.       |
+
+### `<StackTraceActions />`
+
+| Prop        | Type                                   | Default | Description                                                                 |
+| ----------- | -------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| `children`  | `React.ReactNode`                      | -       | Action buttons (typically StackTraceCopyButton and StackTraceExpandButton). |
+| `className` | `string`                               | -       | Additional CSS classes.                                                     |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.                            |
+
+### `<StackTraceCopyButton />`
+
+| Prop        | Type                                  | Default | Description                                                              |
+| ----------- | ------------------------------------- | ------- | ------------------------------------------------------------------------ |
+| `onCopy`    | `() => void`                          | -       | Callback fired after a successful copy.                                  |
+| `onError`   | `(error: Error) => void`              | -       | Callback fired if copying fails.                                         |
+| `timeout`   | `number`                              | `2000`  | How long to show the copied state (ms).                                  |
+| `children`  | `React.ReactNode`                     | -       | Custom content for the button. Defaults to copy/check icons.             |
+| `className` | `string`                              | -       | Additional CSS classes.                                                  |
+| `...props`  | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<StackTraceExpandButton />`
+
+| Prop        | Type                                   | Default | Description                                      |
+| ----------- | -------------------------------------- | ------- | ------------------------------------------------ |
+| `className` | `string`                               | -       | Additional CSS classes.                          |
+| `...props`  | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div. |
+
+### `<StackTraceContent />`
+
+| Prop        | Type                                              | Default | Description                                                                             |
+| ----------- | ------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
+| `maxHeight` | `number`                                          | `400`   | Maximum height of the content area. Enables scrolling when content exceeds this height. |
+| `children`  | `React.ReactNode`                                 | -       | Content to display (typically StackTraceFrames).                                        |
+| `className` | `string`                                          | -       | Additional CSS classes.                                                                 |
+| `...props`  | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any other props are spread to the CollapsibleContent.                                   |
+
+### `<StackTraceFrames />`
+
+| Prop                 | Type                                   | Default | Description                                                  |
+| -------------------- | -------------------------------------- | ------- | ------------------------------------------------------------ |
+| `showInternalFrames` | `boolean`                              | `true`  | Whether to show internal frames (node_modules, node: paths). |
+| `className`          | `string`                               | -       | Additional CSS classes.                                      |
+| `...props`           | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the container div.             |

package/dist/src/skills/bundled/ai-elements/references/suggestion.md

@@ -0,0 +1,128 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/suggestion.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# Suggestion
+
+A suggestion component that displays a horizontal row of clickable suggestions for user interaction.
+
+The `Suggestion` component displays a horizontal row of clickable suggestions for user interaction.
+
+See `scripts/suggestion.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add suggestion
+```
+
+## Usage with AI SDK
+
+Build a simple input with suggestions users can click to send a message to the LLM.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  PromptInput,
+  type PromptInputMessage,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { Suggestion, Suggestions } from "@/components/ai-elements/suggestion";
+import { useState } from "react";
+import { useChat } from "@ai-sdk/react";
+
+const suggestions = [
+  "Can you explain how to play tennis?",
+  "What is the weather in Tokyo?",
+  "How do I make a really good fish taco?",
+];
+
+const SuggestionDemo = () => {
+  const [input, setInput] = useState("");
+  const { sendMessage, status } = useChat();
+
+  const handleSubmit = (message: PromptInputMessage) => {
+    if (message.text.trim()) {
+      sendMessage({ text: message.text });
+      setInput("");
+    }
+  };
+
+  const handleSuggestionClick = (suggestion: string) => {
+    sendMessage({ text: suggestion });
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex flex-col gap-4">
+          <Suggestions>
+            {suggestions.map((suggestion) => (
+              <Suggestion
+                key={suggestion}
+                onClick={handleSuggestionClick}
+                suggestion={suggestion}
+              />
+            ))}
+          </Suggestions>
+          <PromptInput onSubmit={handleSubmit} className="mt-4 w-full max-w-2xl mx-auto relative">
+            <PromptInputTextarea
+              value={input}
+              placeholder="Say something..."
+              onChange={(e) => setInput(e.currentTarget.value)}
+              className="pr-12"
+            />
+            <PromptInputSubmit
+              status={status === "streaming" ? "streaming" : "ready"}
+              disabled={!input.trim()}
+              className="absolute bottom-1 right-1"
+            />
+          </PromptInput>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SuggestionDemo;
+```
+
+## Features
+
+- Horizontal row of clickable suggestion buttons
+- Customizable styling with variant and size options
+- Flexible layout that wraps suggestions on smaller screens
+- onClick callback that emits the selected suggestion string
+- Support for both individual suggestions and suggestion lists
+- Clean, modern styling with hover effects
+- Responsive design with mobile-friendly touch targets
+- TypeScript support with proper type definitions
+
+## Examples
+
+### Usage with AI Input
+
+See `scripts/suggestion-input.tsx` for this example.
+
+## Props
+
+### `<Suggestions />`
+
+| Prop       | Type                                      | Default | Description                                                        |
+| ---------- | ----------------------------------------- | ------- | ------------------------------------------------------------------ |
+| `...props` | `React.ComponentProps<typeof ScrollArea>` | -       | Any other props are spread to the underlying ScrollArea component. |
+
+### `<Suggestion />`
+
+| Prop         | Type                                         | Default  | Description                                                              |
+| ------------ | -------------------------------------------- | -------- | ------------------------------------------------------------------------ |
+| `suggestion` | `string`                                     | Required | The suggestion string to display and emit on click.                      |
+| `onClick`    | `(suggestion: string) => void`               | -        | Callback fired when the suggestion is clicked.                           |
+| `...props`   | `Omit<React.ComponentProps<typeof Button>, ` | -        | Any other props are spread to the underlying shadcn/ui Button component. |

package/dist/src/skills/bundled/ai-elements/references/task.md

@@ -0,0 +1,222 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/task.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# Task
+
+A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions.
+
+The `Task` component provides a structured way to display task lists or workflow progress with collapsible details, status indicators, and progress tracking. It consists of a main `Task` container with `TaskTrigger` for the clickable header and `TaskContent` for the collapsible content area.
+
+See `scripts/task.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add task
+```
+
+## Usage with AI SDK
+
+Build a mock async programming agent using `experimental_generateObject`.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { experimental_useObject as useObject } from "@ai-sdk/react";
+import {
+  Task,
+  TaskItem,
+  TaskItemFile,
+  TaskTrigger,
+  TaskContent,
+} from "@/components/ai-elements/task";
+import { Button } from "@/components/ui/button";
+import { tasksSchema } from "@/app/api/task/route";
+import {
+  SiReact,
+  SiTypescript,
+  SiJavascript,
+  SiCss,
+  SiHtml5,
+  SiJson,
+  SiMarkdown,
+} from "@icons-pack/react-simple-icons";
+
+const iconMap = {
+  react: { component: SiReact, color: "#149ECA" },
+  typescript: { component: SiTypescript, color: "#3178C6" },
+  javascript: { component: SiJavascript, color: "#F7DF1E" },
+  css: { component: SiCss, color: "#1572B6" },
+  html: { component: SiHtml5, color: "#E34F26" },
+  json: { component: SiJson, color: "#000000" },
+  markdown: { component: SiMarkdown, color: "#000000" },
+};
+
+const TaskDemo = () => {
+  const { object, submit, isLoading } = useObject({
+    api: "/api/agent",
+    schema: tasksSchema,
+  });
+
+  const handleSubmit = (taskType: string) => {
+    submit({ prompt: taskType });
+  };
+
+  const renderTaskItem = (item: any, index: number) => {
+    if (item?.type === "file" && item.file) {
+      const iconInfo = iconMap[item.file.icon as keyof typeof iconMap];
+      if (iconInfo) {
+        const IconComponent = iconInfo.component;
+        return (
+          <span className="inline-flex items-center gap-1" key={index}>
+            {item.text}
+            <TaskItemFile>
+              <IconComponent color={item.file.color || iconInfo.color} className="size-4" />
+              <span>{item.file.name}</span>
+            </TaskItemFile>
+          </span>
+        );
+      }
+    }
+    return item?.text || "";
+  };
+
+  return (
+    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+      <div className="flex flex-col h-full">
+        <div className="flex gap-2 mb-6 flex-wrap">
+          <Button
+            onClick={() => handleSubmit("React component development")}
+            disabled={isLoading}
+            variant="outline"
+          >
+            React Development
+          </Button>
+        </div>
+
+        <div className="flex-1 overflow-auto space-y-4">
+          {isLoading && !object && <div className="text-muted-foreground">Generating tasks...</div>}
+
+          {object?.tasks?.map((task: any, taskIndex: number) => (
+            <Task key={taskIndex} defaultOpen={taskIndex === 0}>
+              <TaskTrigger title={task.title || "Loading..."} />
+              <TaskContent>
+                {task.items?.map((item: any, itemIndex: number) => (
+                  <TaskItem key={itemIndex}>{renderTaskItem(item, itemIndex)}</TaskItem>
+                ))}
+              </TaskContent>
+            </Task>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDemo;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/agent.ts"
+import { streamObject } from "ai";
+import { z } from "zod";
+
+export const taskItemSchema = z.object({
+  type: z.enum(["text", "file"]),
+  text: z.string(),
+  file: z
+    .object({
+      name: z.string(),
+      icon: z.string(),
+      color: z.string().optional(),
+    })
+    .optional(),
+});
+
+export const taskSchema = z.object({
+  title: z.string(),
+  items: z.array(taskItemSchema),
+  status: z.enum(["pending", "in_progress", "completed"]),
+});
+
+export const tasksSchema = z.object({
+  tasks: z.array(taskSchema),
+});
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { prompt } = await req.json();
+
+  const result = streamObject({
+    model: "openai/gpt-4o",
+    schema: tasksSchema,
+    prompt: `You are an AI assistant that generates realistic development task workflows. Generate a set of tasks that would occur during ${prompt}.
+
+    Each task should have:
+    - A descriptive title
+    - Multiple task items showing the progression
+    - Some items should be plain text, others should reference files
+    - Use realistic file names and appropriate file types
+    - Status should progress from pending to in_progress to completed
+
+    For file items, use these icon types: 'react', 'typescript', 'javascript', 'css', 'html', 'json', 'markdown'
+
+    Generate 3-4 tasks total, with 4-6 items each.`,
+  });
+
+  return result.toTextStreamResponse();
+}
+```
+
+## Features
+
+- Visual icons for pending, in-progress, completed, and error states
+- Expandable content for task descriptions and additional information
+- Built-in progress counter showing completed vs total tasks
+- Optional progressive reveal of tasks with customizable timing
+- Support for custom content within task items
+- Full type safety with proper TypeScript definitions
+- Keyboard navigation and screen reader support
+
+## Props
+
+### `<Task />`
+
+| Prop          | Type                                       | Default | Description                                                   |
+| ------------- | ------------------------------------------ | ------- | ------------------------------------------------------------- |
+| `defaultOpen` | `boolean`                                  | `true`  | Whether the task is open by default.                          |
+| `...props`    | `React.ComponentProps<typeof Collapsible>` | -       | Any other props are spread to the root Collapsible component. |
+
+### `<TaskTrigger />`
+
+| Prop       | Type                                              | Default  | Description                                                     |
+| ---------- | ------------------------------------------------- | -------- | --------------------------------------------------------------- |
+| `title`    | `string`                                          | Required | The title of the task that will be displayed in the trigger.    |
+| `...props` | `React.ComponentProps<typeof CollapsibleTrigger>` | -        | Any other props are spread to the CollapsibleTrigger component. |
+
+### `<TaskContent />`
+
+| Prop       | Type                                              | Default | Description                                                     |
+| ---------- | ------------------------------------------------- | ------- | --------------------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof CollapsibleContent>` | -       | Any other props are spread to the CollapsibleContent component. |
+
+### `<TaskItem />`
+
+| Prop       | Type                    | Default | Description                                       |
+| ---------- | ----------------------- | ------- | ------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the underlying div. |
+
+### `<TaskItemFile />`
+
+| Prop       | Type                    | Default | Description                                       |
+| ---------- | ----------------------- | ------- | ------------------------------------------------- |
+| `...props` | `React.ComponentProps<` | -       | Any other props are spread to the underlying div. |

package/dist/src/skills/bundled/ai-elements/references/terminal.md

@@ -0,0 +1,110 @@
+<!--
+Derived from vercel/ai-elements (skills/ai-elements/references/terminal.md).
+Copyright 2023 Vercel, Inc. Licensed under Apache-2.0.
+Modified by ZCode: local integration, formatting and adaptations.
+See THIRD-PARTY-NOTICES.md in the repository root for license and provenance.
+-->
+
+# Terminal
+
+Display streaming console output with full ANSI color support.
+
+The `Terminal` component displays console output with ANSI color support, streaming indicators, and auto-scroll functionality.
+
+See `scripts/terminal.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add terminal
+```
+
+## Features
+
+- Full ANSI color support (256 colors, bold, italic, underline)
+- Streaming mode with cursor animation
+- Auto-scroll to latest output
+- Copy output to clipboard
+- Clear button support
+- Dark terminal theme
+
+## ANSI Support
+
+The Terminal uses `ansi-to-react` to parse ANSI escape codes:
+
+```bash
+\x1b[32m✓\x1b[0m Success    # Green checkmark
+\x1b[31m✗\x1b[0m Error      # Red X
+\x1b[33mwarn\x1b[0m Warning   # Yellow text
+\x1b[1mBold\x1b[0m           # Bold text
+```
+
+## Examples
+
+### Basic Usage
+
+See `scripts/terminal-basic.tsx` for this example.
+
+### Streaming Mode
+
+See `scripts/terminal-streaming.tsx` for this example.
+
+### With Clear Button
+
+See `scripts/terminal-clear.tsx` for this example.
+
+## Props
+
+### `<Terminal />`
+
+| Prop          | Type         | Default | Description                                      |
+| ------------- | ------------ | ------- | ------------------------------------------------ |
+| `output`      | `string`     | -       | Terminal output text (supports ANSI codes).      |
+| `isStreaming` | `boolean`    | `false` | Show streaming indicator.                        |
+| `autoScroll`  | `boolean`    | `true`  | Auto-scroll to bottom on new output.             |
+| `onClear`     | `() => void` | -       | Callback to clear output (enables clear button). |
+| `className`   | `string`     | -       | Additional CSS classes.                          |
+
+### `<TerminalCopyButton />`
+
+| Prop      | Type                     | Default | Description                         |
+| --------- | ------------------------ | ------- | ----------------------------------- |
+| `onCopy`  | `() => void`             | -       | Callback after successful copy.     |
+| `onError` | `(error: Error) => void` | -       | Callback if copying fails.          |
+| `timeout` | `number`                 | `2000`  | Duration to show copied state (ms). |
+
+### `<TerminalHeader />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the div element. |
+
+### `<TerminalTitle />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the div element. |
+
+### `<TerminalStatus />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the div element. |
+
+### `<TerminalActions />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the div element. |
+
+### `<TerminalClearButton />`
+
+| Prop       | Type                                  | Default | Description                                         |
+| ---------- | ------------------------------------- | ------- | --------------------------------------------------- |
+| `...props` | `React.ComponentProps<typeof Button>` | -       | Any other props are spread to the Button component. |
+
+### `<TerminalContent />`
+
+| Prop       | Type                                   | Default | Description                                    |
+| ---------- | -------------------------------------- | ------- | ---------------------------------------------- |
+| `...props` | `React.HTMLAttributes<HTMLDivElement>` | -       | Any other props are spread to the div element. |