@axhub/acp 0.1.0

package/bin/acp.mjs

@@ -0,0 +1,224 @@
+#!/usr/bin/env node
+
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = dirname(dirname(fileURLToPath(import.meta.url)));
+const launchCwd = process.cwd();
+const require = createRequire(import.meta.url);
+const DEFAULT_PORT = "32123";
+
+function printHelp() {
+	console.log(`Usage: acp [options]
+
+Start the ACP Web UI.
+
+Options:
+  -p, --port <port>              Port to listen on (default: ${DEFAULT_PORT})
+  -H, --hostname <hostname>      Hostname to bind (default: 0.0.0.0)
+  --cors-origin <origin[,..]>    Allowed CORS Origin for /api/* routes
+  --cors <origin[,..]>           Alias for --cors-origin
+  --cor <origin[,..]>            Alias for --cors-origin
+  -h, --help                     Show help
+
+Examples:
+  npx -y @axhub/acp
+  npx -y @axhub/acp --port ${DEFAULT_PORT}
+  npx -y @axhub/acp --cors-origin https://client.example.com
+`);
+}
+
+function readValue(args, index, flag) {
+	const value = args[index + 1];
+	if (!value || value.startsWith("-")) {
+		throw new Error(`${flag} requires a value`);
+	}
+	return value;
+}
+
+function splitInlineOption(arg) {
+	const separatorIndex = arg.indexOf("=");
+	if (separatorIndex === -1) return [arg, undefined];
+	return [arg.slice(0, separatorIndex), arg.slice(separatorIndex + 1)];
+}
+
+function parseArgs(args) {
+	const options = {
+		port: process.env.PORT || DEFAULT_PORT,
+		hostname: process.env.HOSTNAME || "0.0.0.0",
+		corsOrigins: process.env.ACP_UI_CORS_ORIGINS || "",
+	};
+
+	for (let index = 0; index < args.length; index += 1) {
+		const arg = args[index];
+
+		if (arg === "-h" || arg === "--help") {
+			return { help: true, options };
+		}
+
+		const [flag, inlineValue] = splitInlineOption(arg);
+
+		switch (flag) {
+			case "-p":
+			case "--port": {
+				const value = inlineValue ?? readValue(args, index, arg);
+				if (inlineValue === undefined) index += 1;
+				options.port = value;
+				break;
+			}
+			case "-H":
+			case "--hostname": {
+				const value = inlineValue ?? readValue(args, index, arg);
+				if (inlineValue === undefined) index += 1;
+				options.hostname = value;
+				break;
+			}
+			case "--cors-origin":
+			case "--cors":
+			case "--cor": {
+				const value = inlineValue ?? readValue(args, index, arg);
+				if (inlineValue === undefined) index += 1;
+				options.corsOrigins = value;
+				break;
+			}
+			default:
+				throw new Error(`Unknown option: ${arg}`);
+		}
+	}
+
+	return { help: false, options };
+}
+
+function quoteCommandArg(value) {
+	return /[\s"']/u.test(value) ? `"${value.replace(/"/gu, '\\"')}"` : value;
+}
+
+function runtimeHostForUrl(hostname) {
+	const normalized = String(hostname || "")
+		.trim()
+		.toLowerCase();
+	if (!normalized || normalized === "0.0.0.0" || normalized === "::") {
+		return "localhost";
+	}
+	return normalized.includes(":") && !normalized.startsWith("[")
+		? `[${normalized}]`
+		: normalized;
+}
+
+function buildServerRuntimeEnv(options) {
+	const webBaseUrl =
+		process.env.ACP_UI_SERVER_WEB_BASE_URL ||
+		`http://${runtimeHostForUrl(options.hostname)}:${options.port}`;
+	return {
+		ACP_UI_SERVER_PORT: options.port,
+		ACP_UI_SERVER_HOSTNAME: options.hostname,
+		ACP_UI_SERVER_PID: String(process.pid),
+		ACP_UI_SERVER_WEB_BASE_URL: webBaseUrl,
+		ACP_UI_SERVER_API_BASE_URL:
+			process.env.ACP_UI_SERVER_API_BASE_URL || `${webBaseUrl}/api`,
+		ACP_UI_SERVER_STARTED_AT:
+			process.env.ACP_UI_SERVER_STARTED_AT || new Date().toISOString(),
+	};
+}
+
+function codexAcpCommandLine() {
+	const codexAcpBin = require.resolve(
+		"@zed-industries/codex-acp/bin/codex-acp.js",
+	);
+	return [process.execPath, codexAcpBin].map(quoteCommandArg).join(" ");
+}
+
+function isCodexProviderName(value) {
+	const normalized = String(value || "")
+		.trim()
+		.toLowerCase();
+	return normalized === "codex" || normalized === "openai";
+}
+
+function hasCodexCommandOverride(env) {
+	if (env.ACP_CODEX_COMMAND?.trim()) return true;
+
+	const rawJson =
+		env.ACP_PROVIDER_COMMAND_OVERRIDES || env.AXHUB_ACP_COMMAND_OVERRIDES;
+	if (!rawJson) return false;
+
+	try {
+		const parsed = JSON.parse(rawJson);
+		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+			return false;
+		}
+		for (const [providerName, value] of Object.entries(parsed)) {
+			if (!isCodexProviderName(providerName)) continue;
+			if (typeof value === "string") return Boolean(value.trim());
+			if (!value || typeof value !== "object" || Array.isArray(value)) {
+				continue;
+			}
+			return typeof value.command === "string" && Boolean(value.command.trim());
+		}
+	} catch {
+		return false;
+	}
+
+	return false;
+}
+
+let parsed;
+try {
+	parsed = parseArgs(process.argv.slice(2));
+} catch (error) {
+	console.error(error instanceof Error ? error.message : String(error));
+	console.error("Run `acp --help` for usage.");
+	process.exit(1);
+}
+
+if (parsed.help) {
+	printHelp();
+	process.exit(0);
+}
+
+const nextBin =
+	process.env.ACP_UI_NEXT_BIN || require.resolve("next/dist/bin/next");
+const buildDir = join(packageRoot, ".next");
+if (!existsSync(buildDir)) {
+	console.error(
+		"Missing .next build output. Run `npm run build` before starting from this checkout, or publish the package with a production build included.",
+	);
+	process.exit(1);
+}
+
+const nextArgs = [
+	"start",
+	packageRoot,
+	"--port",
+	parsed.options.port,
+	"--hostname",
+	parsed.options.hostname,
+];
+
+const child = spawn(process.execPath, [nextBin, ...nextArgs], {
+	cwd: packageRoot,
+	env: {
+		...process.env,
+		PORT: parsed.options.port,
+		HOSTNAME: parsed.options.hostname,
+		ACP_UI_CORS_ORIGINS: parsed.options.corsOrigins,
+		ACP_UI_DEFAULT_WORKSPACE_PATH:
+			process.env.ACP_UI_DEFAULT_WORKSPACE_PATH || launchCwd,
+		...buildServerRuntimeEnv(parsed.options),
+		...(hasCodexCommandOverride(process.env)
+			? {}
+			: { ACP_CODEX_COMMAND: codexAcpCommandLine() }),
+	},
+	stdio: "inherit",
+});
+
+child.on("exit", (code, signal) => {
+	if (signal) {
+		process.kill(process.pid, signal);
+		return;
+	}
+	process.exit(code ?? 0);
+});

package/dist/app/globals.css

@@ -0,0 +1,146 @@
+@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-sans-stack);
+	--font-mono: var(--font-mono-stack);
+	--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);
+	--animate-shimmer: shimmer-sweep var(--shimmer-duration, 1000ms) linear
+		infinite both;
+	--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);
+	@keyframes shimmer-sweep {
+		from {
+			background-position: 150% 0;
+		}
+		to {
+			background-position: -100% 0;
+		}
+	}
+}
+
+:root {
+	--radius: 0.625rem;
+	--font-sans-stack:
+		ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+		sans-serif;
+	--font-mono-stack:
+		"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.141 0.005 285.823);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.141 0.005 285.823);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.141 0.005 285.823);
+	--primary: oklch(0.21 0.006 285.885);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.967 0.001 286.375);
+	--muted-foreground: oklch(0.552 0.016 285.938);
+	--accent: oklch(0.967 0.001 286.375);
+	--accent-foreground: oklch(0.21 0.006 285.885);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: oklch(0.705 0.015 286.067);
+	--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: hsl(0 0% 98%);
+	--sidebar-foreground: hsl(240 5.3% 26.1%);
+	--sidebar-primary: hsl(240 5.9% 10%);
+	--sidebar-primary-foreground: hsl(0 0% 98%);
+	--sidebar-accent: hsl(240 4.8% 95.9%);
+	--sidebar-accent-foreground: hsl(240 5.9% 10%);
+	--sidebar-border: hsl(220 13% 91%);
+	--sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+	--background: oklch(0.141 0.005 285.823);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.21 0.006 285.885);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.21 0.006 285.885);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.92 0.004 286.32);
+	--primary-foreground: oklch(0.21 0.006 285.885);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.274 0.006 286.033);
+	--muted-foreground: oklch(0.705 0.015 286.067);
+	--accent: oklch(0.274 0.006 286.033);
+	--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.552 0.016 285.938);
+	--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: hsl(240 5.9% 10%);
+	--sidebar-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-primary: hsl(224.3 76.3% 48%);
+	--sidebar-primary-foreground: hsl(0 0% 100%);
+	--sidebar-accent: hsl(240 3.7% 15.9%);
+	--sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+	--sidebar-border: hsl(240 3.7% 15.9%);
+	--sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+
+	:root {
+		color-scheme: light;
+	}
+
+	:root.dark {
+		color-scheme: dark;
+	}
+
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/dist/components/assistant-ui/acp-command-menu.d.ts

@@ -0,0 +1,2 @@
+export declare function AcpCommandTriggerButton(): import("react/jsx-runtime").JSX.Element;
+export declare function AcpCommandMenu(): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-ui/acp-command-menu.mjs

@@ -0,0 +1,176 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ComposerPrimitive, useAui, useAuiState, } from "@assistant-ui/react";
+import { SlashIcon, SparklesIcon } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Button } from "../ui/button.mjs";
+import { useAcpUiRuntimeContext } from "../../lib/acp2aisdk/client-context.mjs";
+import { persistSkillCommandCache, readSkillCommandCache, shouldFetchSkillCommands, } from "../../lib/acp2aisdk/skill-command-cache.mjs";
+import { acpApiClient } from "../../lib/api/client.mjs";
+import { cn } from "../../lib/utils.mjs";
+function commandToItem(command) {
+    return {
+        id: command.name,
+        type: "command",
+        label: command.name,
+        description: command.description,
+        metadata: Object.assign(Object.assign({ namespace: command.namespace, source: command.source }, (command.scope ? { scope: command.scope } : {})), (command.path ? { path: command.path } : {})),
+    };
+}
+function matchesCommand(command, query) {
+    const normalizedQuery = query.toLowerCase();
+    if (!normalizedQuery)
+        return true;
+    return (command.name.toLowerCase().includes(normalizedQuery) ||
+        command.description.toLowerCase().includes(normalizedQuery) ||
+        command.namespace.includes(normalizedQuery) ||
+        command.source.includes(normalizedQuery));
+}
+function createCommandAdapter(commands) {
+    return {
+        categories: () => [],
+        categoryItems: () => [],
+        search: (query) => commands
+            .filter((command) => matchesCommand(command, query))
+            .map(commandToItem),
+    };
+}
+function normalizeText(value) {
+    return typeof value === "string" ? value.trim() : "";
+}
+function normalizeSlashName(value) {
+    const normalized = normalizeText(value).replace(/^\/+/, "");
+    return normalized ? `/${normalized}` : "";
+}
+function commandListKey(commands) {
+    return commands
+        .map((command) => `${command.name}\u0000${command.description}\u0000${command.source}`)
+        .join("\n");
+}
+function mergeCommands(baseCommands, nextCommands) {
+    const merged = new Map();
+    for (const command of baseCommands) {
+        merged.set(command.name.toLowerCase(), command);
+    }
+    for (const command of nextCommands) {
+        merged.set(command.name.toLowerCase(), command);
+    }
+    return [...merged.values()];
+}
+function isRecord(value) {
+    return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function runtimeCommandsFromMetadata(custom) {
+    if (!isRecord(custom) || !isRecord(custom.acpAvailableCommands))
+        return [];
+    const byName = custom.acpAvailableCommands.byName;
+    if (!isRecord(byName))
+        return [];
+    return Object.values(byName).flatMap((command) => {
+        if (!isRecord(command))
+            return [];
+        const name = normalizeSlashName(command.name);
+        if (!name)
+            return [];
+        return [
+            {
+                name,
+                description: normalizeText(command.description) || "ACP command",
+                namespace: "acp",
+                source: "acp",
+            },
+        ];
+    });
+}
+function latestRuntimeCommands(messages) {
+    if (!Array.isArray(messages))
+        return [];
+    for (let index = messages.length - 1; index >= 0; index -= 1) {
+        const message = messages[index];
+        if (!isRecord(message))
+            continue;
+        if (message.role === "user")
+            return [];
+        if (message.role !== "assistant")
+            continue;
+        const metadata = isRecord(message.metadata) ? message.metadata : {};
+        const commands = runtimeCommandsFromMetadata(metadata.custom);
+        if (commands.length > 0)
+            return commands;
+    }
+    return [];
+}
+export function AcpCommandTriggerButton() {
+    const aui = useAui();
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-8 rounded-full text-muted-foreground", "aria-label": "\u6253\u5F00\u6280\u80FD", onClick: () => {
+            aui.thread().composer().setText("/");
+        }, children: _jsx(SlashIcon, { className: "size-4" }) }));
+}
+export function AcpCommandMenu() {
+    const aui = useAui();
+    const { provider, workspacePath } = useAcpUiRuntimeContext();
+    const threadId = useAuiState((state) => state.threads.mainThreadId);
+    const messages = useAuiState((state) => state.thread.messages);
+    const runtimeCommands = useMemo(() => latestRuntimeCommands(messages), [messages]);
+    const [commands, setCommands] = useState(() => { var _a, _b; return (_b = (_a = readSkillCommandCache(provider, workspacePath)) === null || _a === void 0 ? void 0 : _a.commands) !== null && _b !== void 0 ? _b : []; });
+    const commandsRef = useRef(commands);
+    useEffect(() => {
+        let cancelled = false;
+        const cached = readSkillCommandCache(provider, workspacePath);
+        if (cached) {
+            commandsRef.current = cached.commands;
+            setCommands(cached.commands);
+        }
+        if (!shouldFetchSkillCommands(cached))
+            return;
+        acpApiClient
+            .listCommands({
+            provider,
+            threadId,
+            workspacePath,
+        })
+            .then((body) => {
+            var _a;
+            if (cancelled)
+                return;
+            const persisted = persistSkillCommandCache(provider, workspacePath, Array.isArray(body === null || body === void 0 ? void 0 : body.commands) ? body.commands : []);
+            const nextCommands = (_a = persisted === null || persisted === void 0 ? void 0 : persisted.commands) !== null && _a !== void 0 ? _a : [];
+            commandsRef.current = nextCommands;
+            setCommands(nextCommands);
+        })
+            .catch(() => {
+            if (cancelled)
+                return;
+            if (!cached) {
+                commandsRef.current = [];
+                setCommands([]);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [provider, threadId, workspacePath]);
+    useEffect(() => {
+        var _a;
+        if (!runtimeCommands.length)
+            return;
+        const merged = mergeCommands(commandsRef.current, runtimeCommands);
+        if (commandListKey(merged) === commandListKey(commandsRef.current)) {
+            return;
+        }
+        const persisted = persistSkillCommandCache(provider, workspacePath, merged);
+        const nextCommands = (_a = persisted === null || persisted === void 0 ? void 0 : persisted.commands) !== null && _a !== void 0 ? _a : merged;
+        commandsRef.current = nextCommands;
+        setCommands(nextCommands);
+    }, [provider, runtimeCommands, workspacePath]);
+    const adapter = useMemo(() => createCommandAdapter(commands), [commands]);
+    return (_jsxs(ComposerPrimitive.Unstable_TriggerPopover, { char: "/", adapter: adapter, className: "absolute bottom-full left-0 z-50 mb-3 w-[min(26rem,calc(100vw-2rem))] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: [_jsx(ComposerPrimitive.Unstable_TriggerPopover.Action, { removeOnExecute: true, onExecute: (item) => {
+                    var _a;
+                    const command = commandsRef.current.find((candidate) => candidate.name === item.id);
+                    const nextText = (_a = command === null || command === void 0 ? void 0 : command.name) !== null && _a !== void 0 ? _a : item.label;
+                    aui.thread().composer().setText(`${nextText} `);
+                } }), _jsx("div", { className: "max-h-80 overflow-y-auto p-1.5", children: _jsx(ComposerPrimitive.Unstable_TriggerPopoverItems, { children: (items) => items.length ? (items.map((item, index) => (_jsxs(ComposerPrimitive.Unstable_TriggerPopoverItem, { item: item, index: index, className: cn("flex min-h-10 w-full items-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground data-[highlighted=true]:bg-accent"), children: [_jsx(SparklesIcon, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate font-mono", children: item.label }), item.description ? (_jsx("span", { className: "block truncate text-muted-foreground text-xs", children: item.description })) : null] })] }, `${item.type}-${item.id}`)))) : (_jsx(EmptyCommandState, {})) }) })] }));
+}
+function EmptyCommandState() {
+    return (_jsx("div", { className: "px-3 py-4 text-center text-muted-foreground text-sm", children: "\u6682\u65E0\u53EF\u7528\u547D\u4EE4" }));
+}

package/dist/components/assistant-ui/acp-elicitation-option-list.d.ts

@@ -0,0 +1,3 @@
+import type { ToolCallMessagePartProps } from "@assistant-ui/react";
+export declare function isAcpElicitationOptionListPart(part: ToolCallMessagePartProps): boolean;
+export declare function AcpElicitationOptionListCard(part: ToolCallMessagePartProps): import("react/jsx-runtime").JSX.Element | null;