@genui-a3/create 0.1.0

package/dist/index.js

@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { execSync } from "child_process";
+import path from "path";
+import { fileURLToPath } from "url";
+import chalk from "chalk";
+import fsExtra from "fs-extra";
+import prompts from "prompts";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path.dirname(__filename);
+var banner = `
+  ${chalk.cyan("\u2588\u2588\u2588\u2588\u2588\u2557 \u2588\u2588\u2588\u2588\u2588\u2588\u2557 ")}
+  ${chalk.cyan("\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2557\u255A\u2550\u2550\u2550\u2550\u2588\u2588\u2557")}
+  ${chalk.cyan("\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2551 \u2588\u2588\u2588\u2588\u2588\u2554\u255D")}
+  ${chalk.cyan("\u2588\u2588\u2554\u2550\u2550\u2588\u2588\u2551 \u255A\u2550\u2550\u2550\u2588\u2588\u2557")}
+  ${chalk.cyan("\u2588\u2588\u2551  \u2588\u2588\u2551\u2588\u2588\u2588\u2588\u2588\u2588\u2554\u255D")}
+  ${chalk.cyan("\u255A\u2550\u255D  \u255A\u2550\u255D\u255A\u2550\u2550\u2550\u2550\u2550\u255D ")}
+
+  ${chalk.white.bold("GenUI A3")} ${chalk.dim("\u2014 Agentic App Scaffold")}
+`;
+async function main() {
+  console.log(banner);
+  let projectName = process.argv[2];
+  if (!projectName) {
+    const response = await prompts(
+      {
+        type: "text",
+        name: "projectName",
+        message: "What is your project named?",
+        initial: "my-a3-quickstart"
+      },
+      {
+        onCancel: () => {
+          console.log(chalk.red("\nSetup cancelled."));
+          process.exit(1);
+        }
+      }
+    );
+    projectName = response.projectName;
+  }
+  if (!projectName) {
+    console.error(chalk.red("Project name is required."));
+    process.exit(1);
+  }
+  const targetDir = path.resolve(process.cwd(), projectName);
+  if (fsExtra.existsSync(targetDir)) {
+    const contents = fsExtra.readdirSync(targetDir);
+    if (contents.length > 0) {
+      console.error(chalk.red(`
+Directory "${projectName}" already exists and is not empty.`));
+      process.exit(1);
+    }
+  }
+  const templateDir = path.resolve(__dirname, "..", "template");
+  if (!fsExtra.existsSync(templateDir)) {
+    console.error(chalk.red("\nTemplate directory not found. The package may not have been built correctly."));
+    process.exit(1);
+  }
+  console.log(chalk.dim(`
+Creating a new A3 app in ${chalk.bold(targetDir)}...
+`));
+  fsExtra.copySync(templateDir, targetDir);
+  const pkgJsonPath = path.join(targetDir, "package.json");
+  if (fsExtra.existsSync(pkgJsonPath)) {
+    const pkg = fsExtra.readJsonSync(pkgJsonPath);
+    pkg.name = projectName;
+    delete pkg.private;
+    fsExtra.writeJsonSync(pkgJsonPath, pkg, { spaces: 2 });
+  }
+  const gitignoreSrc = path.join(targetDir, "_gitignore");
+  const gitignoreDest = path.join(targetDir, ".gitignore");
+  if (fsExtra.existsSync(gitignoreSrc)) {
+    fsExtra.renameSync(gitignoreSrc, gitignoreDest);
+  }
+  console.log(chalk.cyan("Installing dependencies...\n"));
+  try {
+    execSync("npm install", {
+      cwd: targetDir,
+      stdio: "inherit"
+    });
+  } catch {
+    console.error(chalk.red("\nFailed to install dependencies. You can try manually:"));
+    console.log(`  cd ${projectName}`);
+    console.log("  npm install\n");
+    process.exit(1);
+  }
+  console.log(`
+${chalk.green.bold("Success!")} Created ${chalk.bold(projectName)} at ${chalk.dim(targetDir)}
+`);
+  console.log("Get started:\n");
+  console.log(chalk.cyan(`  cd ${projectName}`));
+  console.log(chalk.cyan("  npm run dev\n"));
+}
+main().catch((err) => {
+  console.error(chalk.red("Unexpected error:"), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@genui-a3/create",
+  "version": "0.1.0",
+  "description": "CLI scaffolding tool for GenUI A3 agentic apps",
+  "keywords": [
+    "genui",
+    "a3",
+    "agentic",
+    "scaffold",
+    "cli"
+  ],
+  "license": "ISC",
+  "author": "",
+  "type": "module",
+  "main": "dist/index.js",
+  "bin": {
+    "create-genui-a3": "dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "scripts": {
+    "build": "npm run prepare-template && tsup",
+    "postbuild": "chmod +x dist/index.js",
+    "clean": "rm -rf dist template",
+    "prepare-template": "node scripts/prepare-template.mjs",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "chalk": "5.4.1",
+    "fs-extra": "11.3.0",
+    "prompts": "2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "20.19.0",
+    "@types/prompts": "2.4.9",
+    "tsup": "8.5.1",
+    "typescript": "5.9.3"
+  }
+}

package/template/README.md

@@ -0,0 +1,16 @@
+# A3 App
+
+Built with [GenUI A3](https://www.npmjs.com/package/@genui-a3/core).
+
+## Getting Started
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Learn More
+
+- [A3 Core Documentation](https://www.npmjs.com/package/@genui-a3/core)
+- [Next.js Documentation](https://nextjs.org/docs)

package/template/_gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

package/template/app/(pages)/agui/AguiChat.tsx

@@ -0,0 +1,109 @@
+'use client'
+
+import { useState, useCallback, useRef } from 'react'
+import { Typography } from '@mui/material'
+import { ChatMessageList } from '@organisms/ChatMessageList'
+import { ChatContainer, ChatHeader } from '@atoms'
+import { ChatInput } from '@molecules'
+import type { ChatMessage as ChatMessageType } from 'types'
+import { HttpAgent, EventType } from '@ag-ui/client'
+
+const agent = new HttpAgent({
+  url: '/api/agui',
+})
+
+export function AguiChat() {
+  const [messages, setMessages] = useState<ChatMessageType[]>([])
+  const [isLoading, setIsLoading] = useState(false)
+  const assistantIdRef = useRef<string>('')
+
+  const handleSubmit = useCallback(async (text: string) => {
+    const userMsg: ChatMessageType = {
+      id: crypto.randomUUID(),
+      body: text,
+      source: 'user',
+    }
+    setMessages((prev) => [...prev, userMsg])
+    setIsLoading(true)
+
+    let assistantId = crypto.randomUUID()
+    assistantIdRef.current = assistantId
+
+    const streamingMsg: ChatMessageType = {
+      id: assistantId,
+      body: '',
+      source: 'assistant',
+      isStreaming: true,
+    }
+    setMessages((prev) => [...prev, streamingMsg])
+
+    try {
+      const runId = crypto.randomUUID()
+
+      // Add the user message to the agent's internal state BEFORE running.
+      agent.addMessage({ id: crypto.randomUUID(), role: 'user', content: text })
+
+      await agent.runAgent(
+        {
+          runId,
+          tools: [],
+          context: [],
+          forwardedProps: {},
+        },
+        {
+          onEvent({ event }) {
+            if (event.type === EventType.TEXT_MESSAGE_CONTENT && 'delta' in event) {
+              const delta = (event as unknown as { delta: string }).delta
+              setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, body: m.body + delta } : m)))
+            } else if (event.type === EventType.CUSTOM && 'name' in event) {
+              const customEvent = event as unknown as { name: string }
+              if (customEvent.name === 'AgentTransition') {
+                const prevAssistantId = assistantId
+                assistantId = crypto.randomUUID()
+                assistantIdRef.current = assistantId
+                setMessages((prev) => {
+                  const updated = prev.map((m) => (m.id === prevAssistantId ? { ...m, isStreaming: false } : m))
+                  return [...updated, { id: assistantId, body: '', source: 'assistant', isStreaming: true }]
+                })
+              }
+            } else if (event.type === EventType.RUN_FINISHED) {
+              setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, isStreaming: false } : m)))
+            } else if (event.type === EventType.RUN_ERROR) {
+              setMessages((prev) =>
+                prev.map((m) =>
+                  m.id === assistantId
+                    ? { ...m, body: m.body || 'Sorry, something went wrong.', isStreaming: false }
+                    : m,
+                ),
+              )
+            }
+          },
+        },
+      )
+    } catch (error) {
+      console.error('AG-UI chat error:', error)
+      setMessages((prev) =>
+        prev.map((m) =>
+          m.id === assistantId
+            ? { ...m, body: m.body || 'Sorry, something went wrong. Please try again.', isStreaming: false }
+            : m,
+        ),
+      )
+    } finally {
+      setIsLoading(false)
+      setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, isStreaming: false } : m)))
+    }
+  }, [])
+
+  return (
+    <ChatContainer elevation={0}>
+      <ChatHeader>
+        <Typography variant="h6" component="h2">
+          Chat (AG-UI Protocol)
+        </Typography>
+      </ChatHeader>
+      <ChatMessageList messages={messages} />
+      <ChatInput onSubmit={handleSubmit} disabled={isLoading} />
+    </ChatContainer>
+  )
+}

package/template/app/(pages)/agui/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { AguiChat } from './AguiChat'
+import { PageLayout } from '@organisms'
+
+export default function AguiPage() {
+  return (
+    <PageLayout title="A3 Example — AG-UI Protocol">
+      <AguiChat />
+    </PageLayout>
+  )
+}

package/template/app/(pages)/chat/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { Chat } from '@organisms/Chat'
+import { PageLayout } from '@organisms'
+
+export default function ChatPage() {
+  return (
+    <PageLayout title="A3 Example — Blocking Chat">
+      <Chat />
+    </PageLayout>
+  )
+}

package/template/app/(pages)/stream/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { StreamChat } from '@organisms/StreamChat'
+import { PageLayout } from '@organisms'
+
+export default function StreamPage() {
+  return (
+    <PageLayout title="A3 Example — Streaming">
+      <StreamChat />
+    </PageLayout>
+  )
+}

package/template/app/ThemeProvider.tsx

@@ -0,0 +1,17 @@
+'use client'
+
+import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
+import { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import CssBaseline from '@mui/material/CssBaseline'
+import { theme } from './theme'
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return (
+    <MuiThemeProvider theme={theme}>
+      <StyledThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </StyledThemeProvider>
+    </MuiThemeProvider>
+  )
+}

package/template/app/agents/age.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import { Agent } from '@genui-a3/core'
+import { State } from './greeting'
+
+/**
+ * Sample age agent that gets the user's age.
+ */
+const agePayload = z.object({
+  userAge: z.string().optional(),
+})
+
+export const ageAgent: Agent<State> = {
+  id: 'age',
+  prompt: `
+    You are a friendly agent. Your goal is to learn the user's age.
+    If you don't know their age yet, ask for it politely.
+    Once you have their age, confirm it and set goalAchieved to true.
+
+    If the user says they want to change their name or use a different name,
+    say "Of course, I can help you with that" and transition to the greeting agent.
+  `,
+  outputSchema: agePayload,
+  transition: ['greeting'],
+}

package/template/app/agents/greeting.ts

@@ -0,0 +1,37 @@
+import { z } from 'zod'
+import { Agent, BaseState } from '@genui-a3/core'
+
+/**
+ * Consumer defines their GLOBAL state extending BaseState.
+ * This state is shared across ALL agents in the session.
+ */
+export interface State extends BaseState {
+  userName?: string
+  userAge?: string
+}
+
+/**
+ * Sample greeting agent that demonstrates the AgentRegistry pattern.
+ */
+const greetingPayload = z.object({
+  userName: z.string().optional(),
+})
+
+export const greetingAgent: Agent<State> = {
+  id: 'greeting',
+  prompt: `
+    You are a friendly greeting agent. Your goal is to greet the user and learn their name.
+    You also handle name changes — if the user wants to update their name, collect the new one.
+    If you don't know their name yet, ask for it politely.
+    Once you have their name, greet them by name and set goalAchieved to true.
+
+    Do not ask "How can I help you today?".
+  `,
+  outputSchema: greetingPayload,
+  transition: (state, agentGoalAchieved) => {
+    if (agentGoalAchieved) {
+      return 'age'
+    }
+    return 'greeting'
+  },
+}

package/template/app/api/agui/route.ts

@@ -0,0 +1,69 @@
+import { NextRequest } from 'next/server'
+import { EventType, type RunAgentInput } from '@ag-ui/client'
+import { EventEncoder } from '@ag-ui/encoder'
+import { AgentRegistry, ChatSession, MemorySessionStore, AGUIAgent } from '@genui-a3/core'
+import { greetingAgent, State } from '../../agents/greeting'
+import { ageAgent } from '../../agents/age'
+
+const registry = AgentRegistry.getInstance<State>()
+if (!registry.has('greeting')) {
+  registry.register(greetingAgent)
+}
+if (!registry.has('age')) {
+  registry.register(ageAgent)
+}
+
+const store = new MemorySessionStore<State>()
+
+const a3Agent = new AGUIAgent({
+  agentId: 'a3-demo',
+  createSession: (input: RunAgentInput) =>
+    new ChatSession<State>({
+      sessionId: input.threadId,
+      store,
+      initialAgentId: 'greeting',
+    }),
+})
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as RunAgentInput
+
+  const encoder = new EventEncoder()
+  const events$ = a3Agent.run(body)
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const textEncoder = new TextEncoder()
+      const subscription = events$.subscribe({
+        next(event) {
+          controller.enqueue(textEncoder.encode(encoder.encodeSSE(event)))
+        },
+        error(err) {
+          const errorEvent = {
+            type: EventType.RUN_ERROR,
+            message: String(err),
+          }
+          controller.enqueue(textEncoder.encode(encoder.encodeSSE(errorEvent)))
+          controller.close()
+        },
+        complete() {
+          controller.close()
+        },
+      })
+
+      // Clean up on cancel
+      request.signal.addEventListener('abort', () => {
+        subscription.unsubscribe()
+        controller.close()
+      })
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': encoder.getContentType(),
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}

package/template/app/api/chat/route.ts

@@ -0,0 +1,65 @@
+/**
+ * Synchronous (blocking / unary) chat endpoint.
+ * This is the non-streaming version of the /api/stream endpoint.
+ * It waits for the full agent response before returning a complete JSON payload.
+ */
+import { NextRequest, NextResponse } from 'next/server'
+import { AgentRegistry, ChatSession, MemorySessionStore } from '@genui-a3/core'
+import { greetingAgent, State } from '../../agents/greeting'
+import { ageAgent } from '../../agents/age'
+
+// Register the agent on module load
+const registry = AgentRegistry.getInstance<State>()
+if (!registry.has('greeting')) {
+  registry.register(greetingAgent)
+}
+if (!registry.has('age')) {
+  registry.register(ageAgent)
+}
+
+// Shared store instance (in production, use Redis/DynamoDB)
+const store = new MemorySessionStore<State>()
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = (await request.json()) as { message?: string; sessionId?: string }
+    const { message, sessionId = 'demo-session' } = body
+
+    if (!message) {
+      return NextResponse.json({ error: 'Message is required' }, { status: 400 })
+    }
+
+    // Create session and send message
+    const session = new ChatSession<State>({
+      sessionId,
+      store,
+      initialAgentId: 'greeting',
+      initialState: { userName: undefined },
+    })
+
+    const result = await session.send(message)
+
+    return NextResponse.json({
+      response: result.responseMessage,
+      activeAgentId: result.activeAgentId,
+      nextAgentId: result.nextAgentId,
+      state: result.state,
+      goalAchieved: result.goalAchieved,
+    })
+  } catch (error) {
+    console.error('Chat error:', error)
+    return NextResponse.json({ error: 'Internal server error', details: String(error) }, { status: 500 })
+  }
+}
+
+// GET endpoint to list available agents
+export function GET() {
+  const agents = AgentRegistry.getInstance().getAll()
+  return NextResponse.json({
+    agents: agents.map((agent) => ({
+      id: agent.id,
+      name: agent.name,
+      description: agent.description,
+    })),
+  })
+}

package/template/app/api/stream/route.ts

@@ -0,0 +1,64 @@
+import { NextRequest } from 'next/server'
+import { AgentRegistry, ChatSession, MemorySessionStore } from '@genui-a3/core'
+import { greetingAgent, State } from '../../agents/greeting'
+import { ageAgent } from '../../agents/age'
+
+// Guard: agent may already be registered by the non-streaming route
+const registry = AgentRegistry.getInstance<State>()
+if (!registry.has('greeting')) {
+  registry.register(greetingAgent)
+}
+if (!registry.has('age')) {
+  registry.register(ageAgent)
+}
+
+const store = new MemorySessionStore<State>()
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as { message?: string; sessionId?: string }
+  const { message, sessionId = 'demo-stream-session' } = body
+
+  if (!message) {
+    return new Response(JSON.stringify({ error: 'Message is required' }), {
+      status: 400,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+
+  const session = new ChatSession<State>({
+    sessionId,
+    store,
+    initialAgentId: 'greeting',
+    initialState: { userName: undefined },
+  })
+
+  const encoder = new TextEncoder()
+
+  const stream = new ReadableStream({
+    async start(controller) {
+      try {
+        for await (const event of session.sendStream(message)) {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\n\n`))
+        }
+        controller.enqueue(encoder.encode('data: [DONE]\n\n'))
+      } catch (error) {
+        const errorEvent = {
+          type: 'error',
+          error: { message: String(error) },
+          agentId: 'unknown',
+        }
+        controller.enqueue(encoder.encode(`data: ${JSON.stringify(errorEvent)}\n\n`))
+      } finally {
+        controller.close()
+      }
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      Connection: 'keep-alive',
+    },
+  })
+}

package/template/app/components/atoms/AppLogo.tsx

@@ -0,0 +1,44 @@
+const MARK_PATH =
+  'M 560.50 870.11 C544.60,872.39 493.52,873.54 477.50,871.98 C429.64,867.32 381.89,853.57 340.50,832.53 C316.53,820.34 296.91,807.54 274.00,789.15 C261.51,779.12 236.58,754.18 225.88,741.00 C180.72,685.39 153.06,618.33 146.08,547.58 C144.70,533.59 144.69,497.56 146.06,483.42 C151.82,424.12 172.58,365.85 205.33,317.00 C257.37,239.38 349.03,180.93 442.00,166.07 C464.04,162.55 478.67,161.69 505.88,162.29 C555.48,163.38 594.16,171.21 639.00,189.25 C659.38,197.45 694.34,215.75 702.79,222.64 L 705.07 224.50 L 699.18 234.00 C695.94,239.23 690.48,248.11 687.05,253.75 C683.61,259.39 680.44,264.00 679.99,264.00 C679.54,264.00 674.52,261.04 668.84,257.42 C655.11,248.69 625.53,234.22 610.00,228.66 C583.75,219.25 553.35,212.43 527.00,210.05 C512.11,208.70 478.67,208.71 464.00,210.07 C448.87,211.47 421.38,216.98 407.00,221.49 C359.48,236.39 317.14,262.02 281.44,297.50 C258.31,320.48 241.26,343.77 226.14,373.00 C202.42,418.87 191.69,463.62 191.74,516.50 C191.78,555.23 197.10,585.98 210.10,622.48 C215.21,636.83 229.38,665.53 238.40,679.79 C258.58,711.72 284.51,739.87 314.60,762.50 C358.47,795.49 416.85,818.66 475.00,826.15 C490.90,828.19 536.15,827.93 552.00,825.69 C589.08,820.47 619.66,811.35 651.80,795.94 C758.47,744.79 825.34,642.74 828.69,526.00 C830.16,474.91 818.90,425.90 794.39,376.67 C790.88,369.61 788.00,363.68 788.00,363.49 C788.00,362.88 830.91,349.00 832.81,349.00 C834.20,349.00 836.30,352.42 841.26,362.75 C849.43,379.78 850.04,381.23 856.16,398.49 C887.34,486.35 882.15,583.99 841.89,667.00 C819.83,712.49 793.79,746.96 757.00,779.42 C700.79,829.00 634.78,859.47 560.50,870.11 ZM 335.80 648.00 L 331.50 660.50 L 297.25 660.76 C278.41,660.91 263.00,660.77 263.00,660.45 C263.00,659.86 278.07,617.38 291.17,581.00 C295.04,570.28 308.24,533.38 320.52,499.00 C332.80,464.62 347.87,422.55 354.01,405.50 C360.15,388.45 366.62,370.45 368.39,365.50 L 371.61 356.50 L 409.10 356.24 L 446.59 355.98 L 457.22 385.74 C463.07,402.11 475.32,436.42 484.45,462.00 C493.58,487.58 502.36,512.10 503.97,516.50 C505.58,520.90 515.27,547.90 525.51,576.50 C535.75,605.10 546.52,635.12 549.43,643.22 C552.35,651.31 554.49,658.17 554.20,658.47 C553.91,658.76 537.97,659.00 518.78,659.00 L 483.90 659.00 L 482.58 655.75 C481.85,653.96 477.26,640.69 472.38,626.26 L 463.50 600.02 L 352.45 600.00 L 346.28 617.75 C342.88,627.51 338.17,641.12 335.80,648.00 ZM 687.50 661.35 C660.93,665.46 637.94,663.57 615.06,655.41 C601.27,650.49 591.03,644.01 580.37,633.46 C572.36,625.53 570.61,623.14 566.13,613.96 C560.20,601.81 557.14,589.54 556.76,576.32 L 556.50 567.50 L 616.57 566.97 L 617.62 574.74 C620.91,598.97 640.94,614.52 666.50,612.68 C689.18,611.04 704.64,597.72 707.93,576.97 C709.92,564.44 706.02,552.13 697.07,542.67 C687.39,532.43 676.26,529.04 652.23,529.02 L 636.96 529.00 L 637.23 504.75 L 637.50 480.50 L 654.00 479.93 C674.62,479.21 680.48,477.31 690.26,468.16 C697.55,461.34 700.26,455.37 700.77,445.00 C701.35,433.25 698.88,426.59 691.06,418.89 C682.94,410.89 676.70,408.61 663.00,408.61 C649.61,408.61 643.48,410.81 635.00,418.66 C628.14,425.01 625.48,428.98 622.42,437.42 L 620.22 443.50 L 591.93 443.77 C576.36,443.91 563.30,443.69 562.90,443.27 C561.92,442.23 564.65,426.97 567.16,419.51 C578.07,387.00 606.35,365.08 645.92,358.47 C659.23,356.24 682.31,356.90 695.19,359.88 C714.30,364.30 729.13,372.16 741.60,384.49 C755.80,398.54 761.90,412.81 762.75,434.04 C763.17,444.62 762.92,447.89 761.13,455.04 C756.76,472.50 747.16,486.30 733.31,495.04 C729.72,497.32 727.16,499.52 727.64,499.94 C728.11,500.37 731.08,501.76 734.24,503.03 C747.92,508.57 761.40,522.70 767.11,537.47 C771.91,549.87 773.33,559.36 772.69,574.50 C772.04,589.80 770.30,597.27 764.55,609.50 C751.70,636.85 723.57,655.78 687.50,661.35 ZM 370.99 545.75 C371.00,546.73 379.19,547.00 408.61,547.00 C438.28,547.00 446.12,546.74 445.75,545.75 C445.49,545.06 437.02,519.64 426.93,489.25 C416.83,458.86 408.31,434.00 407.99,434.00 C407.33,434.00 370.98,543.79 370.99,545.75 Z'
+const DOT_PATH =
+  'M 806.90 322.97 C785.45,328.12 765.24,322.48 749.97,307.09 C737.88,294.91 733.00,282.92 733.00,265.40 C733.00,254.57 734.84,247.01 739.72,237.71 C746.39,225.02 759.41,213.62 772.68,208.85 C780.93,205.88 799.11,205.17 807.92,207.47 C830.44,213.34 847.16,231.12 851.67,253.99 C855.45,273.14 849.31,292.70 835.02,307.04 C826.17,315.92 818.73,320.14 806.90,322.97 Z'
+
+export type AppLogoProps = {
+  /** Fill color for the A3 + ring (default: dark gray) */
+  markColor?: string
+  /** Fill color for the accent dot (default: orange) */
+  dotColor?: string
+  width?: number | string
+  height?: number | string
+  className?: string
+  'aria-label'?: string
+}
+
+const DEFAULT_MARK = 'rgb(4,4,4)'
+const DEFAULT_DOT = 'rgb(248,175,81)'
+
+export function AppLogo({
+  markColor = DEFAULT_MARK,
+  dotColor = DEFAULT_DOT,
+  width = 32,
+  height = 32,
+  className,
+  'aria-label': ariaLabel = 'A3',
+}: AppLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1024 1024"
+      width={width}
+      height={height}
+      className={className}
+      aria-label={ariaLabel}
+      role="img"
+    >
+      <g>
+        <path d={MARK_PATH} fill={markColor} />
+        <path d={DOT_PATH} fill={dotColor} />
+      </g>
+    </svg>
+  )
+}