admin/infinite-canvas
1
0
Fork 0
mirror of https://github.com/basketikun/infinite-canvas.git synced 2026-08-05 17:04:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(agent): enhance local Agent connection handling with silent mode and update UI instructions

Browse Source
This commit is contained in:
HouYunFei
2026-07-14 17:08:20 +08:00
parent 7e0288d461
commit a5824f509e
8 changed files with 71 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/layout/app-config-modal.tsx
+2 -88
View File
@@ -1,5 +1,5 @@
import { App, Button, Form, Input, Modal, Progress, Select, Switch, Tabs } from "antd";
import { CircleAlert, Cloud, KeyRound, Link2, Plus, RefreshCw, ShieldCheck, Trash2, Wifi } from "lucide-react";
import { App, Button, Form, Input, Modal, Progress, Select, Tabs } from "antd";
import { CircleAlert, Cloud, Plus, RefreshCw, Trash2, Wifi } from "lucide-react";
import { useEffect, useState } from "react";
import { ModelPicker } from "@/components/model-picker";
@@ -7,7 +7,6 @@ import { fetchChannelModels } from "@/services/api/image";
import { syncAppDataToWebdav, type AppSyncDomainKey, type AppSyncProgressEvent } from "@/services/app-sync";
import { testWebdavConnection, WEBDAV_MANIFEST_FILE_NAME } from "@/services/webdav-sync";
import { audioFormatOptions, audioVoiceOptions, normalizeAudioSpeedValue } from "@/lib/audio-generation";
import { useAgentStore } from "@/stores/use-agent-store";
import { createModelChannel, defaultBaseUrlForApiFormat, filterModelsByCapability, modelOptionLabel, modelOptionsFromChannels, normalizeModelOptionValue, useConfigStore, type AiConfig, type ApiCallFormat, type ConfigTabKey, type ModelCapability, type ModelChannel } from "@/stores/use-config-store";
type ModelGroup = {
@@ -45,12 +44,6 @@ const webdavDomainLabels: Record<AppSyncDomainKey, string> = {
"image-workbench": "生图工作台",
"video-workbench": "视频创作台",
};
const codexSetupSteps = [
{ title: "方式一：在 Codex 中使用插件", text: "先在 Codex App 安装 Infinite Canvas 插件，再通过插件启动画布，插件会自动启动本地 Canvas Agent 并带上连接信息。" },
{ title: "方式二：直接运行 Agent", text: "不使用 Codex 插件时，在终端运行下面命令，再回到网页里连接或手动填入 Local URL 和 Connect token。", command: "npx -y @basketikun/canvas-agent" },
];
const codexPluginRemoveCommand = "codex plugin remove infinite-canvas";
const codexMcpRemoveCommand = "codex mcp remove infinite-canvas";
function createWebdavDomainProgress(): Record<AppSyncDomainKey, WebdavDomainProgress> {
return webdavDomainKeys.reduce(
@@ -77,16 +70,6 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
const shouldPromptContinue = useConfigStore((state) => state.shouldPromptContinue);
const setConfigDialogOpen = useConfigStore((state) => state.setConfigDialogOpen);
const clearPromptContinue = useConfigStore((state) => state.clearPromptContinue);
const agentUrl = useAgentStore((state) => state.url);
const agentToken = useAgentStore((state) => state.token);
const agentConnected = useAgentStore((state) => state.connected);
const agentEnabled = useAgentStore((state) => state.enabled);
const agentActivity = useAgentStore((state) => state.activity);
const agentConnectError = useAgentStore((state) => state.connectError);
const agentConfirmTools = useAgentStore((state) => state.confirmTools);
const setAgentState = useAgentStore((state) => state.setAgentState);
const connectAgent = useAgentStore((state) => state.connectAgent);
const disconnectAgent = useAgentStore((state) => state.disconnectAgent);
const modelOptions = config.models.map((model) => ({ label: modelOptionLabel(config, model), value: model }));
const webdavReady = Boolean(webdav.url.trim());
useEffect(() => setActiveTab(initialTab), [initialTab]);
@@ -222,14 +205,6 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
}
};
const updateAgentConfig = (patch: { url?: string; token?: string }) => {
setAgentState({ ...patch, connectError: "" });
if (patch.url !== undefined) localStorage.setItem("canvas-agent-url", patch.url.trim().replace(/\/$/, ""));
if (patch.token !== undefined) localStorage.setItem("canvas-agent-token", patch.token);
};
const toggleAgentConnection = () => (agentEnabled ? disconnectAgent({ connectError: "" }) : connectAgent());
return (
<>
<Tabs
@@ -423,67 +398,6 @@ export function AppConfigPanel({ showDoneButton = false, initialTab = "channels"
</Form>
),
},
{
key: "codex",
label: "Codex",
children: (
<Form layout="vertical" requiredMark={false}>
<section className="rounded-lg border border-stone-200 p-3 dark:border-stone-800">
<div className="mb-3 flex flex-wrap items-start justify-between gap-3">
<div>
<div className="flex items-center gap-2 text-sm font-semibold">
<Link2 className="size-4" />
连接本地 Codex
</div>
<div className="mt-1 text-xs text-stone-500">用于画布 Agent 连接本机 Codex 插件启动的 Canvas Agent。</div>
</div>
<div className={agentConnectError ? "text-xs text-red-600" : "text-xs text-stone-500"}>{agentConnectError ? "连接失败" : agentConnected ? agentActivity || "已连接" : agentEnabled ? "连接中" : "未连接"}</div>
</div>
<div className="mb-4 grid gap-2 md:grid-cols-2">
{codexSetupSteps.map((step, index) => (
<div key={step.title} className="rounded-md border border-stone-200 p-3 dark:border-stone-800">
<div className="text-xs font-semibold text-stone-500">连接方式 {index + 1}</div>
<div className="mt-1 text-sm font-medium">{step.title}</div>
<div className="mt-1 text-xs leading-5 text-stone-500">{step.text}</div>
{step.command ? <code className="mt-2 block overflow-x-auto rounded bg-stone-100 px-2 py-1.5 text-[11px] text-stone-700 dark:bg-stone-900 dark:text-stone-200">{step.command}</code> : null}
</div>
))}
</div>
<div className="mb-4 rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-200">
<div className="font-semibold">Codex 插件提醒</div>
<div className="mt-1">只有安装 Codex 插件或手动添加 MCP 后，工具列表才会进入 Codex 上下文并增加 token 消耗；仅运行 `npx -y @basketikun/canvas-agent` 启动本地 Agent 不会安装 MCP。</div>
<code className="mt-2 block overflow-x-auto rounded bg-white/70 px-2 py-1.5 text-[11px] text-amber-900 dark:bg-black/20 dark:text-amber-100">移除插件：{codexPluginRemoveCommand}</code>
<code className="mt-1 block overflow-x-auto rounded bg-white/70 px-2 py-1.5 text-[11px] text-amber-900 dark:bg-black/20 dark:text-amber-100">移除手动 MCP：{codexMcpRemoveCommand}</code>
</div>
<div className="grid gap-4 md:grid-cols-2">
<Form.Item label="Local URL" className="mb-4">
<Input prefix={<Link2 className="mr-1 size-4 text-stone-400" />} value={agentUrl} placeholder="http://127.0.0.1:17371" onChange={(event) => updateAgentConfig({ url: event.target.value })} />
</Form.Item>
<Form.Item label="Connect token" className="mb-4">
<Input.Password prefix={<KeyRound className="mr-1 size-4 text-stone-400" />} value={agentToken} placeholder="自动发现，或手动填入 Connect token" onChange={(event) => updateAgentConfig({ token: event.target.value })} />
</Form.Item>
</div>
{agentConnectError ? <div className="mb-3 rounded-md border border-red-200 px-3 py-2 text-xs text-red-600 dark:border-red-900/60">{agentConnectError}</div> : null}
<div className="mb-3 flex justify-end">
<Button type={agentEnabled ? "default" : "primary"} icon={<Wifi className="size-4" />} onClick={toggleAgentConnection}>
{agentConnected ? "断开" : agentEnabled ? "取消连接" : "连接"}
</Button>
</div>
<div className="flex flex-wrap items-center justify-between gap-3 rounded-md border border-stone-200 px-3 py-2 dark:border-stone-800">
<div className="flex min-w-0 items-center gap-2">
<ShieldCheck className="size-4 text-stone-500" />
<div>
<div className="text-sm font-medium">执行画布操作前确认</div>
<div className="mt-0.5 text-xs text-stone-500">关闭后，本地 Codex 可直接执行画布工具调用。不再需要人工确认</div>
</div>
</div>
<Switch checked={agentConfirmTools} onChange={(confirmTools) => setAgentState({ confirmTools })} />
</div>
</section>
</Form>
),
},
]}
/>
{showDoneButton ? (