create-inox-app 0.1.0

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

@@ -0,0 +1,38 @@
+"use client";
+
+import { Terminal } from "@/components/ai-elements/terminal";
+import { useEffect, useState } from "react";
+
+const lines = [
+  "\u001B[36m$\u001B[0m npm install",
+  "Installing dependencies...",
+  "\u001B[32m✓\u001B[0m react@19.0.0",
+  "\u001B[32m✓\u001B[0m typescript@5.0.0",
+  "\u001B[32m✓\u001B[0m vite@5.0.0",
+  "",
+  "\u001B[32mDone!\u001B[0m Installed 3 packages in 1.2s",
+];
+
+const Example = () => {
+  const [output, setOutput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(true);
+
+  useEffect(() => {
+    let lineIndex = 0;
+    const interval = setInterval(() => {
+      if (lineIndex < lines.length) {
+        setOutput((prev) => prev + (prev ? "\n" : "") + lines[lineIndex]);
+        lineIndex += 1;
+      } else {
+        setIsStreaming(false);
+        clearInterval(interval);
+      }
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return <Terminal autoScroll isStreaming={isStreaming} output={output} />;
+};
+
+export default Example;

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

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  Terminal,
+  TerminalActions,
+  TerminalClearButton,
+  TerminalContent,
+  TerminalCopyButton,
+  TerminalHeader,
+  TerminalStatus,
+  TerminalTitle,
+} from "@/components/ai-elements/terminal";
+import { useCallback, useEffect, useState } from "react";
+
+const handleTerminalCopy = () => {
+  console.log("Copied!");
+};
+
+const ansiOutput = `\u001B[32m✓\u001B[0m Compiled successfully in 1.2s
+
+\u001B[1m\u001B[34minfo\u001B[0m  - Collecting page data...
+\u001B[1m\u001B[34minfo\u001B[0m  - Generating static pages (0/3)
+\u001B[32m✓\u001B[0m Generated static pages (3/3)
+
+\u001B[1m\u001B[33mwarn\u001B[0m  - Using \u001B[1mexperimental\u001B[0m server actions
+
+\u001B[36mRoute (app)\u001B[0m                              \u001B[36mSize\u001B[0m     \u001B[36mFirst Load JS\u001B[0m
+\u001B[37m┌ ○ /\u001B[0m                                    \u001B[32m5.2 kB\u001B[0m   \u001B[32m87.3 kB\u001B[0m
+\u001B[37m├ ○ /about\u001B[0m                               \u001B[32m2.1 kB\u001B[0m   \u001B[32m84.2 kB\u001B[0m
+\u001B[37m└ ○ /contact\u001B[0m                             \u001B[32m3.8 kB\u001B[0m   \u001B[32m85.9 kB\u001B[0m
+
+\u001B[32m✓\u001B[0m Build completed successfully!
+\u001B[90mTotal time: 3.45s\u001B[0m
+`;
+
+const Example = () => {
+  const [output, setOutput] = useState("");
+  const [isStreaming, setIsStreaming] = useState(true);
+
+  useEffect(() => {
+    let index = 0;
+    const interval = setInterval(() => {
+      if (index < ansiOutput.length) {
+        setOutput(ansiOutput.slice(0, index + 10));
+        index += 10;
+      } else {
+        setIsStreaming(false);
+        clearInterval(interval);
+      }
+    }, 20);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setOutput("");
+    setIsStreaming(false);
+  }, []);
+
+  return (
+    <Terminal autoScroll={true} isStreaming={isStreaming} onClear={handleClear} output={output}>
+      <TerminalHeader>
+        <TerminalTitle>Build Output</TerminalTitle>
+        <div className="flex items-center gap-1">
+          <TerminalStatus />
+          <TerminalActions>
+            <TerminalCopyButton onCopy={handleTerminalCopy} />
+            <TerminalClearButton />
+          </TerminalActions>
+        </div>
+      </TerminalHeader>
+      <TerminalContent />
+    </Terminal>
+  );
+};
+
+export default Example;

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

@@ -0,0 +1,27 @@
+"use client";
+
+import {
+  TestResults,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsSummary,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 3500,
+      failed: 2,
+      passed: 10,
+      skipped: 1,
+      total: 13,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+      <TestResultsDuration />
+    </TestResultsHeader>
+  </TestResults>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/test-results-errors.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsHeader,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const stackTrace = `    at Object.<anonymous> (/app/src/api.test.ts:45:12)
+    at Module._compile (node:internal/modules/cjs/loader:1369:14)
+    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)`;
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 130,
+      failed: 1,
+      passed: 1,
+      skipped: 0,
+      total: 2,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+    </TestResultsHeader>
+    <TestResultsContent>
+      <TestSuite defaultOpen name="API" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={45} name="should fetch data" status="passed" />
+          <Test duration={85} name="should update" status="failed">
+            <TestError>
+              <TestErrorMessage>Expected 200, got 500</TestErrorMessage>
+              <TestErrorStack>{stackTrace}</TestErrorStack>
+            </TestError>
+          </Test>
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/test-results-suites.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import {
+  Test,
+  TestResults,
+  TestResultsContent,
+  TestResultsHeader,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 150,
+      failed: 0,
+      passed: 3,
+      skipped: 0,
+      total: 3,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+    </TestResultsHeader>
+    <TestResultsContent>
+      <TestSuite name="Auth" status="passed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={45} name="should login" status="passed" />
+          <Test duration={32} name="should logout" status="passed" />
+          <Test duration={73} name="should refresh token" status="passed" />
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

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

@@ -0,0 +1,78 @@
+"use client";
+
+import {
+  Test,
+  TestError,
+  TestErrorMessage,
+  TestErrorStack,
+  TestResults,
+  TestResultsContent,
+  TestResultsDuration,
+  TestResultsHeader,
+  TestResultsProgress,
+  TestResultsSummary,
+  TestSuite,
+  TestSuiteContent,
+  TestSuiteName,
+} from "@/components/ai-elements/test-results";
+
+const Example = () => (
+  <TestResults
+    summary={{
+      duration: 3245,
+      failed: 2,
+      passed: 12,
+      skipped: 1,
+      total: 15,
+    }}
+  >
+    <TestResultsHeader>
+      <TestResultsSummary />
+      <TestResultsDuration />
+    </TestResultsHeader>
+    <div className="border-b px-4 py-3">
+      <TestResultsProgress />
+    </div>
+    <TestResultsContent>
+      <TestSuite defaultOpen={true} name="Authentication" status="passed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={45} name="should login with valid credentials" status="passed" />
+          <Test duration={32} name="should reject invalid password" status="passed" />
+          <Test duration={28} name="should handle expired tokens" status="passed" />
+        </TestSuiteContent>
+      </TestSuite>
+
+      <TestSuite defaultOpen={true} name="User API" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={120} name="should create new user" status="passed" />
+          <Test duration={85} name="should update user profile" status="failed">
+            <TestError>
+              <TestErrorMessage>Expected status 200 but received 500</TestErrorMessage>
+              <TestErrorStack>
+                {`  at Object.<anonymous> (src/user.test.ts:45:12)
+  at Promise.then.completed (node_modules/jest-circus/build/utils.js:391:28)`}
+              </TestErrorStack>
+            </TestError>
+          </Test>
+          <Test name="should delete user" status="skipped" />
+        </TestSuiteContent>
+      </TestSuite>
+
+      <TestSuite name="Database" status="failed">
+        <TestSuiteName />
+        <TestSuiteContent>
+          <Test duration={200} name="should connect to database" status="passed" />
+          <Test duration={5000} name="should handle connection timeout" status="failed">
+            <TestError>
+              <TestErrorMessage>Connection timed out after 5000ms</TestErrorMessage>
+            </TestError>
+          </Test>
+        </TestSuiteContent>
+      </TestSuite>
+    </TestResultsContent>
+  </TestResults>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/tool-input-available.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { Tool, ToolContent, ToolHeader, ToolInput } from "@/components/ai-elements/tool";
+import { nanoid } from "nanoid";
+
+const toolCall = {
+  errorText: undefined,
+  input: {
+    prompt: "A futuristic cityscape at sunset with flying cars",
+    quality: "high",
+    resolution: "1024x1024",
+    style: "digital_art",
+  },
+  output: undefined,
+  state: "input-available" as const,
+  toolCallId: nanoid(),
+  type: "tool-image_generation" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/tool-input-streaming.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { Tool, ToolContent, ToolHeader, ToolInput } from "@/components/ai-elements/tool";
+import { nanoid } from "nanoid";
+
+const toolCall = {
+  errorText: undefined,
+  input: {
+    include_snippets: true,
+    max_results: 10,
+    query: "latest AI market trends 2024",
+  },
+  output: undefined,
+  state: "input-streaming" as const,
+  toolCallId: nanoid(),
+  type: "tool-web_search" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/tool-output-available.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+
+import { CodeBlock } from "@/components/ai-elements/code-block";
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+import { nanoid } from "nanoid";
+
+const toolCall: ToolUIPart = {
+  errorText: undefined,
+  input: {
+    database: "analytics",
+    params: ["2024-01-01"],
+    query: "SELECT COUNT(*) FROM users WHERE created_at >= ?",
+  },
+  output: [
+    {
+      "Created At": "2024-01-15",
+      Email: "john@example.com",
+      Name: "John Doe",
+      "User ID": 1,
+    },
+    {
+      "Created At": "2024-01-20",
+      Email: "jane@example.com",
+      Name: "Jane Smith",
+      "User ID": 2,
+    },
+    {
+      "Created At": "2024-02-01",
+      Email: "bob@example.com",
+      Name: "Bob Wilson",
+      "User ID": 3,
+    },
+    {
+      "Created At": "2024-02-10",
+      Email: "alice@example.com",
+      Name: "Alice Brown",
+      "User ID": 4,
+    },
+    {
+      "Created At": "2024-02-15",
+      Email: "charlie@example.com",
+      Name: "Charlie Davis",
+      "User ID": 5,
+    },
+  ],
+  state: "output-available" as const,
+  toolCallId: nanoid(),
+  type: "tool-database_query" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        {toolCall.state === "output-available" && (
+          <ToolOutput
+            errorText={toolCall.errorText}
+            output={<CodeBlock code={JSON.stringify(toolCall.output)} language="json" />}
+          />
+        )}
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;

package/dist/templates/claude-config/app/.agents/skills/ai-elements/scripts/tool-output-error.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import type { ToolUIPart } from "ai";
+
+import {
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool";
+
+const toolCall: ToolUIPart = {
+  errorText:
+    "Connection timeout: The request took longer than 5000ms to complete. Please check your network connection and try again.",
+  input: {
+    headers: {
+      Authorization: "Bearer token123",
+      "Content-Type": "application/json",
+    },
+    method: "GET",
+    timeout: 5000,
+    url: "https://api.example.com/data",
+  },
+  output: undefined,
+  state: "output-error" as const,
+  toolCallId: "api_request_1",
+  type: "tool-api_request" as const,
+};
+
+const Example = () => (
+  <div style={{ height: "500px" }}>
+    <Tool>
+      <ToolHeader state={toolCall.state} type={toolCall.type} />
+      <ToolContent>
+        <ToolInput input={toolCall.input} />
+        {toolCall.state === "output-error" && (
+          <ToolOutput errorText={toolCall.errorText} output={toolCall.output} />
+        )}
+      </ToolContent>
+    </Tool>
+  </div>
+);
+
+export default Example;