@goldencomm/create-baseline 0.0.1

package/templates/next/.claude/skills/ai-elements/references/confirmation.md

@@ -0,0 +1,262 @@
+# Confirmation
+
+An alert-based component for managing tool execution approval workflows with request, accept, and reject states.
+
+The `Confirmation` component provides a flexible system for displaying tool approval requests and their outcomes. Perfect for showing users when AI tools require approval before execution, and displaying the approval status afterward.
+
+See `scripts/confirmation.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add confirmation
+```
+
+## Usage with AI SDK
+
+Build a chat UI with tool approval workflow where dangerous tools require user confirmation before execution.
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport, type ToolUIPart } from "ai";
+import { useState } from "react";
+import { CheckIcon, XIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationAccepted,
+  ConfirmationRejected,
+  ConfirmationActions,
+  ConfirmationAction,
+} from "@/components/ai-elements/confirmation";
+import { MessageResponse } from "@/components/ai-elements/message";
+
+type DeleteFileInput = {
+  filePath: string;
+  confirm: boolean;
+};
+
+type DeleteFileToolUIPart = ToolUIPart<{
+  delete_file: {
+    input: DeleteFileInput;
+    output: { success: boolean; message: string };
+  };
+}>;
+
+const Example = () => {
+  const { messages, sendMessage, status, addToolApprovalResponse } = useChat({
+    transport: new DefaultChatTransport({
+      api: "/api/chat",
+    }),
+  });
+
+  const handleDeleteFile = () => {
+    sendMessage({ text: "Delete the file at /tmp/example.txt" });
+  };
+
+  const latestMessage = messages[messages.length - 1];
+  const deleteTool = latestMessage?.parts?.find(
+    (part) => part.type === "tool-delete_file"
+  ) as DeleteFileToolUIPart | undefined;
+
+  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 space-y-4">
+        <Button onClick={handleDeleteFile} disabled={status !== "ready"}>
+          Delete Example File
+        </Button>
+
+        {deleteTool?.approval && (
+          <Confirmation approval={deleteTool.approval} state={deleteTool.state}>
+            <ConfirmationRequest>
+              This tool wants to delete:{" "}
+              <code>{deleteTool.input?.filePath}</code>
+              <br />
+              Do you approve this action?
+            </ConfirmationRequest>
+            <ConfirmationAccepted>
+              <CheckIcon className="size-4" />
+              <span>You approved this tool execution</span>
+            </ConfirmationAccepted>
+            <ConfirmationRejected>
+              <XIcon className="size-4" />
+              <span>You rejected this tool execution</span>
+            </ConfirmationRejected>
+            <ConfirmationActions>
+              <ConfirmationAction
+                variant="outline"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: false,
+                  })
+                }
+              >
+                Reject
+              </ConfirmationAction>
+              <ConfirmationAction
+                variant="default"
+                onClick={() =>
+                  addToolApprovalResponse({
+                    id: deleteTool.approval!.id,
+                    approved: true,
+                  })
+                }
+              >
+                Approve
+              </ConfirmationAction>
+            </ConfirmationActions>
+          </Confirmation>
+        )}
+
+        {deleteTool?.output && (
+          <MessageResponse>
+            {deleteTool.output.success
+              ? deleteTool.output.message
+              : `Error: ${deleteTool.output.message}`}
+          </MessageResponse>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Example;
+```
+
+Add the following route to your backend:
+
+```ts title="app/api/chat/route.tsx"
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+import { z } from "zod";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages: await convertToModelMessages(messages),
+    tools: {
+      delete_file: {
+        description: "Delete a file from the file system",
+        parameters: z.object({
+          filePath: z.string().describe("The path to the file to delete"),
+          confirm: z
+            .boolean()
+            .default(false)
+            .describe("Confirmation that the user wants to delete the file"),
+        }),
+        requireApproval: true, // Enable approval workflow
+        execute: async ({ filePath, confirm }) => {
+          if (!confirm) {
+            return {
+              success: false,
+              message: "Deletion not confirmed",
+            };
+          }
+
+          // Simulate file deletion
+          await new Promise((resolve) => setTimeout(resolve, 500));
+
+          return {
+            success: true,
+            message: `Successfully deleted ${filePath}`,
+          };
+        },
+      },
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+## Features
+
+- Context-based state management for approval workflow
+- Conditional rendering based on approval state
+- Support for approval-requested, approval-responded, output-denied, and output-available states
+- Built on shadcn/ui Alert and Button components
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+
+## Examples
+
+### Approval Request State
+
+Shows the approval request with action buttons when state is `approval-requested`.
+
+See `scripts/confirmation-request.tsx` for this example.
+
+### Approved State
+
+Shows the accepted status when user approves and state is `approval-responded` or `output-available`.
+
+See `scripts/confirmation-accepted.tsx` for this example.
+
+### Rejected State
+
+Shows the rejected status when user rejects and state is `output-denied`.
+
+See `scripts/confirmation-rejected.tsx` for this example.
+
+## Props
+
+### `<Confirmation />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `approval` | `ToolUIPart[` | - | The approval object containing the approval ID and status. If not provided or undefined, the component will not render. |
+| `state` | `ToolUIPart[` | - | The current state of the tool (input-streaming, input-available, approval-requested, approval-responded, output-denied, or output-available). Will not render for input-streaming or input-available states. |
+| `className` | `string` | - | Additional CSS classes to apply to the Alert component. |
+| `...props` | `React.ComponentProps<typeof Alert>` | - | Any other props are spread to the Alert component. |
+
+### `<ConfirmationTitle />`
+
+A styled description element for displaying a title or label within the confirmation alert.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof AlertDescription>` | - | Any other props are spread to the underlying AlertDescription component. |
+
+### `<ConfirmationRequest />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is requested. Only renders when state is  |
+
+### `<ConfirmationAccepted />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is accepted. Only renders when approval.approved is true and state is  |
+
+### `<ConfirmationRejected />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | The content to display when approval is rejected. Only renders when approval.approved is false and state is  |
+
+### `<ConfirmationActions />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes to apply to the actions container. |
+| `...props` | `React.ComponentProps<` | - | Any other props are spread to the div element. Only renders when state is  |
+
+### `<ConfirmationAction />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `React.ComponentProps<typeof Button>` | - | Any other props are spread to the Button component. Styled with h-8 px-3 text-sm classes by default. |

package/templates/next/.claude/skills/ai-elements/references/connection.md

@@ -0,0 +1,34 @@
+# Connection
+
+A custom connection line component for React Flow-based canvases with animated bezier curve styling.
+
+The `Connection` component provides a styled connection line for React Flow canvases. It renders an animated bezier curve with a circle indicator at the target end, using consistent theming through CSS variables.
+
+
+
+## Installation
+
+```bash
+npx ai-elements@latest add connection
+```
+
+## Features
+
+- Smooth bezier curve animation for connection lines
+- Visual indicator circle at the target position
+- Theme-aware styling using CSS variables
+- Cubic bezier curve calculation for natural flow
+- Lightweight implementation with minimal props
+- Full TypeScript support with React Flow types
+- Compatible with React Flow's connection system
+
+## Props
+
+### `<Connection />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `fromX` | `number` | - | The x-coordinate of the connection start point. |
+| `fromY` | `number` | - | The y-coordinate of the connection start point. |
+| `toX` | `number` | - | The x-coordinate of the connection end point. |
+| `toY` | `number` | - | The y-coordinate of the connection end point. |

package/templates/next/.claude/skills/ai-elements/references/context.md

@@ -0,0 +1,126 @@
+# Context
+
+A compound component system for displaying AI model context window usage, token consumption, and cost estimation.
+
+The `Context` component provides a comprehensive view of AI model usage through a compound component system. It displays context window utilization, token consumption breakdown (input, output, reasoning, cache), and cost estimation in an interactive hover card interface.
+
+See `scripts/context.tsx` for this example.
+
+## Installation
+
+```bash
+npx ai-elements@latest add context
+```
+
+## Features
+
+- **Compound Component Architecture**: Flexible composition of context display elements
+- **Visual Progress Indicator**: Circular SVG progress ring showing context usage percentage
+- **Token Breakdown**: Detailed view of input, output, reasoning, and cached tokens
+- **Cost Estimation**: Real-time cost calculation using the `tokenlens` library
+- **Intelligent Formatting**: Automatic token count formatting (K, M, B suffixes)
+- **Interactive Hover Card**: Detailed information revealed on hover
+- **Context Provider Pattern**: Clean data flow through React Context API
+- **TypeScript Support**: Full type definitions for all components
+- **Accessible Design**: Proper ARIA labels and semantic HTML
+- **Theme Integration**: Uses currentColor for automatic theme adaptation
+
+## Props
+
+### `<Context />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `maxTokens` | `number` | - | The total context window size in tokens. |
+| `usedTokens` | `number` | - | The number of tokens currently used. |
+| `usage` | `LanguageModelUsage` | - | Detailed token usage breakdown from the AI SDK (input, output, reasoning, cached tokens). |
+| `modelId` | `ModelId` | - | Model identifier for cost calculation (e.g.,  |
+| `...props` | `ComponentProps<HoverCard>` | - | Any other props are spread to the HoverCard component. |
+
+### `<ContextTrigger />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom trigger element. If not provided, renders a default button with percentage and icon. |
+| `...props` | `ComponentProps<Button>` | - | Props spread to the default button element. |
+
+### `<ContextContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes for the hover card content. |
+| `...props` | `ComponentProps<HoverCardContent>` | - | Props spread to the HoverCardContent component. |
+
+### `<ContextContentHeader />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom header content. If not provided, renders percentage and token count with progress bar. |
+| `...props` | `ComponentProps<div>` | - | Props spread to the header div element. |
+
+### `<ContextContentBody />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Body content, typically containing usage breakdown components. |
+| `...props` | `ComponentProps<div>` | - | Props spread to the body div element. |
+
+### `<ContextContentFooter />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom footer content. If not provided, renders total cost when modelId is provided. |
+| `...props` | `ComponentProps<div>` | - | Props spread to the footer div element. |
+
+### Usage Components
+
+All usage components (`ContextInputUsage`, `ContextOutputUsage`, `ContextReasoningUsage`, `ContextCacheUsage`) share the same props:
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `React.ReactNode` | - | Custom content. If not provided, renders token count and cost for the respective usage type. |
+| `className` | `string` | - | Additional CSS classes. |
+| `...props` | `ComponentProps<div>` | - | Props spread to the div element. |
+
+## Component Architecture
+
+The Context component uses a compound component pattern with React Context for data sharing:
+
+1. **`<Context>`** - Root provider component that holds all context data
+2. **`<ContextTrigger>`** - Interactive trigger element (default: button with percentage)
+3. **`<ContextContent>`** - Hover card content container
+4. **`<ContextContentHeader>`** - Header section with progress visualization
+5. **`<ContextContentBody>`** - Body section for usage breakdowns
+6. **`<ContextContentFooter>`** - Footer section for total cost
+7. **Usage Components** - Individual token usage displays (Input, Output, Reasoning, Cache)
+
+## Token Formatting
+
+The component uses `Intl.NumberFormat` with compact notation for automatic formatting:
+
+- Under 1,000: Shows exact count (e.g., "842")
+- 1,000+: Shows with K suffix (e.g., "32K")
+- 1,000,000+: Shows with M suffix (e.g., "1.5M")
+- 1,000,000,000+: Shows with B suffix (e.g., "2.1B")
+
+## Cost Calculation
+
+When a `modelId` is provided, the component automatically calculates costs using the `tokenlens` library:
+
+- **Input tokens**: Cost based on model's input pricing
+- **Output tokens**: Cost based on model's output pricing
+- **Reasoning tokens**: Special pricing for reasoning-capable models
+- **Cached tokens**: Reduced pricing for cached input tokens
+- **Total cost**: Sum of all token type costs
+
+Costs are formatted using `Intl.NumberFormat` with USD currency.
+
+## Styling
+
+The component uses Tailwind CSS classes and follows your design system:
+
+- Progress indicator uses `currentColor` for theme adaptation
+- Hover card has customizable width and padding
+- Footer has a secondary background for visual separation
+- All text sizes use the `text-xs` class for consistency
+- Muted foreground colors for secondary information

package/templates/next/.claude/skills/ai-elements/references/controls.md

@@ -0,0 +1,32 @@
+# Controls
+
+A styled controls component for React Flow-based canvases with zoom and fit view functionality.
+
+The `Controls` component provides interactive zoom and fit view controls for React Flow canvases. It includes a modern, themed design with backdrop blur and card styling.
+
+
+
+## Installation
+
+```bash
+npx ai-elements@latest add controls
+```
+
+## Features
+
+- Zoom in/out controls
+- Fit view button to center and scale content
+- Rounded pill design with backdrop blur
+- Theme-aware card background
+- Subtle drop shadow for depth
+- Full TypeScript support
+- Compatible with all React Flow control features
+
+## Props
+
+### `<Controls />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | - | Additional CSS classes to apply to the controls. |
+| `...props` | `ComponentProps<typeof Controls>` | - | Any other props from @xyflow/react Controls component (showZoom, showFitView, showInteractive, position, etc.). |

package/templates/next/.claude/skills/ai-elements/references/conversation.md

@@ -0,0 +1,224 @@
+# Conversation
+
+Wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
+
+The `Conversation` component wraps messages and automatically scrolls to the bottom. Also includes a scroll button that appears when not at the bottom.
+
+<Preview path="conversation" className="p-0" />
+
+## Installation
+
+```bash
+npx ai-elements@latest add conversation
+```
+
+## Usage with AI SDK
+
+Build a simple conversational UI with `Conversation` and [`PromptInput`](/components/prompt-input):
+
+Add the following component to your frontend:
+
+```tsx title="app/page.tsx"
+"use client";
+
+import {
+  Conversation,
+  ConversationContent,
+  ConversationDownload,
+  ConversationEmptyState,
+  ConversationScrollButton,
+} from "@/components/ai-elements/conversation";
+import {
+  Message,
+  MessageContent,
+  MessageResponse,
+} from "@/components/ai-elements/message";
+import {
+  PromptInput,
+  type PromptInputMessage,
+  PromptInputTextarea,
+  PromptInputSubmit,
+} from "@/components/ai-elements/prompt-input";
+import { MessageSquare } from "lucide-react";
+import { useState } from "react";
+import { useChat } from "@ai-sdk/react";
+
+const ConversationDemo = () => {
+  const [input, setInput] = useState("");
+  const { messages, sendMessage, status } = useChat();
+
+  const handleSubmit = (message: PromptInputMessage) => {
+    if (message.text.trim()) {
+      sendMessage({ text: message.text });
+      setInput("");
+    }
+  };
+
+  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">
+        <Conversation>
+          <ConversationContent>
+            {messages.length === 0 ? (
+              <ConversationEmptyState
+                icon={<MessageSquare className="size-12" />}
+                title="Start a conversation"
+                description="Type a message below to begin chatting"
+              />
+            ) : (
+              messages.map((message) => (
+                <Message from={message.role} key={message.id}>
+                  <MessageContent>
+                    {message.parts.map((part, i) => {
+                      switch (part.type) {
+                        case "text": // we don't use any reasoning or tool calls in this example
+                          return (
+                            <MessageResponse key={`${message.id}-${i}`}>
+                              {part.text}
+                            </MessageResponse>
+                          );
+                        default:
+                          return null;
+                      }
+                    })}
+                  </MessageContent>
+                </Message>
+              ))
+            )}
+          </ConversationContent>
+          <ConversationDownload messages={messages} />
+          <ConversationScrollButton />
+        </Conversation>
+
+        <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>
+  );
+};
+
+export default ConversationDemo;
+```
+
+Add the following route to your backend:
+
+```tsx title="api/chat/route.ts"
+import { streamText, UIMessage, convertToModelMessages } from "ai";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: "openai/gpt-4o",
+    messages: await convertToModelMessages(messages),
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+## Features
+
+- Automatic scrolling to the bottom when new messages are added
+- Smooth scrolling behavior with configurable animation
+- Scroll button that appears when not at the bottom
+- Download conversation as Markdown
+- Responsive design with customizable padding and spacing
+- Flexible content layout with consistent message spacing
+- Accessible with proper ARIA roles for screen readers
+- Customizable styling through className prop
+- Support for any number of child message components
+
+## Props
+
+### `<Conversation />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `contextRef` | `React.Ref<StickToBottomContext>` | - | Optional ref to access the StickToBottom context object. |
+| `instance` | `StickToBottomInstance` | - | Optional instance for controlling the StickToBottom component. |
+| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. |
+| `...props` | `Omit<React.HTMLAttributes<HTMLDivElement>, ` | - | Any other props are spread to the root div. |
+
+### `<ConversationContent />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `((context: StickToBottomContext) => ReactNode) | ReactNode` | - | Render prop or ReactNode for custom rendering with context. |
+| `...props` | `Omit<React.HTMLAttributes<HTMLDivElement>, ` | - | Any other props are spread to the root div. |
+
+### `<ConversationEmptyState />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | - | The title text to display. |
+| `description` | `string` | - | The description text to display. |
+| `icon` | `React.ReactNode` | - | Optional icon to display above the text. |
+| `children` | `React.ReactNode` | - | Optional additional content to render below the text. |
+| `...props` | `ComponentProps<` | - | Any other props are spread to the root div. |
+
+### `<ConversationScrollButton />`
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `...props` | `ComponentProps<typeof Button>` | - | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `<ConversationDownload />`
+
+A button that downloads the conversation as a Markdown file.
+
+```tsx
+import { ConversationDownload } from "@/components/ai-elements/conversation";
+
+<Conversation>
+  <ConversationContent>
+    {messages.map(...)}
+  </ConversationContent>
+  <ConversationDownload messages={messages} />
+  <ConversationScrollButton />
+</Conversation>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `messages` | `UIMessage[]` | Required | Array of messages to include in the download. |
+| `filename` | `string` | - | The filename for the downloaded file. |
+| `formatMessage` | `(message: UIMessage, index: number) => string` | - | Custom function to format each message in the output. |
+| `...props` | `Omit<ComponentProps<typeof Button>, ` | - | Any other props are spread to the underlying shadcn/ui Button component. |
+
+### `messagesToMarkdown`
+
+A utility function to convert messages to Markdown format. Useful for custom download implementations.
+
+```tsx
+import { messagesToMarkdown } from "@/components/ai-elements/conversation";
+
+const markdown = messagesToMarkdown(messages);
+
+// With custom formatter
+const customMarkdown = messagesToMarkdown(
+  messages,
+  (msg, i) =>
+    `[${msg.role}]: ${msg.parts
+      .filter((p) => p.type === "text")
+      .map((p) => p.text)
+      .join("")}`
+);
+```