Merge pull request #327 from rowboatlabs/dev

rowboat-electron app

apps/.gitignore

@@ -1,2 +0,0 @@
-.DS_Store
-.vscode/

apps/cli/.gitignore

@@ -1,2 +1,3 @@
 node_modules/
-dist/
+dist/
+.vercel

apps/cli/bin/app.js

@@ -1,7 +1,8 @@
 #!/usr/bin/env node
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { app, modelConfig, updateState, importExample, listExamples, exportWorkflow } from '../dist/app.js';
+import { app, modelConfig, importExample, listExamples, exportWorkflow } from '../dist/app.js';
+import { runTui } from '../dist/tui/index.js';
 
 yargs(hideBin(process.argv))
 
@@ -36,6 +37,20 @@ yargs(hideBin(process.argv))
             });
         }
     )
+    .command(
+        "ui",
+        "Launch the interactive Rowboat dashboard",
+        (y) => y
+            .option("server-url", {
+                type: "string",
+                description: "Rowboat server base URL",
+            }),
+        (argv) => {
+            runTui({
+                serverUrl: argv.serverUrl,
+            });
+        }
+    )
     .command(
         "import",
         "Import an example workflow (--example) or custom workflow from file (--file)",
@@ -116,20 +131,4 @@ yargs(hideBin(process.argv))
             modelConfig();
         }
     )
-    .command(
-        "update-state <agent> <run_id>",
-        "Update state for a run",
-        (y) => y
-            .positional("agent", {
-                type: "string",
-                description: "The agent to run",
-            })
-            .positional("run_id", {
-                type: "string",
-                description: "The run id to update",
-            }),
-        (argv) => {
-            updateState(argv.agent, argv.run_id);
-        }
-    )
     .parse();

apps/cli/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rm -rf dist && tsc",
-    "copilot": "npm run build && node dist/x.js"
+    "server": "node dist/server.js",
+    "migrate-agents": "node dist/scripts/migrate-agents.js"
   },
   "files": [
     "dist",
@@ -21,7 +22,7 @@
   "description": "",
   "devDependencies": {
     "@types/node": "^24.9.1",
-    "ts-node": "^10.9.2",
+    "@types/react": "^18.3.12",
     "typescript": "^5.9.3"
   },
   "dependencies": {
@@ -30,12 +31,28 @@
     "@ai-sdk/openai": "^2.0.53",
     "@ai-sdk/openai-compatible": "^1.0.27",
     "@ai-sdk/provider": "^2.0.0",
+    "@google-cloud/local-auth": "^3.0.1",
+    "@hono/node-server": "^1.19.6",
+    "@hono/standard-validator": "^0.1.5",
     "@modelcontextprotocol/sdk": "^1.20.2",
     "@openrouter/ai-sdk-provider": "^1.2.6",
     "ai": "^5.0.102",
+    "awilix": "^12.0.5",
+    "eventsource-parser": "^1.1.2",
+    "google-auth-library": "^10.5.0",
+    "googleapis": "^169.0.0",
+    "hono": "^4.10.7",
+    "hono-openapi": "^1.1.1",
+    "ink": "^5.1.0",
+    "ink-select-input": "^6.2.0",
+    "ink-spinner": "^5.0.0",
+    "ink-text-input": "^6.0.0",
     "json-schema-to-zod": "^2.6.1",
     "nanoid": "^5.1.6",
+    "node-html-markdown": "^2.0.0",
     "ollama-ai-provider-v2": "^1.5.4",
+    "react": "^18.3.1",
+    "yaml": "^2.8.2",
     "yargs": "^18.0.0",
     "zod": "^4.1.12"
   }

apps/cli/src/agents/agents.ts

@@ -0,0 +1,35 @@
+import { z } from "zod";
+
+export const BaseTool = z.object({
+    name: z.string(),
+});
+
+export const BuiltinTool = BaseTool.extend({
+    type: z.literal("builtin"),
+});
+
+export const McpTool = BaseTool.extend({
+    type: z.literal("mcp"),
+    description: z.string(),
+    inputSchema: z.any(),
+    mcpServerName: z.string(),
+});
+
+export const AgentAsATool = BaseTool.extend({
+    type: z.literal("agent"),
+});
+
+export const ToolAttachment = z.discriminatedUnion("type", [
+    BuiltinTool,
+    McpTool,
+    AgentAsATool,
+]);
+
+export const Agent = z.object({
+    name: z.string(),
+    provider: z.string().optional(),
+    model: z.string().optional(),
+    description: z.string().optional(),
+    instructions: z.string(),
+    tools: z.record(z.string(), ToolAttachment).optional(),
+});

apps/cli/src/agents/repo.ts

@@ -0,0 +1,94 @@
+import { WorkDir } from "../config/config.js";
+import fs from "fs/promises";
+import { glob } from "node:fs/promises";
+import path from "path";
+import z from "zod";
+import { Agent } from "./agents.js";
+import { parse, stringify } from "yaml";
+
+const UpdateAgentSchema = Agent.omit({ name: true });
+
+export interface IAgentsRepo {
+    list(): Promise<z.infer<typeof Agent>[]>;
+    fetch(id: string): Promise<z.infer<typeof Agent>>;
+    create(agent: z.infer<typeof Agent>): Promise<void>;
+    update(id: string, agent: z.infer<typeof Agent>): Promise<void>;
+    delete(id: string): Promise<void>;
+}
+
+export class FSAgentsRepo implements IAgentsRepo {
+    private readonly agentsDir = path.join(WorkDir, "agents");
+
+    async list(): Promise<z.infer<typeof Agent>[]> {
+        const result: z.infer<typeof Agent>[] = [];
+
+        // list all md files in workdir/agents/
+        const matches = await Array.fromAsync(glob("**/*.md", { cwd: this.agentsDir }));
+        for (const file of matches) {
+            try {
+                const agent = await this.parseAgentMd(path.join(this.agentsDir, file));
+                result.push(agent);
+            } catch (error) {
+                console.error(`Error parsing agent ${file}: ${error instanceof Error ? error.message : String(error)}`);
+                continue;
+            }
+        }
+        return result;
+    }
+
+    private async parseAgentMd(filePath: string): Promise<z.infer<typeof Agent>> {
+        const raw = await fs.readFile(filePath, "utf8");
+
+        // strip the path prefix from the file name
+        // and the .md extension
+        const agentName = filePath
+            .replace(this.agentsDir + "/", "")
+            .replace(/\.md$/, "");
+        let agent: z.infer<typeof Agent> = {
+            name: agentName,
+            instructions: raw,
+        };
+        let content = raw;
+
+        // check for frontmatter markers at start
+        if (raw.startsWith("---")) {
+            const end = raw.indexOf("\n---", 3);
+
+            if (end !== -1) {
+                const fm = raw.slice(3, end).trim();       // YAML text
+                content = raw.slice(end + 4).trim();       // body after frontmatter
+                const yaml = parse(fm);
+                const parsed = Agent
+                    .omit({ name: true, instructions: true })
+                    .parse(yaml);
+                agent = {
+                    ...agent,
+                    ...parsed,
+                    instructions: content,
+                };
+            }
+        }
+
+        return agent;
+    }
+
+    async fetch(id: string): Promise<z.infer<typeof Agent>> {
+        return this.parseAgentMd(path.join(this.agentsDir, `${id}.md`));
+    }
+
+    async create(agent: z.infer<typeof Agent>): Promise<void> {
+        const { instructions, ...rest } = agent;
+        const contents = `---\n${stringify(rest)}\n---\n${instructions}`;
+        await fs.writeFile(path.join(this.agentsDir, `${agent.name}.md`), contents);
+    }
+
+    async update(id: string, agent: z.infer<typeof UpdateAgentSchema>): Promise<void> {
+        const { instructions, ...rest } = agent;
+        const contents = `---\n${stringify(rest)}\n---\n${instructions}`;
+        await fs.writeFile(path.join(this.agentsDir, `${id}.md`), contents);
+    }
+
+    async delete(id: string): Promise<void> {
+        await fs.unlink(path.join(this.agentsDir, `${id}.md`));
+    }
+}

apps/cli/src/agents/runtime.ts

@@ -1,19 +1,113 @@
 import { jsonSchema, ModelMessage, modelMessageSchema } from "ai";
 import fs from "fs";
 import path from "path";
-import { getModelConfig, WorkDir } from "../config/config.js";
-import { Agent, ToolAttachment } from "../entities/agent.js";
+import { WorkDir } from "../config/config.js";
+import { Agent, ToolAttachment } from "./agents.js";
 import { AssistantContentPart, AssistantMessage, Message, MessageList, ProviderOptions, ToolCallPart, ToolMessage, UserMessage } from "../entities/message.js";
-import { runIdGenerator } from "./run-id-gen.js";
 import { LanguageModel, stepCountIs, streamText, tool, Tool, ToolSet } from "ai";
 import { z } from "zod";
-import { getProvider } from "./models.js";
 import { LlmStepStreamEvent } from "../entities/llm-step-events.js";
-import { execTool } from "./exec-tool.js";
-import { AskHumanRequestEvent, RunEvent, ToolPermissionRequestEvent, ToolPermissionResponseEvent } from "../entities/run-events.js";
-import { BuiltinTools } from "./builtin-tools.js";
-import { CopilotAgent } from "../assistant/agent.js";
-import { isBlocked } from "./command-executor.js";
+import { execTool } from "../application/lib/exec-tool.js";
+import { MessageEvent, AskHumanRequestEvent, RunEvent, ToolInvocationEvent, ToolPermissionRequestEvent, ToolPermissionResponseEvent } from "../entities/run-events.js";
+import { BuiltinTools } from "../application/lib/builtin-tools.js";
+import { CopilotAgent } from "../application/assistant/agent.js";
+import { isBlocked } from "../application/lib/command-executor.js";
+import container from "../di/container.js";
+import { IModelConfigRepo } from "../models/repo.js";
+import { getProvider } from "../models/models.js";
+import { IAgentsRepo } from "./repo.js";
+import { IdGen, IMonotonicallyIncreasingIdGenerator } from "../application/lib/id-gen.js";
+import { IBus } from "../application/lib/bus.js";
+import { IMessageQueue } from "../application/lib/message-queue.js";
+import { IRunsRepo } from "../runs/repo.js";
+import { IRunsLock } from "../runs/lock.js";
+import { PrefixLogger } from "../shared/prefix-logger.js";
+
+export interface IAgentRuntime {
+    trigger(runId: string): Promise<void>;
+}
+
+export class AgentRuntime implements IAgentRuntime {
+    private runsRepo: IRunsRepo;
+    private idGenerator: IMonotonicallyIncreasingIdGenerator;
+    private bus: IBus;
+    private messageQueue: IMessageQueue;
+    private modelConfigRepo: IModelConfigRepo;
+    private runsLock: IRunsLock;
+
+    constructor({
+        runsRepo,
+        idGenerator,
+        bus,
+        messageQueue,
+        modelConfigRepo,
+        runsLock,
+    }: {
+        runsRepo: IRunsRepo;
+        idGenerator: IMonotonicallyIncreasingIdGenerator;
+        bus: IBus;
+        messageQueue: IMessageQueue;
+        modelConfigRepo: IModelConfigRepo;
+        runsLock: IRunsLock;
+    }) {
+        this.runsRepo = runsRepo;
+        this.idGenerator = idGenerator;
+        this.bus = bus;
+        this.messageQueue = messageQueue;
+        this.modelConfigRepo = modelConfigRepo;
+        this.runsLock = runsLock;
+    }
+
+    async trigger(runId: string): Promise<void> {
+        if (!await this.runsLock.lock(runId)) {
+            console.log(`unable to acquire lock on run ${runId}`);
+            return;
+        }
+        try {
+            await this.bus.publish({
+                runId,
+                type: "run-processing-start",
+                subflow: [],
+            });
+            while (true) {
+                let eventCount = 0;
+                const run = await this.runsRepo.fetch(runId);
+                if (!run) {
+                    throw new Error(`Run ${runId} not found`);
+                }
+                const state = new AgentState();
+                for (const event of run.log) {
+                    state.ingest(event);
+                }
+                for await (const event of streamAgent({
+                    state,
+                    idGenerator: this.idGenerator,
+                    runId,
+                    messageQueue: this.messageQueue,
+                    modelConfigRepo: this.modelConfigRepo,
+                })) {
+                    eventCount++;
+                    if (event.type !== "llm-stream-event") {
+                        await this.runsRepo.appendEvents(runId, [event]);
+                    }
+                    await this.bus.publish(event);
+                }
+
+                // if no events, break
+                if (!eventCount) {
+                    break;
+                }
+            }
+        } finally {
+            await this.runsLock.release(runId);
+            await this.bus.publish({
+                runId,
+                type: "run-processing-end",
+                subflow: [],
+            });
+        }
+    }
+}
 
 export async function mapAgentTool(t: z.infer<typeof ToolAttachment>): Promise<Tool> {
     switch (t.type) {
@@ -128,8 +222,8 @@ export class StreamStepMessageBuilder {
                 });
                 break;
             case "finish-step":
-               this.providerOptions = event.providerOptions;
-               break;
+                this.providerOptions = event.providerOptions;
+                break;
         }
     }
 
@@ -168,12 +262,11 @@ function normaliseAskHumanToolCall(message: z.infer<typeof AssistantMessage>) {
 }
 
 export async function loadAgent(id: string): Promise<z.infer<typeof Agent>> {
-    if (id === "copilot") {
+    if (id === "copilot" || id === "rowboatx") {
         return CopilotAgent;
     }
-    const agentPath = path.join(WorkDir, "agents", `${id}.json`);
-    const agent = fs.readFileSync(agentPath, "utf8");
-    return Agent.parse(JSON.parse(agent));
+    const repo = container.resolve<IAgentsRepo>('agentsRepo');
+    return await repo.fetch(id);
 }
 
 export function convertFromMessages(messages: z.infer<typeof Message>[]): ModelMessage[] {
@@ -262,10 +355,9 @@ async function buildTools(agent: z.infer<typeof Agent>): Promise<ToolSet> {
 }
 
 export class AgentState {
-    logger: RunLogger | null = null;
     runId: string | null = null;
     agent: z.infer<typeof Agent> | null = null;
-    agentName: string;
+    agentName: string | null = null;
     messages: z.infer<typeof MessageList> = [];
     lastAssistantMsg: z.infer<typeof AssistantMessage> | null = null;
     subflowStates: Record<string, AgentState> = {};
@@ -276,20 +368,6 @@ export class AgentState {
     allowedToolCallIds: Record<string, true> = {};
     deniedToolCallIds: Record<string, true> = {};
 
-    constructor(agentName: string, runId?: string) {
-        this.agentName = agentName;
-        this.runId = runId || runIdGenerator.next();
-        this.logger = new RunLogger(this.runId);
-        if (!runId) {
-            this.logger.log({
-                type: "start",
-                runId: this.runId,
-                agentName: this.agentName,
-                subflow: [],
-            });
-        }
-    }
-
     getPendingPermissions(): z.infer<typeof ToolPermissionRequestEvent>[] {
         const response: z.infer<typeof ToolPermissionRequestEvent>[] = [];
         for (const [id, subflowState] of Object.entries(this.subflowStates)) {
@@ -346,6 +424,9 @@ export class AgentState {
     ingest(event: z.infer<typeof RunEvent>) {
         if (event.subflow.length > 0) {
             const { subflow, ...rest } = event;
+            if (!this.subflowStates[subflow[0]]) {
+                this.subflowStates[subflow[0]] = new AgentState();
+            }
             this.subflowStates[subflow[0]].ingest({
                 ...rest,
                 subflow: subflow.slice(1),
@@ -353,6 +434,17 @@ export class AgentState {
             return;
         }
         switch (event.type) {
+            case "start":
+                this.runId = event.runId;
+                this.agentName = event.agentName;
+                break;
+            case "spawn-subflow":
+                // Seed the subflow state with its agent so downstream loadAgent works.
+                if (!this.subflowStates[event.toolCallId]) {
+                    this.subflowStates[event.toolCallId] = new AgentState();
+                }
+                this.subflowStates[event.toolCallId].agentName = event.agentName;
+                break;
             case "message":
                 this.messages.push(event.message);
                 if (event.message.content instanceof Array) {
@@ -371,9 +463,6 @@ export class AgentState {
                     this.lastAssistantMsg = event.message;
                 }
                 break;
-            case "spawn-subflow":
-                this.subflowStates[event.toolCallId] = new AgentState(event.agentName);
-                break;
             case "tool-permission-request":
                 this.pendingToolPermissionRequests[event.toolCall.toolCallId] = event;
                 break;
@@ -406,27 +495,35 @@ export class AgentState {
                 break;
         }
     }
-
-    ingestAndLog(event: z.infer<typeof RunEvent>) {
-        this.ingest(event);
-        this.logger!.log(event);
-    }
-
-    *ingestAndLogAndYield(event: z.infer<typeof RunEvent>): Generator<z.infer<typeof RunEvent>, void, unknown> {
-        this.ingestAndLog(event);
-        yield event;
-    }
 }
 
-export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<typeof RunEvent>, void, unknown> {
-    // get model config
-    const modelConfig = await getModelConfig();
+export async function* streamAgent({
+    state,
+    idGenerator,
+    runId,
+    messageQueue,
+    modelConfigRepo,
+}: {
+    state: AgentState,
+    idGenerator: IMonotonicallyIncreasingIdGenerator;
+    runId: string;
+    messageQueue: IMessageQueue;
+    modelConfigRepo: IModelConfigRepo;
+}): AsyncGenerator<z.infer<typeof RunEvent>, void, unknown> {
+    const logger = new PrefixLogger(`run-${runId}-${state.agentName}`);
+
+    async function* processEvent(event: z.infer<typeof RunEvent>): AsyncGenerator<z.infer<typeof RunEvent>, void, unknown> {
+        state.ingest(event);
+        yield event;
+    }
+
+    const modelConfig = await modelConfigRepo.getConfig();
     if (!modelConfig) {
         throw new Error("Model config not found");
     }
 
     // set up agent
-    const agent = await loadAgent(state.agentName);
+    const agent = await loadAgent(state.agentName!);
 
     // set up tools
     const tools = await buildTools(agent);
@@ -434,34 +531,31 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
     // set up provider + model
     const provider = await getProvider(agent.provider);
     const model = provider.languageModel(agent.model || modelConfig.defaults.model);
-    let loopCounter = 0;
 
+    let loopCounter = 0;
     while (true) {
-        // console.error(`loop counter: ${loopCounter++}`)
-        // if last response is from assistant and text, so exit
-        const lastMessage = state.messages[state.messages.length - 1];
-        if (lastMessage
-            && lastMessage.role === "assistant"
-            && (typeof lastMessage.content === "string"
-                || !lastMessage.content.some(part => part.type === "tool-call")
-            )
-        ) {
-            // console.error("Nothing to do, exiting (a.)")
-            return;
-        }
+        loopCounter++;
+        let loopLogger = logger.child(`iter-${loopCounter}`);
+        loopLogger.log('starting loop iteration');
 
         // execute any pending tool calls
         for (const toolCallId of Object.keys(state.pendingToolCalls)) {
             const toolCall = state.toolCallIdMap[toolCallId];
+            let _logger = loopLogger.child(`tc-${toolCallId}-${toolCall.toolName}`);
+            _logger.log('processing');
 
             // if ask-human, skip
             if (toolCall.toolName === "ask-human") {
+                _logger.log('skipping, reason: ask-human');
                 continue;
             }
 
             // if tool has been denied, deny
             if (state.deniedToolCallIds[toolCallId]) {
-                yield* state.ingestAndLogAndYield({
+                _logger.log('returning denied tool message, reason: tool has been denied');
+                yield* processEvent({
+                    runId,
+                    messageId: await idGenerator.next(),
                     type: "message",
                     message: {
                         role: "tool",
@@ -474,14 +568,18 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
                 continue;
             }
 
-            // if permission is pending on this tool call, allow execution
+            // if permission is pending on this tool call, skip execution
             if (state.pendingToolPermissionRequests[toolCallId]) {
+                _logger.log('skipping, reason: permission is pending');
                 continue;
             }
 
             // execute approved tool
-            yield* state.ingestAndLogAndYield({
+            _logger.log('executing tool');
+            yield* processEvent({
+                runId,
                 type: "tool-invocation",
+                toolCallId,
                 toolName: toolCall.toolName,
                 input: JSON.stringify(toolCall.arguments),
                 subflow: [],
@@ -489,8 +587,14 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
             let result: any = null;
             if (agent.tools![toolCall.toolName].type === "agent") {
                 let subflowState = state.subflowStates[toolCallId];
-                for await (const event of streamAgent(subflowState)) {
-                    yield* state.ingestAndLogAndYield({
+                for await (const event of streamAgent({
+                    state: subflowState,
+                    idGenerator,
+                    runId,
+                    messageQueue,
+                    modelConfigRepo,
+                })) {
+                    yield* processEvent({
                         ...event,
                         subflow: [toolCallId, ...event.subflow],
                     });
@@ -508,13 +612,17 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
                     toolCallId: toolCall.toolCallId,
                     toolName: toolCall.toolName,
                 };
-                yield* state.ingestAndLogAndYield({
+                yield* processEvent({
+                    runId,
                     type: "tool-result",
+                    toolCallId: toolCall.toolCallId,
                     toolName: toolCall.toolName,
                     result: result,
                     subflow: [],
                 });
-                yield* state.ingestAndLogAndYield({
+                yield* processEvent({
+                    runId,
+                    messageId: await idGenerator.next(),
                     type: "message",
                     message: resultMsg,
                     subflow: [],
@@ -522,19 +630,45 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
             }
         }
 
-        // if pending state, exit
+        // if waiting on user permission or ask-human, exit
         if (state.getPendingAskHumans().length || state.getPendingPermissions().length) {
-            // console.error("pending asks or permissions, exiting (b.)")
+            loopLogger.log('exiting loop, reason: pending asks or permissions');
             return;
         }
 
-        // if current message state isn't runnable, exit
-        if (state.messages.length === 0 || state.messages[state.messages.length - 1].role === "assistant") {
-            // console.error("current message state isn't runnable, exiting (c.)")
+        // get any queued user messages
+        while (true) {
+            const msg = await messageQueue.dequeue(runId);
+            if (!msg) {
+                break;
+            }
+            loopLogger.log('dequeued user message', msg.messageId);
+            yield* processEvent({
+                runId,
+                type: "message",
+                messageId: msg.messageId,
+                message: {
+                    role: "user",
+                    content: msg.message,
+                },
+                subflow: [],
+            });
+        }
+
+        // if last response is from assistant and text, exit
+        const lastMessage = state.messages[state.messages.length - 1];
+        if (lastMessage
+            && lastMessage.role === "assistant"
+            && (typeof lastMessage.content === "string"
+                || !lastMessage.content.some(part => part.type === "tool-call")
+            )
+        ) {
+            loopLogger.log('exiting loop, reason: last message is from assistant and text');
             return;
         }
 
         // run one LLM turn.
+        loopLogger.log('running llm turn');
         // stream agent response and build message
         const messageBuilder = new StreamStepMessageBuilder();
         for await (const event of streamLlm(
@@ -543,8 +677,10 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
             agent.instructions,
             tools,
         )) {
+            loopLogger.log('got llm-stream-event:', event.type)
             messageBuilder.ingest(event);
-            yield* state.ingestAndLogAndYield({
+            yield* processEvent({
+                runId,
                 type: "llm-stream-event",
                 event: event,
                 subflow: [],
@@ -553,7 +689,9 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
 
         // build and emit final message from agent response
         const message = messageBuilder.get();
-        yield* state.ingestAndLogAndYield({
+        yield* processEvent({
+            runId,
+            messageId: await idGenerator.next(),
             type: "message",
             message,
             subflow: [],
@@ -565,7 +703,9 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
                 if (part.type === "tool-call") {
                     const underlyingTool = agent.tools![part.toolName];
                     if (underlyingTool.type === "builtin" && underlyingTool.name === "ask-human") {
-                        yield* state.ingestAndLogAndYield({
+                        loopLogger.log('emitting ask-human-request, toolCallId:', part.toolCallId);
+                        yield* processEvent({
+                            runId,
                             type: "ask-human-request",
                             toolCallId: part.toolCallId,
                             query: part.arguments.question,
@@ -575,7 +715,9 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
                     if (underlyingTool.type === "builtin" && underlyingTool.name === "executeCommand") {
                         // if command is blocked, then seek permission
                         if (isBlocked(part.arguments.command)) {
-                            yield* state.ingestAndLogAndYield({
+                            loopLogger.log('emitting tool-permission-request, toolCallId:', part.toolCallId);
+                            yield* processEvent({
+                                runId,
                                 type: "tool-permission-request",
                                 toolCall: part,
                                 subflow: [],
@@ -583,13 +725,17 @@ export async function* streamAgent(state: AgentState): AsyncGenerator<z.infer<ty
                         }
                     }
                     if (underlyingTool.type === "agent" && underlyingTool.name) {
-                        yield* state.ingestAndLogAndYield({
+                        loopLogger.log('emitting spawn-subflow, toolCallId:', part.toolCallId);
+                        yield* processEvent({
+                            runId,
                             type: "spawn-subflow",
                             agentName: underlyingTool.name,
                             toolCallId: part.toolCallId,
                             subflow: [],
                         });
-                        yield* state.ingestAndLogAndYield({
+                        yield* processEvent({
+                            runId,
+                            messageId: await idGenerator.next(),
                             type: "message",
                             message: {
                                 role: "user",

apps/cli/src/app.ts

@@ -1,41 +1,21 @@
-import { AgentState, streamAgent } from "./application/lib/agent.js";
+import { AgentState, streamAgent } from "./agents/runtime.js";
 import { StreamRenderer } from "./application/lib/stream-renderer.js";
 import { stdin as input, stdout as output } from "node:process";
 import fs from "fs";
 import { promises as fsp } from "fs";
 import path from "path";
-import { WorkDir, getModelConfig, updateModelConfig } from "./application/config/config.js";
-import { RunEvent } from "./application/entities/run-events.js";
+import { WorkDir } from "./config/config.js";
+import { RunEvent } from "./entities/run-events.js";
 import { createInterface, Interface } from "node:readline/promises";
-import { ToolCallPart } from "./application/entities/message.js";
-import { Agent } from "./application/entities/agent.js";
-import { McpServerConfig, McpServerDefinition } from "./application/entities/mcp.js";
-import { Example } from "./application/entities/example.js";
+import { ToolCallPart } from "./entities/message.js";
+import { Agent } from "./agents/agents.js";
+import { McpServerConfig, McpServerDefinition } from "./mcp/schema.js";
+import { Example } from "./entities/example.js";
 import { z } from "zod";
-import { Flavor } from "./application/entities/models.js";
+import { Flavor } from "./models/models.js";
 import { examples } from "./examples/index.js";
-import { modelMessageSchema } from "ai";
-
-export async function updateState(agent: string, runId: string) {
-    const state = new AgentState(agent, runId);
-    // If running in a TTY, read run events from stdin line-by-line
-    if (!input.isTTY) {
-        return;
-    }
-
-    const rl = createInterface({ input, crlfDelay: Infinity });
-    try {
-        for await (const line of rl) {
-            if (line.trim() === "") {
-                continue;
-            }
-            const event = RunEvent.parse(JSON.parse(line));
-            state.ingestAndLog(event);
-        }
-    } finally {
-        rl.close();
-    }
-}
+import container from "./di/container.js";
+import { IModelConfigRepo } from "./models/repo.js";
 
 function renderGreeting() {
     const logo = `
@@ -61,12 +41,8 @@ export async function app(opts: {
     input?: string;
     noInteractive?: boolean;
 }) {
-    // check if model config is required
-    const c = await getModelConfig();
-    if (!c) {
-        await modelConfig();
-    }
-
+    throw new Error("Not implemented");
+    /*
     const renderer = new StreamRenderer();
     const state = new AgentState(opts.agent, opts.runId);
 
@@ -172,6 +148,7 @@ export async function app(opts: {
     } finally {
         rl?.close();
     }
+    */
 }
 
 async function getToolCallPermission(
@@ -219,7 +196,8 @@ async function getUserInput(
 
 export async function modelConfig() {
     // load existing model config
-    const config = await getModelConfig();
+    const repo = container.resolve<IModelConfigRepo>('modelConfigRepo');
+    const config = await repo.getConfig();
 
     const rl = createInterface({ input, output });
     try {
@@ -333,14 +311,7 @@ export async function modelConfig() {
             );
             const model = modelAns.trim() || modelDefault;
 
-            const newConfig = {
-                providers: { ...(config?.providers || {}) },
-                defaults: {
-                    provider: providerName!,
-                    model,
-                },
-            };
-            await updateModelConfig(newConfig as any);
+            await repo.setDefault(providerName!, model);
             console.log(`Model configuration updated. Provider set to '${providerName}'.`);
             return;
         }
@@ -391,24 +362,13 @@ export async function modelConfig() {
         );
         const model = modelAns.trim() || modelDefault;
 
-        const mergedProviders = {
-            ...(config?.providers || {}),
-            [providerName]: {
-                flavor: selectedFlavor,
-                ...(apiKey ? { apiKey } : {}),
-                ...(baseURL ? { baseURL } : {}),
-                ...(headers ? { headers } : {}),
-            },
-        };
-        const newConfig = {
-            providers: mergedProviders,
-            defaults: {
-                provider: providerName,
-                model,
-            },
-        };
-
-        await updateModelConfig(newConfig as any);
+        await repo.upsert(providerName, {
+            flavor: selectedFlavor,
+            apiKey,
+            baseURL,
+            headers,
+        });
+        await repo.setDefault(providerName, model);
         renderCurrentModel(providerName, selectedFlavor, model);
         console.log(`Configuration written to ${WorkDir}/config/models.json. You can also edit this file manually`);
     } finally {

apps/cli/src/application/assistant/agent.ts

@@ -1,4 +1,4 @@
-import { Agent, ToolAttachment } from "../entities/agent.js";
+import { Agent, ToolAttachment } from "../../agents/agents.js";
 import z from "zod";
 import { CopilotInstructions } from "./instructions.js";
 import { BuiltinTools } from "../lib/builtin-tools.js";

apps/cli/src/application/assistant/instructions.ts

@@ -1,5 +1,5 @@
 import { skillCatalog } from "./skills/index.js";
-import { WorkDir as BASE_DIR } from "../config/config.js";
+import { WorkDir as BASE_DIR } from "../../config/config.js";
 
 export const CopilotInstructions = `You are an intelligent workflow assistant helping users manage their workflows in ${BASE_DIR}. You can also help the user with general tasks.
 

apps/cli/src/application/config/config.ts

@@ -1,63 +0,0 @@
-import path from "path";
-import fs from "fs";
-import { McpServerConfig } from "../entities/mcp.js";
-import { ModelConfig } from "../entities/models.js";
-import { z } from "zod";
-import { homedir } from "os";
-
-// Resolve app root relative to compiled file location (dist/...)
-export const WorkDir = path.join(homedir(), ".rowboat");
-
-let modelConfig: z.infer<typeof ModelConfig> | null = null;
-
-const baseMcpConfig: z.infer<typeof McpServerConfig> = {
-    mcpServers: {
-    }
-};
-
-function ensureMcpConfig() {
-    const configPath = path.join(WorkDir, "config", "mcp.json");
-    if (!fs.existsSync(configPath)) {
-        fs.writeFileSync(configPath, JSON.stringify(baseMcpConfig, null, 2));
-    }
-}
-
-function ensureDirs() {
-    const ensure = (p: string) => { if (!fs.existsSync(p)) fs.mkdirSync(p, { recursive: true }); };
-    ensure(WorkDir);
-    ensure(path.join(WorkDir, "agents"));
-    ensure(path.join(WorkDir, "config"));
-    ensureMcpConfig();
-}
-
-function loadMcpServerConfig(): z.infer<typeof McpServerConfig> {
-    const configPath = path.join(WorkDir, "config", "mcp.json");
-    if (!fs.existsSync(configPath)) return { mcpServers: {} };
-    const config = fs.readFileSync(configPath, "utf8");
-    return McpServerConfig.parse(JSON.parse(config));
-}
-
-export async function getModelConfig(): Promise<z.infer<typeof ModelConfig> | null> {
-    if (modelConfig) {
-        return modelConfig;
-    }
-    const configPath = path.join(WorkDir, "config", "models.json");
-    try {
-        const config = await fs.promises.readFile(configPath, "utf8");
-        modelConfig = ModelConfig.parse(JSON.parse(config));
-        return modelConfig;
-    } catch (error) {
-        console.error(`Warning! model config not found!`);
-        return null;
-    }
-}
-
-export async function updateModelConfig(config: z.infer<typeof ModelConfig>) {
-    modelConfig = config;
-    const configPath = path.join(WorkDir, "config", "models.json");
-    await fs.promises.writeFile(configPath, JSON.stringify(config, null, 2));
-}
-
-ensureDirs();
-const { mcpServers } = loadMcpServerConfig();
-export const McpServers = mcpServers;

apps/cli/src/application/entities/mcp.ts

@@ -1,20 +0,0 @@
-import { z } from "zod";
-
-export const StdioMcpServerConfig = z.object({
-    type: z.literal("stdio").optional(),
-    command: z.string(),
-    args: z.array(z.string()).optional(),
-    env: z.record(z.string(), z.string()).optional(),
-});
-
-export const HttpMcpServerConfig = z.object({
-    type: z.literal("http").optional(),
-    url: z.string(),
-    headers: z.record(z.string(), z.string()).optional(),
-});
-
-export const McpServerDefinition = z.union([StdioMcpServerConfig, HttpMcpServerConfig]);
-
-export const McpServerConfig = z.object({
-    mcpServers: z.record(z.string(), McpServerDefinition),
-});

apps/cli/src/application/entities/models.ts

@@ -1,27 +0,0 @@
-import z from "zod";
-
-export const Flavor = z.enum([
-    "rowboat [free]",
-    "aigateway",
-    "anthropic",
-    "google",
-    "ollama",
-    "openai",
-    "openai-compatible",
-    "openrouter",
-]);
-
-export const Provider = z.object({
-    flavor: Flavor,
-    apiKey: z.string().optional(),
-    baseURL: z.string().optional(),
-    headers: z.record(z.string(), z.string()).optional(),
-});
-
-export const ModelConfig = z.object({
-    providers: z.record(z.string(), Provider),
-    defaults: z.object({
-        provider: z.string(),
-        model: z.string(),
-    }),
-});

apps/cli/src/application/lib/builtin-tools.ts

@@ -1,14 +1,13 @@
 import { z, ZodType } from "zod";
 import * as fs from "fs/promises";
 import * as path from "path";
-import { WorkDir as BASE_DIR } from "../config/config.js";
+import { WorkDir as BASE_DIR } from "../../config/config.js";
 import { executeCommand } from "./command-executor.js";
-import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
-import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-import { Client } from "@modelcontextprotocol/sdk/client";
 import { resolveSkill, availableSkills } from "../assistant/skills/index.js";
-import { McpServerDefinition, McpServerConfig } from "../entities/mcp.js";
+import { executeTool, listServers, listTools } from "../../mcp/mcp.js";
+import container from "../../di/container.js";
+import { IMcpConfigRepo } from "../..//mcp/repo.js";
+import { McpServerDefinition } from "../../mcp/schema.js";
 
 const BuiltinToolsSchema = z.record(z.string(), z.object({
     description: z.string(),
@@ -310,109 +309,33 @@ export const BuiltinTools: z.infer<typeof BuiltinToolsSchema> = {
         description: 'Add or update an MCP server in the configuration with validation. This ensures the server definition is valid before saving.',
         inputSchema: z.object({
             serverName: z.string().describe('Name/alias for the MCP server'),
-            serverType: z.enum(['stdio', 'http']).describe('Type of MCP server: "stdio" for command-based or "http" for HTTP/SSE-based'),
-            command: z.string().optional().describe('Command to execute (required for stdio type, e.g., "npx", "python", "node")'),
-            args: z.array(z.string()).optional().describe('Command arguments (optional, for stdio type)'),
-            env: z.record(z.string(), z.string()).optional().describe('Environment variables (optional, for stdio type)'),
-            url: z.string().optional().describe('HTTP/SSE endpoint URL (required for http type)'),
-            headers: z.record(z.string(), z.string()).optional().describe('HTTP headers (optional, for http type)'),
+            config: McpServerDefinition,
         }),
-        execute: async ({ serverName, serverType, command, args, env, url, headers }: { 
+        execute: async ({ serverName, config }: { 
             serverName: string;
-            serverType: 'stdio' | 'http';
-            command?: string;
-            args?: string[];
-            env?: Record<string, string>;
-            url?: string;
-            headers?: Record<string, string>;
+            config: z.infer<typeof McpServerDefinition>;
         }) => {
             try {
-                // Build server definition based on type
-                let serverDef: any;
-                if (serverType === 'stdio') {
-                    if (!command) {
-                        return {
-                            success: false,
-                            message: 'For stdio type servers, "command" is required. Example: "npx" or "python"',
-                            validationErrors: ['Missing required field: command'],
-                        };
-                    }
-                    serverDef = {
-                        type: 'stdio',
-                        command,
-                        ...(args ? { args } : {}),
-                        ...(env ? { env } : {}),
-                    };
-                } else if (serverType === 'http') {
-                    if (!url) {
-                        return {
-                            success: false,
-                            message: 'For http type servers, "url" is required. Example: "http://localhost:3000/sse"',
-                            validationErrors: ['Missing required field: url'],
-                        };
-                    }
-                    serverDef = {
-                        type: 'http',
-                        url,
-                        ...(headers ? { headers } : {}),
-                    };
-                } else {
-                    return {
-                        success: false,
-                        message: `Invalid serverType: ${serverType}. Must be "stdio" or "http"`,
-                        validationErrors: [`Invalid serverType: ${serverType}`],
-                    };
-                }
-                
-                // Validate against Zod schema
-                const validationResult = McpServerDefinition.safeParse(serverDef);
+                const validationResult = McpServerDefinition.safeParse(config);
                 if (!validationResult.success) {
                     return {
                         success: false,
                         message: 'Server definition failed validation. Check the errors below.',
                         validationErrors: validationResult.error.issues.map((e: any) => `${e.path.join('.')}: ${e.message}`),
-                        providedDefinition: serverDef,
+                        providedDefinition: config,
                     };
                 }
-                
-                // Read existing config
-                const configPath = path.join(BASE_DIR, 'config', 'mcp.json');
-                let currentConfig: z.infer<typeof McpServerConfig> = { mcpServers: {} };
-                try {
-                    const content = await fs.readFile(configPath, 'utf-8');
-                    currentConfig = McpServerConfig.parse(JSON.parse(content));
-                } catch (error: any) {
-                    if (error?.code !== 'ENOENT') {
-                        return {
-                            success: false,
-                            message: `Failed to read existing MCP config: ${error.message}`,
-                        };
-                    }
-                    // File doesn't exist, use empty config
-                }
-                
-                // Check if server already exists
-                const isUpdate = !!currentConfig.mcpServers[serverName];
-                
-                // Add/update server
-                currentConfig.mcpServers[serverName] = validationResult.data;
-                
-                // Write back to file
-                await fs.mkdir(path.dirname(configPath), { recursive: true });
-                await fs.writeFile(configPath, JSON.stringify(currentConfig, null, 2), 'utf-8');
+
+                const repo = container.resolve<IMcpConfigRepo>('mcpConfigRepo');
+                await repo.upsert(serverName, config);
                 
                 return {
                     success: true,
-                    message: `MCP server '${serverName}' ${isUpdate ? 'updated' : 'added'} successfully`,
                     serverName,
-                    serverType,
-                    isUpdate,
-                    configuration: validationResult.data,
                 };
             } catch (error) {
                 return {
-                    success: false,
-                    message: `Failed to add MCP server: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    error: `Failed to update MCP server: ${error instanceof Error ? error.message : 'Unknown error'}`,
                 };
             }
         },
@@ -421,47 +344,17 @@ export const BuiltinTools: z.infer<typeof BuiltinToolsSchema> = {
     listMcpServers: {
         description: 'List all available MCP servers from the configuration',
         inputSchema: z.object({}),
-        execute: async (): Promise<{ success: boolean, servers: any[], count: number, message: string }> => {
+        execute: async () => {
             try {
-                const configPath = path.join(BASE_DIR, 'config', 'mcp.json');
-                
-                // Check if config exists
-                try {
-                    await fs.access(configPath);
-                } catch {
-                    return {
-                        success: true,
-                        servers: [],
-						count: 0,
-                        message: 'No MCP servers configured yet',
-                    };
-                }
-                
-                const content = await fs.readFile(configPath, 'utf-8');
-                const config = JSON.parse(content);
-                
-                const servers = Object.keys(config.mcpServers || {}).map(name => {
-                    const server = config.mcpServers[name];
-                    return {
-                        name,
-                        type: 'command' in server ? 'stdio' : 'http',
-                        command: server.command,
-                        url: server.url,
-                    };
-                });
+                const result = await listServers();
                 
                 return {
-                    success: true,
-                    servers,
-                    count: servers.length,
-                    message: `Found ${servers.length} MCP server(s)`,
+                    result,
+                    count: Object.keys(result.mcpServers).length,
                 };
             } catch (error) {
                 return {
-                    success: false,
-					servers: [],
-					count: 0,
-                    message: `Failed to list MCP servers: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    error: `Failed to list MCP servers: ${error instanceof Error ? error.message : 'Unknown error'}`,
                 };
             }
         },
@@ -471,69 +364,19 @@ export const BuiltinTools: z.infer<typeof BuiltinToolsSchema> = {
         description: 'List all available tools from a specific MCP server',
         inputSchema: z.object({
             serverName: z.string().describe('Name of the MCP server to query'),
+            cursor: z.string().optional(),
         }),
-        execute: async ({ serverName }: { serverName: string }) => {
+        execute: async ({ serverName, cursor }: { serverName: string, cursor?: string }) => {
             try {
-                const configPath = path.join(BASE_DIR, 'config', 'mcp.json');
-                const content = await fs.readFile(configPath, 'utf-8');
-                const config = JSON.parse(content);
-                
-                const mcpConfig = config.mcpServers[serverName];
-                if (!mcpConfig) {
-                    return {
-                        success: false,
-                        message: `MCP server '${serverName}' not found in configuration`,
-                    };
-                }
-                
-                // Create transport based on config type
-                let transport;
-                if ('command' in mcpConfig) {
-                    transport = new StdioClientTransport({
-                        command: mcpConfig.command,
-                        args: mcpConfig.args || [],
-                        env: mcpConfig.env || {},
-                    });
-                } else {
-                    try {
-                        transport = new StreamableHTTPClientTransport(new URL(mcpConfig.url));
-                    } catch {
-                        transport = new SSEClientTransport(new URL(mcpConfig.url));
-                    }
-                }
-                
-                // Create and connect client
-                const client = new Client({
-                    name: 'rowboat-copilot',
-                    version: '1.0.0',
-                });
-                
-                await client.connect(transport);
-                
-                // List available tools
-                const toolsList = await client.listTools();
-                
-                // Close connection
-                client.close();
-                transport.close();
-                
-                const tools = toolsList.tools.map((t: any) => ({
-                    name: t.name,
-                    description: t.description || 'No description',
-                    inputSchema: t.inputSchema,
-                }));
-                
+                const result = await listTools(serverName, cursor);
                 return {
-                    success: true,
                     serverName,
-                    tools,
-                    count: tools.length,
-                    message: `Found ${tools.length} tool(s) in MCP server '${serverName}'`,
+                    result,
+                    count: result.tools.length,
                 };
             } catch (error) {
                 return {
-                    success: false,
-                    message: `Failed to list MCP tools: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                    error: `Failed to list MCP tools: ${error instanceof Error ? error.message : 'Unknown error'}`,
                 };
             }
         },
@@ -547,108 +390,19 @@ export const BuiltinTools: z.infer<typeof BuiltinToolsSchema> = {
             arguments: z.record(z.string(), z.any()).optional().describe('Arguments to pass to the tool (as key-value pairs matching the tool\'s input schema). MUST include all required parameters from the tool\'s inputSchema.'),
         }),
         execute: async ({ serverName, toolName, arguments: args = {} }: { serverName: string, toolName: string, arguments?: Record<string, any> }) => {
-            let transport: any;
-            let client: any;
-            
             try {
-                const configPath = path.join(BASE_DIR, 'config', 'mcp.json');
-                const content = await fs.readFile(configPath, 'utf-8');
-                const config = JSON.parse(content);
-                
-                const mcpConfig = config.mcpServers[serverName];
-                if (!mcpConfig) {
-                    return {
-                        success: false,
-                        message: `MCP server '${serverName}' not found in configuration. Use listMcpServers to see available servers.`,
-                    };
-                }
-                
-                // Create transport based on config type
-                if ('command' in mcpConfig) {
-                    transport = new StdioClientTransport({
-                        command: mcpConfig.command,
-                        args: mcpConfig.args || [],
-                        env: mcpConfig.env || {},
-                    });
-                } else {
-                    try {
-                        transport = new StreamableHTTPClientTransport(new URL(mcpConfig.url));
-                    } catch {
-                        transport = new SSEClientTransport(new URL(mcpConfig.url));
-                    }
-                }
-                
-                // Create and connect client
-                client = new Client({
-                    name: 'rowboat-copilot',
-                    version: '1.0.0',
-                });
-                
-                await client.connect(transport);
-                
-                // Get tool list to validate the tool exists and check schema
-                const toolsList = await client.listTools();
-                const toolDef = toolsList.tools.find((t: any) => t.name === toolName);
-                
-                if (!toolDef) {
-                    await client.close();
-                    transport.close();
-                    return {
-                        success: false,
-                        message: `Tool '${toolName}' not found in server '${serverName}'. Use listMcpTools to see available tools.`,
-                        availableTools: toolsList.tools.map((t: any) => t.name),
-                    };
-                }
-                
-                // Validate required parameters
-                const inputSchema = toolDef.inputSchema;
-                if (inputSchema && inputSchema.required && Array.isArray(inputSchema.required)) {
-                    const missingParams = inputSchema.required.filter((param: string) => !(param in args));
-                    if (missingParams.length > 0) {
-                        await client.close();
-                        transport.close();
-                        return {
-                            success: false,
-                            message: `Missing required parameters: ${missingParams.join(', ')}`,
-                            requiredParameters: inputSchema.required,
-                            providedArguments: Object.keys(args),
-                            toolSchema: inputSchema,
-                            hint: `Use listMcpTools to see the full schema for '${toolName}' and ensure all required parameters are included in the arguments field.`,
-                        };
-                    }
-                }
-                
-                // Call the tool
-                const result = await client.callTool({
-                    name: toolName,
-                    arguments: args,
-                });
-                
-                // Close connection
-                await client.close();
-                transport.close();
-                
+                const result = await executeTool(serverName, toolName, args);
                 return {
                     success: true,
                     serverName,
                     toolName,
-                    result: result.content,
+                    result,
                     message: `Successfully executed tool '${toolName}' from server '${serverName}'`,
                 };
             } catch (error) {
-                // Ensure cleanup
-                try {
-                    if (client) await client.close();
-                    if (transport) transport.close();
-                } catch (cleanupError) {
-                    // Ignore cleanup errors
-                }
-                
                 return {
                     success: false,
-                    message: `Failed to execute MCP tool: ${error instanceof Error ? error.message : 'Unknown error'}`,
-                    serverName,
-                    toolName,
+                    error: `Failed to execute MCP tool: ${error instanceof Error ? error.message : 'Unknown error'}`,
                     hint: 'Use listMcpTools to verify the tool exists and check its schema. Ensure all required parameters are provided in the arguments field.',
                 };
             }

apps/cli/src/application/lib/bus.ts

@@ -0,0 +1,35 @@
+import { RunEvent } from "../../entities/run-events.js";
+import z from "zod";
+
+export interface IBus {
+    publish(event: z.infer<typeof RunEvent>): Promise<void>;
+
+    // subscribe accepts a handler to handle events
+    // and returns a function to unsubscribe
+    subscribe(runId: string, handler: (event: z.infer<typeof RunEvent>) => Promise<void>): Promise<() => void>;
+}
+
+export class InMemoryBus implements IBus {
+    private subscribers: Map<string, ((event: z.infer<typeof RunEvent>) => Promise<void>)[]> = new Map();
+
+    async publish(event: z.infer<typeof RunEvent>): Promise<void> {
+        const pending: Promise<void>[] = [];
+        for (const subscriber of this.subscribers.get(event.runId) || []) {
+            pending.push(subscriber(event));
+        }
+        for (const subscriber of this.subscribers.get('*') || []) {
+            pending.push(subscriber(event));
+        }
+        await Promise.all(pending);
+    }
+
+    async subscribe(runId: string, handler: (event: z.infer<typeof RunEvent>) => Promise<void>): Promise<() => void> {
+        if (!this.subscribers.has(runId)) {
+            this.subscribers.set(runId, []);
+        }
+        this.subscribers.get(runId)!.push(handler);
+        return () => {
+            this.subscribers.get(runId)!.splice(this.subscribers.get(runId)!.indexOf(handler), 1);
+        };
+    }
+}

apps/cli/src/application/lib/command-executor.ts

@@ -1,6 +1,6 @@
 import { exec, execSync } from 'child_process';
 import { promisify } from 'util';
-import { getSecurityAllowList, SECURITY_CONFIG_PATH } from '../config/security.js';
+import { getSecurityAllowList, SECURITY_CONFIG_PATH } from '../../config/security.js';
 
 const execPromise = promisify(exec);
 const COMMAND_SPLIT_REGEX = /(?:\|\||&&|;|\||\n)/;

apps/cli/src/application/lib/exec-tool.ts

@@ -1,53 +1,10 @@
-import { ToolAttachment } from "../entities/agent.js";
+import { ToolAttachment } from "../../agents/agents.js";
 import { z } from "zod";
-import { McpServers } from "../config/config.js";
-import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
-import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
-import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
-import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
-import { Client } from "@modelcontextprotocol/sdk/client";
 import { BuiltinTools } from "./builtin-tools.js";
+import { executeTool } from "../../mcp/mcp.js";
 
 async function execMcpTool(agentTool: z.infer<typeof ToolAttachment> & { type: "mcp" }, input: any): Promise<any> {
-    // load mcp configuration from the tool
-    const mcpConfig = McpServers[agentTool.mcpServerName];
-    if (!mcpConfig) {
-        throw new Error(`MCP server ${agentTool.mcpServerName} not found`);
-    }
-
-    // create transport
-    let transport: Transport;
-    if ("command" in mcpConfig) {
-        transport = new StdioClientTransport({
-            command: mcpConfig.command,
-            args: mcpConfig.args,
-            env: mcpConfig.env,
-        });
-    } else {
-        // first try streamable http transport
-        try {
-            transport = new StreamableHTTPClientTransport(new URL(mcpConfig.url));
-        } catch (error) {
-            // if that fails, try sse transport
-            transport = new SSEClientTransport(new URL(mcpConfig.url));
-        }
-    }
-
-    if (!transport) {
-        throw new Error(`No transport found for ${agentTool.mcpServerName}`);
-    }
-
-    // create client
-    const client = new Client({
-        name: 'rowboatx',
-        version: '1.0.0',
-    });
-    await client.connect(transport);
-
-    // call tool
-    const result = await client.callTool({ name: agentTool.name, arguments: input });
-    client.close();
-    transport.close();
+    const result = await executeTool(agentTool.mcpServerName, agentTool.name, input);
     return result;
 }
 

apps/cli/src/application/lib/id-gen.ts

@@ -1,19 +1,23 @@
-class RunIdGenerator {
+export interface IMonotonicallyIncreasingIdGenerator {
+    next(): Promise<string>;
+}
+
+export class IdGen implements IMonotonicallyIncreasingIdGenerator {
     private lastMs = 0;
     private seq = 0;
     private readonly pid: string;
     private readonly hostTag: string;
 
-    constructor(hostTag: string = "") {
+    constructor() {
         this.pid = String(process.pid).padStart(7, "0");
-        this.hostTag = hostTag ? `-${hostTag}` : "";
+        this.hostTag = "";
     }
 
     /**
      * Returns an ISO8601-based, lexicographically sortable id string.
      * Example: 2025-11-11T04-36-29Z-0001234-h1-000
      */
-    next(): string {
+    async next(): Promise<string> {
         const now = Date.now();
         const ms = now >= this.lastMs ? now : this.lastMs; // monotonic clamp
         this.seq = ms === this.lastMs ? this.seq + 1 : 0;
@@ -27,6 +31,4 @@ class RunIdGenerator {
         const seqStr = String(this.seq).padStart(3, "0");
         return `${iso}-${this.pid}${this.hostTag}-${seqStr}`;
     }
-}
-
-export const runIdGenerator = new RunIdGenerator();
+}

apps/cli/src/application/lib/mcp.ts

@@ -1,31 +0,0 @@
-import { Client } from '@modelcontextprotocol/sdk/client/index.js';
-import { StreamableHTTPClientTransport } from '@modelcontextprotocol/sdk/client/streamableHttp.js';
-import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';
-
-export async function getMcpClient(serverUrl: string, serverName: string): Promise<Client> {
-    let client: Client | undefined = undefined;
-    const baseUrl = new URL(serverUrl);
-
-    // Try to connect using Streamable HTTP transport
-    try {
-        client = new Client({
-            name: 'streamable-http-client',
-            version: '1.0.0'
-        });
-        const transport = new StreamableHTTPClientTransport(baseUrl);
-        await client.connect(transport);
-        console.log(`[MCP] Connected using Streamable HTTP transport to ${serverName}`);
-        return client;
-    } catch (error) {
-        // If that fails with a 4xx error, try the older SSE transport
-        console.log(`[MCP] Streamable HTTP connection failed, falling back to SSE transport for ${serverName}`);
-        client = new Client({
-            name: 'sse-client',
-            version: '1.0.0'
-        });
-        const sseTransport = new SSEClientTransport(baseUrl);
-        await client.connect(sseTransport);
-        console.log(`[MCP] Connected using SSE transport to ${serverName}`);
-        return client;
-    }
-}

apps/cli/src/application/lib/message-queue.ts

@@ -0,0 +1,44 @@
+import z from "zod";
+import { IMonotonicallyIncreasingIdGenerator } from "./id-gen.js";
+
+const EnqueuedMessage = z.object({
+    messageId: z.string(),
+    message: z.string(),
+});
+
+export interface IMessageQueue {
+    enqueue(runId: string, message: string): Promise<string>;
+    dequeue(runId: string): Promise<z.infer<typeof EnqueuedMessage> | null>;
+}
+
+export class InMemoryMessageQueue implements IMessageQueue {
+    private store: Record<string, z.infer<typeof EnqueuedMessage>[]> = {};
+    private idGenerator: IMonotonicallyIncreasingIdGenerator;
+
+    constructor({
+        idGenerator,
+    }: {
+        idGenerator: IMonotonicallyIncreasingIdGenerator;
+    }) {
+        this.idGenerator = idGenerator;
+    }
+
+    async enqueue(runId: string, message: string): Promise<string> {
+        if (!this.store[runId]) {
+            this.store[runId] = [];
+        }
+        const id = await this.idGenerator.next();
+        this.store[runId].push({
+            messageId: id,
+            message,
+        });
+        return id;
+    }
+
+    async dequeue(runId: string): Promise<z.infer<typeof EnqueuedMessage> | null> {
+        if (!this.store[runId]) {
+            return null;
+        }
+        return this.store[runId].shift() ?? null;
+    }
+}

apps/cli/src/application/lib/step.ts

@@ -1,13 +0,0 @@
-import { MessageList } from "../entities/message.js";
-import { LlmStepStreamEvent } from "../entities/llm-step-events.js";
-import { z } from "zod";
-import { ToolAttachment } from "../entities/agent.js";
-
-export type StepInputT = z.infer<typeof MessageList>;
-export type StepOutputT = AsyncGenerator<z.infer<typeof LlmStepStreamEvent>, void, unknown>;
-
-export interface Step {
-    execute(input: StepInputT): StepOutputT;
-
-    tools(): Record<string, z.infer<typeof ToolAttachment>>;
-}

apps/cli/src/application/lib/stream-renderer.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
-import { RunEvent } from "../entities/run-events.js";
-import { LlmStepStreamEvent } from "../entities/llm-step-events.js";
+import { RunEvent } from "../../entities/run-events.js";
+import { LlmStepStreamEvent } from "../../entities/llm-step-events.js";
 
 export interface StreamRendererOptions {
     showHeaders?: boolean;

apps/cli/src/config/config.ts

@@ -0,0 +1,15 @@
+import path from "path";
+import fs from "fs";
+import { homedir } from "os";
+
+// Resolve app root relative to compiled file location (dist/...)
+export const WorkDir = path.join(homedir(), ".rowboat");
+
+function ensureDirs() {
+    const ensure = (p: string) => { if (!fs.existsSync(p)) fs.mkdirSync(p, { recursive: true }); };
+    ensure(WorkDir);
+    ensure(path.join(WorkDir, "agents"));
+    ensure(path.join(WorkDir, "config"));
+}
+
+ensureDirs();

apps/cli/src/di/container.ts

@@ -0,0 +1,30 @@
+import { asClass, createContainer, InjectionMode } from "awilix";
+import { FSModelConfigRepo, IModelConfigRepo } from "../models/repo.js";
+import { FSMcpConfigRepo, IMcpConfigRepo } from "../mcp/repo.js";
+import { FSAgentsRepo, IAgentsRepo } from "../agents/repo.js";
+import { FSRunsRepo, IRunsRepo } from "../runs/repo.js";
+import { IMonotonicallyIncreasingIdGenerator, IdGen } from "../application/lib/id-gen.js";
+import { IMessageQueue, InMemoryMessageQueue } from "../application/lib/message-queue.js";
+import { IBus, InMemoryBus } from "../application/lib/bus.js";
+import { IRunsLock, InMemoryRunsLock } from "../runs/lock.js";
+import { IAgentRuntime, AgentRuntime } from "../agents/runtime.js";
+
+const container = createContainer({
+    injectionMode: InjectionMode.PROXY,
+    strict: true,
+});
+
+container.register({
+    idGenerator: asClass<IMonotonicallyIncreasingIdGenerator>(IdGen).singleton(),
+    messageQueue: asClass<IMessageQueue>(InMemoryMessageQueue).singleton(),
+    bus: asClass<IBus>(InMemoryBus).singleton(),
+    runsLock: asClass<IRunsLock>(InMemoryRunsLock).singleton(),
+    agentRuntime: asClass<IAgentRuntime>(AgentRuntime).singleton(),
+
+    mcpConfigRepo: asClass<IMcpConfigRepo>(FSMcpConfigRepo).singleton(),
+    modelConfigRepo: asClass<IModelConfigRepo>(FSModelConfigRepo).singleton(),
+    agentsRepo: asClass<IAgentsRepo>(FSAgentsRepo).singleton(),
+    runsRepo: asClass<IRunsRepo>(FSRunsRepo).singleton(),
+});
+
+export default container;

apps/cli/src/entities/example.ts

@@ -0,0 +1,12 @@
+import z from "zod"
+import { Agent } from "../agents/agents.js"
+import { McpServerDefinition } from "../mcp/schema.js";
+
+export const Example = z.object({
+    id: z.string(),
+    instructions: z.string().optional(),
+    description: z.string().optional(),
+    entryAgent: z.string().optional(),
+    agents: z.array(Agent).optional(),
+    mcpServers: z.record(z.string(), McpServerDefinition).optional(),
+});

apps/cli/src/entities/run-events.ts

@@ -1,16 +1,23 @@
 import { LlmStepStreamEvent } from "./llm-step-events.js";
 import { Message, ToolCallPart } from "./message.js";
-import { Agent } from "./agent.js";
 import z from "zod";
 
 const BaseRunEvent = z.object({
+    runId: z.string(),
     ts: z.iso.datetime().optional(),
     subflow: z.array(z.string()),
 });
 
+export const RunProcessingStartEvent = BaseRunEvent.extend({
+    type: z.literal("run-processing-start"),
+});
+
+export const RunProcessingEndEvent = BaseRunEvent.extend({
+    type: z.literal("run-processing-end"),
+});
+
 export const StartEvent = BaseRunEvent.extend({
     type: z.literal("start"),
-    runId: z.string(),
     agentName: z.string(),
 });
 
@@ -27,17 +34,20 @@ export const LlmStreamEvent = BaseRunEvent.extend({
 
 export const MessageEvent = BaseRunEvent.extend({
     type: z.literal("message"),
+    messageId: z.string(),
     message: Message,
 });
 
 export const ToolInvocationEvent = BaseRunEvent.extend({
     type: z.literal("tool-invocation"),
+    toolCallId: z.string().optional(),
     toolName: z.string(),
     input: z.string(),
 });
 
 export const ToolResultEvent = BaseRunEvent.extend({
     type: z.literal("tool-result"),
+    toolCallId: z.string().optional(),
     toolName: z.string(),
     result: z.any(),
 });
@@ -71,6 +81,8 @@ export const RunErrorEvent = BaseRunEvent.extend({
 });
 
 export const RunEvent = z.union([
+    RunProcessingStartEvent,
+    RunProcessingEndEvent,
     StartEvent,
     SpawnSubFlowEvent,
     LlmStreamEvent,
@@ -82,4 +94,4 @@ export const RunEvent = z.union([
     ToolPermissionRequestEvent,
     ToolPermissionResponseEvent,
     RunErrorEvent,
-]);
+]);

apps/cli/src/examples/index.ts

@@ -1,5 +1,5 @@
 import twitterPodcast from './twitter-podcast.json' with { type: 'json' };
-import { Example } from '../application/entities/example.js';
+import { Example } from '../entities/example.js';
 import z from 'zod';
 
 export const examples: Record<string, z.infer<typeof Example>> = {

apps/cli/src/knowledge/sync_calendar.ts

@@ -0,0 +1,286 @@
+import fs from 'fs';
+import path from 'path';
+import { google } from 'googleapis';
+import { authenticate } from '@google-cloud/local-auth';
+import { OAuth2Client } from 'google-auth-library';
+import { NodeHtmlMarkdown } from 'node-html-markdown'
+
+// Configuration
+const CREDENTIALS_PATH = path.join(process.cwd(), 'credentials.json');
+const TOKEN_PATH = path.join(process.cwd(), 'token_calendar_notes.json'); // Changed to force re-auth with new scopes
+const SYNC_INTERVAL_MS = 60 * 1000;
+const SCOPES = [
+    'https://www.googleapis.com/auth/calendar.readonly',
+    'https://www.googleapis.com/auth/drive.readonly'
+];
+
+const nhm = new NodeHtmlMarkdown();
+
+// --- Auth Functions ---
+
+async function loadSavedCredentialsIfExist(): Promise<OAuth2Client | null> {
+    try {
+        if (!fs.existsSync(TOKEN_PATH)) return null;
+        const tokenContent = fs.readFileSync(TOKEN_PATH, 'utf-8');
+        const tokenData = JSON.parse(tokenContent);
+
+        const credsContent = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
+        const keys = JSON.parse(credsContent);
+        const key = keys.installed || keys.web;
+
+        const client = new google.auth.OAuth2(
+            key.client_id,
+            key.client_secret,
+            key.redirect_uris ? key.redirect_uris[0] : 'http://localhost'
+        );
+
+        client.setCredentials({
+            refresh_token: tokenData.refresh_token || tokenData.refreshToken,
+            access_token: tokenData.token || tokenData.access_token,
+            expiry_date: tokenData.expiry || tokenData.expiry_date,
+            scope: tokenData.scope
+        });
+
+        return client;
+    } catch (err) {
+        console.error("Error loading saved credentials:", err);
+        return null;
+    }
+}
+
+async function saveCredentials(client: OAuth2Client) {
+    const content = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
+    const keys = JSON.parse(content);
+    const key = keys.installed || keys.web;
+    const payload = JSON.stringify({
+        type: 'authorized_user',
+        client_id: key.client_id,
+        client_secret: key.client_secret,
+        refresh_token: client.credentials.refresh_token,
+        access_token: client.credentials.access_token,
+        expiry_date: client.credentials.expiry_date,
+    }, null, 2);
+    fs.writeFileSync(TOKEN_PATH, payload);
+}
+
+async function authorize(): Promise<OAuth2Client> {
+    let client = await loadSavedCredentialsIfExist();
+    if (client && client.credentials && client.credentials.expiry_date && client.credentials.expiry_date > Date.now()) {
+        console.log("Using existing valid token.");
+        return client;
+    }
+
+    if (client && client.credentials && (!client.credentials.expiry_date || client.credentials.expiry_date <= Date.now()) && client.credentials.refresh_token) {
+        console.log("Refreshing expired token...");
+        try {
+            await client.refreshAccessToken();
+            await saveCredentials(client);
+            return client;
+        } catch (e) {
+            console.error("Failed to refresh token:", e);
+            if (fs.existsSync(TOKEN_PATH)) fs.unlinkSync(TOKEN_PATH);
+        }
+    }
+
+    console.log("Performing new OAuth authentication...");
+    client = await authenticate({
+        scopes: SCOPES,
+        keyfilePath: CREDENTIALS_PATH,
+    }) as any;
+    if (client && client.credentials) {
+        await saveCredentials(client);
+    }
+    return client!;
+}
+
+// --- Helper Functions ---
+
+function cleanFilename(name: string): string {
+    return name.replace(/[\\/*?:\"<>|]/g, "").replace(/\s+/g, "_").substring(0, 100).trim();
+}
+
+// --- Sync Logic ---
+
+function cleanUpOldFiles(currentEventIds: Set<string>, syncDir: string) {
+    if (!fs.existsSync(syncDir)) return;
+
+    const files = fs.readdirSync(syncDir);
+    for (const filename of files) {
+        if (filename === 'sync_state.json') continue;
+
+        // We expect files like:
+        // {eventId}.json
+        // {eventId}_doc_{docId}.md
+        
+        let eventId: string | null = null;
+        
+        if (filename.endsWith('.json')) {
+            eventId = filename.replace('.json', '');
+        } else if (filename.endsWith('.md')) {
+            // Try to extract eventId from prefix
+            // Assuming eventId doesn't contain underscores usually, but if it does, this split might be fragile.
+            // Google Calendar IDs are usually alphanumeric.
+            // Let's rely on the delimiter we use: "_doc_"
+            const parts = filename.split('_doc_');
+            if (parts.length > 1) {
+                eventId = parts[0];
+            }
+        }
+
+        if (eventId && !currentEventIds.has(eventId)) {
+            try {
+                fs.unlinkSync(path.join(syncDir, filename));
+                console.log(`Removed old/out-of-window file: ${filename}`);
+            } catch (e) {
+                console.error(`Error deleting file ${filename}:`, e);
+            }
+        }
+    }
+}
+
+async function saveEvent(event: any, syncDir: string): Promise<boolean> {
+    const eventId = event.id;
+    if (!eventId) return false;
+
+    const filePath = path.join(syncDir, `${eventId}.json`);
+    
+    try {
+        fs.writeFileSync(filePath, JSON.stringify(event, null, 2));
+        return true;
+    } catch (e) {
+        console.error(`Error saving event ${eventId}:`, e);
+        return false;
+    }
+}
+
+async function processAttachments(drive: any, event: any, syncDir: string) {
+    if (!event.attachments || event.attachments.length === 0) return;
+
+    const eventId = event.id;
+    const eventTitle = event.summary || 'Untitled';
+    const eventDate = event.start?.dateTime || event.start?.date || 'Unknown';
+    const organizer = event.organizer?.email || 'Unknown';
+
+    for (const att of event.attachments) {
+        // We only care about Google Docs
+        if (att.mimeType === 'application/vnd.google-apps.document') {
+             const fileId = att.fileId;
+             const safeTitle = cleanFilename(att.title);
+             // Unique filename linked to event
+             const filename = `${eventId}_doc_${safeTitle}.md`; 
+             const filePath = path.join(syncDir, filename);
+
+             // Simple cache check: if file exists, skip. 
+             // Ideally we check modifiedTime, but that requires an extra API call per file.
+             // Given the loop interval, we can just check existence to save quota.
+             // If user updates notes, they might want them re-synced. 
+             // For now, let's just check existence. To be smarter, we'd need a state file or check API.
+             if (fs.existsSync(filePath)) continue;
+
+             try {
+                const res = await drive.files.export({
+                    fileId: fileId,
+                    mimeType: 'text/html'
+                });
+
+                const html = res.data;
+                const md = nhm.translate(html);
+
+                const frontmatter = [
+                    `# ${att.title}`,
+                    `**Event:** ${eventTitle}`,
+                    `**Date:** ${eventDate}`,
+                    `**Organizer:** ${organizer}`,
+                    `**Link:** ${att.fileUrl}`,
+                    `---`,
+                    ``
+                ].join('\n');
+
+                fs.writeFileSync(filePath, frontmatter + md);
+                console.log(`Synced Note: ${att.title} for event ${eventTitle}`);
+             } catch (e) {
+                 console.error(`Failed to download note ${att.title}:`, e);
+             }
+        }
+    }
+}
+
+async function syncCalendarWindow(auth: OAuth2Client, syncDir: string, lookbackDays: number) {
+    // Calculate window
+    const now = new Date();
+    const lookbackMs = lookbackDays * 24 * 60 * 60 * 1000;
+    const twoWeeksForwardMs = 14 * 24 * 60 * 60 * 1000;
+
+    const timeMin = new Date(now.getTime() - lookbackMs).toISOString();
+    const timeMax = new Date(now.getTime() + twoWeeksForwardMs).toISOString();
+
+    console.log(`Syncing calendar from ${timeMin} to ${timeMax} (lookback: ${lookbackDays} days)...`);
+
+    const calendar = google.calendar({ version: 'v3', auth });
+    const drive = google.drive({ version: 'v3', auth });
+
+    try {
+        const res = await calendar.events.list({
+            calendarId: 'primary',
+            timeMin: timeMin,
+            timeMax: timeMax,
+            singleEvents: true,
+            orderBy: 'startTime'
+        });
+
+        const events = res.data.items || [];
+        const currentEventIds = new Set<string>();
+
+        if (events.length === 0) {
+            console.log("No events found in this window.");
+        } else {
+            console.log(`Found ${events.length} events.`);
+            for (const event of events) {
+                if (event.id) {
+                    await saveEvent(event, syncDir);
+                    await processAttachments(drive, event, syncDir);
+                    currentEventIds.add(event.id);
+                }
+            }
+        }
+
+        cleanUpOldFiles(currentEventIds, syncDir);
+
+    } catch (error) {
+        console.error("An error occurred during calendar sync:", error);
+    }
+}
+
+async function main() {
+    console.log("Starting Google Calendar & Notes Sync (TS)...");
+    
+    const syncDirArg = process.argv[2];
+    const lookbackDaysArg = process.argv[3];
+
+    const SYNC_DIR = syncDirArg || 'synced_calendar_events';
+    const LOOKBACK_DAYS = lookbackDaysArg ? parseInt(lookbackDaysArg, 10) : 14; 
+
+    if (isNaN(LOOKBACK_DAYS) || LOOKBACK_DAYS <= 0) {
+        console.error("Error: Lookback days must be a positive number.");
+        process.exit(1);
+    }
+
+    if (!fs.existsSync(SYNC_DIR)) {
+        fs.mkdirSync(SYNC_DIR, { recursive: true });
+    }
+
+    try {
+        const auth = await authorize();
+        console.log("Authorization successful.");
+
+        while (true) {
+            await syncCalendarWindow(auth, SYNC_DIR, LOOKBACK_DAYS);
+            console.log(`Sleeping for ${SYNC_INTERVAL_MS / 1000} seconds...`);
+            await new Promise(resolve => setTimeout(resolve, SYNC_INTERVAL_MS));
+        }
+    } catch (error) {
+        console.error("Fatal error in main loop:", error);
+    }
+}
+
+main().catch(console.error);

apps/cli/src/knowledge/sync_gmail.ts

@@ -0,0 +1,368 @@
+import fs from 'fs';
+import path from 'path';
+import { google } from 'googleapis';
+import { authenticate } from '@google-cloud/local-auth';
+import { NodeHtmlMarkdown } from 'node-html-markdown'
+import { OAuth2Client } from 'google-auth-library';
+
+// Configuration
+const DEFAULT_SYNC_DIR = 'synced_emails_ts';
+const CREDENTIALS_PATH = path.join(process.cwd(), 'credentials.json');
+const TOKEN_PATH = path.join(process.cwd(), 'token_api.json'); // Reuse Python's token
+const SYNC_INTERVAL_MS = 60 * 1000;
+const SCOPES = ['https://www.googleapis.com/auth/gmail.readonly'];
+
+const nhm = new NodeHtmlMarkdown();
+
+// --- Auth Functions ---
+
+async function loadSavedCredentialsIfExist(): Promise<OAuth2Client | null> {
+    try {
+        const tokenContent = fs.readFileSync(TOKEN_PATH, 'utf-8');
+        const tokenData = JSON.parse(tokenContent);
+
+        const credsContent = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
+        const keys = JSON.parse(credsContent);
+        const key = keys.installed || keys.web;
+
+        // Manually construct credentials for google.auth.fromJSON
+        const credentials = {
+            type: 'authorized_user',
+            client_id: key.client_id,
+            client_secret: key.client_secret,
+            refresh_token: tokenData.refresh_token || tokenData.refreshToken, // Handle both cases
+            access_token: tokenData.token || tokenData.access_token, // Handle both cases
+            expiry_date: tokenData.expiry || tokenData.expiry_date
+        };
+        return google.auth.fromJSON(credentials) as OAuth2Client;
+    } catch (err) {
+        console.error("Error loading saved credentials:", err);
+        return null;
+    }
+}
+
+async function saveCredentials(client: OAuth2Client) {
+    const content = fs.readFileSync(CREDENTIALS_PATH, 'utf-8');
+    const keys = JSON.parse(content);
+    const key = keys.installed || keys.web;
+    const payload = JSON.stringify({
+        type: 'authorized_user',
+        client_id: key.client_id,
+        client_secret: key.client_secret,
+        refresh_token: client.credentials.refresh_token,
+        access_token: client.credentials.access_token,
+        expiry_date: client.credentials.expiry_date,
+    }, null, 2);
+    fs.writeFileSync(TOKEN_PATH, payload);
+}
+
+async function authorize(): Promise<OAuth2Client> {
+    let client = await loadSavedCredentialsIfExist();
+    if (client && client.credentials && client.credentials.expiry_date && client.credentials.expiry_date > Date.now()) {
+        console.log("Using existing valid token.");
+        return client;
+    }
+
+    if (client && client.credentials && (!client.credentials.expiry_date || client.credentials.expiry_date <= Date.now()) && client.credentials.refresh_token) {
+        console.log("Refreshing expired token...");
+        try {
+            await client.refreshAccessToken();
+            await saveCredentials(client); // Save refreshed token
+            return client;
+        } catch (e) {
+            console.error("Failed to refresh token:", e);
+            // Fall through to full re-auth if refresh fails
+            fs.existsSync(TOKEN_PATH) && fs.unlinkSync(TOKEN_PATH);
+        }
+    }
+
+    console.log("Performing new OAuth authentication...");
+    client = await authenticate({
+        scopes: SCOPES,
+        keyfilePath: CREDENTIALS_PATH,
+    }) as any;
+    if (client && client.credentials) {
+        await saveCredentials(client);
+    }
+    return client!;
+}
+
+// --- Helper Functions ---
+
+function cleanFilename(name: string): string {
+    return name.replace(/[\\/*?:":<>|]/g, "").substring(0, 100).trim();
+}
+
+function decodeBase64(data: string): string {
+    return Buffer.from(data, 'base64').toString('utf-8');
+}
+
+function getBody(payload: any): string {
+    let body = "";
+    if (payload.parts) {
+        for (const part of payload.parts) {
+            if (part.mimeType === 'text/plain' && part.body && part.body.data) {
+                const text = decodeBase64(part.body.data);
+                // Strip quoted lines
+                const cleanLines = text.split('\n').filter((line: string) => !line.trim().startsWith('>'));
+                body += cleanLines.join('\n');
+            } else if (part.mimeType === 'text/html' && part.body && part.body.data) {
+                const html = decodeBase64(part.body.data);
+                let md = nhm.translate(html);
+                // Simple quote stripping for MD
+                const cleanLines = md.split('\n').filter((line: string) => !line.trim().startsWith('>'));
+                body += cleanLines.join('\n');
+            } else if (part.parts) {
+                body += getBody(part);
+            }
+        }
+    } else if (payload.body && payload.body.data) {
+        const data = decodeBase64(payload.body.data);
+        if (payload.mimeType === 'text/html') {
+             let md = nhm.translate(data);
+             body += md.split('\n').filter((line: string) => !line.trim().startsWith('>')).join('\n');
+        } else {
+             body += data.split('\n').filter((line: string) => !line.trim().startsWith('>')).join('\n');
+        }
+    }
+    return body;
+}
+
+async function saveAttachment(gmail: any, userId: string, msgId: string, part: any, attachmentsDir: string): Promise<string | null> {
+    const filename = part.filename;
+    const attId = part.body?.attachmentId;
+    if (!filename || !attId) return null;
+
+    const safeName = `${msgId}_${cleanFilename(filename)}`;
+    const filePath = path.join(attachmentsDir, safeName);
+
+    if (fs.existsSync(filePath)) return safeName;
+
+    try {
+        const res = await gmail.users.messages.attachments.get({
+            userId,
+            messageId: msgId,
+            id: attId
+        });
+
+        const data = res.data.data;
+        if (data) {
+            fs.writeFileSync(filePath, Buffer.from(data, 'base64'));
+            console.log(`Saved attachment: ${safeName}`);
+            return safeName;
+        }
+    } catch (e) {
+        console.error(`Error saving attachment ${filename}:`, e);
+    }
+    return null;
+}
+
+// --- Sync Logic ---
+
+async function processThread(auth: OAuth2Client, threadId: string, syncDir: string, attachmentsDir: string) {
+    const gmail = google.gmail({ version: 'v1', auth });
+    try {
+        const res = await gmail.users.threads.get({ userId: 'me', id: threadId });
+        const thread = res.data;
+        const messages = thread.messages;
+
+        if (!messages || messages.length === 0) return;
+
+        // Subject from first message
+        const firstHeader = messages[0].payload?.headers;
+        const subject = firstHeader?.find(h => h.name === 'Subject')?.value || '(No Subject)';
+        
+        let mdContent = `# ${subject}\n\n`;
+        mdContent += `**Thread ID:** ${threadId}\n`;
+        mdContent += `**Message Count:** ${messages.length}\n\n---\n\n`;
+
+        for (const msg of messages) {
+            const msgId = msg.id!;
+            const headers = msg.payload?.headers || [];
+            const from = headers.find(h => h.name === 'From')?.value || 'Unknown';
+            const date = headers.find(h => h.name === 'Date')?.value || 'Unknown';
+
+            mdContent += `### From: ${from}\n`;
+            mdContent += `**Date:** ${date}\n\n`;
+
+            const body = getBody(msg.payload);
+            mdContent += `${body}\n\n`;
+
+            // Attachments
+            const parts: any[] = [];
+            const traverseParts = (pList: any[]) => {
+                for (const p of pList) {
+                    parts.push(p);
+                    if (p.parts) traverseParts(p.parts);
+                }
+            };
+            if (msg.payload?.parts) traverseParts(msg.payload.parts);
+
+            let attachmentsFound = false;
+            for (const part of parts) {
+                if (part.filename && part.body?.attachmentId) {
+                    const savedName = await saveAttachment(gmail, 'me', msgId, part, attachmentsDir);
+                    if (savedName) {
+                        if (!attachmentsFound) {
+                            mdContent += "**Attachments:**\n";
+                            attachmentsFound = true;
+                        }
+                        mdContent += `- [${part.filename}](attachments/${savedName})\n`;
+                    }
+                }
+            }
+            mdContent += "\n---\n\n";
+        }
+
+        fs.writeFileSync(path.join(syncDir, `${threadId}.md`), mdContent);
+        console.log(`Synced Thread: ${subject} (${threadId})`);
+
+    } catch (error) {
+        console.error(`Error processing thread ${threadId}:`, error);
+    }
+}
+
+function loadState(stateFile: string): { historyId?: string } {
+    if (fs.existsSync(stateFile)) {
+        return JSON.parse(fs.readFileSync(stateFile, 'utf-8'));
+    }
+    return {};
+}
+
+function saveState(historyId: string, stateFile: string) {
+    fs.writeFileSync(stateFile, JSON.stringify({
+        historyId,
+        last_sync: new Date().toISOString()
+    }, null, 2));
+}
+
+async function fullSync(auth: OAuth2Client, syncDir: string, attachmentsDir: string, stateFile: string, lookbackDays: number) {
+    console.log(`Performing full sync of last ${lookbackDays} days...`);
+    const gmail = google.gmail({ version: 'v1', auth });
+    
+    const pastDate = new Date();
+    pastDate.setDate(pastDate.getDate() - lookbackDays);
+    const dateQuery = pastDate.toISOString().split('T')[0].replace(/-/g, '/');
+    
+    // Get History ID
+    const profile = await gmail.users.getProfile({ userId: 'me' });
+    const currentHistoryId = profile.data.historyId!;
+
+    let pageToken: string | undefined;
+    do {
+        const res: any = await gmail.users.threads.list({
+            userId: 'me',
+            q: `after:${dateQuery}`,
+            pageToken
+        });
+        
+        const threads = res.data.threads;
+        if (threads) {
+            for (const thread of threads) {
+                await processThread(auth, thread.id!, syncDir, attachmentsDir);
+            }
+        }
+        pageToken = res.data.nextPageToken;
+    } while (pageToken);
+
+    saveState(currentHistoryId, stateFile);
+    console.log("Full sync complete.");
+}
+
+async function partialSync(auth: OAuth2Client, startHistoryId: string, syncDir: string, attachmentsDir: string, stateFile: string, lookbackDays: number) {
+    console.log(`Checking updates since historyId ${startHistoryId}...`);
+    const gmail = google.gmail({ version: 'v1', auth });
+
+    try {
+        const res = await gmail.users.history.list({
+            userId: 'me',
+            startHistoryId,
+            historyTypes: ['messageAdded']
+        });
+
+        const changes = res.data.history;
+        if (!changes || changes.length === 0) {
+            console.log("No new changes.");
+            const profile = await gmail.users.getProfile({ userId: 'me' });
+            saveState(profile.data.historyId!, stateFile);
+            return;
+        }
+
+        console.log(`Found ${changes.length} history records.`);
+        const threadIds = new Set<string>();
+        
+        for (const record of changes) {
+            if (record.messagesAdded) {
+                for (const item of record.messagesAdded) {
+                    if (item.message?.threadId) {
+                        threadIds.add(item.message.threadId);
+                    }
+                }
+            }
+        }
+
+        for (const tid of threadIds) {
+            await processThread(auth, tid, syncDir, attachmentsDir);
+        }
+
+        const profile = await gmail.users.getProfile({ userId: 'me' });
+        saveState(profile.data.historyId!, stateFile);
+
+    } catch (error: any) {
+        if (error.response?.status === 404) {
+            console.log("History ID expired. Falling back to full sync.");
+            await fullSync(auth, syncDir, attachmentsDir, stateFile, lookbackDays);
+        } else {
+            console.error("Error during partial sync:", error);
+            // If 401, remove token to force re-auth next run
+            if (error.response?.status === 401 && fs.existsSync(TOKEN_PATH)) {
+                console.log("401 Unauthorized. Deleting token to force re-authentication.");
+                fs.unlinkSync(TOKEN_PATH);
+            }
+        }
+    }
+}
+
+async function main() {
+    console.log("Starting Gmail Sync (TS)...");
+    const syncDirArg = process.argv[2];
+    const lookbackDaysArg = process.argv[3];
+
+    const SYNC_DIR = syncDirArg || DEFAULT_SYNC_DIR;
+    const LOOKBACK_DAYS = lookbackDaysArg ? parseInt(lookbackDaysArg, 10) : 7; // Default to 7 days
+
+    if (isNaN(LOOKBACK_DAYS) || LOOKBACK_DAYS <= 0) {
+        console.error("Error: Lookback days must be a positive number.");
+        process.exit(1);
+    }
+
+    const ATTACHMENTS_DIR = path.join(SYNC_DIR, 'attachments');
+    const STATE_FILE = path.join(SYNC_DIR, 'sync_state.json');
+
+    // Ensure directories exist
+    if (!fs.existsSync(SYNC_DIR)) fs.mkdirSync(SYNC_DIR, { recursive: true });
+    if (!fs.existsSync(ATTACHMENTS_DIR)) fs.mkdirSync(ATTACHMENTS_DIR, { recursive: true });
+
+    try {
+        const auth = await authorize();
+        console.log("Authorization successful.");
+        
+        while (true) {
+            const state = loadState(STATE_FILE);
+            if (!state.historyId) {
+                console.log("No history ID found, starting full sync...");
+                await fullSync(auth, SYNC_DIR, ATTACHMENTS_DIR, STATE_FILE, LOOKBACK_DAYS);
+            } else {
+                console.log("History ID found, starting partial sync...");
+                await partialSync(auth, state.historyId, SYNC_DIR, ATTACHMENTS_DIR, STATE_FILE, LOOKBACK_DAYS);
+            }
+            
+            console.log(`Sleeping for ${SYNC_INTERVAL_MS / 1000} seconds...`);
+            await new Promise(resolve => setTimeout(resolve, SYNC_INTERVAL_MS));
+        }
+    } catch (error) {
+        console.error("Fatal error in main loop:", error);
+    }
+}
+
+main().catch(console.error);

apps/cli/src/mcp/mcp.ts

@@ -0,0 +1,123 @@
+import container from "../di/container.js";
+import { Client } from "@modelcontextprotocol/sdk/client";
+import { SSEClientTransport } from "@modelcontextprotocol/sdk/client/sse.js";
+import { StreamableHTTPClientTransport } from "@modelcontextprotocol/sdk/client/streamableHttp.js";
+import z from "zod";
+import { IMcpConfigRepo } from "./repo.js";
+import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
+import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
+import {
+    connectionState,
+    ListToolsResponse,
+    McpServerDefinition,
+    McpServerList,
+} from "./schema.js";
+
+type mcpState = {
+    state: z.infer<typeof connectionState>,
+    client: Client | null,
+    error: string | null,
+};
+const clients: Record<string, mcpState> = {};
+
+async function getClient(serverName: string): Promise<Client> {
+    if (clients[serverName] && clients[serverName].state === "connected") {
+        return clients[serverName].client!;
+    }
+    const repo = container.resolve<IMcpConfigRepo>('mcpConfigRepo');
+    const { mcpServers } = await repo.getConfig();
+    const config = mcpServers[serverName];
+    if (!config) {
+        throw new Error(`MCP server ${serverName} not found`);
+    }
+    let transport: Transport | undefined = undefined;
+    try {
+        // create transport
+        if ("command" in config) {
+            transport = new StdioClientTransport({
+                command: config.command,
+                args: config.args,
+                env: config.env,
+            });
+        } else {
+            try {
+                transport = new StreamableHTTPClientTransport(new URL(config.url));
+            } catch (error) {
+                // if that fails, try sse transport
+                transport = new SSEClientTransport(new URL(config.url));
+            }
+        }
+
+        if (!transport) {
+            throw new Error(`No transport found for ${serverName}`);
+        }
+
+        // create client
+        const client = new Client({
+            name: 'rowboatx',
+            version: '1.0.0',
+        });
+        await client.connect(transport);
+
+        // store
+        clients[serverName] = {
+            state: "connected",
+            client,
+            error: null,
+        };
+        return client;
+    } catch (error) {
+        clients[serverName] = {
+            state: "error",
+            client: null,
+            error: error instanceof Error ? error.message : "Unknown error",
+        };
+        transport?.close();
+        throw error;
+    }
+}
+
+export async function cleanup() {
+    for (const [serverName, { client }] of Object.entries(clients)) {
+        await client?.transport?.close();
+        await client?.close();
+        delete clients[serverName];
+    }
+}
+
+export async function listServers(): Promise<z.infer<typeof McpServerList>> {
+    const repo = container.resolve<IMcpConfigRepo>('mcpConfigRepo');
+    const { mcpServers } = await repo.getConfig();
+    const result: z.infer<typeof McpServerList> = {
+        mcpServers: {},
+    };
+    for (const [serverName, config] of Object.entries(mcpServers)) {
+        const state = clients[serverName];
+        result.mcpServers[serverName] = {
+            config,
+            state: state ? state.state : "disconnected",
+            error: state ? state.error : null,
+        };
+    }
+    return result;
+}
+
+export async function listTools(serverName: string, cursor?: string): Promise<z.infer<typeof ListToolsResponse>> {
+    const client = await getClient(serverName);
+    const { tools, nextCursor } = await client.listTools({
+        cursor,
+    });
+    return {
+        tools,
+        nextCursor,
+    }
+}
+
+export async function executeTool(serverName: string, toolName: string, input: any): Promise<unknown> {
+    const client = await getClient(serverName);
+    const result = await client.callTool({
+        name: toolName,
+        arguments: input,
+    });
+    return result;
+}

apps/cli/src/mcp/repo.ts

@@ -0,0 +1,44 @@
+import { WorkDir } from "../config/config.js";
+import { McpServerConfig, McpServerDefinition } from "./schema.js";
+import fs from "fs/promises";
+import path from "path";
+import z from "zod";
+
+export interface IMcpConfigRepo {
+    getConfig(): Promise<z.infer<typeof McpServerConfig>>;
+    upsert(serverName: string, config: z.infer<typeof McpServerDefinition>): Promise<void>;
+    delete(serverName: string): Promise<void>;
+}
+
+export class FSMcpConfigRepo implements IMcpConfigRepo {
+    private readonly configPath = path.join(WorkDir, "config", "mcp.json");
+
+    constructor() {
+        this.ensureDefaultConfig();
+    }
+
+    private async ensureDefaultConfig(): Promise<void> {
+        try {
+            await fs.access(this.configPath);
+        } catch (error) {
+            await fs.writeFile(this.configPath, JSON.stringify({ mcpServers: {} }, null, 2));
+        }
+    }
+
+    async getConfig(): Promise<z.infer<typeof McpServerConfig>> {
+        const config = await fs.readFile(this.configPath, "utf8");
+        return McpServerConfig.parse(JSON.parse(config));
+    }
+
+    async upsert(serverName: string, config: z.infer<typeof McpServerDefinition>): Promise<void> {
+        const conf = await this.getConfig();
+        conf.mcpServers[serverName] = config;
+        await fs.writeFile(this.configPath, JSON.stringify(conf, null, 2));
+    }
+
+    async delete(serverName: string): Promise<void> {
+        const conf = await this.getConfig();
+        delete conf.mcpServers[serverName];
+        await fs.writeFile(this.configPath, JSON.stringify(conf, null, 2));
+    }
+}

apps/cli/src/mcp/schema.ts

@@ -0,0 +1,50 @@
+import z from "zod";
+
+export const StdioMcpServerConfig = z.object({
+    type: z.literal("stdio").optional(),
+    command: z.string(),
+    args: z.array(z.string()).optional(),
+    env: z.record(z.string(), z.string()).optional(),
+});
+
+export const HttpMcpServerConfig = z.object({
+    type: z.literal("http").optional(),
+    url: z.string(),
+    headers: z.record(z.string(), z.string()).optional(),
+});
+
+export const McpServerDefinition = z.union([StdioMcpServerConfig, HttpMcpServerConfig]);
+
+export const McpServerConfig = z.object({
+    mcpServers: z.record(z.string(), McpServerDefinition),
+});
+
+export const connectionState = z.enum(["disconnected", "connected", "error"]);
+
+export const McpServerList = z.object({
+    mcpServers: z.record(z.string(), z.object({
+        config: McpServerDefinition,
+        state: connectionState,
+        error: z.string().nullable(),
+    })),
+});
+
+export const Tool = z.object({
+    name: z.string(),
+    description: z.string().optional(),
+    inputSchema: z.object({
+        type: z.literal("object"),
+        properties: z.record(z.string(), z.any()).optional(),
+        required: z.array(z.string()).optional(),
+    }),
+    outputSchema: z.object({
+        type: z.literal("object"),
+        properties: z.record(z.string(), z.any()).optional(),
+        required: z.array(z.string()).optional(),
+    }).optional(),
+});
+
+export const ListToolsResponse = z.object({
+    tools: z.array(Tool),
+    nextCursor: z.string().optional(),
+});

apps/cli/src/models/models.ts

@@ -6,13 +6,42 @@ import { createAnthropic } from "@ai-sdk/anthropic";
 import { createOllama } from "ollama-ai-provider-v2";
 import { createOpenRouter } from '@openrouter/ai-sdk-provider';
 import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
-import { getModelConfig } from "../config/config.js";
+import { IModelConfigRepo } from "./repo.js";
+import container from "../di/container.js";
+import z from "zod";
+
+export const Flavor = z.enum([
+    "rowboat [free]",
+    "aigateway",
+    "anthropic",
+    "google",
+    "ollama",
+    "openai",
+    "openai-compatible",
+    "openrouter",
+]);
+
+export const Provider = z.object({
+    flavor: Flavor,
+    apiKey: z.string().optional(),
+    baseURL: z.string().optional(),
+    headers: z.record(z.string(), z.string()).optional(),
+});
+
+export const ModelConfig = z.object({
+    providers: z.record(z.string(), Provider),
+    defaults: z.object({
+        provider: z.string(),
+        model: z.string(),
+    }),
+});
 
 const providerMap: Record<string, ProviderV2> = {};
 
 export async function getProvider(name: string = ""): Promise<ProviderV2> {
     // get model conf
-    const modelConfig = await getModelConfig();
+    const repo = container.resolve<IModelConfigRepo>("modelConfigRepo");
+    const modelConfig = await repo.getConfig();
     if (!modelConfig) {
         throw new Error("Model config not found");
     }

apps/cli/src/models/repo.ts

@@ -0,0 +1,70 @@
+import { ModelConfig, Provider } from "./models.js";
+import { WorkDir } from "../config/config.js";
+import fs from "fs/promises";
+import path from "path";
+import z from "zod";
+
+export interface IModelConfigRepo {
+    getConfig(): Promise<z.infer<typeof ModelConfig>>;
+    upsert(providerName: string, config: z.infer<typeof Provider>): Promise<void>;
+    delete(providerName: string): Promise<void>;
+    setDefault(providerName: string, model: string): Promise<void>;
+}
+
+const defaultConfig: z.infer<typeof ModelConfig> = {
+    providers: {
+        "openai": {
+            flavor: "openai",
+        }
+    },
+    defaults: {
+        provider: "openai",
+        model: "gpt-5.1",
+    }
+};
+
+export class FSModelConfigRepo implements IModelConfigRepo {
+    private readonly configPath = path.join(WorkDir, "config", "models.json");
+
+    constructor() {
+        this.ensureDefaultConfig();
+    }
+
+    private async ensureDefaultConfig(): Promise<void> {
+        try {
+            await fs.access(this.configPath);
+        } catch (error) {
+            await fs.writeFile(this.configPath, JSON.stringify(defaultConfig, null, 2));
+        }
+    }
+
+    async getConfig(): Promise<z.infer<typeof ModelConfig>> {
+        const config = await fs.readFile(this.configPath, "utf8");
+        return ModelConfig.parse(JSON.parse(config));
+    }
+
+    private async setConfig(config: z.infer<typeof ModelConfig>): Promise<void> {
+        await fs.writeFile(this.configPath, JSON.stringify(config, null, 2));
+    }
+
+    async upsert(providerName: string, config: z.infer<typeof Provider>): Promise<void> {
+        const conf = await this.getConfig();
+        conf.providers[providerName] = config;
+        await this.setConfig(conf);
+    }
+
+    async delete(providerName: string): Promise<void> {
+        const conf = await this.getConfig();
+        delete conf.providers[providerName];
+        await this.setConfig(conf);
+    }
+
+    async setDefault(providerName: string, model: string): Promise<void> {
+        const conf = await this.getConfig();
+        conf.defaults = {
+            provider: providerName,
+            model,
+        };
+        await this.setConfig(conf);
+    }
+}

apps/cli/src/runs/lock.ts

@@ -0,0 +1,20 @@
+export interface IRunsLock {
+    lock(runId: string): Promise<boolean>;
+    release(runId: string): Promise<void>;
+}
+
+export class InMemoryRunsLock implements IRunsLock {
+    private locks: Record<string, boolean> = {};
+
+    async lock(runId: string): Promise<boolean> {
+        if (this.locks[runId]) {
+            return false;
+        }
+        this.locks[runId] = true;
+        return true;
+    }
+
+    async release(runId: string): Promise<void> {
+        delete this.locks[runId];
+    }
+}

apps/cli/src/runs/repo.ts

@@ -0,0 +1,144 @@
+import { Run } from "./runs.js";
+import z from "zod";
+import { IMonotonicallyIncreasingIdGenerator } from "../application/lib/id-gen.js";
+import { WorkDir } from "../config/config.js";
+import path from "path";
+import fsp from "fs/promises";
+import { RunEvent, StartEvent } from "../entities/run-events.js";
+
+export const ListRunsResponse = z.object({
+    runs: z.array(Run.pick({
+        id: true,
+        createdAt: true,
+        agentId: true,
+    })),
+    nextCursor: z.string().optional(),
+});
+
+export const CreateRunOptions = Run.pick({
+    agentId: true,
+});
+
+export interface IRunsRepo {
+    create(options: z.infer<typeof CreateRunOptions>): Promise<z.infer<typeof Run>>;
+    fetch(id: string): Promise<z.infer<typeof Run>>;
+    list(cursor?: string): Promise<z.infer<typeof ListRunsResponse>>;
+    appendEvents(runId: string, events: z.infer<typeof RunEvent>[]): Promise<void>;
+}
+
+export class FSRunsRepo implements IRunsRepo {
+    private idGenerator: IMonotonicallyIncreasingIdGenerator;
+    constructor({
+        idGenerator,
+    }: {
+        idGenerator: IMonotonicallyIncreasingIdGenerator;
+    }) {
+        this.idGenerator = idGenerator;
+    }
+
+    async appendEvents(runId: string, events: z.infer<typeof RunEvent>[]): Promise<void> {
+        await fsp.appendFile(
+            path.join(WorkDir, 'runs', `${runId}.jsonl`),
+            events.map(event => JSON.stringify(event)).join("\n") + "\n"
+        );
+    }
+
+    async create(options: z.infer<typeof CreateRunOptions>): Promise<z.infer<typeof Run>> {
+        const runId = await this.idGenerator.next();
+        const ts = new Date().toISOString();
+        const start: z.infer<typeof StartEvent> = {
+            type: "start",
+            runId,
+            agentName: options.agentId,
+            subflow: [],
+            ts,
+        };
+        await this.appendEvents(runId, [start]);
+        return {
+            id: runId,
+            createdAt: ts,
+            agentId: options.agentId,
+            log: [start],
+        };
+    }
+
+    async fetch(id: string): Promise<z.infer<typeof Run>> {
+        const contents = await fsp.readFile(path.join(WorkDir, 'runs', `${id}.jsonl`), 'utf8');
+        const events = contents.split('\n')
+            .filter(line => line.trim() !== '')
+            .map(line => RunEvent.parse(JSON.parse(line)));
+        if (events.length === 0 || events[0].type !== 'start') {
+            throw new Error('Corrupt run data');
+        }
+        return {
+            id,
+            createdAt: events[0].ts!,
+            agentId: events[0].agentName,
+            log: events,
+        };
+    }
+
+    async list(cursor?: string): Promise<z.infer<typeof ListRunsResponse>> {
+        const runsDir = path.join(WorkDir, 'runs');
+        const PAGE_SIZE = 20;
+
+        let files: string[] = [];
+        try {
+            const entries = await fsp.readdir(runsDir, { withFileTypes: true });
+            files = entries
+                .filter(e => e.isFile() && e.name.endsWith('.jsonl'))
+                .map(e => e.name);
+        } catch (err: any) {
+            if (err && err.code === 'ENOENT') {
+                return { runs: [] };
+            }
+            throw err;
+        }
+
+        files.sort((a, b) => b.localeCompare(a));
+
+        const cursorFile = cursor;
+        let startIndex = 0;
+        if (cursorFile) {
+            const exact = files.indexOf(cursorFile);
+            if (exact >= 0) {
+                startIndex = exact + 1;
+            } else {
+                const firstOlder = files.findIndex(name => name.localeCompare(cursorFile) < 0);
+                startIndex = firstOlder === -1 ? files.length : firstOlder;
+            }
+        }
+
+        const selected = files.slice(startIndex, startIndex + PAGE_SIZE);
+        const runs: z.infer<typeof ListRunsResponse>['runs'] = [];
+
+        for (const name of selected) {
+            const runId = name.slice(0, -'.jsonl'.length);
+            try {
+                const contents = await fsp.readFile(path.join(runsDir, name), 'utf8');
+                const firstLine = contents.split('\n').find(line => line.trim() !== '');
+                if (!firstLine) {
+                    continue;
+                }
+                const start = StartEvent.parse(JSON.parse(firstLine));
+                runs.push({
+                    id: runId,
+                    createdAt: start.ts!,
+                    agentId: start.agentName,
+                });
+            } catch {
+                continue;
+            }
+        }
+
+        const hasMore = startIndex + PAGE_SIZE < files.length;
+        const nextCursor = hasMore && selected.length > 0
+            ? selected[selected.length - 1]
+            : undefined;
+
+        return {
+            runs,
+            ...(nextCursor ? { nextCursor } : {}),
+        };
+    }
+}

apps/cli/src/runs/runs.ts

@@ -0,0 +1,70 @@
+import z from "zod";
+import container from "../di/container.js";
+import { IMessageQueue } from "../application/lib/message-queue.js";
+import { AskHumanResponseEvent, RunEvent, ToolPermissionResponseEvent } from "../entities/run-events.js";
+import { CreateRunOptions, IRunsRepo } from "./repo.js";
+import { IAgentRuntime } from "../agents/runtime.js";
+import { IBus } from "../application/lib/bus.js";
+
+export const ToolPermissionAuthorizePayload = ToolPermissionResponseEvent.pick({
+    subflow: true,
+    toolCallId: true,
+    response: true,
+});
+
+export const AskHumanResponsePayload = AskHumanResponseEvent.pick({
+    subflow: true,
+    toolCallId: true,
+    response: true,
+});
+
+export const Run = z.object({
+    id: z.string(),
+    createdAt: z.iso.datetime(),
+    agentId: z.string(),
+    log: z.array(RunEvent),
+});
+
+export async function createRun(opts: z.infer<typeof CreateRunOptions>): Promise<z.infer<typeof Run>> {
+    const repo = container.resolve<IRunsRepo>('runsRepo');
+    const bus = container.resolve<IBus>('bus');
+    const run = await repo.create(opts);
+    await bus.publish(run.log[0]);
+    return run;
+}
+
+export async function createMessage(runId: string, message: string): Promise<string> {
+    const queue = container.resolve<IMessageQueue>('messageQueue');
+    const id = await queue.enqueue(runId, message);
+    const runtime = container.resolve<IAgentRuntime>('agentRuntime');
+    runtime.trigger(runId);
+    return id;
+}
+
+export async function authorizePermission(runId: string, ev: z.infer<typeof ToolPermissionAuthorizePayload>): Promise<void> {
+    const repo = container.resolve<IRunsRepo>('runsRepo');
+    const event: z.infer<typeof ToolPermissionResponseEvent> = {
+        ...ev,
+        runId,
+        type: "tool-permission-response",
+    };
+    await repo.appendEvents(runId, [event]);
+    const runtime = container.resolve<IAgentRuntime>('agentRuntime');
+    runtime.trigger(runId);
+}
+
+export async function replyToHumanInputRequest(runId: string, ev: z.infer<typeof AskHumanResponsePayload>): Promise<void> {
+    const repo = container.resolve<IRunsRepo>('runsRepo');
+    const event: z.infer<typeof AskHumanResponseEvent> = {
+        ...ev,
+        runId,
+        type: "ask-human-response",
+    };
+    await repo.appendEvents(runId, [event]);
+    const runtime = container.resolve<IAgentRuntime>('agentRuntime');
+    runtime.trigger(runId);
+}
+
+export async function stop(runId: string): Promise<void> {
+    throw new Error('Not implemented');
+}

apps/cli/src/scripts/migrate-agents.ts

@@ -0,0 +1,23 @@
+import { Agent } from "../agents/agents.js";
+import { IAgentsRepo } from "../agents/repo.js";
+import { WorkDir } from "../config/config.js";
+import container from "../di/container.js";
+import { glob, readFile } from "node:fs/promises";
+import path from "path";
+
+const main = async () => {
+    const agentsRepo = container.resolve<IAgentsRepo>("agentsRepo");
+    const matches = await Array.fromAsync(glob("**/*.json", { cwd: path.join(WorkDir, "agents") }));
+    for (const file of matches) {
+        try {
+            const agent = Agent.parse(JSON.parse(await readFile(path.join(WorkDir, "agents", file), "utf8")));
+            await agentsRepo.create(agent);
+            console.error(`migrated agent ${file}`);
+        } catch (error) {
+            console.error(`Error parsing agent ${file}: ${error instanceof Error ? error.message : String(error)}`);
+            continue;
+        }
+    }
+}
+
+main();

apps/cli/src/server.ts

@@ -0,0 +1,201 @@
+import { Hono } from 'hono';
+import { serve } from '@hono/node-server'
+import { streamSSE } from 'hono/streaming'
+import { describeRoute, validator, resolver, openAPIRouteHandler } from "hono-openapi"
+import z from 'zod';
+import container from './di/container.js';
+import { executeTool, listServers, listTools } from "./mcp/mcp.js";
+import { ListToolsResponse, McpServerDefinition, McpServerList } from "./mcp/schema.js";
+import { IMcpConfigRepo } from './mcp/repo.js';
+import { IModelConfigRepo } from './models/repo.js';
+import { ModelConfig, Provider } from "./models/models.js";
+import { IAgentsRepo } from "./agents/repo.js";
+import { Agent } from "./agents/agents.js";
+import { AskHumanResponsePayload, authorizePermission, createMessage, createRun, replyToHumanInputRequest, Run, stop, ToolPermissionAuthorizePayload } from './runs/runs.js';
+import { IRunsRepo, CreateRunOptions, ListRunsResponse } from './runs/repo.js';
+import { IBus } from './application/lib/bus.js';
+import { cors } from 'hono/cors';
+
+let id = 0;
+
+const routes = new Hono()
+    .post(
+        '/runs/:runId/messages/new',
+        describeRoute({
+            summary: 'Create a new message',
+            description: 'Create a new message',
+            responses: {
+                200: {
+                    description: 'Message created',
+                    content: {
+                        'application/json': {
+                            schema: resolver(z.object({
+                                messageId: z.string(),
+                            })),
+                        },
+                    },
+                },
+            },
+        }),
+        validator('param', z.object({
+            runId: z.string(),
+        })),
+        validator('json', z.object({
+            message: z.string(),
+        })),
+        async (c) => {
+            const messageId = await createMessage(c.req.valid('param').runId, c.req.valid('json').message);
+            return c.json({
+                messageId,
+            });
+        }
+    )
+    .post(
+        '/runs/:runId/permissions/authorize',
+        describeRoute({
+            summary: 'Authorize permission',
+            description: 'Authorize a permission',
+            responses: {
+                200: {
+                    description: 'Permission authorized',
+                    content: {
+                        'application/json': {
+                            schema: resolver(z.object({
+                                success: z.literal(true),
+                            })),
+                        },
+                    }
+                },
+            },
+        }),
+        validator('param', z.object({
+            runId: z.string(),
+        })),
+        validator('json', ToolPermissionAuthorizePayload),
+        async (c) => {
+            const response = await authorizePermission(
+                c.req.valid('param').runId,
+                c.req.valid('json')
+            );
+            return c.json({
+                success: true,
+            });
+        }
+    )
+    .post(
+        '/runs/:runId/human-input-requests/:requestId/reply',
+        describeRoute({
+            summary: 'Reply to human input request',
+            description: 'Reply to a human input request',
+            responses: {
+                200: {
+                    description: 'Human input request replied',
+                },
+            },
+        }),
+        validator('param', z.object({
+            runId: z.string(),
+        })),
+        validator('json', AskHumanResponsePayload),
+        async (c) => {
+            const response = await replyToHumanInputRequest(
+                c.req.valid('param').runId,
+                c.req.valid('json')
+            );
+            return c.json({
+                success: true,
+            });
+        }
+    )
+    .post(
+        '/runs/:runId/stop',
+        describeRoute({
+            summary: 'Stop run',
+            description: 'Stop a run',
+            responses: {
+                200: {
+                    description: 'Run stopped',
+                },
+            },
+        }),
+        validator('param', z.object({
+            runId: z.string(),
+        })),
+        async (c) => {
+            const response = await stop(c.req.valid('param').runId);
+            return c.json({
+                success: true,
+            });
+        }
+    )
+    .get(
+        '/stream',
+        describeRoute({
+            summary: 'Subscribe to run events',
+            description: 'Subscribe to run events',
+        }),
+        async (c) => {
+            return streamSSE(c, async (stream) => {
+                const bus = container.resolve<IBus>('bus');
+
+                let id = 0;
+                let unsub: (() => void) | null = null;
+                let aborted = false;
+
+                stream.onAbort(() => {
+                    aborted = true;
+                    if (unsub) {
+                        unsub();
+                    }
+                });
+
+                // Subscribe to your bus
+                unsub = await bus.subscribe('*', async (event) => {
+                    if (aborted) return;
+
+                    await stream.writeSSE({
+                        data: JSON.stringify(event),
+                        event: "message",
+                        id: String(id++),
+                    });
+                });
+
+                // Keep the function alive until the client disconnects
+                while (!aborted) {
+                    await stream.sleep(1000); // any interval is fine
+                }
+            });
+        }
+    )
+    ;
+
+const app = new Hono()
+    .use("/*", cors())
+    .route("/", routes)
+    .get(
+        "/openapi.json",
+        openAPIRouteHandler(routes, {
+            documentation: {
+                info: {
+                    title: "Hono",
+                    version: "1.0.0",
+                    description: "RowboatX API",
+                },
+            },
+        }),
+    );
+
+// export default app;
+
+serve({
+    fetch: app.fetch,
+    port: Number(process.env.PORT) || 3000,
+});
+
+// GET /skills
+// POST /skills/new
+// GET /skills/<id>
+// PUT /skills/<id>
+// DELETE /skills/<id>
+
+// GET /sse

apps/cli/src/shared/prefix-logger.ts

@@ -0,0 +1,26 @@
+// create a PrefixLogger class that wraps console.log with a prefix
+// and allows chaining with a parent logger
+export class PrefixLogger {
+    private prefix: string;
+    private parent: PrefixLogger | null;
+
+    constructor(prefix: string, parent: PrefixLogger | null = null) {
+        this.prefix = prefix;
+        this.parent = parent;
+    }
+
+    log(...args: any[]) {
+        const timestamp = new Date().toISOString();
+        const prefix = '[' + this.prefix + ']';
+
+        if (this.parent) {
+            this.parent.log(prefix, ...args);
+        } else {
+            console.log(timestamp, prefix, ...args);
+        }
+    }
+
+    child(childPrefix: string): PrefixLogger {
+        return new PrefixLogger(childPrefix, this);
+    }
+}

apps/cli/src/tui/api.ts

@@ -0,0 +1,190 @@
+import { createParser } from "eventsource-parser";
+import { Agent } from "../agents/agents.js";
+import { AskHumanResponsePayload, Run, ToolPermissionAuthorizePayload } from "../runs/runs.js";
+import { ListRunsResponse } from "../runs/repo.js";
+import { ModelConfig } from "../models/models.js";
+import { RunEvent } from "../entities/run-events.js";
+import z from "zod";
+
+const HealthSchema = z.object({
+    status: z.literal("ok"),
+});
+
+const MessageResponse = z.object({
+    messageId: z.string(),
+});
+
+const SuccessSchema = z.object({
+    success: z.literal(true),
+});
+
+type RunEventType = z.infer<typeof RunEvent>;
+
+export interface RowboatApiOptions {
+    baseUrl?: string;
+}
+
+export class RowboatApi {
+    readonly baseUrl: string;
+    constructor({ baseUrl }: RowboatApiOptions = {}) {
+        this.baseUrl = baseUrl ?? process.env.ROWBOATX_SERVER_URL ?? "http://127.0.0.1:3000";
+    }
+
+    private buildUrl(pathname: string): string {
+        return new URL(pathname, this.baseUrl).toString();
+    }
+
+    private async request<T>(pathname: string, init?: RequestInit): Promise<T> {
+        const headers: Record<string, string> = {
+            Accept: "application/json",
+        };
+        if (init?.headers instanceof Headers) {
+            init.headers.forEach((value, key) => {
+                headers[key] = value;
+            });
+        } else if (Array.isArray(init?.headers)) {
+            for (const [key, value] of init.headers) {
+                headers[key] = value;
+            }
+        } else if (init?.headers) {
+            Object.assign(headers, init.headers as Record<string, string>);
+        }
+        if (init?.body && !headers["Content-Type"]) {
+            headers["Content-Type"] = "application/json";
+        }
+        const response = await fetch(this.buildUrl(pathname), {
+            method: "GET",
+            ...init,
+            headers,
+        });
+        if (!response.ok) {
+            const text = await response.text().catch(() => "");
+            throw new Error(`Request to ${pathname} failed (${response.status}): ${text || response.statusText}`);
+        }
+        if (response.status === 204) {
+            return undefined as T;
+        }
+        const text = await response.text();
+        if (!text) {
+            return undefined as T;
+        }
+        return JSON.parse(text) as T;
+    }
+
+    async getHealth(): Promise<z.infer<typeof HealthSchema>> {
+        const payload = await this.request("/health");
+        return HealthSchema.parse(payload);
+    }
+
+    async getModelConfig(): Promise<z.infer<typeof ModelConfig>> {
+        const payload = await this.request("/models");
+        return ModelConfig.parse(payload);
+    }
+
+    async listAgents(): Promise<z.infer<typeof Agent>[]> {
+        const payload = await this.request("/agents");
+        return Agent.array().parse(payload);
+    }
+
+    async listRuns(cursor?: string): Promise<z.infer<typeof ListRunsResponse>> {
+        const searchParams = new URLSearchParams();
+        if (cursor) {
+            searchParams.set("cursor", cursor);
+        }
+        const payload = await this.request(`/runs${searchParams.size ? `?${searchParams.toString()}` : ""}`);
+        return ListRunsResponse.parse(payload);
+    }
+
+    async getRun(runId: string): Promise<z.infer<typeof Run>> {
+        const payload = await this.request(`/runs/${encodeURIComponent(runId)}`);
+        return Run.parse(payload);
+    }
+
+    async createRun(agentId: string): Promise<z.infer<typeof Run>> {
+        const payload = await this.request("/runs/new", {
+            method: "POST",
+            body: JSON.stringify({ agentId }),
+        });
+        return Run.parse(payload);
+    }
+
+    async sendMessage(runId: string, message: string): Promise<z.infer<typeof MessageResponse>> {
+        const payload = await this.request(`/runs/${encodeURIComponent(runId)}/messages/new`, {
+            method: "POST",
+            body: JSON.stringify({ message }),
+        });
+        return MessageResponse.parse(payload);
+    }
+
+    async authorizeTool(runId: string, payload: z.infer<typeof ToolPermissionAuthorizePayload>): Promise<void> {
+        const response = await this.request(`/runs/${encodeURIComponent(runId)}/permissions/authorize`, {
+            method: "POST",
+            body: JSON.stringify(payload),
+        });
+        SuccessSchema.parse(response);
+    }
+
+    async replyToHuman(runId: string, requestId: string, payload: z.infer<typeof AskHumanResponsePayload>): Promise<void> {
+        const response = await this.request(`/runs/${encodeURIComponent(runId)}/human-input-requests/${encodeURIComponent(requestId)}/reply`, {
+            method: "POST",
+            body: JSON.stringify(payload),
+        });
+        SuccessSchema.parse(response);
+    }
+
+    async stopRun(runId: string): Promise<void> {
+        const response = await this.request(`/runs/${encodeURIComponent(runId)}/stop`, {
+            method: "POST",
+        });
+        SuccessSchema.parse(response);
+    }
+
+    async subscribeToEvents(onEvent: (event: RunEventType) => void, onError?: (error: Error) => void): Promise<() => void> {
+        const controller = new AbortController();
+        const response = await fetch(this.buildUrl("/stream"), {
+            method: "GET",
+            headers: {
+                Accept: "text/event-stream",
+            },
+            signal: controller.signal,
+        });
+        if (!response.ok || !response.body) {
+            throw new Error(`Failed to subscribe to event stream (${response.status})`);
+        }
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        const parser = createParser((event) => {
+            if (event.type !== "event" || !event.data) {
+                return;
+            }
+            try {
+                const parsed = RunEvent.parse(JSON.parse(event.data));
+                onEvent(parsed);
+            } catch (error) {
+                onError?.(error instanceof Error ? error : new Error(String(error)));
+            }
+        });
+
+        (async () => {
+            try {
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) {
+                        break;
+                    }
+                    parser.feed(decoder.decode(value, { stream: true }));
+                }
+            } catch (error) {
+                if (controller.signal.aborted) {
+                    return;
+                }
+                onError?.(error instanceof Error ? error : new Error(String(error)));
+            }
+        })();
+
+        return () => {
+            controller.abort();
+            reader.cancel().catch(() => undefined);
+        };
+    }
+}

apps/cli/src/tui/index.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { render } from "ink";
+import { RowboatTui } from "./ui.js";
+
+export function runTui({ serverUrl }: { serverUrl?: string }) {
+    const baseUrl = serverUrl ?? process.env.ROWBOATX_SERVER_URL ?? "http://127.0.0.1:3000";
+    render(<RowboatTui serverUrl={baseUrl} />);
+}

apps/cli/tsconfig.json

@@ -11,6 +11,7 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "sourceMap": true,
+    "jsx": "react-jsx",
     "paths": {
       "@/*": [
         "./src/*"

apps/rowboatx/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# 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
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/rowboatx/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/rowboatx/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

apps/rowboatx/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "RowboatX",
+  description: "RowboatX interface",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className="antialiased" suppressHydrationWarning>
+        {children}
+      </body>
+    </html>
+  );
+}

apps/rowboatx/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

apps/rowboatx/components/ai-elements/artifact.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { type LucideIcon, XIcon } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type ArtifactProps = HTMLAttributes<HTMLDivElement>;
+
+export const Artifact = ({ className, ...props }: ArtifactProps) => (
+  <div
+    className={cn(
+      "flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactHeaderProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactHeader = ({
+  className,
+  ...props
+}: ArtifactHeaderProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between border-b bg-muted/50 px-4 py-3",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ArtifactCloseProps = ComponentProps<typeof Button>;
+
+export const ArtifactClose = ({
+  className,
+  children,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactCloseProps) => (
+  <Button
+    className={cn(
+      "size-8 p-0 text-muted-foreground hover:text-foreground",
+      className
+    )}
+    size={size}
+    type="button"
+    variant={variant}
+    {...props}
+  >
+    {children ?? <XIcon className="size-4" />}
+    <span className="sr-only">Close</span>
+  </Button>
+);
+
+export type ArtifactTitleProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactTitle = ({ className, ...props }: ArtifactTitleProps) => (
+  <p
+    className={cn("font-medium text-foreground text-sm", className)}
+    {...props}
+  />
+);
+
+export type ArtifactDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+
+export const ArtifactDescription = ({
+  className,
+  ...props
+}: ArtifactDescriptionProps) => (
+  <p className={cn("text-muted-foreground text-sm", className)} {...props} />
+);
+
+export type ArtifactActionsProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactActions = ({
+  className,
+  ...props
+}: ArtifactActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props} />
+);
+
+export type ArtifactActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+  icon?: LucideIcon;
+};
+
+export const ArtifactAction = ({
+  tooltip,
+  label,
+  icon: Icon,
+  children,
+  className,
+  size = "sm",
+  variant = "ghost",
+  ...props
+}: ArtifactActionProps) => {
+  const button = (
+    <Button
+      className={cn(
+        "size-8 p-0 text-muted-foreground hover:text-foreground",
+        className
+      )}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {Icon ? <Icon className="size-4" /> : children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+export type ArtifactContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const ArtifactContent = ({
+  className,
+  ...props
+}: ArtifactContentProps) => (
+  <div className={cn("flex-1 overflow-auto p-4", className)} {...props} />
+);

apps/rowboatx/components/ai-elements/canvas.tsx

@@ -0,0 +1,22 @@
+import { Background, ReactFlow, type ReactFlowProps } from "@xyflow/react";
+import type { ReactNode } from "react";
+import "@xyflow/react/dist/style.css";
+
+type CanvasProps = ReactFlowProps & {
+  children?: ReactNode;
+};
+
+export const Canvas = ({ children, ...props }: CanvasProps) => (
+  <ReactFlow
+    deleteKeyCode={["Backspace", "Delete"]}
+    fitView
+    panOnDrag={false}
+    panOnScroll
+    selectionOnDrag={true}
+    zoomOnDoubleClick={false}
+    {...props}
+  >
+    <Background bgColor="var(--sidebar)" />
+    {children}
+  </ReactFlow>
+);

apps/rowboatx/components/ai-elements/chain-of-thought.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import {
+  BrainIcon,
+  ChevronDownIcon,
+  DotIcon,
+  type LucideIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useMemo } from "react";
+
+type ChainOfThoughtContextValue = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+};
+
+const ChainOfThoughtContext = createContext<ChainOfThoughtContextValue | null>(
+  null
+);
+
+const useChainOfThought = () => {
+  const context = useContext(ChainOfThoughtContext);
+  if (!context) {
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  }
+  return context;
+};
+
+export type ChainOfThoughtProps = ComponentProps<"div"> & {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export const ChainOfThought = memo(
+  ({
+    className,
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    children,
+    ...props
+  }: ChainOfThoughtProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+
+    const chainOfThoughtContext = useMemo(
+      () => ({ isOpen, setIsOpen }),
+      [isOpen, setIsOpen]
+    );
+
+    return (
+      <ChainOfThoughtContext.Provider value={chainOfThoughtContext}>
+        <div
+          className={cn("not-prose max-w-prose space-y-4", className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </ChainOfThoughtContext.Provider>
+    );
+  }
+);
+
+export type ChainOfThoughtHeaderProps = ComponentProps<
+  typeof CollapsibleTrigger
+>;
+
+export const ChainOfThoughtHeader = memo(
+  ({ className, children, ...props }: ChainOfThoughtHeaderProps) => {
+    const { isOpen, setIsOpen } = useChainOfThought();
+
+    return (
+      <Collapsible onOpenChange={setIsOpen} open={isOpen}>
+        <CollapsibleTrigger
+          className={cn(
+            "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+            className
+          )}
+          {...props}
+        >
+          <BrainIcon className="size-4" />
+          <span className="flex-1 text-left">
+            {children ?? "Chain of Thought"}
+          </span>
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen ? "rotate-180" : "rotate-0"
+            )}
+          />
+        </CollapsibleTrigger>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtStepProps = ComponentProps<"div"> & {
+  icon?: LucideIcon;
+  label: ReactNode;
+  description?: ReactNode;
+  status?: "complete" | "active" | "pending";
+};
+
+export const ChainOfThoughtStep = memo(
+  ({
+    className,
+    icon: Icon = DotIcon,
+    label,
+    description,
+    status = "complete",
+    children,
+    ...props
+  }: ChainOfThoughtStepProps) => {
+    const statusStyles = {
+      complete: "text-muted-foreground",
+      active: "text-foreground",
+      pending: "text-muted-foreground/50",
+    };
+
+    return (
+      <div
+        className={cn(
+          "flex gap-2 text-sm",
+          statusStyles[status],
+          "fade-in-0 slide-in-from-top-2 animate-in",
+          className
+        )}
+        {...props}
+      >
+        <div className="relative mt-0.5">
+          <Icon className="size-4" />
+          <div className="-mx-px absolute top-7 bottom-0 left-1/2 w-px bg-border" />
+        </div>
+        <div className="flex-1 space-y-2 overflow-hidden">
+          <div>{label}</div>
+          {description && (
+            <div className="text-muted-foreground text-xs">{description}</div>
+          )}
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+export type ChainOfThoughtSearchResultsProps = ComponentProps<"div">;
+
+export const ChainOfThoughtSearchResults = memo(
+  ({ className, ...props }: ChainOfThoughtSearchResultsProps) => (
+    <div
+      className={cn("flex flex-wrap items-center gap-2", className)}
+      {...props}
+    />
+  )
+);
+
+export type ChainOfThoughtSearchResultProps = ComponentProps<typeof Badge>;
+
+export const ChainOfThoughtSearchResult = memo(
+  ({ className, children, ...props }: ChainOfThoughtSearchResultProps) => (
+    <Badge
+      className={cn("gap-1 px-2 py-0.5 font-normal text-xs", className)}
+      variant="secondary"
+      {...props}
+    >
+      {children}
+    </Badge>
+  )
+);
+
+export type ChainOfThoughtContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const ChainOfThoughtContent = memo(
+  ({ className, children, ...props }: ChainOfThoughtContentProps) => {
+    const { isOpen } = useChainOfThought();
+
+    return (
+      <Collapsible open={isOpen}>
+        <CollapsibleContent
+          className={cn(
+            "mt-2 space-y-3",
+            "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+);
+
+export type ChainOfThoughtImageProps = ComponentProps<"div"> & {
+  caption?: string;
+};
+
+export const ChainOfThoughtImage = memo(
+  ({ className, children, caption, ...props }: ChainOfThoughtImageProps) => (
+    <div className={cn("mt-2 space-y-2", className)} {...props}>
+      <div className="relative flex max-h-[22rem] items-center justify-center overflow-hidden rounded-lg bg-muted p-3">
+        {children}
+      </div>
+      {caption && <p className="text-muted-foreground text-xs">{caption}</p>}
+    </div>
+  )
+);
+
+ChainOfThought.displayName = "ChainOfThought";
+ChainOfThoughtHeader.displayName = "ChainOfThoughtHeader";
+ChainOfThoughtStep.displayName = "ChainOfThoughtStep";
+ChainOfThoughtSearchResults.displayName = "ChainOfThoughtSearchResults";
+ChainOfThoughtSearchResult.displayName = "ChainOfThoughtSearchResult";
+ChainOfThoughtContent.displayName = "ChainOfThoughtContent";
+ChainOfThoughtImage.displayName = "ChainOfThoughtImage";

apps/rowboatx/components/ai-elements/checkpoint.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { BookmarkIcon, type LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+
+export const Checkpoint = ({
+  className,
+  children,
+  ...props
+}: CheckpointProps) => (
+  <div
+    className={cn("flex items-center gap-0.5 text-muted-foreground overflow-hidden", className)}
+    {...props}
+  >
+    {children}
+    <Separator />
+  </div>
+);
+
+export type CheckpointIconProps = LucideProps;
+
+export const CheckpointIcon = ({
+  className,
+  children,
+  ...props
+}: CheckpointIconProps) =>
+  children ?? (
+    <BookmarkIcon className={cn("size-4 shrink-0", className)} {...props} />
+  );
+
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const CheckpointTrigger = ({
+  children,
+  className,
+  variant = "ghost",
+  size = "sm",
+  tooltip,
+  ...props
+}: CheckpointTriggerProps) =>
+  tooltip ? (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className={cn(className)}
+          size={size}
+          type="button"
+          variant={variant}
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent align="start" side="bottom">
+        {tooltip}
+      </TooltipContent>
+    </Tooltip>
+  ) : (
+    <Button
+      className={cn(className)}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children}
+    </Button>
+  );

apps/rowboatx/components/ai-elements/code-block.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { CheckIcon, CopyIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { type BundledLanguage, codeToHtml, type ShikiTransformer } from "shiki";
+
+type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
+  code: string;
+  language: BundledLanguage;
+  showLineNumbers?: boolean;
+};
+
+type CodeBlockContextType = {
+  code: string;
+};
+
+const CodeBlockContext = createContext<CodeBlockContextType>({
+  code: "",
+});
+
+const lineNumberTransformer: ShikiTransformer = {
+  name: "line-numbers",
+  line(node, line) {
+    node.children.unshift({
+      type: "element",
+      tagName: "span",
+      properties: {
+        className: [
+          "inline-block",
+          "min-w-10",
+          "mr-4",
+          "text-right",
+          "select-none",
+          "text-muted-foreground",
+        ],
+      },
+      children: [{ type: "text", value: String(line) }],
+    });
+  },
+};
+
+export async function highlightCode(
+  code: string,
+  language: BundledLanguage,
+  showLineNumbers = false
+) {
+  const transformers: ShikiTransformer[] = showLineNumbers
+    ? [lineNumberTransformer]
+    : [];
+
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-light",
+      transformers,
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: "one-dark-pro",
+      transformers,
+    }),
+  ]);
+}
+
+export const CodeBlock = ({
+  code,
+  language,
+  showLineNumbers = false,
+  className,
+  children,
+  ...props
+}: CodeBlockProps) => {
+  const [html, setHtml] = useState<string>("");
+  const [darkHtml, setDarkHtml] = useState<string>("");
+  const mounted = useRef(false);
+
+  useEffect(() => {
+    highlightCode(code, language, showLineNumbers).then(([light, dark]) => {
+      if (!mounted.current) {
+        setHtml(light);
+        setDarkHtml(dark);
+        mounted.current = true;
+      }
+    });
+
+    return () => {
+      mounted.current = false;
+    };
+  }, [code, language, showLineNumbers]);
+
+  return (
+    <CodeBlockContext.Provider value={{ code }}>
+      <div
+        className={cn(
+          "group relative w-full overflow-hidden rounded-md border bg-background text-foreground",
+          className
+        )}
+        {...props}
+      >
+        <div className="relative">
+          <div
+            className="overflow-auto dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+          <div
+            className="hidden overflow-auto dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: "this is needed."
+            dangerouslySetInnerHTML={{ __html: darkHtml }}
+          />
+          {children && (
+            <div className="absolute top-2 right-2 flex items-center gap-2">
+              {children}
+            </div>
+          )}
+        </div>
+      </div>
+    </CodeBlockContext.Provider>
+  );
+};
+
+export type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {
+  onCopy?: () => void;
+  onError?: (error: Error) => void;
+  timeout?: number;
+};
+
+export const CodeBlockCopyButton = ({
+  onCopy,
+  onError,
+  timeout = 2000,
+  children,
+  className,
+  ...props
+}: CodeBlockCopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { code } = useContext(CodeBlockContext);
+
+  const copyToClipboard = async () => {
+    if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
+      onError?.(new Error("Clipboard API not available"));
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(code);
+      setIsCopied(true);
+      onCopy?.();
+      setTimeout(() => setIsCopied(false), timeout);
+    } catch (error) {
+      onError?.(error as Error);
+    }
+  };
+
+  const Icon = isCopied ? CheckIcon : CopyIcon;
+
+  return (
+    <Button
+      className={cn("shrink-0", className)}
+      onClick={copyToClipboard}
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <Icon size={14} />}
+    </Button>
+  );
+};

apps/rowboatx/components/ai-elements/confirmation.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { ToolUIPart } from "ai";
+import {
+  type ComponentProps,
+  createContext,
+  type ReactNode,
+  useContext,
+} from "react";
+
+type ToolUIPartApproval =
+  | {
+      id: string;
+      approved?: never;
+      reason?: never;
+    }
+  | {
+      id: string;
+      approved: boolean;
+      reason?: string;
+    }
+  | {
+      id: string;
+      approved: true;
+      reason?: string;
+    }
+  | {
+      id: string;
+      approved: true;
+      reason?: string;
+    }
+  | {
+      id: string;
+      approved: false;
+      reason?: string;
+    }
+  | undefined;
+
+type ConfirmationContextValue = {
+  approval: ToolUIPartApproval;
+  state: ToolUIPart["state"];
+};
+
+const ConfirmationContext = createContext<ConfirmationContextValue | null>(
+  null
+);
+
+const useConfirmation = () => {
+  const context = useContext(ConfirmationContext);
+
+  if (!context) {
+    throw new Error("Confirmation components must be used within Confirmation");
+  }
+
+  return context;
+};
+
+export type ConfirmationProps = ComponentProps<typeof Alert> & {
+  approval?: ToolUIPartApproval;
+  state: ToolUIPart["state"];
+};
+
+export const Confirmation = ({
+  className,
+  approval,
+  state,
+  ...props
+}: ConfirmationProps) => {
+  if (!approval || state === "input-streaming" || state === "input-available") {
+    return null;
+  }
+
+  return (
+    <ConfirmationContext.Provider value={{ approval, state }}>
+      <Alert className={cn("flex flex-col gap-2", className)} {...props} />
+    </ConfirmationContext.Provider>
+  );
+};
+
+export type ConfirmationTitleProps = ComponentProps<typeof AlertDescription>;
+
+export const ConfirmationTitle = ({
+  className,
+  ...props
+}: ConfirmationTitleProps) => (
+  <AlertDescription className={cn("inline", className)} {...props} />
+);
+
+export type ConfirmationRequestProps = {
+  children?: ReactNode;
+};
+
+export const ConfirmationRequest = ({ children }: ConfirmationRequestProps) => {
+  const { state } = useConfirmation();
+
+  // Only show when approval is requested
+  // @ts-expect-error state only available in AI SDK v6
+  if (state !== "approval-requested") {
+    return null;
+  }
+
+  return children;
+};
+
+export type ConfirmationAcceptedProps = {
+  children?: ReactNode;
+};
+
+export const ConfirmationAccepted = ({
+  children,
+}: ConfirmationAcceptedProps) => {
+  const { approval, state } = useConfirmation();
+
+  // Only show when approved and in response states
+  if (
+    !approval?.approved ||
+        // @ts-expect-error state only available in AI SDK v6
+    (state !== "approval-responded" &&
+        // @ts-expect-error state only available in AI SDK v6
+      state !== "output-denied" &&
+      state !== "output-available")
+  ) {
+    return null;
+  }
+
+  return children;
+};
+
+export type ConfirmationRejectedProps = {
+  children?: ReactNode;
+};
+
+export const ConfirmationRejected = ({
+  children,
+}: ConfirmationRejectedProps) => {
+  const { approval, state } = useConfirmation();
+
+  // Only show when rejected and in response states
+  if (
+    approval?.approved !== false ||
+        // @ts-expect-error state only available in AI SDK v6
+    (state !== "approval-responded" &&
+        // @ts-expect-error state only available in AI SDK v6
+      state !== "output-denied" &&
+      state !== "output-available")
+  ) {
+    return null;
+  }
+
+  return children;
+};
+
+export type ConfirmationActionsProps = ComponentProps<"div">;
+
+export const ConfirmationActions = ({
+  className,
+  ...props
+}: ConfirmationActionsProps) => {
+  const { state } = useConfirmation();
+
+  // Only show when approval is requested
+  // @ts-expect-error state only available in AI SDK v6
+  if (state !== "approval-requested") {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn("flex items-center justify-end gap-2 self-end", className)}
+      {...props}
+    />
+  );
+};
+
+export type ConfirmationActionProps = ComponentProps<typeof Button>;
+
+export const ConfirmationAction = (props: ConfirmationActionProps) => (
+  <Button className="h-8 px-3 text-sm" type="button" {...props} />
+);

apps/rowboatx/components/ai-elements/connection.tsx

@@ -0,0 +1,28 @@
+import type { ConnectionLineComponent } from "@xyflow/react";
+
+const HALF = 0.5;
+
+export const Connection: ConnectionLineComponent = ({
+  fromX,
+  fromY,
+  toX,
+  toY,
+}) => (
+  <g>
+    <path
+      className="animated"
+      d={`M${fromX},${fromY} C ${fromX + (toX - fromX) * HALF},${fromY} ${fromX + (toX - fromX) * HALF},${toY} ${toX},${toY}`}
+      fill="none"
+      stroke="var(--color-ring)"
+      strokeWidth={1}
+    />
+    <circle
+      cx={toX}
+      cy={toY}
+      fill="#fff"
+      r={3}
+      stroke="var(--color-ring)"
+      strokeWidth={1}
+    />
+  </g>
+);

apps/rowboatx/components/ai-elements/context.tsx

@@ -0,0 +1,408 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
+import type { LanguageModelUsage } from "ai";
+import { type ComponentProps, createContext, useContext } from "react";
+import { getUsage } from "tokenlens";
+
+const PERCENT_MAX = 100;
+const ICON_RADIUS = 10;
+const ICON_VIEWBOX = 24;
+const ICON_CENTER = 12;
+const ICON_STROKE_WIDTH = 2;
+
+type ModelId = string;
+
+type ContextSchema = {
+  usedTokens: number;
+  maxTokens: number;
+  usage?: LanguageModelUsage;
+  modelId?: ModelId;
+};
+
+const ContextContext = createContext<ContextSchema | null>(null);
+
+const useContextValue = () => {
+  const context = useContext(ContextContext);
+
+  if (!context) {
+    throw new Error("Context components must be used within Context");
+  }
+
+  return context;
+};
+
+export type ContextProps = ComponentProps<typeof HoverCard> & ContextSchema;
+
+export const Context = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}: ContextProps) => (
+  <ContextContext.Provider
+    value={{
+      usedTokens,
+      maxTokens,
+      usage,
+      modelId,
+    }}
+  >
+    <HoverCard closeDelay={0} openDelay={0} {...props} />
+  </ContextContext.Provider>
+);
+
+const ContextIcon = () => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+
+  return (
+    <svg
+      aria-label="Model context usage"
+      height="20"
+      role="img"
+      style={{ color: "currentcolor" }}
+      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}
+      width="20"
+    >
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.25"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        strokeWidth={ICON_STROKE_WIDTH}
+      />
+      <circle
+        cx={ICON_CENTER}
+        cy={ICON_CENTER}
+        fill="none"
+        opacity="0.7"
+        r={ICON_RADIUS}
+        stroke="currentColor"
+        strokeDasharray={`${circumference} ${circumference}`}
+        strokeDashoffset={dashOffset}
+        strokeLinecap="round"
+        strokeWidth={ICON_STROKE_WIDTH}
+        style={{ transformOrigin: "center", transform: "rotate(-90deg)" }}
+      />
+    </svg>
+  );
+};
+
+export type ContextTriggerProps = ComponentProps<typeof Button>;
+
+export const ContextTrigger = ({ children, ...props }: ContextTriggerProps) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1,
+  }).format(usedPercent);
+
+  return (
+    <HoverCardTrigger asChild>
+      {children ?? (
+        <Button type="button" variant="ghost" {...props}>
+          <span className="font-medium text-muted-foreground">
+            {renderedPercent}
+          </span>
+          <ContextIcon />
+        </Button>
+      )}
+    </HoverCardTrigger>
+  );
+};
+
+export type ContextContentProps = ComponentProps<typeof HoverCardContent>;
+
+export const ContextContent = ({
+  className,
+  ...props
+}: ContextContentProps) => (
+  <HoverCardContent
+    className={cn("min-w-60 divide-y overflow-hidden p-0", className)}
+    {...props}
+  />
+);
+
+export type ContextContentHeaderProps = ComponentProps<"div">;
+
+export const ContextContentHeader = ({
+  children,
+  className,
+  ...props
+}: ContextContentHeaderProps) => {
+  const { usedTokens, maxTokens } = useContextValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = new Intl.NumberFormat("en-US", {
+    style: "percent",
+    maximumFractionDigits: 1,
+  }).format(usedPercent);
+  const used = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+  }).format(usedTokens);
+  const total = new Intl.NumberFormat("en-US", {
+    notation: "compact",
+  }).format(maxTokens);
+
+  return (
+    <div className={cn("w-full space-y-2 p-3", className)} {...props}>
+      {children ?? (
+        <>
+          <div className="flex items-center justify-between gap-3 text-xs">
+            <p>{displayPct}</p>
+            <p className="font-mono text-muted-foreground">
+              {used} / {total}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <Progress className="bg-muted" value={usedPercent * PERCENT_MAX} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export type ContextContentBodyProps = ComponentProps<"div">;
+
+export const ContextContentBody = ({
+  children,
+  className,
+  ...props
+}: ContextContentBodyProps) => (
+  <div className={cn("w-full p-3", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type ContextContentFooterProps = ComponentProps<"div">;
+
+export const ContextContentFooter = ({
+  children,
+  className,
+  ...props
+}: ContextContentFooterProps) => {
+  const { modelId, usage } = useContextValue();
+  const costUSD = modelId
+    ? getUsage({
+        modelId,
+        usage: {
+          input: usage?.inputTokens ?? 0,
+          output: usage?.outputTokens ?? 0,
+        },
+      }).costUSD?.totalUSD
+    : undefined;
+  const totalCost = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(costUSD ?? 0);
+
+  return (
+    <div
+      className={cn(
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-xs",
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          <span className="text-muted-foreground">Total cost</span>
+          <span>{totalCost}</span>
+        </>
+      )}
+    </div>
+  );
+};
+
+export type ContextInputUsageProps = ComponentProps<"div">;
+
+export const ContextInputUsage = ({
+  className,
+  children,
+  ...props
+}: ContextInputUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!inputTokens) {
+    return null;
+  }
+
+  const inputCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { input: inputTokens, output: 0 },
+      }).costUSD?.totalUSD
+    : undefined;
+  const inputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(inputCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Input</span>
+      <TokensWithCost costText={inputCostText} tokens={inputTokens} />
+    </div>
+  );
+};
+
+export type ContextOutputUsageProps = ComponentProps<"div">;
+
+export const ContextOutputUsage = ({
+  className,
+  children,
+  ...props
+}: ContextOutputUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!outputTokens) {
+    return null;
+  }
+
+  const outputCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { input: 0, output: outputTokens },
+      }).costUSD?.totalUSD
+    : undefined;
+  const outputCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(outputCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Output</span>
+      <TokensWithCost costText={outputCostText} tokens={outputTokens} />
+    </div>
+  );
+};
+
+export type ContextReasoningUsageProps = ComponentProps<"div">;
+
+export const ContextReasoningUsage = ({
+  className,
+  children,
+  ...props
+}: ContextReasoningUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const reasoningTokens = usage?.reasoningTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!reasoningTokens) {
+    return null;
+  }
+
+  const reasoningCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { reasoningTokens },
+      }).costUSD?.totalUSD
+    : undefined;
+  const reasoningCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(reasoningCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Reasoning</span>
+      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />
+    </div>
+  );
+};
+
+export type ContextCacheUsageProps = ComponentProps<"div">;
+
+export const ContextCacheUsage = ({
+  className,
+  children,
+  ...props
+}: ContextCacheUsageProps) => {
+  const { usage, modelId } = useContextValue();
+  const cacheTokens = usage?.cachedInputTokens ?? 0;
+
+  if (children) {
+    return children;
+  }
+
+  if (!cacheTokens) {
+    return null;
+  }
+
+  const cacheCost = modelId
+    ? getUsage({
+        modelId,
+        usage: { cacheReads: cacheTokens, input: 0, output: 0 },
+      }).costUSD?.totalUSD
+    : undefined;
+  const cacheCostText = new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+  }).format(cacheCost ?? 0);
+
+  return (
+    <div
+      className={cn("flex items-center justify-between text-xs", className)}
+      {...props}
+    >
+      <span className="text-muted-foreground">Cache</span>
+      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />
+    </div>
+  );
+};
+
+const TokensWithCost = ({
+  tokens,
+  costText,
+}: {
+  tokens?: number;
+  costText?: string;
+}) => (
+  <span>
+    {tokens === undefined
+      ? "—"
+      : new Intl.NumberFormat("en-US", {
+          notation: "compact",
+        }).format(tokens)}
+    {costText ? (
+      <span className="ml-2 text-muted-foreground">• {costText}</span>
+    ) : null}
+  </span>
+);

apps/rowboatx/components/ai-elements/controls.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Controls as ControlsPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type ControlsProps = ComponentProps<typeof ControlsPrimitive>;
+
+export const Controls = ({ className, ...props }: ControlsProps) => (
+  <ControlsPrimitive
+    className={cn(
+      "gap-px overflow-hidden rounded-md border bg-card p-1 shadow-none!",
+      "[&>button]:rounded-md [&>button]:border-none! [&>button]:bg-transparent! [&>button]:hover:bg-secondary!",
+      className
+    )}
+    {...props}
+  />
+);

apps/rowboatx/components/ai-elements/conversation.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { ArrowDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { useCallback } from "react";
+import { StickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
+
+export type ConversationProps = ComponentProps<typeof StickToBottom>;
+
+export const Conversation = ({ className, ...props }: ConversationProps) => (
+  <StickToBottom
+    className={cn("relative flex-1 overflow-y-hidden", className)}
+    initial="smooth"
+    resize="smooth"
+    role="log"
+    {...props}
+  />
+);
+
+export type ConversationContentProps = ComponentProps<
+  typeof StickToBottom.Content
+>;
+
+export const ConversationContent = ({
+  className,
+  ...props
+}: ConversationContentProps) => (
+  <StickToBottom.Content
+    className={cn("flex flex-col gap-8 p-4", className)}
+    {...props}
+  />
+);
+
+export type ConversationEmptyStateProps = ComponentProps<"div"> & {
+  title?: string;
+  description?: string;
+  icon?: React.ReactNode;
+};
+
+export const ConversationEmptyState = ({
+  className,
+  title = "No messages yet",
+  description = "Start a conversation to see messages here",
+  icon,
+  children,
+  ...props
+}: ConversationEmptyStateProps) => (
+  <div
+    className={cn(
+      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      className
+    )}
+    {...props}
+  >
+    {children ?? (
+      <>
+        {icon && <div className="text-muted-foreground">{icon}</div>}
+        <div className="space-y-1">
+          <h3 className="font-medium text-sm">{title}</h3>
+          {description && (
+            <p className="text-muted-foreground text-sm">{description}</p>
+          )}
+        </div>
+      </>
+    )}
+  </div>
+);
+
+export type ConversationScrollButtonProps = ComponentProps<typeof Button>;
+
+export const ConversationScrollButton = ({
+  className,
+  ...props
+}: ConversationScrollButtonProps) => {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  const handleScrollToBottom = useCallback(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return (
+    !isAtBottom && (
+      <Button
+        className={cn(
+          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full",
+          className
+        )}
+        onClick={handleScrollToBottom}
+        size="icon"
+        type="button"
+        variant="outline"
+        {...props}
+      >
+        <ArrowDownIcon className="size-4" />
+      </Button>
+    )
+  );
+};

apps/rowboatx/components/ai-elements/edge.tsx

@@ -0,0 +1,140 @@
+import {
+  BaseEdge,
+  type EdgeProps,
+  getBezierPath,
+  getSimpleBezierPath,
+  type InternalNode,
+  type Node,
+  Position,
+  useInternalNode,
+} from "@xyflow/react";
+
+const Temporary = ({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+}: EdgeProps) => {
+  const [edgePath] = getSimpleBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  return (
+    <BaseEdge
+      className="stroke-1 stroke-ring"
+      id={id}
+      path={edgePath}
+      style={{
+        strokeDasharray: "5, 5",
+      }}
+    />
+  );
+};
+
+const getHandleCoordsByPosition = (
+  node: InternalNode<Node>,
+  handlePosition: Position
+) => {
+  // Choose the handle type based on position - Left is for target, Right is for source
+  const handleType = handlePosition === Position.Left ? "target" : "source";
+
+  const handle = node.internals.handleBounds?.[handleType]?.find(
+    (h) => h.position === handlePosition
+  );
+
+  if (!handle) {
+    return [0, 0] as const;
+  }
+
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+
+  // this is a tiny detail to make the markerEnd of an edge visible.
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = 0;
+      break;
+    case Position.Right:
+      offsetX = handle.width;
+      break;
+    case Position.Top:
+      offsetY = 0;
+      break;
+    case Position.Bottom:
+      offsetY = handle.height;
+      break;
+    default:
+      throw new Error(`Invalid handle position: ${handlePosition}`);
+  }
+
+  const x = node.internals.positionAbsolute.x + handle.x + offsetX;
+  const y = node.internals.positionAbsolute.y + handle.y + offsetY;
+
+  return [x, y] as const;
+};
+
+const getEdgeParams = (
+  source: InternalNode<Node>,
+  target: InternalNode<Node>
+) => {
+  const sourcePos = Position.Right;
+  const [sx, sy] = getHandleCoordsByPosition(source, sourcePos);
+  const targetPos = Position.Left;
+  const [tx, ty] = getHandleCoordsByPosition(target, targetPos);
+
+  return {
+    sx,
+    sy,
+    tx,
+    ty,
+    sourcePos,
+    targetPos,
+  };
+};
+
+const Animated = ({ id, source, target, markerEnd, style }: EdgeProps) => {
+  const sourceNode = useInternalNode(source);
+  const targetNode = useInternalNode(target);
+
+  if (!(sourceNode && targetNode)) {
+    return null;
+  }
+
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
+
+  const [edgePath] = getBezierPath({
+    sourceX: sx,
+    sourceY: sy,
+    sourcePosition: sourcePos,
+    targetX: tx,
+    targetY: ty,
+    targetPosition: targetPos,
+  });
+
+  return (
+    <>
+      <BaseEdge id={id} markerEnd={markerEnd} path={edgePath} style={style} />
+      <circle fill="var(--primary)" r="4">
+        <animateMotion dur="2s" path={edgePath} repeatCount="indefinite" />
+      </circle>
+    </>
+  );
+};
+
+export const Edge = {
+  Temporary,
+  Animated,
+};

apps/rowboatx/components/ai-elements/image.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable @next/next/no-img-element */
+import { cn } from "@/lib/utils";
+import type { Experimental_GeneratedImage } from "ai";
+
+export type ImageProps = Experimental_GeneratedImage & {
+  className?: string;
+  alt?: string;
+};
+
+export const Image = ({
+  base64,
+  mediaType,
+  ...props
+}: ImageProps) => (
+  <img
+    {...props}
+    alt={props.alt}
+    className={cn(
+      "h-auto max-w-full overflow-hidden rounded-md",
+      props.className
+    )}
+    src={`data:${mediaType};base64,${base64}`}
+  />
+);

apps/rowboatx/components/ai-elements/inline-citation.tsx

@@ -0,0 +1,287 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { cn } from "@/lib/utils";
+import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
+import {
+  type ComponentProps,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export type InlineCitationProps = ComponentProps<"span">;
+
+export const InlineCitation = ({
+  className,
+  ...props
+}: InlineCitationProps) => (
+  <span
+    className={cn("group inline items-center gap-1", className)}
+    {...props}
+  />
+);
+
+export type InlineCitationTextProps = ComponentProps<"span">;
+
+export const InlineCitationText = ({
+  className,
+  ...props
+}: InlineCitationTextProps) => (
+  <span
+    className={cn("transition-colors group-hover:bg-accent", className)}
+    {...props}
+  />
+);
+
+export type InlineCitationCardProps = ComponentProps<typeof HoverCard>;
+
+export const InlineCitationCard = (props: InlineCitationCardProps) => (
+  <HoverCard closeDelay={0} openDelay={0} {...props} />
+);
+
+export type InlineCitationCardTriggerProps = ComponentProps<typeof Badge> & {
+  sources: string[];
+};
+
+export const InlineCitationCardTrigger = ({
+  sources,
+  className,
+  ...props
+}: InlineCitationCardTriggerProps) => (
+  <HoverCardTrigger asChild>
+    <Badge
+      className={cn("ml-1 rounded-full", className)}
+      variant="secondary"
+      {...props}
+    >
+      {sources[0] ? (
+        <>
+          {new URL(sources[0]).hostname}{" "}
+          {sources.length > 1 && `+${sources.length - 1}`}
+        </>
+      ) : (
+        "unknown"
+      )}
+    </Badge>
+  </HoverCardTrigger>
+);
+
+export type InlineCitationCardBodyProps = ComponentProps<"div">;
+
+export const InlineCitationCardBody = ({
+  className,
+  ...props
+}: InlineCitationCardBodyProps) => (
+  <HoverCardContent className={cn("relative w-80 p-0", className)} {...props} />
+);
+
+const CarouselApiContext = createContext<CarouselApi | undefined>(undefined);
+
+const useCarouselApi = () => {
+  const context = useContext(CarouselApiContext);
+  return context;
+};
+
+export type InlineCitationCarouselProps = ComponentProps<typeof Carousel>;
+
+export const InlineCitationCarousel = ({
+  className,
+  children,
+  ...props
+}: InlineCitationCarouselProps) => {
+  const [api, setApi] = useState<CarouselApi>();
+
+  return (
+    <CarouselApiContext.Provider value={api}>
+      <Carousel className={cn("w-full", className)} setApi={setApi} {...props}>
+        {children}
+      </Carousel>
+    </CarouselApiContext.Provider>
+  );
+};
+
+export type InlineCitationCarouselContentProps = ComponentProps<"div">;
+
+export const InlineCitationCarouselContent = (
+  props: InlineCitationCarouselContentProps
+) => <CarouselContent {...props} />;
+
+export type InlineCitationCarouselItemProps = ComponentProps<"div">;
+
+export const InlineCitationCarouselItem = ({
+  className,
+  ...props
+}: InlineCitationCarouselItemProps) => (
+  <CarouselItem
+    className={cn("w-full space-y-2 p-4 pl-8", className)}
+    {...props}
+  />
+);
+
+export type InlineCitationCarouselHeaderProps = ComponentProps<"div">;
+
+export const InlineCitationCarouselHeader = ({
+  className,
+  ...props
+}: InlineCitationCarouselHeaderProps) => (
+  <div
+    className={cn(
+      "flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type InlineCitationCarouselIndexProps = ComponentProps<"div">;
+
+export const InlineCitationCarouselIndex = ({
+  children,
+  className,
+  ...props
+}: InlineCitationCarouselIndexProps) => {
+  const api = useCarouselApi();
+  const [current, setCurrent] = useState(0);
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  return (
+    <div
+      className={cn(
+        "flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs",
+        className
+      )}
+      {...props}
+    >
+      {children ?? `${current}/${count}`}
+    </div>
+  );
+};
+
+export type InlineCitationCarouselPrevProps = ComponentProps<"button">;
+
+export const InlineCitationCarouselPrev = ({
+  className,
+  ...props
+}: InlineCitationCarouselPrevProps) => {
+  const api = useCarouselApi();
+
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollPrev();
+    }
+  }, [api]);
+
+  return (
+    <button
+      aria-label="Previous"
+      className={cn("shrink-0", className)}
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <ArrowLeftIcon className="size-4 text-muted-foreground" />
+    </button>
+  );
+};
+
+export type InlineCitationCarouselNextProps = ComponentProps<"button">;
+
+export const InlineCitationCarouselNext = ({
+  className,
+  ...props
+}: InlineCitationCarouselNextProps) => {
+  const api = useCarouselApi();
+
+  const handleClick = useCallback(() => {
+    if (api) {
+      api.scrollNext();
+    }
+  }, [api]);
+
+  return (
+    <button
+      aria-label="Next"
+      className={cn("shrink-0", className)}
+      onClick={handleClick}
+      type="button"
+      {...props}
+    >
+      <ArrowRightIcon className="size-4 text-muted-foreground" />
+    </button>
+  );
+};
+
+export type InlineCitationSourceProps = ComponentProps<"div"> & {
+  title?: string;
+  url?: string;
+  description?: string;
+};
+
+export const InlineCitationSource = ({
+  title,
+  url,
+  description,
+  className,
+  children,
+  ...props
+}: InlineCitationSourceProps) => (
+  <div className={cn("space-y-1", className)} {...props}>
+    {title && (
+      <h4 className="truncate font-medium text-sm leading-tight">{title}</h4>
+    )}
+    {url && (
+      <p className="truncate break-all text-muted-foreground text-xs">{url}</p>
+    )}
+    {description && (
+      <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+        {description}
+      </p>
+    )}
+    {children}
+  </div>
+);
+
+export type InlineCitationQuoteProps = ComponentProps<"blockquote">;
+
+export const InlineCitationQuote = ({
+  children,
+  className,
+  ...props
+}: InlineCitationQuoteProps) => (
+  <blockquote
+    className={cn(
+      "border-muted border-l-2 pl-3 text-muted-foreground text-sm italic",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </blockquote>
+);

apps/rowboatx/components/ai-elements/loader.tsx

@@ -0,0 +1,96 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes } from "react";
+
+type LoaderIconProps = {
+  size?: number;
+};
+
+const LoaderIcon = ({ size = 16 }: LoaderIconProps) => (
+  <svg
+    height={size}
+    strokeLinejoin="round"
+    style={{ color: "currentcolor" }}
+    viewBox="0 0 16 16"
+    width={size}
+  >
+    <title>Loader</title>
+    <g clipPath="url(#clip0_2393_1490)">
+      <path d="M8 0V4" stroke="currentColor" strokeWidth="1.5" />
+      <path
+        d="M8 16V12"
+        opacity="0.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 1.52783L5.64887 4.7639"
+        opacity="0.9"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 1.52783L10.3511 4.7639"
+        opacity="0.1"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M12.7023 14.472L10.3511 11.236"
+        opacity="0.4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.29773 14.472L5.64887 11.236"
+        opacity="0.6"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 5.52783L11.8043 6.7639"
+        opacity="0.2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 10.472L4.19583 9.23598"
+        opacity="0.7"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M15.6085 10.4722L11.8043 9.2361"
+        opacity="0.3"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M0.391602 5.52783L4.19583 6.7639"
+        opacity="0.8"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2393_1490">
+        <rect fill="white" height="16" width="16" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+  size?: number;
+};
+
+export const Loader = ({ className, size = 16, ...props }: LoaderProps) => (
+  <div
+    className={cn(
+      "inline-flex animate-spin items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    <LoaderIcon size={size} />
+  </div>
+);

apps/rowboatx/components/ai-elements/message.tsx

@@ -0,0 +1,453 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { Button } from "@/components/ui/button";
+import {
+  ButtonGroup,
+  ButtonGroupText,
+} from "@/components/ui/button-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import type { FileUIPart, UIMessage } from "ai";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  PaperclipIcon,
+  XIcon,
+} from "lucide-react";
+import type { ComponentProps, HTMLAttributes, ReactElement } from "react";
+import { createContext, memo, useContext, useEffect, useMemo, useState } from "react";
+import { Streamdown } from "streamdown";
+
+export type MessageProps = HTMLAttributes<HTMLDivElement> & {
+  from: UIMessage["role"];
+};
+
+export const Message = ({ className, from, ...props }: MessageProps) => (
+  <div
+    className={cn(
+      "group flex w-full max-w-[95%] flex-col gap-2",
+      from === "user" ? "is-user ml-auto justify-end" : "is-assistant",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type MessageContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageContent = ({
+  children,
+  className,
+  ...props
+}: MessageContentProps) => (
+  <div
+    className={cn(
+      "is-user:dark flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:text-foreground",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type MessageActionsProps = ComponentProps<"div">;
+
+export const MessageActions = ({
+  className,
+  children,
+  ...props
+}: MessageActionsProps) => (
+  <div className={cn("flex items-center gap-1", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type MessageActionProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+  label?: string;
+};
+
+export const MessageAction = ({
+  tooltip,
+  children,
+  label,
+  variant = "ghost",
+  size = "icon-sm",
+  ...props
+}: MessageActionProps) => {
+  const button = (
+    <Button size={size} type="button" variant={variant} {...props}>
+      {children}
+      <span className="sr-only">{label || tooltip}</span>
+    </Button>
+  );
+
+  if (tooltip) {
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>{button}</TooltipTrigger>
+          <TooltipContent>
+            <p>{tooltip}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+
+  return button;
+};
+
+type MessageBranchContextType = {
+  currentBranch: number;
+  totalBranches: number;
+  goToPrevious: () => void;
+  goToNext: () => void;
+  branches: ReactElement[];
+  setBranches: (branches: ReactElement[]) => void;
+};
+
+const MessageBranchContext = createContext<MessageBranchContextType | null>(
+  null
+);
+
+const useMessageBranch = () => {
+  const context = useContext(MessageBranchContext);
+
+  if (!context) {
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  }
+
+  return context;
+};
+
+export type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
+  defaultBranch?: number;
+  onBranchChange?: (branchIndex: number) => void;
+};
+
+export const MessageBranch = ({
+  defaultBranch = 0,
+  onBranchChange,
+  className,
+  ...props
+}: MessageBranchProps) => {
+  const [currentBranch, setCurrentBranch] = useState(defaultBranch);
+  const [branches, setBranches] = useState<ReactElement[]>([]);
+
+  const handleBranchChange = (newBranch: number) => {
+    setCurrentBranch(newBranch);
+    onBranchChange?.(newBranch);
+  };
+
+  const goToPrevious = () => {
+    const newBranch =
+      currentBranch > 0 ? currentBranch - 1 : branches.length - 1;
+    handleBranchChange(newBranch);
+  };
+
+  const goToNext = () => {
+    const newBranch =
+      currentBranch < branches.length - 1 ? currentBranch + 1 : 0;
+    handleBranchChange(newBranch);
+  };
+
+  const contextValue: MessageBranchContextType = {
+    currentBranch,
+    totalBranches: branches.length,
+    goToPrevious,
+    goToNext,
+    branches,
+    setBranches,
+  };
+
+  return (
+    <MessageBranchContext.Provider value={contextValue}>
+      <div
+        className={cn("grid w-full gap-2 [&>div]:pb-0", className)}
+        {...props}
+      />
+    </MessageBranchContext.Provider>
+  );
+};
+
+export type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageBranchContent = ({
+  children,
+  ...props
+}: MessageBranchContentProps) => {
+  const { currentBranch, setBranches, branches } = useMessageBranch();
+  const childrenArray = useMemo(
+    () => (Array.isArray(children) ? children : [children]),
+    [children]
+  );
+
+  // Use useEffect to update branches when they change
+  useEffect(() => {
+    if (branches.length !== childrenArray.length) {
+      setBranches(childrenArray);
+    }
+  }, [childrenArray, branches, setBranches]);
+
+  return childrenArray.map((branch, index) => (
+    <div
+      className={cn(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        index === currentBranch ? "block" : "hidden"
+      )}
+      key={branch.key}
+      {...props}
+    >
+      {branch}
+    </div>
+  ));
+};
+
+export type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement>;
+
+export const MessageBranchSelector = ({
+  className,
+  ...props
+}: MessageBranchSelectorProps) => {
+  const { totalBranches } = useMessageBranch();
+
+  // Don't render if there's only one branch
+  if (totalBranches <= 1) {
+    return null;
+  }
+
+  return (
+    <ButtonGroup
+      className={cn(
+        "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+        className
+      )}
+      orientation="horizontal"
+      {...props}
+    />
+  );
+};
+
+export type MessageBranchPreviousProps = ComponentProps<typeof Button>;
+
+export const MessageBranchPrevious = ({
+  children,
+  ...props
+}: MessageBranchPreviousProps) => {
+  const { goToPrevious, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Previous branch"
+      disabled={totalBranches <= 1}
+      onClick={goToPrevious}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      {...props}
+    >
+      {children ?? <ChevronLeftIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchNextProps = ComponentProps<typeof Button>;
+
+export const MessageBranchNext = ({
+  children,
+  className,
+  ...props
+}: MessageBranchNextProps) => {
+  const { goToNext, totalBranches } = useMessageBranch();
+
+  return (
+    <Button
+      aria-label="Next branch"
+      disabled={totalBranches <= 1}
+      onClick={goToNext}
+      size="icon-sm"
+      type="button"
+      variant="ghost"
+      className={className}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon size={14} />}
+    </Button>
+  );
+};
+
+export type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
+
+export const MessageBranchPage = ({
+  className,
+  ...props
+}: MessageBranchPageProps) => {
+  const { currentBranch, totalBranches } = useMessageBranch();
+
+  return (
+    <ButtonGroupText
+      className={cn(
+        "border-none bg-transparent text-muted-foreground shadow-none",
+        className
+      )}
+      {...props}
+    >
+      {currentBranch + 1} of {totalBranches}
+    </ButtonGroupText>
+  );
+};
+
+export type MessageResponseProps = ComponentProps<typeof Streamdown>;
+
+export const MessageResponse = memo(
+  ({ className, ...props }: MessageResponseProps) => (
+    <Streamdown
+      className={cn(
+        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+        className
+      )}
+      {...props}
+    />
+  ),
+  (prevProps, nextProps) => prevProps.children === nextProps.children
+);
+
+MessageResponse.displayName = "MessageResponse";
+
+export type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
+  data: FileUIPart;
+  className?: string;
+  onRemove?: () => void;
+};
+
+export function MessageAttachment({
+  data,
+  className,
+  onRemove,
+  ...props
+}: MessageAttachmentProps) {
+  const filename = data.filename || "";
+  const mediaType =
+    data.mediaType?.startsWith("image/") && data.url ? "image" : "file";
+  const isImage = mediaType === "image";
+  const attachmentLabel = filename || (isImage ? "Image" : "Attachment");
+
+  return (
+    <div
+      className={cn(
+        "group relative size-24 overflow-hidden rounded-lg",
+        className
+      )}
+      {...props}
+    >
+      {isImage ? (
+        <>
+          <img
+            alt={filename || "attachment"}
+            className="size-full object-cover"
+            height={100}
+            src={data.url}
+            width={100}
+          />
+          {onRemove && (
+            <Button
+              aria-label="Remove attachment"
+              className="absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+              type="button"
+              variant="ghost"
+            >
+              <XIcon />
+              <span className="sr-only">Remove</span>
+            </Button>
+          )}
+        </>
+      ) : (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="flex size-full shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <PaperclipIcon className="size-4" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{attachmentLabel}</p>
+            </TooltipContent>
+          </Tooltip>
+          {onRemove && (
+            <Button
+              aria-label="Remove attachment"
+              className="size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent group-hover:opacity-100 [&>svg]:size-3"
+              onClick={(e) => {
+                e.stopPropagation();
+                onRemove();
+              }}
+              type="button"
+              variant="ghost"
+            >
+              <XIcon />
+              <span className="sr-only">Remove</span>
+            </Button>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+export type MessageAttachmentsProps = ComponentProps<"div">;
+
+export function MessageAttachments({
+  children,
+  className,
+  ...props
+}: MessageAttachmentsProps) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type MessageToolbarProps = ComponentProps<"div">;
+
+export const MessageToolbar = ({
+  className,
+  children,
+  ...props
+}: MessageToolbarProps) => (
+  <div
+    className={cn(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);

apps/rowboatx/components/ai-elements/model-selector.tsx

@@ -0,0 +1,206 @@
+/* eslint-disable @next/next/no-img-element */
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { ComponentProps, ReactNode } from "react";
+
+export type ModelSelectorProps = ComponentProps<typeof Dialog>;
+
+export const ModelSelector = (props: ModelSelectorProps) => (
+  <Dialog {...props} />
+);
+
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>;
+
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+  <DialogTrigger {...props} />
+);
+
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+  title?: ReactNode;
+};
+
+export const ModelSelectorContent = ({
+  className,
+  children,
+  title = "Model Selector",
+  ...props
+}: ModelSelectorContentProps) => (
+  <DialogContent className={cn("p-0", className)} {...props}>
+    <DialogTitle className="sr-only">{title}</DialogTitle>
+    <Command className="**:data-[slot=command-input-wrapper]:h-auto">
+      {children}
+    </Command>
+  </DialogContent>
+);
+
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>;
+
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+  <CommandDialog {...props} />
+);
+
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>;
+
+export const ModelSelectorInput = ({
+  className,
+  ...props
+}: ModelSelectorInputProps) => (
+  <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+);
+
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>;
+
+export const ModelSelectorList = (props: ModelSelectorListProps) => (
+  <CommandList {...props} />
+);
+
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>;
+
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+  <CommandEmpty {...props} />
+);
+
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>;
+
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+  <CommandGroup {...props} />
+);
+
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>;
+
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+  <CommandItem {...props} />
+);
+
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>;
+
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+  <CommandShortcut {...props} />
+);
+
+export type ModelSelectorSeparatorProps = ComponentProps<
+  typeof CommandSeparator
+>;
+
+export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
+  <CommandSeparator {...props} />
+);
+
+export type ModelSelectorLogoProps = Omit<
+  ComponentProps<"img">,
+  "src" | "alt"
+> & {
+  provider:
+    | "moonshotai-cn"
+    | "lucidquery"
+    | "moonshotai"
+    | "zai-coding-plan"
+    | "alibaba"
+    | "xai"
+    | "vultr"
+    | "nvidia"
+    | "upstage"
+    | "groq"
+    | "github-copilot"
+    | "mistral"
+    | "vercel"
+    | "nebius"
+    | "deepseek"
+    | "alibaba-cn"
+    | "google-vertex-anthropic"
+    | "venice"
+    | "chutes"
+    | "cortecs"
+    | "github-models"
+    | "togetherai"
+    | "azure"
+    | "baseten"
+    | "huggingface"
+    | "opencode"
+    | "fastrouter"
+    | "google"
+    | "google-vertex"
+    | "cloudflare-workers-ai"
+    | "inception"
+    | "wandb"
+    | "openai"
+    | "zhipuai-coding-plan"
+    | "perplexity"
+    | "openrouter"
+    | "zenmux"
+    | "v0"
+    | "iflowcn"
+    | "synthetic"
+    | "deepinfra"
+    | "zhipuai"
+    | "submodel"
+    | "zai"
+    | "inference"
+    | "requesty"
+    | "morph"
+    | "lmstudio"
+    | "anthropic"
+    | "aihubmix"
+    | "fireworks-ai"
+    | "modelscope"
+    | "llama"
+    | "scaleway"
+    | "amazon-bedrock"
+    | "cerebras"
+    | (string & {});
+};
+
+export const ModelSelectorLogo = ({
+  provider,
+  className,
+  ...props
+}: ModelSelectorLogoProps) => (
+  <img
+    {...props}
+    alt={`${provider} logo`}
+    className={cn("size-3 dark:invert", className)}
+    height={12}
+    src={`https://models.dev/logos/${provider}.svg`}
+    width={12}
+  />
+);
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">;
+
+export const ModelSelectorLogoGroup = ({
+  className,
+  ...props
+}: ModelSelectorLogoGroupProps) => (
+  <div
+    className={cn(
+      "-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ModelSelectorNameProps = ComponentProps<"span">;
+
+export const ModelSelectorName = ({
+  className,
+  ...props
+}: ModelSelectorNameProps) => (
+  <span className={cn("flex-1 truncate text-left", className)} {...props} />
+);

apps/rowboatx/components/ai-elements/node.tsx

@@ -0,0 +1,71 @@
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Handle, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+export type NodeProps = ComponentProps<typeof Card> & {
+  handles: {
+    target: boolean;
+    source: boolean;
+  };
+};
+
+export const Node = ({ handles, className, ...props }: NodeProps) => (
+  <Card
+    className={cn(
+      "node-container relative size-full h-auto w-sm gap-0 rounded-md p-0",
+      className
+    )}
+    {...props}
+  >
+    {handles.target && <Handle position={Position.Left} type="target" />}
+    {handles.source && <Handle position={Position.Right} type="source" />}
+    {props.children}
+  </Card>
+);
+
+export type NodeHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const NodeHeader = ({ className, ...props }: NodeHeaderProps) => (
+  <CardHeader
+    className={cn("gap-0.5 rounded-t-md border-b bg-secondary p-3!", className)}
+    {...props}
+  />
+);
+
+export type NodeTitleProps = ComponentProps<typeof CardTitle>;
+
+export const NodeTitle = (props: NodeTitleProps) => <CardTitle {...props} />;
+
+export type NodeDescriptionProps = ComponentProps<typeof CardDescription>;
+
+export const NodeDescription = (props: NodeDescriptionProps) => (
+  <CardDescription {...props} />
+);
+
+export type NodeActionProps = ComponentProps<typeof CardAction>;
+
+export const NodeAction = (props: NodeActionProps) => <CardAction {...props} />;
+
+export type NodeContentProps = ComponentProps<typeof CardContent>;
+
+export const NodeContent = ({ className, ...props }: NodeContentProps) => (
+  <CardContent className={cn("p-3", className)} {...props} />
+);
+
+export type NodeFooterProps = ComponentProps<typeof CardFooter>;
+
+export const NodeFooter = ({ className, ...props }: NodeFooterProps) => (
+  <CardFooter
+    className={cn("rounded-b-md border-t bg-secondary p-3!", className)}
+    {...props}
+  />
+);

apps/rowboatx/components/ai-elements/open-in-chat.tsx

@@ -0,0 +1,365 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils";
+import {
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  MessageCircleIcon,
+} from "lucide-react";
+import { type ComponentProps, createContext, useContext } from "react";
+
+const providers = {
+  github: {
+    title: "Open in GitHub",
+    createUrl: (url: string) => url,
+    icon: (
+      <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+        <title>GitHub</title>
+        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+      </svg>
+    ),
+  },
+  scira: {
+    title: "Open in Scira",
+    createUrl: (q: string) =>
+      `https://scira.ai/?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="none"
+        height="934"
+        viewBox="0 0 910 934"
+        width="910"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Scira AI</title>
+        <path
+          d="M647.664 197.775C569.13 189.049 525.5 145.419 516.774 66.8849C508.048 145.419 464.418 189.049 385.884 197.775C464.418 206.501 508.048 250.131 516.774 328.665C525.5 250.131 569.13 206.501 647.664 197.775Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M516.774 304.217C510.299 275.491 498.208 252.087 480.335 234.214C462.462 216.341 439.058 204.251 410.333 197.775C439.059 191.3 462.462 179.209 480.335 161.336C498.208 143.463 510.299 120.06 516.774 91.334C523.25 120.059 535.34 143.463 553.213 161.336C571.086 179.209 594.49 191.3 623.216 197.775C594.49 204.251 571.086 216.341 553.213 234.214C535.34 252.087 523.25 275.491 516.774 304.217Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M857.5 508.116C763.259 497.644 710.903 445.288 700.432 351.047C689.961 445.288 637.605 497.644 543.364 508.116C637.605 518.587 689.961 570.943 700.432 665.184C710.903 570.943 763.259 518.587 857.5 508.116Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M700.432 615.957C691.848 589.05 678.575 566.357 660.383 548.165C642.191 529.973 619.499 516.7 592.593 508.116C619.499 499.533 642.191 486.258 660.383 468.066C678.575 449.874 691.848 427.181 700.432 400.274C709.015 427.181 722.289 449.874 740.481 468.066C758.673 486.258 781.365 499.533 808.271 508.116C781.365 516.7 758.673 529.973 740.481 548.165C722.289 566.357 709.015 589.05 700.432 615.957Z"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="20"
+        />
+        <path
+          d="M889.949 121.237C831.049 114.692 798.326 81.9698 791.782 23.0692C785.237 81.9698 752.515 114.692 693.614 121.237C752.515 127.781 785.237 160.504 791.782 219.404C798.326 160.504 831.049 127.781 889.949 121.237Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M791.782 196.795C786.697 176.937 777.869 160.567 765.16 147.858C752.452 135.15 736.082 126.322 716.226 121.237C736.082 116.152 752.452 107.324 765.16 94.6152C777.869 81.9065 786.697 65.5368 791.782 45.6797C796.867 65.5367 805.695 81.9066 818.403 94.6152C831.112 107.324 847.481 116.152 867.338 121.237C847.481 126.322 831.112 135.15 818.403 147.858C805.694 160.567 796.867 176.937 791.782 196.795Z"
+          fill="currentColor"
+          stroke="currentColor"
+          strokeLinejoin="round"
+          strokeWidth="8"
+        />
+        <path
+          d="M760.632 764.337C720.719 814.616 669.835 855.1 611.872 882.692C553.91 910.285 490.404 924.255 426.213 923.533C362.022 922.812 298.846 907.419 241.518 878.531C184.19 849.643 134.228 808.026 95.4548 756.863C56.6815 705.7 30.1238 646.346 17.8129 583.343C5.50207 520.339 7.76433 455.354 24.4266 393.359C41.089 331.364 71.7099 274.001 113.947 225.658C156.184 177.315 208.919 139.273 268.117 114.442"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="30"
+        />
+      </svg>
+    ),
+  },
+  chatgpt: {
+    title: "Open in ChatGPT",
+    createUrl: (prompt: string) =>
+      `https://chatgpt.com/?${new URLSearchParams({
+        hints: "search",
+        prompt,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>OpenAI</title>
+        <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+      </svg>
+    ),
+  },
+  claude: {
+    title: "Open in Claude",
+    createUrl: (q: string) =>
+      `https://claude.ai/new?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        role="img"
+        viewBox="0 0 12 12"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Claude</title>
+        <path
+          clipRule="evenodd"
+          d="M2.3545 7.9775L4.7145 6.654L4.7545 6.539L4.7145 6.475H4.6L4.205 6.451L2.856 6.4145L1.6865 6.366L0.5535 6.305L0.268 6.2445L0 5.892L0.0275 5.716L0.2675 5.5555L0.6105 5.5855L1.3705 5.637L2.5095 5.716L3.3355 5.7645L4.56 5.892H4.7545L4.782 5.8135L4.715 5.7645L4.6635 5.716L3.4845 4.918L2.2085 4.074L1.5405 3.588L1.1785 3.3425L0.9965 3.1115L0.9175 2.6075L1.2455 2.2465L1.686 2.2765L1.7985 2.307L2.245 2.65L3.199 3.388L4.4445 4.3045L4.627 4.4565L4.6995 4.405L4.709 4.3685L4.627 4.2315L3.9495 3.0085L3.2265 1.7635L2.9045 1.2475L2.8195 0.938C2.78711 0.819128 2.76965 0.696687 2.7675 0.5735L3.1415 0.067L3.348 0L3.846 0.067L4.056 0.249L4.366 0.956L4.867 2.0705L5.6445 3.5855L5.8725 4.0345L5.994 4.4505L6.0395 4.578H6.1185V4.505L6.1825 3.652L6.301 2.6045L6.416 1.257L6.456 0.877L6.644 0.422L7.0175 0.176L7.3095 0.316L7.5495 0.6585L7.516 0.8805L7.373 1.806L7.0935 3.2575L6.9115 4.2285H7.0175L7.139 4.1075L7.6315 3.4545L8.4575 2.4225L8.8225 2.0125L9.2475 1.5605L9.521 1.345H10.0375L10.4175 1.9095L10.2475 2.4925L9.7155 3.166L9.275 3.737L8.643 4.587L8.248 5.267L8.2845 5.322L8.3785 5.312L9.8065 5.009L10.578 4.869L11.4985 4.7115L11.915 4.9055L11.9605 5.103L11.7965 5.5065L10.812 5.7495L9.6575 5.9805L7.938 6.387L7.917 6.402L7.9415 6.4325L8.716 6.5055L9.047 6.5235H9.858L11.368 6.636L11.763 6.897L12 7.216L11.9605 7.4585L11.353 7.7685L10.533 7.574L8.6185 7.119L7.9625 6.9545H7.8715V7.0095L8.418 7.5435L9.421 8.4485L10.6755 9.6135L10.739 9.9025L10.578 10.13L10.408 10.1055L9.3055 9.277L8.88 8.9035L7.917 8.0935H7.853V8.1785L8.075 8.503L9.2475 10.2635L9.3085 10.8035L9.2235 10.98L8.9195 11.0865L8.5855 11.0255L7.8985 10.063L7.191 8.9795L6.6195 8.008L6.5495 8.048L6.2125 11.675L6.0545 11.86L5.69 12L5.3865 11.7695L5.2255 11.396L5.3865 10.658L5.581 9.696L5.7385 8.931L5.8815 7.981L5.9665 7.665L5.9605 7.644L5.8905 7.653L5.1735 8.6365L4.0835 10.109L3.2205 11.0315L3.0135 11.1135L2.655 10.9285L2.6885 10.5975L2.889 10.303L4.083 8.785L4.803 7.844L5.268 7.301L5.265 7.222H5.2375L2.066 9.28L1.501 9.353L1.2575 9.125L1.288 8.752L1.4035 8.6305L2.3575 7.9745L2.3545 7.9775Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+  t3: {
+    title: "Open in T3 Chat",
+    createUrl: (q: string) =>
+      `https://t3.chat/new?${new URLSearchParams({
+        q,
+      })}`,
+    icon: <MessageCircleIcon />,
+  },
+  v0: {
+    title: "Open in v0",
+    createUrl: (q: string) =>
+      `https://v0.app?${new URLSearchParams({
+        q,
+      })}`,
+    icon: (
+      <svg
+        fill="currentColor"
+        viewBox="0 0 147 70"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>v0</title>
+        <path d="M56 50.2031V14H70V60.1562C70 65.5928 65.5928 70 60.1562 70C57.5605 70 54.9982 68.9992 53.1562 67.1573L0 14H19.7969L56 50.2031Z" />
+        <path d="M147 56H133V23.9531L100.953 56H133V70H96.6875C85.8144 70 77 61.1856 77 50.3125V14H91V46.1562L123.156 14H91V0H127.312C138.186 0 147 8.81439 147 19.6875V56Z" />
+      </svg>
+    ),
+  },
+  cursor: {
+    title: "Open in Cursor",
+    createUrl: (text: string) => {
+      const url = new URL("https://cursor.com/link/prompt");
+      url.searchParams.set("text", text);
+      return url.toString();
+    },
+    icon: (
+      <svg
+        version="1.1"
+        viewBox="0 0 466.73 532.09"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Cursor</title>
+        <path
+          d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"
+          fill="currentColor"
+        />
+      </svg>
+    ),
+  },
+};
+
+const OpenInContext = createContext<{ query: string } | undefined>(undefined);
+
+const useOpenInContext = () => {
+  const context = useContext(OpenInContext);
+  if (!context) {
+    throw new Error("OpenIn components must be used within an OpenIn provider");
+  }
+  return context;
+};
+
+export type OpenInProps = ComponentProps<typeof DropdownMenu> & {
+  query: string;
+};
+
+export const OpenIn = ({ query, ...props }: OpenInProps) => (
+  <OpenInContext.Provider value={{ query }}>
+    <DropdownMenu {...props} />
+  </OpenInContext.Provider>
+);
+
+export type OpenInContentProps = ComponentProps<typeof DropdownMenuContent>;
+
+export const OpenInContent = ({ className, ...props }: OpenInContentProps) => (
+  <DropdownMenuContent
+    align="start"
+    className={cn("w-[240px]", className)}
+    {...props}
+  />
+);
+
+export type OpenInItemProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInItem = (props: OpenInItemProps) => (
+  <DropdownMenuItem {...props} />
+);
+
+export type OpenInLabelProps = ComponentProps<typeof DropdownMenuLabel>;
+
+export const OpenInLabel = (props: OpenInLabelProps) => (
+  <DropdownMenuLabel {...props} />
+);
+
+export type OpenInSeparatorProps = ComponentProps<typeof DropdownMenuSeparator>;
+
+export const OpenInSeparator = (props: OpenInSeparatorProps) => (
+  <DropdownMenuSeparator {...props} />
+);
+
+export type OpenInTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
+
+export const OpenInTrigger = ({ children, ...props }: OpenInTriggerProps) => (
+  <DropdownMenuTrigger {...props} asChild>
+    {children ?? (
+      <Button type="button" variant="outline">
+        Open in chat
+        <ChevronDownIcon className="size-4" />
+      </Button>
+    )}
+  </DropdownMenuTrigger>
+);
+
+export type OpenInChatGPTProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInChatGPT = (props: OpenInChatGPTProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.chatgpt.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.chatgpt.icon}</span>
+        <span className="flex-1">{providers.chatgpt.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInClaudeProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInClaude = (props: OpenInClaudeProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.claude.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.claude.icon}</span>
+        <span className="flex-1">{providers.claude.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInT3Props = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInT3 = (props: OpenInT3Props) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.t3.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.t3.icon}</span>
+        <span className="flex-1">{providers.t3.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInSciraProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInScira = (props: OpenInSciraProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.scira.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.scira.icon}</span>
+        <span className="flex-1">{providers.scira.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInv0Props = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInv0 = (props: OpenInv0Props) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.v0.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.v0.icon}</span>
+        <span className="flex-1">{providers.v0.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};
+
+export type OpenInCursorProps = ComponentProps<typeof DropdownMenuItem>;
+
+export const OpenInCursor = (props: OpenInCursorProps) => {
+  const { query } = useOpenInContext();
+  return (
+    <DropdownMenuItem asChild {...props}>
+      <a
+        className="flex items-center gap-2"
+        href={providers.cursor.createUrl(query)}
+        rel="noopener"
+        target="_blank"
+      >
+        <span className="shrink-0">{providers.cursor.icon}</span>
+        <span className="flex-1">{providers.cursor.title}</span>
+        <ExternalLinkIcon className="size-4 shrink-0" />
+      </a>
+    </DropdownMenuItem>
+  );
+};

apps/rowboatx/components/ai-elements/panel.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import { Panel as PanelPrimitive } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type PanelProps = ComponentProps<typeof PanelPrimitive>;
+
+export const Panel = ({ className, ...props }: PanelProps) => (
+  <PanelPrimitive
+    className={cn(
+      "m-4 overflow-hidden rounded-md border bg-card p-1",
+      className
+    )}
+    {...props}
+  />
+);

apps/rowboatx/components/ai-elements/plan.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronsUpDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+import { createContext, useContext } from "react";
+import { Shimmer } from "./shimmer";
+
+type PlanContextValue = {
+  isStreaming: boolean;
+};
+
+const PlanContext = createContext<PlanContextValue | null>(null);
+
+const usePlan = () => {
+  const context = useContext(PlanContext);
+  if (!context) {
+    throw new Error("Plan components must be used within Plan");
+  }
+  return context;
+};
+
+export type PlanProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+};
+
+export const Plan = ({
+  className,
+  isStreaming = false,
+  children,
+  ...props
+}: PlanProps) => (
+  <PlanContext.Provider value={{ isStreaming }}>
+    <Collapsible asChild data-slot="plan" {...props}>
+      <Card className={cn("shadow-none", className)}>{children}</Card>
+    </Collapsible>
+  </PlanContext.Provider>
+);
+
+export type PlanHeaderProps = ComponentProps<typeof CardHeader>;
+
+export const PlanHeader = ({ className, ...props }: PlanHeaderProps) => (
+  <CardHeader
+    className={cn("flex items-start justify-between", className)}
+    data-slot="plan-header"
+    {...props}
+  />
+);
+
+export type PlanTitleProps = Omit<
+  ComponentProps<typeof CardTitle>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanTitle = ({ children, ...props }: PlanTitleProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardTitle data-slot="plan-title" {...props}>
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardTitle>
+  );
+};
+
+export type PlanDescriptionProps = Omit<
+  ComponentProps<typeof CardDescription>,
+  "children"
+> & {
+  children: string;
+};
+
+export const PlanDescription = ({
+  className,
+  children,
+  ...props
+}: PlanDescriptionProps) => {
+  const { isStreaming } = usePlan();
+
+  return (
+    <CardDescription
+      className={cn("text-balance", className)}
+      data-slot="plan-description"
+      {...props}
+    >
+      {isStreaming ? <Shimmer>{children}</Shimmer> : children}
+    </CardDescription>
+  );
+};
+
+export type PlanActionProps = ComponentProps<typeof CardAction>;
+
+export const PlanAction = (props: PlanActionProps) => (
+  <CardAction data-slot="plan-action" {...props} />
+);
+
+export type PlanContentProps = ComponentProps<typeof CardContent>;
+
+export const PlanContent = (props: PlanContentProps) => (
+  <CollapsibleContent asChild>
+    <CardContent data-slot="plan-content" {...props} />
+  </CollapsibleContent>
+);
+
+export type PlanFooterProps = ComponentProps<"div">;
+
+export const PlanFooter = (props: PlanFooterProps) => (
+  <CardFooter data-slot="plan-footer" {...props} />
+);
+
+export type PlanTriggerProps = ComponentProps<typeof CollapsibleTrigger>;
+
+export const PlanTrigger = ({ className, ...props }: PlanTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <Button
+      className={cn("size-8", className)}
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+      {...props}
+    >
+      <ChevronsUpDownIcon className="size-4" />
+      <span className="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+);

apps/rowboatx/components/ai-elements/queue.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+/* eslint-disable @next/next/no-img-element */
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, PaperclipIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type QueueMessagePart = {
+  type: string;
+  text?: string;
+  url?: string;
+  filename?: string;
+  mediaType?: string;
+};
+
+export type QueueMessage = {
+  id: string;
+  parts: QueueMessagePart[];
+};
+
+export type QueueTodo = {
+  id: string;
+  title: string;
+  description?: string;
+  status?: "pending" | "completed";
+};
+
+export type QueueItemProps = ComponentProps<"li">;
+
+export const QueueItem = ({ className, ...props }: QueueItemProps) => (
+  <li
+    className={cn(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemIndicatorProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemIndicator = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemIndicatorProps) => (
+  <span
+    className={cn(
+      "mt-0.5 inline-block size-2.5 rounded-full border",
+      completed
+        ? "border-muted-foreground/20 bg-muted-foreground/10"
+        : "border-muted-foreground/50",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemContentProps = ComponentProps<"span"> & {
+  completed?: boolean;
+};
+
+export const QueueItemContent = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemContentProps) => (
+  <span
+    className={cn(
+      "line-clamp-1 grow break-words",
+      completed
+        ? "text-muted-foreground/50 line-through"
+        : "text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemDescriptionProps = ComponentProps<"div"> & {
+  completed?: boolean;
+};
+
+export const QueueItemDescription = ({
+  completed = false,
+  className,
+  ...props
+}: QueueItemDescriptionProps) => (
+  <div
+    className={cn(
+      "ml-6 text-xs",
+      completed
+        ? "text-muted-foreground/40 line-through"
+        : "text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type QueueItemActionsProps = ComponentProps<"div">;
+
+export const QueueItemActions = ({
+  className,
+  ...props
+}: QueueItemActionsProps) => (
+  <div className={cn("flex gap-1", className)} {...props} />
+);
+
+export type QueueItemActionProps = Omit<
+  ComponentProps<typeof Button>,
+  "variant" | "size"
+>;
+
+export const QueueItemAction = ({
+  className,
+  ...props
+}: QueueItemActionProps) => (
+  <Button
+    className={cn(
+      "size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",
+      className
+    )}
+    size="icon"
+    type="button"
+    variant="ghost"
+    {...props}
+  />
+);
+
+export type QueueItemAttachmentProps = ComponentProps<"div">;
+
+export const QueueItemAttachment = ({
+  className,
+  ...props
+}: QueueItemAttachmentProps) => (
+  <div className={cn("mt-1 flex flex-wrap gap-2", className)} {...props} />
+);
+
+export type QueueItemImageProps = ComponentProps<"img">;
+
+export const QueueItemImage = ({
+  className,
+  ...props
+}: QueueItemImageProps) => (
+  <img
+    alt=""
+    className={cn("h-8 w-8 rounded border object-cover", className)}
+    height={32}
+    width={32}
+    {...props}
+  />
+);
+
+export type QueueItemFileProps = ComponentProps<"span">;
+
+export const QueueItemFile = ({
+  children,
+  className,
+  ...props
+}: QueueItemFileProps) => (
+  <span
+    className={cn(
+      "flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",
+      className
+    )}
+    {...props}
+  >
+    <PaperclipIcon size={12} />
+    <span className="max-w-[100px] truncate">{children}</span>
+  </span>
+);
+
+export type QueueListProps = ComponentProps<typeof ScrollArea>;
+
+export const QueueList = ({
+  children,
+  className,
+  ...props
+}: QueueListProps) => (
+  <ScrollArea className={cn("-mb-1 mt-2", className)} {...props}>
+    <div className="max-h-40 pr-4">
+      <ul>{children}</ul>
+    </div>
+  </ScrollArea>
+);
+
+// QueueSection - collapsible section container
+export type QueueSectionProps = ComponentProps<typeof Collapsible>;
+
+export const QueueSection = ({
+  className,
+  defaultOpen = true,
+  ...props
+}: QueueSectionProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+// QueueSectionTrigger - section header/trigger
+export type QueueSectionTriggerProps = ComponentProps<"button">;
+
+export const QueueSectionTrigger = ({
+  children,
+  className,
+  ...props
+}: QueueSectionTriggerProps) => (
+  <CollapsibleTrigger asChild>
+    <button
+      className={cn(
+        "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+        className
+      )}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  </CollapsibleTrigger>
+);
+
+// QueueSectionLabel - label content with icon and count
+export type QueueSectionLabelProps = ComponentProps<"span"> & {
+  count?: number;
+  label: string;
+  icon?: React.ReactNode;
+};
+
+export const QueueSectionLabel = ({
+  count,
+  label,
+  icon,
+  className,
+  ...props
+}: QueueSectionLabelProps) => (
+  <span className={cn("flex items-center gap-2", className)} {...props}>
+    <ChevronDownIcon className="group-data-[state=closed]:-rotate-90 size-4 transition-transform" />
+    {icon}
+    <span>
+      {count} {label}
+    </span>
+  </span>
+);
+
+// QueueSectionContent - collapsible content area
+export type QueueSectionContentProps = ComponentProps<
+  typeof CollapsibleContent
+>;
+
+export const QueueSectionContent = ({
+  className,
+  ...props
+}: QueueSectionContentProps) => (
+  <CollapsibleContent className={cn(className)} {...props} />
+);
+
+export type QueueProps = ComponentProps<"div">;
+
+export const Queue = ({ className, ...props }: QueueProps) => (
+  <div
+    className={cn(
+      "flex flex-col gap-2 rounded-xl border border-border bg-background px-3 pt-2 pb-2 shadow-xs",
+      className
+    )}
+    {...props}
+  />
+);

apps/rowboatx/components/ai-elements/reasoning.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BrainIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, memo, useContext, useEffect, useState } from "react";
+import { Streamdown } from "streamdown";
+import { Shimmer } from "./shimmer";
+
+type ReasoningContextValue = {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+};
+
+const ReasoningContext = createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = useContext(ReasoningContext);
+  if (!context) {
+    throw new Error("Reasoning components must be used within Reasoning");
+  }
+  return context;
+};
+
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+};
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export const Reasoning = memo(
+  ({
+    className,
+    isStreaming = false,
+    open,
+    defaultOpen = true,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }: ReasoningProps) => {
+    const [isOpen, setIsOpen] = useControllableState({
+      prop: open,
+      defaultProp: defaultOpen,
+      onChange: onOpenChange,
+    });
+    const [duration, setDuration] = useControllableState({
+      prop: durationProp,
+      defaultProp: undefined,
+    });
+
+    const [hasAutoClosed, setHasAutoClosed] = useState(false);
+    const [startTime, setStartTime] = useState<number | null>(null);
+
+    // Track duration when streaming starts and ends
+    useEffect(() => {
+      if (isStreaming) {
+        if (startTime === null) {
+          setStartTime(Date.now());
+        }
+      } else if (startTime !== null) {
+        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
+        setStartTime(null);
+      }
+    }, [isStreaming, startTime, setDuration]);
+
+    // Auto-open when streaming starts, auto-close when streaming ends (once only)
+    useEffect(() => {
+      if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
+        // Add a small delay before closing to allow user to see the content
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, defaultOpen, setIsOpen, hasAutoClosed]);
+
+    const handleOpenChange = (newOpen: boolean) => {
+      setIsOpen(newOpen);
+    };
+
+    return (
+      <ReasoningContext.Provider
+        value={{ isStreaming, isOpen, setIsOpen, duration }}
+      >
+        <Collapsible
+          className={cn("not-prose mb-4", className)}
+          onOpenChange={handleOpenChange}
+          open={isOpen}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer duration={1}>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = memo(
+  ({ className, children, getThinkingMessage = defaultGetThinkingMessage, ...props }: ReasoningTriggerProps) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          "flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="size-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                "size-4 transition-transform",
+                isOpen ? "rotate-180" : "rotate-0"
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+
+export type ReasoningContentProps = ComponentProps<
+  typeof CollapsibleContent
+> & {
+  children: string;
+};
+
+export const ReasoningContent = memo(
+  ({ className, children, ...props }: ReasoningContentProps) => (
+    <CollapsibleContent
+      className={cn(
+        "mt-4 text-sm",
+        "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-muted-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+        className
+      )}
+      {...props}
+    >
+      <Streamdown {...props}>{children}</Streamdown>
+    </CollapsibleContent>
+  )
+);
+
+Reasoning.displayName = "Reasoning";
+ReasoningTrigger.displayName = "ReasoningTrigger";
+ReasoningContent.displayName = "ReasoningContent";

apps/rowboatx/components/ai-elements/shimmer.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
+import {
+  type CSSProperties,
+  type ElementType,
+  type JSX,
+  memo,
+  useMemo,
+} from "react";
+
+export type TextShimmerProps = {
+  children: string;
+  as?: ElementType;
+  className?: string;
+  duration?: number;
+  spread?: number;
+};
+
+const ShimmerComponent = ({
+  children,
+  as: Component = "p",
+  className,
+  duration = 2,
+  spread = 2,
+}: TextShimmerProps) => {
+  const MotionComponent = motion.create(
+    Component as keyof JSX.IntrinsicElements
+  );
+
+  const dynamicSpread = useMemo(
+    () => (children?.length ?? 0) * spread,
+    [children, spread]
+  );
+
+  return (
+    <MotionComponent
+      animate={{ backgroundPosition: "0% center" }}
+      className={cn(
+        "relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",
+        "[--bg:linear-gradient(90deg,#0000_calc(50%-var(--spread)),var(--color-background),#0000_calc(50%+var(--spread)))] [background-repeat:no-repeat,padding-box]",
+        className
+      )}
+      initial={{ backgroundPosition: "100% center" }}
+      style={
+        {
+          "--spread": `${dynamicSpread}px`,
+          backgroundImage:
+            "var(--bg), linear-gradient(var(--color-muted-foreground), var(--color-muted-foreground))",
+        } as CSSProperties
+      }
+      transition={{
+        repeat: Number.POSITIVE_INFINITY,
+        duration,
+        ease: "linear",
+      }}
+    >
+      {children}
+    </MotionComponent>
+  );
+};
+
+export const Shimmer = memo(ShimmerComponent);

apps/rowboatx/components/ai-elements/sources.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { BookIcon, ChevronDownIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type SourcesProps = ComponentProps<"div">;
+
+export const Sources = ({ className, ...props }: SourcesProps) => (
+  <Collapsible
+    className={cn("not-prose mb-4 text-primary text-xs", className)}
+    {...props}
+  />
+);
+
+export type SourcesTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  count: number;
+};
+
+export const SourcesTrigger = ({
+  className,
+  count,
+  children,
+  ...props
+}: SourcesTriggerProps) => (
+  <CollapsibleTrigger
+    className={cn("flex items-center gap-2", className)}
+    {...props}
+  >
+    {children ?? (
+      <>
+        <p className="font-medium">Used {count} sources</p>
+        <ChevronDownIcon className="h-4 w-4" />
+      </>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type SourcesContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const SourcesContent = ({
+  className,
+  ...props
+}: SourcesContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "mt-3 flex w-fit flex-col gap-2",
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type SourceProps = ComponentProps<"a">;
+
+export const Source = ({ href, title, children, ...props }: SourceProps) => (
+  <a
+    className="flex items-center gap-2"
+    href={href}
+    rel="noreferrer"
+    target="_blank"
+    {...props}
+  >
+    {children ?? (
+      <>
+        <BookIcon className="h-4 w-4" />
+        <span className="block font-medium">{title}</span>
+      </>
+    )}
+  </a>
+);

apps/rowboatx/components/ai-elements/suggestion.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  ScrollArea,
+  ScrollBar,
+} from "@/components/ui/scroll-area";
+import { cn } from "@/lib/utils";
+import type { ComponentProps } from "react";
+
+export type SuggestionsProps = ComponentProps<typeof ScrollArea>;
+
+export const Suggestions = ({
+  className,
+  children,
+  ...props
+}: SuggestionsProps) => (
+  <ScrollArea className="w-full overflow-x-auto whitespace-nowrap" {...props}>
+    <div className={cn("flex w-max flex-nowrap items-center gap-2", className)}>
+      {children}
+    </div>
+    <ScrollBar className="hidden" orientation="horizontal" />
+  </ScrollArea>
+);
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = () => {
+    onClick?.(suggestion);
+  };
+
+  return (
+    <Button
+      className={cn("cursor-pointer rounded-full px-4", className)}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};

apps/rowboatx/components/ai-elements/task.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon, SearchIcon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type TaskItemFileProps = ComponentProps<"div">;
+
+export const TaskItemFile = ({
+  children,
+  className,
+  ...props
+}: TaskItemFileProps) => (
+  <div
+    className={cn(
+      "inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs",
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type TaskItemProps = ComponentProps<"div">;
+
+export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (
+  <div className={cn("text-muted-foreground text-sm", className)} {...props}>
+    {children}
+  </div>
+);
+
+export type TaskProps = ComponentProps<typeof Collapsible>;
+
+export const Task = ({
+  defaultOpen = true,
+  className,
+  ...props
+}: TaskProps) => (
+  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />
+);
+
+export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+  title: string;
+};
+
+export const TaskTrigger = ({
+  children,
+  className,
+  title,
+  ...props
+}: TaskTriggerProps) => (
+  <CollapsibleTrigger asChild className={cn("group", className)} {...props}>
+    {children ?? (
+      <div className="flex w-full cursor-pointer items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground">
+        <SearchIcon className="size-4" />
+        <p className="text-sm">{title}</p>
+        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />
+      </div>
+    )}
+  </CollapsibleTrigger>
+);
+
+export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const TaskContent = ({
+  children,
+  className,
+  ...props
+}: TaskContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">
+      {children}
+    </div>
+  </CollapsibleContent>
+);

apps/rowboatx/components/ai-elements/tool.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { cn } from "@/lib/utils";
+import type { ToolUIPart } from "ai";
+import {
+  CheckCircleIcon,
+  ChevronDownIcon,
+  CircleIcon,
+  ClockIcon,
+  WrenchIcon,
+  XCircleIcon,
+} from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { isValidElement } from "react";
+import { CodeBlock } from "./code-block";
+
+export type ToolProps = ComponentProps<typeof Collapsible>;
+
+export const Tool = ({ className, ...props }: ToolProps) => (
+  <Collapsible
+    className={cn("not-prose mb-4 w-full rounded-md border", className)}
+    {...props}
+  />
+);
+
+export type ToolHeaderProps = {
+  title?: string;
+  type: ToolUIPart["type"];
+  state: ToolUIPart["state"];
+  className?: string;
+};
+
+const getStatusBadge = (status: ToolUIPart["state"]) => {
+  const labels: Record<ToolUIPart["state"], string> = {
+    "input-streaming": "Pending",
+    "input-available": "Running",
+    // @ts-expect-error state only available in AI SDK v6
+    "approval-requested": "Awaiting Approval",
+    "approval-responded": "Responded",
+    "output-available": "Completed",
+    "output-error": "Error",
+    "output-denied": "Denied",
+  };
+
+  const icons: Record<ToolUIPart["state"], ReactNode> = {
+    "input-streaming": <CircleIcon className="size-4" />,
+    "input-available": <ClockIcon className="size-4 animate-pulse" />,
+    // @ts-expect-error state only available in AI SDK v6
+    "approval-requested": <ClockIcon className="size-4 text-yellow-600" />,
+    "approval-responded": <CheckCircleIcon className="size-4 text-blue-600" />,
+    "output-available": <CheckCircleIcon className="size-4 text-green-600" />,
+    "output-error": <XCircleIcon className="size-4 text-red-600" />,
+    "output-denied": <XCircleIcon className="size-4 text-orange-600" />,
+  };
+
+  return (
+    <Badge className="gap-1.5 rounded-full text-xs" variant="secondary">
+      {icons[status]}
+      {labels[status]}
+    </Badge>
+  );
+};
+
+export const ToolHeader = ({
+  className,
+  title,
+  type,
+  state,
+  ...props
+}: ToolHeaderProps) => (
+  <CollapsibleTrigger
+    className={cn(
+      "flex w-full items-center justify-between gap-4 p-3",
+      className
+    )}
+    {...props}
+  >
+    <div className="flex items-center gap-2">
+      <WrenchIcon className="size-4 text-muted-foreground" />
+      <span className="font-medium text-sm">
+        {title ?? type.split("-").slice(1).join("-")}
+      </span>
+      {getStatusBadge(state)}
+    </div>
+    <ChevronDownIcon className="size-4 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+  </CollapsibleTrigger>
+);
+
+export type ToolContentProps = ComponentProps<typeof CollapsibleContent>;
+
+export const ToolContent = ({ className, ...props }: ToolContentProps) => (
+  <CollapsibleContent
+    className={cn(
+      "data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type ToolInputProps = ComponentProps<"div"> & {
+  input: ToolUIPart["input"];
+};
+
+export const ToolInput = ({ className, input, ...props }: ToolInputProps) => (
+  <div className={cn("space-y-2 overflow-hidden p-4", className)} {...props}>
+    <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+      Parameters
+    </h4>
+    <div className="rounded-md bg-muted/50">
+      <CodeBlock code={JSON.stringify(input, null, 2)} language="json" />
+    </div>
+  </div>
+);
+
+export type ToolOutputProps = ComponentProps<"div"> & {
+  output: ToolUIPart["output"];
+  errorText: ToolUIPart["errorText"];
+};
+
+export const ToolOutput = ({
+  className,
+  output,
+  errorText,
+  ...props
+}: ToolOutputProps) => {
+  if (!(output || errorText)) {
+    return null;
+  }
+
+  let Output = <div>{output as ReactNode}</div>;
+
+  if (typeof output === "object" && !isValidElement(output)) {
+    Output = (
+      <CodeBlock code={JSON.stringify(output, null, 2)} language="json" />
+    );
+  } else if (typeof output === "string") {
+    Output = <CodeBlock code={output} language="json" />;
+  }
+
+  return (
+    <div className={cn("space-y-2 p-4", className)} {...props}>
+      <h4 className="font-medium text-muted-foreground text-xs uppercase tracking-wide">
+        {errorText ? "Error" : "Result"}
+      </h4>
+      <div
+        className={cn(
+          "overflow-x-auto rounded-md text-xs [&_table]:w-full",
+          errorText
+            ? "bg-destructive/10 text-destructive"
+            : "bg-muted/50 text-foreground"
+        )}
+      >
+        {errorText && <div>{errorText}</div>}
+        {Output}
+      </div>
+    </div>
+  );
+};

apps/rowboatx/components/ai-elements/toolbar.tsx

@@ -0,0 +1,16 @@
+import { cn } from "@/lib/utils";
+import { NodeToolbar, Position } from "@xyflow/react";
+import type { ComponentProps } from "react";
+
+type ToolbarProps = ComponentProps<typeof NodeToolbar>;
+
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+  <NodeToolbar
+    className={cn(
+      "flex items-center gap-1 rounded-sm border bg-background p-1.5",
+      className
+    )}
+    position={Position.Bottom}
+    {...props}
+  />
+);

apps/rowboatx/components/ai-elements/web-preview.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+export type WebPreviewContextValue = {
+  url: string;
+  setUrl: (url: string) => void;
+  consoleOpen: boolean;
+  setConsoleOpen: (open: boolean) => void;
+};
+
+const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
+
+const useWebPreview = () => {
+  const context = useContext(WebPreviewContext);
+  if (!context) {
+    throw new Error("WebPreview components must be used within a WebPreview");
+  }
+  return context;
+};
+
+export type WebPreviewProps = ComponentProps<"div"> & {
+  defaultUrl?: string;
+  onUrlChange?: (url: string) => void;
+};
+
+export const WebPreview = ({
+  className,
+  children,
+  defaultUrl = "",
+  onUrlChange,
+  ...props
+}: WebPreviewProps) => {
+  const [url, setUrl] = useState(defaultUrl);
+  const [consoleOpen, setConsoleOpen] = useState(false);
+
+  const handleUrlChange = (newUrl: string) => {
+    setUrl(newUrl);
+    onUrlChange?.(newUrl);
+  };
+
+  const contextValue: WebPreviewContextValue = {
+    url,
+    setUrl: handleUrlChange,
+    consoleOpen,
+    setConsoleOpen,
+  };
+
+  return (
+    <WebPreviewContext.Provider value={contextValue}>
+      <div
+        className={cn(
+          "flex size-full flex-col bg-card",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    </WebPreviewContext.Provider>
+  );
+};
+
+export type WebPreviewNavigationProps = ComponentProps<"div">;
+
+export const WebPreviewNavigation = ({
+  className,
+  children,
+  ...props
+}: WebPreviewNavigationProps) => (
+  <div
+    className={cn("flex items-center gap-1 border-b p-2 h-14", className)}
+    {...props}
+  >
+    {children}
+  </div>
+);
+
+export type WebPreviewNavigationButtonProps = ComponentProps<typeof Button> & {
+  tooltip?: string;
+};
+
+export const WebPreviewNavigationButton = ({
+  onClick,
+  disabled,
+  tooltip,
+  children,
+  ...props
+}: WebPreviewNavigationButtonProps) => (
+  <TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          className="h-8 w-8 p-0 hover:text-foreground"
+          disabled={disabled}
+          onClick={onClick}
+          size="sm"
+          variant="ghost"
+          {...props}
+        >
+          {children}
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{tooltip}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+);
+
+export type WebPreviewUrlProps = ComponentProps<typeof Input>;
+
+export const WebPreviewUrl = ({
+  value,
+  onChange,
+  onKeyDown,
+  ...props
+}: WebPreviewUrlProps) => {
+  const { url, setUrl } = useWebPreview();
+  const [inputValue, setInputValue] = useState(url);
+
+  // Sync input value with context URL when it changes externally
+  useEffect(() => {
+    setInputValue(url);
+  }, [url]);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+    onChange?.(event);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const target = event.target as HTMLInputElement;
+      setUrl(target.value);
+    }
+    onKeyDown?.(event);
+  };
+
+  return (
+    <Input
+      className="h-8 flex-1 text-sm"
+      onChange={onChange ?? handleChange}
+      onKeyDown={handleKeyDown}
+      placeholder="Enter URL..."
+      value={value ?? inputValue}
+      {...props}
+    />
+  );
+};
+
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+  loading?: ReactNode;
+};
+
+export const WebPreviewBody = ({
+  className,
+  loading,
+  src,
+  ...props
+}: WebPreviewBodyProps) => {
+  const { url } = useWebPreview();
+
+  return (
+    <div className="flex-1">
+      <iframe
+        className={cn("size-full", className)}
+        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
+        src={(src ?? url) || undefined}
+        title="Preview"
+        {...props}
+      />
+      {loading}
+    </div>
+  );
+};
+
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+  logs?: Array<{
+    level: "log" | "warn" | "error";
+    message: string;
+    timestamp: Date;
+  }>;
+};
+
+export const WebPreviewConsole = ({
+  className,
+  logs = [],
+  children,
+  ...props
+}: WebPreviewConsoleProps) => {
+  const { consoleOpen, setConsoleOpen } = useWebPreview();
+
+  return (
+    <Collapsible
+      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      onOpenChange={setConsoleOpen}
+      open={consoleOpen}
+      {...props}
+    >
+      <CollapsibleTrigger asChild>
+        <Button
+          className="flex w-full items-center justify-between p-4 text-left font-medium hover:bg-muted/50"
+          variant="ghost"
+        >
+          Console
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 transition-transform duration-200",
+              consoleOpen && "rotate-180"
+            )}
+          />
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent
+        className={cn(
+          "px-4 pb-4",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-none data-[state=closed]:animate-out data-[state=open]:animate-in"
+        )}
+      >
+        <div className="max-h-48 space-y-1 overflow-y-auto">
+          {logs.length === 0 ? (
+            <p className="text-muted-foreground">No console output</p>
+          ) : (
+            logs.map((log, index) => (
+              <div
+                className={cn(
+                  "text-xs",
+                  log.level === "error" && "text-destructive",
+                  log.level === "warn" && "text-yellow-600",
+                  log.level === "log" && "text-foreground"
+                )}
+                key={`${log.timestamp.getTime()}-${index}`}
+              >
+                <span className="text-muted-foreground">
+                  {log.timestamp.toLocaleTimeString()}
+                </span>{" "}
+                {log.message}
+              </div>
+            ))
+          )}
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+};

apps/rowboatx/components/app-sidebar.tsx

@@ -0,0 +1,348 @@
+"use client"
+
+import * as React from "react"
+import { ChevronRight, Clock3, FileText, Folder, Play, Plug, Rocket, Users } from "lucide-react"
+
+import { NavUser } from "@/components/nav-user"
+import { TeamSwitcher } from "@/components/team-switcher"
+import { NavProjects } from "@/components/nav-projects"
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+
+// This is sample data.
+const data = {
+  user: {
+    name: "user",
+    email: "user@example.com",
+    avatar: "/avatars/user.jpg",
+  },
+  teams: [
+    {
+      name: "RowboatX",
+      logo: Users,
+      plan: "Workspace",
+    },
+  ],
+  chatHistory: [
+    { name: "Building a React Dashboard", url: "#" },
+    { name: "API Integration Best Practices", url: "#" },
+    { name: "TypeScript Migration Guide", url: "#" },
+    { name: "Database Optimization Tips", url: "#" },
+    { name: "Docker Container Setup", url: "#" },
+    { name: "GraphQL vs REST API", url: "#" },
+  ],
+  navMain: [
+    {
+      title: "Scheduled",
+      url: "#",
+      icon: Clock3,
+      isActive: false,
+      items: [
+        {
+          title: "View Schedule",
+          url: "#",
+        },
+        {
+          title: "Create Schedule",
+          url: "#",
+        },
+        {
+          title: "Recurring Tasks",
+          url: "#",
+        },
+      ],
+    },
+    {
+      title: "Applets",
+      url: "#",
+      icon: Rocket,
+      items: [
+        {
+          title: "Browse Applets",
+          url: "#",
+        },
+        {
+          title: "Create Applet",
+          url: "#",
+        },
+        {
+          title: "My Applets",
+          url: "#",
+        },
+      ],
+    },
+  ],
+}
+
+type RowboatSummary = {
+  agents: string[]
+  config: string[]
+  runs: string[]
+}
+
+type ResourceKind = "agent" | "config" | "run"
+
+type SidebarSelect = (item: { kind: ResourceKind; name: string }) => void
+
+type AppSidebarProps = React.ComponentProps<typeof Sidebar> & {
+  onSelectResource?: SidebarSelect
+}
+
+export function AppSidebar({ onSelectResource, ...props }: AppSidebarProps) {
+  const { state: sidebarState } = useSidebar()
+  const [summary, setSummary] = React.useState<RowboatSummary>({
+    agents: [],
+    config: [],
+    runs: [],
+  })
+  const [loading, setLoading] = React.useState(true)
+
+  React.useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await fetch("/api/rowboat/summary")
+        if (!res.ok) return
+        const data = await res.json()
+        setSummary({
+          agents: data.agents || [],
+          config: data.config || [],
+          runs: data.runs || [],
+        })
+      } catch (error) {
+        console.error("Failed to load rowboat summary", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  // Limit runs shown and provide "View more" affordance similar to chat history.
+  const runsLimit = 8
+  const visibleRuns = summary.runs.slice(0, runsLimit)
+  const hasMoreRuns = summary.runs.length > runsLimit
+
+  const handleSelect = (kind: ResourceKind, name: string) => {
+    onSelectResource?.({ kind, name })
+  }
+
+  const navInitial = React.useMemo(
+    () =>
+      data.navMain.reduce<Record<string, boolean>>((acc, item) => {
+        acc[item.title] = false
+        return acc
+      }, {}),
+    []
+  )
+
+  const [openGroups, setOpenGroups] = React.useState<Record<string, boolean>>({
+    agents: false,
+    config: false,
+    runs: false,
+    ...navInitial,
+  })
+
+  const isCollapsed = sidebarState === "collapsed"
+
+  React.useEffect(() => {
+    if (isCollapsed) {
+      setOpenGroups((prev) => {
+        const closed: Record<string, boolean> = {}
+        for (const key of Object.keys(prev)) closed[key] = false
+        return closed
+      })
+    }
+  }, [isCollapsed])
+
+  const handleOpenChange = (key: string, next: boolean) => {
+    if (isCollapsed) return
+    setOpenGroups((prev) => ({ ...prev, [key]: next }))
+  }
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <TeamSwitcher teams={data.teams} />
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Platform</SidebarGroupLabel>
+          <SidebarMenu>
+            <Collapsible
+              className="group/collapsible"
+              open={openGroups.agents}
+              onOpenChange={(open) => handleOpenChange("agents", open)}
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton className="h-9">
+                    <Folder className="mr-2 h-4 w-4" />
+                    <span className="truncate">Agents</span>
+                    <ChevronRight className="ml-auto h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+              </SidebarMenuItem>
+              <CollapsibleContent asChild>
+                <SidebarMenu className="pl-2">
+                  {loading ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">Loading…</div>
+                  ) : summary.agents.length === 0 ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">No agents found</div>
+                  ) : (
+                    summary.agents.map((name) => (
+                      <SidebarMenuItem key={name}>
+                        <SidebarMenuButton
+                          className="pl-8 h-8"
+                          onClick={() => handleSelect("agent", name)}
+                        >
+                          <FileText className="mr-2 h-3.5 w-3.5" />
+                          <span className="truncate">{name}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))
+                  )}
+                </SidebarMenu>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              className="group/collapsible"
+              open={openGroups.config}
+              onOpenChange={(open) => handleOpenChange("config", open)}
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton className="h-9">
+                    <Plug className="mr-2 h-4 w-4" />
+                    <span className="truncate">Config</span>
+                    <ChevronRight className="ml-auto h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+              </SidebarMenuItem>
+              <CollapsibleContent asChild>
+                <SidebarMenu className="pl-2">
+                  {loading ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">Loading…</div>
+                  ) : summary.config.length === 0 ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">No config files</div>
+                  ) : (
+                    summary.config.map((name) => (
+                      <SidebarMenuItem key={name}>
+                        <SidebarMenuButton
+                          className="pl-8 h-8"
+                          onClick={() => handleSelect("config", name)}
+                        >
+                          <FileText className="mr-2 h-3.5 w-3.5" />
+                          <span className="truncate">{name}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))
+                  )}
+                </SidebarMenu>
+              </CollapsibleContent>
+            </Collapsible>
+
+            <Collapsible
+              className="group/collapsible"
+              open={openGroups.runs}
+              onOpenChange={(open) => handleOpenChange("runs", open)}
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton className="h-9">
+                    <Play className="mr-2 h-4 w-4" />
+                    <span className="truncate">Runs</span>
+                    <ChevronRight className="ml-auto h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+              </SidebarMenuItem>
+              <CollapsibleContent asChild>
+                <SidebarMenu className="pl-2">
+                  {loading ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">Loading…</div>
+                  ) : summary.runs.length === 0 ? (
+                    <div className="px-3 py-2 text-xs text-muted-foreground">No runs found</div>
+                  ) : (
+                    <>
+                      {visibleRuns.map((name) => (
+                        <SidebarMenuItem key={name}>
+                          <SidebarMenuButton
+                            className="pl-8 h-8"
+                            onClick={() => handleSelect("run", name)}
+                          >
+                            <FileText className="mr-2 h-3.5 w-3.5" />
+                            <span className="truncate">{name}</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      ))}
+                      {hasMoreRuns && (
+                        <SidebarMenuItem>
+                          <SidebarMenuButton className="pl-8 h-8 text-muted-foreground">
+                            <span className="truncate">View more…</span>
+                          </SidebarMenuButton>
+                        </SidebarMenuItem>
+                      )}
+                    </>
+                  )}
+                </SidebarMenu>
+              </CollapsibleContent>
+            </Collapsible>
+
+            {data.navMain.map((item) => (
+              <Collapsible
+                key={item.title}
+              className="group/collapsible"
+              open={openGroups[item.title]}
+              onOpenChange={(open) => handleOpenChange(item.title, open)}
+            >
+              <SidebarMenuItem>
+                <CollapsibleTrigger asChild>
+                  <SidebarMenuButton className="h-9">
+                    {item.title === "Scheduled" ? (
+                      <Clock3 className="mr-2 h-4 w-4" />
+                    ) : item.title === "Applets" ? (
+                      <Rocket className="mr-2 h-4 w-4" />
+                    ) : (
+                      <Folder className="mr-2 h-4 w-4" />
+                    )}
+                    <span className="truncate">{item.title}</span>
+                    <ChevronRight className="ml-auto h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </SidebarMenuButton>
+                </CollapsibleTrigger>
+                <CollapsibleContent asChild>
+                  <SidebarMenu className="pl-2">
+                    {item.items?.map((sub) => (
+                      <SidebarMenuItem key={sub.title}>
+                        <SidebarMenuButton className="pl-8 h-8">
+                          <span className="truncate">{sub.title}</span>
+                        </SidebarMenuButton>
+                      </SidebarMenuItem>
+                    ))}
+                  </SidebarMenu>
+                </CollapsibleContent>
+              </SidebarMenuItem>
+            </Collapsible>
+            ))}
+          </SidebarMenu>
+        </SidebarGroup>
+        <NavProjects projects={data.chatHistory} />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+      <SidebarRail />
+    </Sidebar>
+  )
+}

apps/rowboatx/components/json-editor.css

@@ -0,0 +1,197 @@
+.json-editor-wrapper {
+  height: 100%;
+  min-height: 240px;
+  max-height: 70vh;
+  overflow: auto;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  position: relative;
+  display: flex;
+}
+
+/* Dark mode wrapper */
+.dark .json-editor-wrapper {
+  background: hsl(var(--background));
+  border-color: hsl(var(--border));
+}
+
+@media (prefers-color-scheme: dark) {
+  .json-editor-wrapper {
+    background: hsl(var(--background));
+    border-color: hsl(var(--border));
+  }
+}
+
+.json-editor-line-numbers {
+  position: sticky;
+  left: 0;
+  top: 0;
+  width: 3.5rem;
+  flex-shrink: 0;
+  border-right: 1px solid hsl(var(--border) / 0.3);
+  background: hsl(var(--muted) / 0.03);
+  padding: 1rem 0.75rem 1rem 0.5rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  user-select: none;
+  z-index: 1;
+}
+
+.json-editor-line-number {
+  color: hsl(var(--muted-foreground) / 0.6);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Dark mode line numbers */
+.dark .json-editor-line-numbers {
+  background: hsl(var(--muted) / 0.15);
+  border-right-color: hsl(var(--border) / 0.5);
+}
+
+.dark .json-editor-line-number {
+  color: hsl(var(--muted-foreground) / 0.7);
+}
+
+@media (prefers-color-scheme: dark) {
+  .json-editor-line-numbers {
+    background: hsl(var(--muted) / 0.15);
+    border-right-color: hsl(var(--border) / 0.5);
+  }
+  
+  .json-editor-line-number {
+    color: hsl(var(--muted-foreground) / 0.7);
+  }
+}
+
+.json-editor-content {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  height: 100%;
+  outline: none;
+}
+
+.json-editor-content:focus-visible {
+  outline: 2px solid hsl(var(--ring) / 0.6);
+  outline-offset: 2px;
+}
+
+/* Code block styling */
+.json-editor-content pre {
+  margin: 0;
+  padding: 1rem 1rem 1rem 0.5rem;
+  background: transparent !important;
+  color: hsl(var(--foreground));
+  overflow-x: auto;
+  white-space: pre;
+  word-wrap: normal;
+  tab-size: 2;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  line-height: 1.75;
+  position: relative;
+}
+
+.json-editor-content pre code {
+  background: transparent !important;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  display: block;
+  white-space: pre;
+  word-wrap: normal;
+  min-height: 1.75rem;
+}
+
+/* Syntax highlighting for JSON - Light theme */
+.json-editor-content .hljs-attr {
+  color: #0969da;
+  font-weight: 500;
+}
+
+.json-editor-content .hljs-string {
+  color: #0a3069;
+}
+
+.json-editor-content .hljs-number,
+.json-editor-content .hljs-literal {
+  color: #0550ae;
+}
+
+.json-editor-content .hljs-punctuation {
+  color: hsl(var(--foreground) / 0.7);
+}
+
+.json-editor-content .hljs-keyword {
+  color: #cf222e;
+}
+
+.json-editor-content .hljs-comment {
+  color: #6e7781;
+  font-style: italic;
+}
+
+/* Dark mode support - Class-based */
+.dark .json-editor-content .hljs-attr {
+  color: #79c0ff;
+  font-weight: 500;
+}
+
+.dark .json-editor-content .hljs-string {
+  color: #a5d6ff;
+}
+
+.dark .json-editor-content .hljs-number,
+.dark .json-editor-content .hljs-literal {
+  color: #79c0ff;
+}
+
+.dark .json-editor-content .hljs-punctuation {
+  color: #c9d1d9;
+}
+
+.dark .json-editor-content .hljs-keyword {
+  color: #ff7b72;
+}
+
+.dark .json-editor-content .hljs-comment {
+  color: #8b949e;
+}
+
+/* Dark mode support - Media query */
+@media (prefers-color-scheme: dark) {
+  .json-editor-content .hljs-attr {
+    color: #79c0ff;
+    font-weight: 500;
+  }
+
+  .json-editor-content .hljs-string {
+    color: #a5d6ff;
+  }
+
+  .json-editor-content .hljs-number,
+  .json-editor-content .hljs-literal {
+    color: #79c0ff;
+  }
+
+  .json-editor-content .hljs-punctuation {
+    color: #c9d1d9;
+  }
+
+  .json-editor-content .hljs-keyword {
+    color: #ff7b72;
+  }
+
+  .json-editor-content .hljs-comment {
+    color: #8b949e;
+  }
+}
+

apps/rowboatx/components/json-editor.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { useEditor, EditorContent } from "@tiptap/react";
+import { useEffect, useState } from "react";
+import StarterKit from "@tiptap/starter-kit";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { common, createLowlight } from "lowlight";
+import "./json-editor.css";
+
+const lowlight = createLowlight(common);
+
+interface JsonEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+  readOnly?: boolean;
+}
+
+export function JsonEditor({ content, onChange, readOnly = false }: JsonEditorProps) {
+  const [lineCount, setLineCount] = useState(1);
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        codeBlock: false, // Disable default code block
+      }),
+      CodeBlockLowlight.configure({
+        lowlight,
+        defaultLanguage: "json",
+      }),
+    ],
+    immediatelyRender: false,
+    editable: !readOnly,
+    editorProps: {
+      attributes: {
+        class: "json-editor-content",
+      },
+    },
+    onUpdate: ({ editor }) => {
+      // Extract text content from the code block
+      const text = editor.getText();
+      onChange(text);
+      // Update line count
+      setLineCount(text.split("\n").length || 1);
+    },
+  });
+
+  // Set initial content and update when content prop changes
+  useEffect(() => {
+    if (!editor) return;
+    
+    const currentText = editor.getText().trim();
+    if (currentText !== content.trim()) {
+      // Set content using ProseMirror JSON structure
+      editor.commands.setContent({
+        type: "doc",
+        content: [
+          {
+            type: "codeBlock",
+            attrs: {
+              language: "json",
+            },
+            content: content ? [
+              {
+                type: "text",
+                text: content,
+              },
+            ] : [],
+          },
+        ],
+      });
+      setLineCount(content.split("\n").length || 1);
+    }
+  }, [editor, content]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="json-editor-wrapper">
+      <div className="json-editor-line-numbers">
+        {Array.from({ length: lineCount }, (_, i) => (
+          <div key={i} className="json-editor-line-number">
+            {i + 1}
+          </div>
+        ))}
+      </div>
+      <EditorContent editor={editor} />
+    </div>
+  );
+}
+

apps/rowboatx/components/markdown-viewer.css

@@ -0,0 +1,141 @@
+.markdown-viewer-wrapper {
+  height: 100%;
+  min-height: 240px;
+  max-height: 70vh;
+  overflow: auto;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--background));
+  padding: 1rem;
+}
+
+.markdown-content {
+  font-size: 0.875rem;
+  line-height: 1.75;
+  color: hsl(var(--foreground));
+}
+
+.markdown-content p {
+  margin: 0.75rem 0;
+}
+
+.markdown-content p:first-child {
+  margin-top: 0;
+}
+
+.markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4,
+.markdown-content h5,
+.markdown-content h6 {
+  font-weight: 600;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  line-height: 1.25;
+}
+
+.markdown-content h1 {
+  font-size: 1.875rem;
+}
+
+.markdown-content h2 {
+  font-size: 1.5rem;
+}
+
+.markdown-content h3 {
+  font-size: 1.25rem;
+}
+
+.markdown-content ul,
+.markdown-content ol {
+  margin: 0.75rem 0;
+  padding-left: 1.5rem;
+}
+
+.markdown-content li {
+  margin: 0.25rem 0;
+}
+
+.markdown-content code {
+  background: hsl(var(--muted));
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875em;
+}
+
+.markdown-content pre {
+  background: hsl(var(--muted));
+  padding: 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+}
+
+.markdown-content pre code {
+  background: transparent;
+  padding: 0;
+  display: block;
+}
+
+.markdown-content blockquote {
+  border-left: 4px solid hsl(var(--border));
+  padding-left: 1rem;
+  margin: 0.75rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+.markdown-content a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+
+.markdown-content a:hover {
+  text-decoration: none;
+}
+
+.markdown-content strong {
+  font-weight: 600;
+}
+
+.markdown-content em {
+  font-style: italic;
+}
+
+.markdown-content hr {
+  border: none;
+  border-top: 1px solid hsl(var(--border));
+  margin: 1.5rem 0;
+}
+
+.markdown-content table {
+  border-collapse: collapse;
+  margin: 0.75rem 0;
+  width: 100%;
+}
+
+.markdown-content table th,
+.markdown-content table td {
+  border: 1px solid hsl(var(--border));
+  padding: 0.5rem;
+}
+
+.markdown-content table th {
+  background: hsl(var(--muted));
+  font-weight: 600;
+}
+
+.markdown-content img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.375rem;
+  margin: 0.75rem 0;
+}
+
+

apps/rowboatx/components/markdown-viewer.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import "./markdown-viewer.css";
+
+interface MarkdownViewerProps {
+  content: string;
+}
+
+export function MarkdownViewer({ content }: MarkdownViewerProps) {
+  return (
+    <div className="markdown-viewer-wrapper markdown-content">
+      <ReactMarkdown remarkPlugins={[remarkGfm]}>
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+

apps/rowboatx/components/nav-main.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronRight, type LucideIcon } from "lucide-react"
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from "@/components/ui/sidebar"
+
+export function NavMain({
+  items,
+}: {
+  items: {
+    title: string
+    url: string
+    icon?: LucideIcon
+    isActive?: boolean
+    items?: {
+      title: string
+      url: string
+    }[]
+  }[]
+}) {
+  return (
+    <SidebarGroup>
+      <SidebarGroupLabel>Platform</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <Collapsible
+            key={item.title}
+            asChild
+            defaultOpen={item.isActive}
+            className="group/collapsible"
+          >
+            <SidebarMenuItem>
+              <CollapsibleTrigger asChild>
+                <SidebarMenuButton tooltip={item.title}>
+                  {item.icon && <item.icon />}
+                  <span>{item.title}</span>
+                  <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+                </SidebarMenuButton>
+              </CollapsibleTrigger>
+              <CollapsibleContent>
+                <SidebarMenuSub>
+                  {item.items?.map((subItem) => (
+                    <SidebarMenuSubItem key={subItem.title}>
+                      <SidebarMenuSubButton asChild>
+                        <a href={subItem.url}>
+                          <span>{subItem.title}</span>
+                        </a>
+                      </SidebarMenuSubButton>
+                    </SidebarMenuSubItem>
+                  ))}
+                </SidebarMenuSub>
+              </CollapsibleContent>
+            </SidebarMenuItem>
+          </Collapsible>
+        ))}
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

apps/rowboatx/components/nav-projects.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import {
+  MoreHorizontal,
+} from "lucide-react"
+
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+export function NavProjects({
+  projects,
+}: {
+  projects: {
+    name: string
+    url: string
+  }[]
+}) {
+  return (
+    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
+      <SidebarGroupLabel>Chat History</SidebarGroupLabel>
+      <SidebarMenu>
+        {projects.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <MoreHorizontal className="text-sidebar-foreground/70" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}

apps/rowboatx/components/nav-user.tsx

@@ -0,0 +1,177 @@
+"use client"
+
+import {
+  BadgeCheck,
+  Bell,
+  ChevronsUpDown,
+  CreditCard,
+  LogOut,
+  Sparkles,
+  Moon,
+  Sun,
+  MonitorCog,
+} from "lucide-react"
+import { useEffect, useState } from "react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavUser({
+  user,
+}: {
+  user: {
+    name: string
+    email: string
+    avatar: string
+  }
+}) {
+  const { isMobile } = useSidebar()
+  const [theme, setTheme] = useState<"light" | "dark" | "system">("system")
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    const saved = (localStorage.getItem("theme") as "light" | "dark" | "system") || "system"
+    setTheme(saved)
+    applyTheme(saved)
+  }, [])
+
+  useEffect(() => {
+    if (typeof window === "undefined") return
+    if (theme !== "system") return
+    const media = window.matchMedia("(prefers-color-scheme: dark)")
+    const listener = () => applyTheme("system")
+    media.addEventListener("change", listener)
+    return () => media.removeEventListener("change", listener)
+  }, [theme])
+
+  const applyTheme = (value: "light" | "dark" | "system") => {
+    const resolved =
+      value === "system"
+        ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
+        : value
+    const root = document.documentElement
+    root.classList.toggle("dark", resolved === "dark")
+    localStorage.setItem("theme", value)
+  }
+
+  const handleTheme = (value: "light" | "dark" | "system") => {
+    setTheme(value)
+    if (typeof window !== "undefined") {
+      applyTheme(value)
+    }
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <Avatar className="h-8 w-8 rounded-lg">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+              </Avatar>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                <span className="truncate text-xs">{user.email}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto size-4" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="p-0 font-normal">
+              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                <Avatar className="h-8 w-8 rounded-lg">
+                  <AvatarImage src={user.avatar} alt={user.name} />
+                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                </Avatar>
+                <div className="grid flex-1 text-left text-sm leading-tight">
+                  <span className="truncate font-medium">{user.name}</span>
+                  <span className="truncate text-xs">{user.email}</span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Theme</DropdownMenuLabel>
+              <DropdownMenuItem
+                className={theme === "light" ? "bg-muted" : ""}
+                onClick={() => handleTheme("light")}
+              >
+                <Sun className="mr-2" />
+                Light
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className={theme === "dark" ? "bg-muted" : ""}
+                onClick={() => handleTheme("dark")}
+              >
+                <Moon className="mr-2" />
+                Dark
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                className={theme === "system" ? "bg-muted" : ""}
+                onClick={() => handleTheme("system")}
+              >
+                <MonitorCog className="mr-2" />
+                System
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut />
+              Log out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

apps/rowboatx/components/team-switcher.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  if (!activeTeam) {
+    return null
+  }
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{activeTeam.name}</span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-md border">
+                  <team.logo className="size-3.5 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                <Plus className="size-4" />
+              </div>
+              <div className="text-muted-foreground font-medium">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

apps/rowboatx/components/tiptap-markdown-editor.css

@@ -0,0 +1,290 @@
+.tiptap-markdown-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 1rem;
+  min-height: 0;
+  width: 100%;
+  border-radius: 16px;
+  border: 1px solid hsl(var(--border));
+  background:
+    radial-gradient(circle at 14% 20%, hsl(var(--primary) / 0.08), transparent 32%),
+    radial-gradient(circle at 86% 10%, hsl(var(--primary) / 0.06), transparent 30%),
+    hsl(var(--background));
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  min-height: 460px;
+}
+
+.tiptap-markdown-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 12px;
+  border: 1px solid hsl(var(--border));
+  background: linear-gradient(120deg, hsl(var(--background)), hsl(var(--muted) / 0.4));
+  backdrop-filter: blur(10px);
+  flex-wrap: wrap;
+}
+
+.tiptap-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.tiptap-toolbar-separator {
+  width: 1px;
+  height: 28px;
+  background: hsl(var(--border));
+  opacity: 0.65;
+}
+
+.tiptap-toolbar-button {
+  display: grid;
+  place-items: center;
+  height: 32px;
+  width: 32px;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: hsl(var(--muted) / 0.4);
+  color: hsl(var(--foreground));
+  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.tiptap-toolbar-button:hover:not(:disabled) {
+  border-color: hsl(var(--primary) / 0.65);
+  color: hsl(var(--primary));
+  box-shadow: 0 4px 16px hsl(var(--primary) / 0.2);
+}
+
+.tiptap-toolbar-button.is-active {
+  background: hsl(var(--primary) / 0.12);
+  border-color: hsl(var(--primary));
+  color: hsl(var(--primary));
+}
+
+.tiptap-toolbar-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.tiptap-toolbar-pill {
+  margin-left: auto;
+  padding: 0.35rem 0.65rem;
+  border-radius: 0.65rem;
+  border: 1px solid hsl(var(--border));
+  background: hsl(var(--muted) / 0.4);
+  color: hsl(var(--muted-foreground));
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+}
+
+.tiptap-editor-pane {
+  border: 1px solid hsl(var(--border));
+  border-radius: 14px;
+  background: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.2));
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 360px;
+  flex: 1 1 auto;
+  min-height: 0;
+  max-height: 72vh;
+  overflow: auto;
+  position: relative;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
+}
+
+.tiptap-editor-surface {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  overflow: auto;
+}
+
+.tiptap-pane-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.tiptap-pane-title {
+  font-weight: 600;
+  font-size: 0.95rem;
+  letter-spacing: -0.01em;
+  color: hsl(var(--foreground));
+}
+
+.tiptap-pane-hint {
+  font-size: 0.8rem;
+  color: hsl(var(--muted-foreground));
+}
+
+.tiptap-pill {
+  padding: 0.25rem 0.6rem;
+  border-radius: 999px;
+  background: hsl(var(--primary) / 0.15);
+  color: hsl(var(--primary));
+  border: 1px solid hsl(var(--primary) / 0.4);
+  font-size: 0.75rem;
+}
+
+.tiptap-markdown-editor-content {
+  flex: 1 1 auto;
+  min-height: 300px;
+  max-height: 100%;
+  width: 100%;
+  padding: 0.35rem 0.35rem 0.75rem;
+  font-size: 0.96rem;
+  line-height: 1.8;
+  color: hsl(var(--foreground));
+  outline: none;
+  background: transparent;
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  word-break: break-word;
+  overflow-wrap: anywhere;
+  caret-color: hsl(var(--foreground));
+  min-height: 0;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) transparent;
+  box-sizing: border-box;
+}
+
+.tiptap-editor-surface .tiptap-markdown-editor-content,
+.tiptap-editor-surface .ProseMirror {
+  height: 100%;
+  max-height: 100%;
+}
+
+.tiptap-markdown-editor-content::selection,
+.tiptap-markdown-editor-content *::selection {
+  background: rgba(99, 102, 241, 0.55);
+  color: #ffffff;
+}
+
+.tiptap-markdown-editor-content::-webkit-scrollbar {
+  width: 8px;
+}
+
+.tiptap-markdown-editor-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.tiptap-markdown-editor-content::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 999px;
+}
+
+.tiptap-markdown-editor-content::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--border) / 0.9);
+}
+
+.tiptap-markdown-editor-content p {
+  margin: 0.35rem 0;
+}
+
+.tiptap-markdown-editor-content h1,
+.tiptap-markdown-editor-content h2,
+.tiptap-markdown-editor-content h3 {
+  font-weight: 700;
+  line-height: 1.25;
+  margin-top: 1.4rem;
+  margin-bottom: 0.5rem;
+}
+
+.tiptap-markdown-editor-content h1 {
+  font-size: 1.8rem;
+  letter-spacing: -0.02em;
+}
+
+.tiptap-markdown-editor-content h2 {
+  font-size: 1.4rem;
+}
+
+.tiptap-markdown-editor-content h3 {
+  font-size: 1.15rem;
+}
+
+.tiptap-markdown-editor-content strong {
+  font-weight: 700;
+}
+
+.tiptap-markdown-editor-content em {
+  font-style: italic;
+}
+
+.tiptap-markdown-editor-content ul,
+.tiptap-markdown-editor-content ol {
+  padding-left: 1.3rem;
+  margin: 0.6rem 0;
+  display: grid;
+  gap: 0.25rem;
+}
+
+.tiptap-markdown-editor-content li {
+  margin: 0;
+}
+
+.tiptap-markdown-editor-content code {
+  background: hsl(var(--muted));
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.35rem;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.9em;
+  color: hsl(var(--foreground));
+}
+
+.tiptap-markdown-editor-content pre {
+  background: #0f172a;
+  color: #e2e8f0;
+  padding: 1rem;
+  border-radius: 12px;
+  overflow-x: auto;
+  margin: 1.1rem 0;
+  border: 1px solid hsl(var(--border));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+}
+
+.tiptap-markdown-editor-content pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  display: block;
+}
+
+.tiptap-markdown-editor-content blockquote {
+  border-left: 4px solid hsl(var(--primary));
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+}
+
+.tiptap-markdown-editor-content hr {
+  border: none;
+  border-top: 2px solid hsl(var(--border));
+  margin: 1.5rem 0;
+}
+
+.tiptap-markdown-editor-content a {
+  color: hsl(var(--primary));
+  text-decoration: underline;
+}
+
+.tiptap-markdown-editor-content a:hover {
+  color: hsl(var(--primary) / 0.9);
+}
+
+.tiptap-markdown-editor-content p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: hsl(var(--muted-foreground));
+  pointer-events: none;
+  height: 0;
+}

apps/rowboatx/components/tiptap-markdown-editor.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import { useEffect } from "react";
+import TurndownService from "turndown";
+import { marked } from "marked";
+import {
+  Bold,
+  Code2,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link2,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+  Redo2,
+  Strikethrough,
+  Undo2,
+} from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import "./tiptap-markdown-editor.css";
+
+interface TiptapMarkdownEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+}
+
+// Configure marked to parse markdown
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+// Configure turndown to convert HTML back to markdown
+const turndownService = new TurndownService({
+  headingStyle: "atx",
+  codeBlockStyle: "fenced",
+});
+
+type ToolbarButtonProps = {
+  icon: LucideIcon;
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+function ToolbarButton({ icon: Icon, label, active, disabled, onClick }: ToolbarButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`tiptap-toolbar-button ${active ? "is-active" : ""}`}
+      aria-label={label}
+      title={label}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <Icon size={15} strokeWidth={2.25} />
+    </button>
+  );
+}
+
+export function TiptapMarkdownEditor({
+  content,
+  onChange,
+  readOnly = false,
+  placeholder = "Start typing...",
+}: TiptapMarkdownEditorProps) {
+  const editor = useEditor({
+    immediatelyRender: false,
+    content: content ? (marked.parse(content) as string) : "",
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3],
+        },
+        codeBlock: {
+          HTMLAttributes: {
+            class: "code-block",
+          },
+        },
+      }),
+      Placeholder.configure({
+        placeholder,
+        emptyEditorClass: "is-editor-empty",
+      }),
+      Link.configure({
+        openOnClick: false,
+        linkOnPaste: true,
+        autolink: true,
+      }),
+    ],
+    editorProps: {
+      attributes: {
+        class: "tiptap-markdown-editor-content",
+      },
+    },
+    editable: !readOnly,
+    onUpdate: ({ editor }) => {
+      const html = editor.getHTML();
+      const markdown = turndownService.turndown(html);
+      onChange(markdown);
+    },
+  });
+
+  // Keep editor content in sync when a new artifact is selected
+  useEffect(() => {
+    if (!editor) return;
+
+    const currentMarkdown = turndownService.turndown(editor.getHTML());
+    if ((currentMarkdown || "").trim() === (content || "").trim()) return;
+
+    editor.commands.setContent(content ? (marked.parse(content) as string) : "");
+  }, [editor, content]);
+
+  if (!editor) {
+    return null;
+  }
+
+  const handleLink = () => {
+    const previousUrl = editor.getAttributes("link").href as string | undefined;
+    const url = window.prompt("Paste or type a link", previousUrl ?? "");
+
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().unsetLink().run();
+      return;
+    }
+
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+
+  return (
+    <div className="tiptap-markdown-editor">
+      {!readOnly && (
+        <div className="tiptap-markdown-toolbar">
+          <div className="tiptap-toolbar-group">
+            <ToolbarButton
+              icon={Undo2}
+              label="Undo"
+              onClick={() => editor.chain().focus().undo().run()}
+              disabled={!editor.can().undo()}
+            />
+            <ToolbarButton
+              icon={Redo2}
+              label="Redo"
+              onClick={() => editor.chain().focus().redo().run()}
+              disabled={!editor.can().redo()}
+            />
+          </div>
+          <div className="tiptap-toolbar-separator" aria-hidden />
+          <div className="tiptap-toolbar-group">
+            <ToolbarButton
+              icon={Bold}
+              label="Bold"
+              active={editor.isActive("bold")}
+              onClick={() => editor.chain().focus().toggleBold().run()}
+            />
+            <ToolbarButton
+              icon={Italic}
+              label="Italic"
+              active={editor.isActive("italic")}
+              onClick={() => editor.chain().focus().toggleItalic().run()}
+            />
+            <ToolbarButton
+              icon={Strikethrough}
+              label="Strike"
+              active={editor.isActive("strike")}
+              onClick={() => editor.chain().focus().toggleStrike().run()}
+            />
+            <ToolbarButton
+              icon={Code2}
+              label="Code"
+              active={editor.isActive("code")}
+              onClick={() => editor.chain().focus().toggleCode().run()}
+            />
+          </div>
+          <div className="tiptap-toolbar-separator" aria-hidden />
+          <div className="tiptap-toolbar-group">
+            <ToolbarButton
+              icon={Heading1}
+              label="Heading 1"
+              active={editor.isActive("heading", { level: 1 })}
+              onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+            />
+            <ToolbarButton
+              icon={Heading2}
+              label="Heading 2"
+              active={editor.isActive("heading", { level: 2 })}
+              onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+            />
+            <ToolbarButton
+              icon={Heading3}
+              label="Heading 3"
+              active={editor.isActive("heading", { level: 3 })}
+              onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+            />
+          </div>
+          <div className="tiptap-toolbar-separator" aria-hidden />
+          <div className="tiptap-toolbar-group">
+            <ToolbarButton
+              icon={List}
+              label="Bullet list"
+              active={editor.isActive("bulletList")}
+              onClick={() => editor.chain().focus().toggleBulletList().run()}
+            />
+            <ToolbarButton
+              icon={ListOrdered}
+              label="Numbered list"
+              active={editor.isActive("orderedList")}
+              onClick={() => editor.chain().focus().toggleOrderedList().run()}
+            />
+            <ToolbarButton
+              icon={Quote}
+              label="Quote"
+              active={editor.isActive("blockquote")}
+              onClick={() => editor.chain().focus().toggleBlockquote().run()}
+            />
+            <ToolbarButton
+              icon={Code2}
+              label="Code block"
+              active={editor.isActive("codeBlock")}
+              onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            />
+            <ToolbarButton
+              icon={Minus}
+              label="Divider"
+              onClick={() => editor.chain().focus().setHorizontalRule().run()}
+            />
+          </div>
+          <div className="tiptap-toolbar-separator" aria-hidden />
+          <div className="tiptap-toolbar-group">
+            <ToolbarButton
+              icon={Link2}
+              label="Link"
+              active={editor.isActive("link")}
+              onClick={handleLink}
+            />
+          </div>
+          <div className="tiptap-toolbar-pill">Markdown</div>
+        </div>
+      )}
+      <div className="tiptap-editor-pane">
+        <div className="tiptap-pane-header">
+          <span className="tiptap-pane-title">Editor</span>
+          <span className="tiptap-pane-hint">Markdown + shortcuts</span>
+        </div>
+        <div className="tiptap-editor-surface">
+          <EditorContent editor={editor} />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/rowboatx/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

apps/rowboatx/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

apps/rowboatx/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

apps/rowboatx/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}