create-inox-app 0.1.0

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/queue.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import type { QueueMessage, QueueTodo } from "@/components/ai-elements/queue";
+
+import {
+  Queue,
+  QueueItem,
+  QueueItemAction,
+  QueueItemActions,
+  QueueItemAttachment,
+  QueueItemContent,
+  QueueItemDescription,
+  QueueItemFile,
+  QueueItemImage,
+  QueueItemIndicator,
+  QueueList,
+  QueueSection,
+  QueueSectionContent,
+  QueueSectionLabel,
+  QueueSectionTrigger,
+} from "@/components/ai-elements/queue";
+import { ArrowUp, Trash2 } from "lucide-react";
+import { memo, useCallback, useState } from "react";
+
+const sampleMessages: QueueMessage[] = [
+  {
+    id: "msg-1",
+    parts: [{ text: "How do I set up the project?", type: "text" }],
+  },
+  {
+    id: "msg-2",
+    parts: [{ text: "What is the roadmap for Q4?", type: "text" }],
+  },
+  {
+    id: "msg-3",
+    parts: [
+      { text: "Update the default logo to this png.", type: "text" },
+      {
+        filename: "setup-guide.png",
+        mediaType: "image/png",
+        type: "file",
+        url: "https://github.com/haydenbleasel.png",
+      },
+    ],
+  },
+  {
+    id: "msg-4",
+    parts: [{ text: "Please generate a changelog.", type: "text" }],
+  },
+  {
+    id: "msg-5",
+    parts: [{ text: "Add dark mode support.", type: "text" }],
+  },
+  {
+    id: "msg-6",
+    parts: [{ text: "Optimize database queries.", type: "text" }],
+  },
+  {
+    id: "msg-7",
+    parts: [{ text: "Set up CI/CD pipeline.", type: "text" }],
+  },
+];
+
+const sampleTodos: QueueTodo[] = [
+  {
+    description: "Complete the README and API docs",
+    id: "todo-1",
+    status: "completed",
+    title: "Write project documentation",
+  },
+  {
+    id: "todo-2",
+    status: "pending",
+    title: "Implement authentication",
+  },
+  {
+    description: "Resolve crash on settings page",
+    id: "todo-3",
+    status: "pending",
+    title: "Fix bug #42",
+  },
+  {
+    description: "Unify queue and todo state management",
+    id: "todo-4",
+    status: "pending",
+    title: "Refactor queue logic",
+  },
+  {
+    description: "Increase test coverage for hooks",
+    id: "todo-5",
+    status: "pending",
+    title: "Add unit tests",
+  },
+];
+
+interface MessageActionsProps {
+  messageId: string;
+  onRemove: (e: React.MouseEvent, id: string) => void;
+  onSend: (e: React.MouseEvent, id: string) => void;
+}
+
+const MessageActions = memo(({ messageId, onRemove, onSend }: MessageActionsProps) => {
+  const handleRemove = useCallback(
+    (e: React.MouseEvent) => onRemove(e, messageId),
+    [onRemove, messageId],
+  );
+  const handleSend = useCallback(
+    (e: React.MouseEvent) => onSend(e, messageId),
+    [onSend, messageId],
+  );
+  return (
+    <QueueItemActions>
+      <QueueItemAction
+        aria-label="Remove from queue"
+        onClick={handleRemove}
+        title="Remove from queue"
+      >
+        <Trash2 size={12} />
+      </QueueItemAction>
+      <QueueItemAction aria-label="Send now" onClick={handleSend}>
+        <ArrowUp size={14} />
+      </QueueItemAction>
+    </QueueItemActions>
+  );
+});
+
+MessageActions.displayName = "MessageActions";
+
+interface TodoItemProps {
+  todo: QueueTodo;
+  onRemove: (id: string) => void;
+}
+
+const TodoItem = memo(({ todo, onRemove }: TodoItemProps) => {
+  const isCompleted = todo.status === "completed";
+  const handleRemove = useCallback(() => onRemove(todo.id), [onRemove, todo.id]);
+
+  return (
+    <QueueItem key={todo.id}>
+      <div className="flex items-center gap-2">
+        <QueueItemIndicator completed={isCompleted} />
+        <QueueItemContent completed={isCompleted}>{todo.title}</QueueItemContent>
+        <QueueItemActions>
+          <QueueItemAction aria-label="Remove todo" onClick={handleRemove}>
+            <Trash2 size={12} />
+          </QueueItemAction>
+        </QueueItemActions>
+      </div>
+      {todo.description && (
+        <QueueItemDescription completed={isCompleted}>{todo.description}</QueueItemDescription>
+      )}
+    </QueueItem>
+  );
+});
+
+TodoItem.displayName = "TodoItem";
+
+const Example = () => {
+  const [messages, setMessages] = useState(sampleMessages);
+  const [todos, setTodos] = useState(sampleTodos);
+
+  const handleRemoveMessage = useCallback((id: string) => {
+    setMessages((prev) => prev.filter((msg) => msg.id !== id));
+  }, []);
+
+  const handleRemoveTodo = useCallback((id: string) => {
+    setTodos((prev) => prev.filter((todo) => todo.id !== id));
+  }, []);
+
+  const handleSendNow = useCallback((id: string) => {
+    console.log("Send now:", id);
+    setMessages((prev) => prev.filter((msg) => msg.id !== id));
+  }, []);
+
+  const handleMessageRemove = useCallback(
+    (e: React.MouseEvent, id: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handleRemoveMessage(id);
+    },
+    [handleRemoveMessage],
+  );
+
+  const handleMessageSend = useCallback(
+    (e: React.MouseEvent, id: string) => {
+      e.preventDefault();
+      e.stopPropagation();
+      handleSendNow(id);
+    },
+    [handleSendNow],
+  );
+
+  if (messages.length === 0 && todos.length === 0) {
+    return null;
+  }
+
+  return (
+    <Queue>
+      {messages.length > 0 && (
+        <QueueSection>
+          <QueueSectionTrigger>
+            <QueueSectionLabel count={messages.length} label="Queued" />
+          </QueueSectionTrigger>
+          <QueueSectionContent>
+            <QueueList>
+              {messages.map((message) => {
+                const summary = (() => {
+                  const textParts = message.parts.filter((p) => p.type === "text");
+                  const text = textParts
+                    .map((p) => p.text)
+                    .join(" ")
+                    .trim();
+                  return text || "(queued message)";
+                })();
+
+                const hasFiles = message.parts.some((p) => p.type === "file" && p.url);
+
+                return (
+                  <QueueItem key={message.id}>
+                    <div className="flex items-center gap-2">
+                      <QueueItemIndicator />
+                      <QueueItemContent>{summary}</QueueItemContent>
+                      <MessageActions
+                        messageId={message.id}
+                        onRemove={handleMessageRemove}
+                        onSend={handleMessageSend}
+                      />
+                    </div>
+                    {hasFiles && (
+                      <QueueItemAttachment>
+                        {message.parts
+                          .filter((p) => p.type === "file" && p.url)
+                          .map((file) => {
+                            if (file.mediaType?.startsWith("image/") && file.url) {
+                              return (
+                                <QueueItemImage
+                                  alt={file.filename || "attachment"}
+                                  key={file.url}
+                                  src={file.url}
+                                />
+                              );
+                            }
+                            return (
+                              <QueueItemFile key={file.url}>
+                                {file.filename || "file"}
+                              </QueueItemFile>
+                            );
+                          })}
+                      </QueueItemAttachment>
+                    )}
+                  </QueueItem>
+                );
+              })}
+            </QueueList>
+          </QueueSectionContent>
+        </QueueSection>
+      )}
+      {todos.length > 0 && (
+        <QueueSection>
+          <QueueSectionTrigger>
+            <QueueSectionLabel count={todos.length} label="Todo" />
+          </QueueSectionTrigger>
+          <QueueSectionContent>
+            <QueueList>
+              {todos.map((todo) => (
+                <TodoItem key={todo.id} onRemove={handleRemoveTodo} todo={todo} />
+              ))}
+            </QueueList>
+          </QueueSectionContent>
+        </QueueSection>
+      )}
+    </Queue>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/reasoning.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "@/components/ai-elements/reasoning";
+import { useCallback, useEffect, useState } from "react";
+
+const reasoningSteps = [
+  "Let me think about this problem step by step.",
+  "\n\nFirst, I need to understand what the user is asking for.",
+  "\n\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.",
+  "\n\nThis seems like a collapsible component with state management would be the right approach.",
+].join("");
+
+const Example = () => {
+  const [content, setContent] = useState("");
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentTokenIndex, setCurrentTokenIndex] = useState(0);
+  const [tokens, setTokens] = useState<string[]>([]);
+
+  // Function to chunk text into fake tokens of 3-4 characters
+  const chunkIntoTokens = useCallback((text: string): string[] => {
+    const tokens: string[] = [];
+    let i = 0;
+    while (i < text.length) {
+      // Random size between 3-4
+      const chunkSize = Math.floor(Math.random() * 2) + 3;
+      tokens.push(text.slice(i, i + chunkSize));
+      i += chunkSize;
+    }
+    return tokens;
+  }, []);
+
+  useEffect(() => {
+    const tokenizedSteps = chunkIntoTokens(reasoningSteps);
+    setTokens(tokenizedSteps);
+    setContent("");
+    setCurrentTokenIndex(0);
+    setIsStreaming(true);
+  }, [chunkIntoTokens]);
+
+  useEffect(() => {
+    if (!isStreaming || currentTokenIndex >= tokens.length) {
+      if (isStreaming) {
+        setIsStreaming(false);
+      }
+      return;
+    }
+
+    // Faster interval since we're streaming smaller chunks
+    const timer = setTimeout(() => {
+      setContent((prev) => prev + tokens[currentTokenIndex]);
+      setCurrentTokenIndex((prev) => prev + 1);
+    }, 25);
+
+    return () => clearTimeout(timer);
+  }, [isStreaming, currentTokenIndex, tokens]);
+
+  return (
+    <div className="w-full p-4" style={{ height: "300px" }}>
+      <Reasoning className="w-full" isStreaming={isStreaming}>
+        <ReasoningTrigger />
+        <ReasoningContent>{content}</ReasoningContent>
+      </Reasoning>
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/sandbox.tsx

@@ -0,0 +1,166 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+
+import { CodeBlock, CodeBlockCopyButton } from "@/components/ai-elements/code-block";
+import {
+  Sandbox,
+  SandboxContent,
+  SandboxHeader,
+  SandboxTabContent,
+  SandboxTabs,
+  SandboxTabsBar,
+  SandboxTabsList,
+  SandboxTabsTrigger,
+} from "@/components/ai-elements/sandbox";
+import {
+  StackTrace,
+  StackTraceActions,
+  StackTraceContent,
+  StackTraceCopyButton,
+  StackTraceError,
+  StackTraceErrorMessage,
+  StackTraceErrorType,
+  StackTraceExpandButton,
+  StackTraceFrames,
+  StackTraceHeader,
+} from "@/components/ai-elements/stack-trace";
+import { Button } from "@/components/ui/button";
+import { memo, useCallback, useState } from "react";
+
+const code = `import math
+
+def calculate_primes(limit):
+    """Find all prime numbers up to a given limit using Sieve of Eratosthenes."""
+    sieve = [True] * (limit + 1)
+    sieve[0] = sieve[1] = False
+    
+    for i in range(2, int(math.sqrt(limit)) + 1):
+        if sieve[i]:
+            for j in range(i * i, limit + 1, i):
+                sieve[j] = False
+    
+    return [i for i, is_prime in enumerate(sieve) if is_prime]
+
+if __name__ == "__main__":
+    primes = calculate_primes(50)
+    print(f"Found {len(primes)} prime numbers up to 50:")
+    print(primes)`;
+
+const outputs: Record<ToolUIPart["state"], string | undefined> = {
+  "input-available": undefined,
+  "input-streaming": undefined,
+  "output-available": `Found 15 prime numbers up to 50:
+[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47]`,
+  "output-error": `TypeError: Cannot read properties of undefined (reading 'map')
+    at calculatePrimes (/src/utils/primes.ts:15:23)
+    at runCalculation (/src/components/Calculator.tsx:42:12)
+    at onClick (/src/components/Button.tsx:18:5)
+    at HTMLButtonElement.dispatch (node_modules/react-dom/cjs/react-dom.development.js:3456:9)
+    at node_modules/react-dom/cjs/react-dom.development.js:4245:12`,
+};
+
+const states: ToolUIPart["state"][] = [
+  "input-streaming",
+  "input-available",
+  "output-available",
+  "output-error",
+];
+
+interface StateButtonProps {
+  s: ToolUIPart["state"];
+  currentState: ToolUIPart["state"];
+  onStateChange: (state: ToolUIPart["state"]) => void;
+}
+
+const StateButton = memo(({ s, currentState, onStateChange }: StateButtonProps) => {
+  const handleClick = useCallback(() => onStateChange(s), [onStateChange, s]);
+  return (
+    <Button
+      key={s}
+      onClick={handleClick}
+      size="sm"
+      variant={currentState === s ? "default" : "outline"}
+    >
+      {s}
+    </Button>
+  );
+});
+
+StateButton.displayName = "StateButton";
+
+const Example = () => {
+  const [state, setState] = useState<ToolUIPart["state"]>("output-available");
+
+  const handleStateChange = useCallback((s: ToolUIPart["state"]) => {
+    setState(s);
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        {states.map((s) => (
+          <StateButton currentState={state} key={s} onStateChange={handleStateChange} s={s} />
+        ))}
+      </div>
+
+      <Sandbox>
+        <SandboxHeader state={state} title="primes.py" />
+        <SandboxContent>
+          <SandboxTabs defaultValue="code">
+            <SandboxTabsBar>
+              <SandboxTabsList>
+                <SandboxTabsTrigger value="code">Code</SandboxTabsTrigger>
+                <SandboxTabsTrigger value="output">Output</SandboxTabsTrigger>
+              </SandboxTabsList>
+            </SandboxTabsBar>
+            <SandboxTabContent value="code">
+              <CodeBlock
+                className="border-0"
+                code={state === "input-streaming" ? "# Generating code..." : code}
+                language="python"
+              >
+                <CodeBlockCopyButton
+                  className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                  size="sm"
+                />
+              </CodeBlock>
+            </SandboxTabContent>
+            <SandboxTabContent value="output">
+              {state === "output-error" ? (
+                <StackTrace
+                  className="rounded-none border-0"
+                  defaultOpen
+                  trace={outputs[state] ?? ""}
+                >
+                  <StackTraceHeader>
+                    <StackTraceError>
+                      <StackTraceErrorType />
+                      <StackTraceErrorMessage />
+                    </StackTraceError>
+                    <StackTraceActions>
+                      <StackTraceCopyButton />
+                      <StackTraceExpandButton />
+                    </StackTraceActions>
+                  </StackTraceHeader>
+                  <StackTraceContent>
+                    <StackTraceFrames />
+                  </StackTraceContent>
+                </StackTrace>
+              ) : (
+                <CodeBlock className="border-0" code={outputs[state] ?? ""} language="log">
+                  <CodeBlockCopyButton
+                    className="absolute top-2 right-2 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+                    size="sm"
+                  />
+                </CodeBlock>
+              )}
+            </SandboxTabContent>
+          </SandboxTabs>
+        </SandboxContent>
+      </Sandbox>
+    </div>
+  );
+};
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/schema-display-basic.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { SchemaDisplay } from "@/components/ai-elements/schema-display";
+
+const Example = () => <SchemaDisplay description="List all users" method="GET" path="/api/users" />;
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/schema-display-body.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { SchemaDisplay } from "@/components/ai-elements/schema-display";
+
+const Example = () => (
+  <SchemaDisplay
+    method="POST"
+    path="/api/posts"
+    requestBody={[
+      { name: "title", required: true, type: "string" },
+      { name: "content", required: true, type: "string" },
+    ]}
+    responseBody={[
+      { name: "id", required: true, type: "string" },
+      { name: "createdAt", required: true, type: "string" },
+    ]}
+  />
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/schema-display-nested.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { SchemaDisplay } from "@/components/ai-elements/schema-display";
+
+const Example = () => (
+  <SchemaDisplay
+    method="POST"
+    path="/api/posts"
+    requestBody={[
+      {
+        name: "author",
+        properties: [
+          { name: "id", type: "string" },
+          { name: "name", type: "string" },
+        ],
+        type: "object",
+      },
+      { name: "title", required: true, type: "string" },
+    ]}
+  />
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/schema-display-params.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { SchemaDisplay } from "@/components/ai-elements/schema-display";
+
+const Example = () => (
+  <SchemaDisplay
+    method="GET"
+    parameters={[
+      { location: "path", name: "userId", required: true, type: "string" },
+      { location: "query", name: "include", type: "string" },
+    ]}
+    path="/api/users/{userId}"
+  />
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/schema-display.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  SchemaDisplay,
+  SchemaDisplayContent,
+  SchemaDisplayDescription,
+  SchemaDisplayHeader,
+  SchemaDisplayMethod,
+  SchemaDisplayParameters,
+  SchemaDisplayPath,
+  SchemaDisplayRequest,
+  SchemaDisplayResponse,
+} from "@/components/ai-elements/schema-display";
+
+const Example = () => (
+  <SchemaDisplay
+    description="Create a new post for a specific user. Requires authentication."
+    method="POST"
+    parameters={[
+      {
+        description: "The unique identifier of the user",
+        location: "path",
+        name: "userId",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "Save as draft instead of publishing",
+        location: "query",
+        name: "draft",
+        required: false,
+        type: "boolean",
+      },
+    ]}
+    path="/api/users/{userId}/posts"
+    requestBody={[
+      {
+        description: "The post title",
+        name: "title",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "The post content in markdown format",
+        name: "content",
+        required: true,
+        type: "string",
+      },
+      {
+        description: "Tags for categorization",
+        items: { name: "tag", type: "string" },
+        name: "tags",
+        type: "array",
+      },
+      {
+        description: "Additional metadata",
+        name: "metadata",
+        properties: [
+          {
+            description: "SEO optimized title",
+            name: "seoTitle",
+            type: "string",
+          },
+          {
+            description: "Meta description",
+            name: "seoDescription",
+            type: "string",
+          },
+        ],
+        type: "object",
+      },
+    ]}
+    responseBody={[
+      { description: "Post ID", name: "id", required: true, type: "string" },
+      { name: "title", required: true, type: "string" },
+      { name: "content", required: true, type: "string" },
+      {
+        description: "ISO 8601 timestamp",
+        name: "createdAt",
+        required: true,
+        type: "string",
+      },
+      {
+        name: "author",
+        properties: [
+          { name: "id", required: true, type: "string" },
+          { name: "name", required: true, type: "string" },
+          { name: "avatar", type: "string" },
+        ],
+        required: true,
+        type: "object",
+      },
+    ]}
+  >
+    <SchemaDisplayHeader>
+      <div className="flex items-center gap-3">
+        <SchemaDisplayMethod />
+        <SchemaDisplayPath />
+      </div>
+    </SchemaDisplayHeader>
+    <SchemaDisplayDescription />
+    <SchemaDisplayContent>
+      <SchemaDisplayParameters />
+      <SchemaDisplayRequest />
+      <SchemaDisplayResponse />
+    </SchemaDisplayContent>
+  </SchemaDisplay>
+);
+
+export default Example;