@coze-arch/cli 0.0.19-alpha.502ddf → 0.0.19-alpha.a5388a

package/lib/__templates__/pi-agent/src/dashboard/web/src/pages/models-page.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
+import { useFetch } from "../hooks/use-fetch";
+import { toast } from "sonner";
+
+type ModelOption = {
+  value: string;
+  label: string;
+};
+
+type ModelsConfig = {
+  defaultModel: string;
+  options: ModelOption[];
+};
+
+export function ModelsPage() {
+  const { data, error, loading } = useFetch<ModelsConfig>("/api/models");
+  const [saving, setSaving] = React.useState(false);
+  const [form, setForm] = React.useState<ModelsConfig | null>(null);
+
+  React.useEffect(() => {
+    if (!data) return;
+    // Be defensive: if the backend returns an older shape or an error envelope,
+    // we still want a non-crashing UI.
+    setForm({
+      defaultModel: typeof data.defaultModel === "string" ? data.defaultModel : "",
+      options: Array.isArray((data as unknown as { options?: unknown }).options)
+        ? (data as unknown as { options: ModelOption[] }).options
+        : [],
+    });
+  }, [data]);
+
+  const saveDefaultModel = async (defaultModel: string) => {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/models", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ models: { defaultModel } }),
+      });
+      const json = (await res.json()) as { ok?: boolean; error?: string };
+      if (!res.ok || json.ok === false) {
+        throw new Error(json.error || `${res.status} ${res.statusText}`);
+      }
+      toast.success("已保存（需要重启进程生效）");
+    } catch (e) {
+      toast.error(`保存失败：${String(e)}`, { duration: 4500 });
+      throw e;
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const options = form?.options ?? [];
+  const onDefaultModelChange = async (nextValue: string) => {
+    if (!form || nextValue === form.defaultModel) return;
+    const previousValue = form.defaultModel;
+    setForm({ ...form, defaultModel: nextValue });
+    try {
+      await saveDefaultModel(nextValue);
+    } catch {
+      setForm((current) => (current ? { ...current, defaultModel: previousValue } : current));
+    }
+  };
+
+  return (
+    <section className="space-y-4 px-4 pb-4 pt-0">
+      <div className="sticky top-0 z-20 -mx-4 bg-background px-4 pb-3 pt-4">
+        <div className="space-y-1 bg-background py-0">
+          <div className="space-y-1">
+            <h1 className="text-lg font-semibold tracking-tight">模型配置</h1>
+          </div>
+        </div>
+      </div>
+
+      {loading ? (
+        <Alert>
+          <AlertTitle>加载中</AlertTitle>
+          <AlertDescription>正在读取模型配置。</AlertDescription>
+        </Alert>
+      ) : error ? (
+        <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+          <AlertTitle>读取失败</AlertTitle>
+          <AlertDescription>错误：{error}</AlertDescription>
+        </Alert>
+      ) : form ? (
+        options.length > 0 ? (
+          <Card className="border-border/60 bg-background/70 shadow-none">
+            <CardHeader className="!pb-3">
+              <CardTitle className="text-sm">默认模型</CardTitle>
+            </CardHeader>
+            <CardContent className="pb-5 pt-0">
+              <Select
+                value={form.defaultModel}
+                onValueChange={onDefaultModelChange}
+                disabled={saving}
+              >
+                <SelectTrigger aria-label="选择默认模型">
+                  <SelectValue placeholder="选择默认模型" />
+                </SelectTrigger>
+                <SelectContent>
+                  {options.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </CardContent>
+          </Card>
+        ) : (
+          <Alert>
+            <AlertTitle>没有可选模型</AlertTitle>
+            <AlertDescription>当前还没有可用模型，请先补充模型定义。</AlertDescription>
+          </Alert>
+        )
+      ) : null}
+    </section>
+  );
+}

package/lib/__templates__/pi-agent/src/dashboard/web/src/pages/overview-page.tsx

@@ -1,12 +1,8 @@
 import React from "react";
 import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
-import { Button } from "../components/ui/button";
+import { Badge } from "../components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
-import { Input } from "../components/ui/input";
-import { Label } from "../components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
 import { useFetch } from "../hooks/use-fetch";
-import { toast } from "sonner";
 
 type Overview = {
   appName: string;
@@ -18,41 +14,6 @@ type Overview = {
   enabledChannels: Array<{ id: string; enabled: boolean }>;
 };
 
-type Channels = {
-  routing: {
-    feishuGroupRequireMention: boolean;
-    wechatGroupRequireMention: boolean;
-  };
-  feishu: {
-    enabled: boolean;
-    requireMention?: boolean;
-    appId?: string;
-    domain?: string;
-    encryptKey?: string;
-    verificationToken?: string;
-    appSecret?: string;
-    thinkingReaction?: {
-      enabled?: boolean;
-      emojiType?: string;
-    };
-  };
-  wechat: {
-    enabled: boolean;
-    requireMention?: boolean;
-    implementation?: string;
-  };
-};
-
-type ModelOption = {
-  value: string;
-  label: string;
-};
-
-type ModelsConfig = {
-  defaultModel: string;
-  options: ModelOption[];
-};
-
 export function OverviewPage() {
   const { data, error, loading } = useFetch<Overview>("/api/overview");
   const enabledChannels = data?.enabledChannels ?? [];
@@ -67,7 +28,7 @@ export function OverviewPage() {
             <CardTitle className="text-base">系统摘要</CardTitle>
             <CardDescription>当前 bot、渠道与工作区的核心状态。</CardDescription>
           </CardHeader>
-          <CardContent className="grid gap-3 sm:grid-cols-2">
+          <CardContent className="grid gap-3 sm:grid-cols-3">
             <SummaryStat
               label="运行状态"
               value={botStatusText}
@@ -78,196 +39,76 @@ export function OverviewPage() {
               value={String(activeChannelCount)}
               hint={enabledChannels.length ? `${enabledChannels.length} 个渠道已接入` : "暂无渠道信息"}
             />
+            <SummaryStat
+              label="Agent 模式"
+              value={data?.agentMode ?? "--"}
+              hint="当前启动模式"
+            />
           </CardContent>
         </Card>
 
-        <DefaultModelSection />
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">渠道状态</CardTitle>
+            <CardDescription>快速查看各渠道是否已启用。</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-wrap gap-2">
+            {enabledChannels.length === 0 ? (
+              <Badge variant="outline">暂无数据</Badge>
+            ) : (
+              enabledChannels.map((channel) => (
+                <Badge
+                  key={channel.id}
+                  variant={channel.enabled ? "default" : "outline"}
+                  className="rounded-full px-3 py-1"
+                >
+                  {channel.id} · {channel.enabled ? "已开启" : "已关闭"}
+                </Badge>
+              ))
+            )}
+          </CardContent>
+        </Card>
       </div>
 
-      <ChannelsSection />
-    </section>
-  );
-}
-
-function DefaultModelSection() {
-  const { data, error, loading } = useFetch<ModelsConfig>("/api/models");
-  const [saving, setSaving] = React.useState(false);
-  const [form, setForm] = React.useState<ModelsConfig | null>(null);
-
-  React.useEffect(() => {
-    if (!data) return;
-    setForm({
-      defaultModel: typeof data.defaultModel === "string" ? data.defaultModel : "",
-      options: Array.isArray((data as unknown as { options?: unknown }).options)
-        ? (data as unknown as { options: ModelOption[] }).options
-        : [],
-    });
-  }, [data]);
-
-  const saveDefaultModel = async (defaultModel: string) => {
-    setSaving(true);
-    try {
-      const res = await fetch("/api/models", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ models: { defaultModel } }),
-      });
-      const json = (await res.json()) as { ok?: boolean; error?: string };
-      if (!res.ok || json.ok === false) {
-        throw new Error(json.error || `${res.status} ${res.statusText}`);
-      }
-      toast.success("已保存（需要重启进程生效）");
-    } catch (e) {
-      toast.error(`保存失败：${String(e)}`, { duration: 4500 });
-      throw e;
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const options = form?.options ?? [];
-  const onDefaultModelChange = async (nextValue: string) => {
-    if (!form || nextValue === form.defaultModel) return;
-    const previousValue = form.defaultModel;
-    setForm({ ...form, defaultModel: nextValue });
-    try {
-      await saveDefaultModel(nextValue);
-    } catch {
-      setForm((current) => (current ? { ...current, defaultModel: previousValue } : current));
-    }
-  };
-
-  return (
-    <Card className="border-border/60 bg-background/70 shadow-none">
-      <CardHeader className="pb-3">
-        <CardTitle className="text-base">默认模型</CardTitle>
-        <CardDescription>切换当前使用的默认模型。</CardDescription>
-      </CardHeader>
-      <CardContent>
-        {loading ? (
-          <Alert>
-            <AlertTitle>加载中</AlertTitle>
-            <AlertDescription>正在读取模型配置。</AlertDescription>
-          </Alert>
-        ) : error ? (
-          <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
-            <AlertTitle>读取失败</AlertTitle>
-            <AlertDescription>错误：{error}</AlertDescription>
-          </Alert>
-        ) : form && options.length > 0 ? (
-          <Select
-            value={form.defaultModel}
-            onValueChange={onDefaultModelChange}
-            disabled={saving}
-          >
-            <SelectTrigger aria-label="选择默认模型">
-              <SelectValue placeholder="选择默认模型" />
-            </SelectTrigger>
-            <SelectContent>
-              {options.map((option) => (
-                <SelectItem key={option.value} value={option.value}>
-                  {option.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        ) : form ? (
-          <Alert>
-            <AlertTitle>没有可选模型</AlertTitle>
-            <AlertDescription>当前还没有可用模型，请先补充模型定义。</AlertDescription>
-          </Alert>
-        ) : null}
-      </CardContent>
-    </Card>
-  );
-}
-
-function ChannelsSection() {
-  const { data, error, loading } = useFetch<Channels>("/api/channels");
-  const [saving, setSaving] = React.useState(false);
-  const [form, setForm] = React.useState<Channels | null>(null);
-
-  React.useEffect(() => {
-    if (data) setForm(data);
-  }, [data]);
-
-  const patch = (fn: (draft: Channels) => void) => {
-    if (!form) return;
-    const draft = { ...form, feishu: { ...form.feishu }, wechat: { ...form.wechat } };
-    fn(draft);
-    setForm(draft);
-  };
-
-  const onSave = async () => {
-    if (!form) return;
-    setSaving(true);
-    try {
-      const res = await fetch("/api/channels", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ channels: form }),
-      });
-      const json = (await res.json()) as { ok?: boolean; error?: string };
-      if (!res.ok || json.ok === false) {
-        throw new Error(json.error || `${res.status} ${res.statusText}`);
-      }
-      toast.success("已保存（需要重启进程生效）");
-    } catch (e) {
-      toast.error(`保存失败：${String(e)}`, { duration: 4500 });
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  return (
-    <Card className="border-border/60 bg-background/70 shadow-none">
-      <CardHeader>
-        <CardTitle className="text-base">飞书配置</CardTitle>
-        <CardDescription>管理飞书渠道的启用状态与接入凭证。</CardDescription>
-      </CardHeader>
-      <CardContent>
-        {loading ? (
-          <Alert>
-            <AlertTitle>加载中</AlertTitle>
-            <AlertDescription>正在读取渠道配置。</AlertDescription>
-          </Alert>
-        ) : error ? (
-          <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
-            <AlertTitle>读取失败</AlertTitle>
-            <AlertDescription>错误：{error}</AlertDescription>
-          </Alert>
-        ) : form ? (
-          <div className="space-y-4">
-            <div className="grid gap-4">
-              <CheckboxField
-                label="启用状态"
-                checked={!!form.feishu.enabled}
-                onChange={(checked) => patch((d) => (d.feishu.enabled = checked))}
-              />
-              <TextField
-                label="App ID"
-                value={form.feishu.appId ?? ""}
-                onChange={(value) => patch((d) => (d.feishu.appId = value))}
-              />
-              <TextField
-                label="App Secret"
-                value={form.feishu.appSecret ?? ""}
-                onChange={(value) => patch((d) => (d.feishu.appSecret = value))}
-              />
-            </div>
-            <div className="flex justify-start">
-              <Button
-                onClick={onSave}
-                disabled={!form || saving || loading || Boolean(error)}
-                className="shrink-0"
-              >
-                {saving ? "保存中…" : "保存"}
-              </Button>
+      <Card className="overflow-hidden">
+        <CardHeader>
+          <CardTitle>概览</CardTitle>
+          <CardDescription>关键运行信息</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {loading ? (
+            <Alert>
+              <AlertTitle>加载中</AlertTitle>
+              <AlertDescription>正在获取 Dashboard 运行信息。</AlertDescription>
+            </Alert>
+          ) : error ? (
+            <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+              <AlertTitle>请求失败</AlertTitle>
+              <AlertDescription>错误：{error}</AlertDescription>
+            </Alert>
+          ) : (
+            <div className="grid gap-3">
+              <InfoRow label="面板地址">
+                <a
+                  className="underline decoration-border underline-offset-4 transition-colors hover:text-primary"
+                  href={data?.dashboardUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {data?.dashboardUrl}
+                </a>
+              </InfoRow>
+              <InfoRow label="工作区目录" mono>
+                {data?.workspaceDir}
+              </InfoRow>
+              <InfoRow label="Agent 目录" mono>
+                {data?.agentDir}
+              </InfoRow>
             </div>
-          </div>
-        ) : null}
-      </CardContent>
-    </Card>
+          )}
+        </CardContent>
+      </Card>
+    </section>
   );
 }
 
@@ -281,50 +122,13 @@ function SummaryStat(props: { label: string; value: string; hint: string }) {
   );
 }
 
-function FieldShell(props: { label: string; children: React.ReactNode; description?: string }) {
+function InfoRow(props: { label: string; children: React.ReactNode; mono?: boolean }) {
   return (
-    <div className="space-y-2">
-      <Label className="text-xs uppercase tracking-[0.16em] text-muted-foreground">{props.label}</Label>
-      {props.children}
-      {props.description ? <p className="text-xs text-muted-foreground">{props.description}</p> : null}
+    <div className="grid gap-2 rounded-xl border border-border/60 bg-muted/30 px-4 py-3 md:grid-cols-[220px_minmax(0,1fr)] md:items-start">
+      <div className="text-sm font-medium text-muted-foreground">{props.label}</div>
+      <div className={props.mono ? "[overflow-wrap:anywhere] font-mono text-xs sm:text-sm" : "[overflow-wrap:anywhere] text-sm"}>
+        {props.children}
+      </div>
     </div>
   );
 }
-
-function TextField(props: {
-  label: string;
-  value: string;
-  placeholder?: string;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <FieldShell label={props.label}>
-      <Input
-        className="font-mono text-xs sm:text-sm"
-        value={props.value}
-        placeholder={props.placeholder}
-        onChange={(e) => props.onChange(e.target.value)}
-      />
-    </FieldShell>
-  );
-}
-
-function CheckboxField(props: {
-  label: string;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
-}) {
-  return (
-    <FieldShell label={props.label}>
-      <label className="flex h-10 items-center gap-3 rounded-md border border-input bg-background/80 px-3 text-sm">
-        <input
-          type="checkbox"
-          className="h-4 w-4 rounded border-border accent-primary"
-          checked={props.checked}
-          onChange={(e) => props.onChange(e.target.checked)}
-        />
-        <span className="text-sm text-foreground">{props.checked ? "已启用" : "未启用"}</span>
-      </label>
-    </FieldShell>
-  );
-}

package/lib/__templates__/pi-agent/src/dashboard/web/src/styles.css

@@ -201,3 +201,94 @@
   max-width: 100%;
   height: auto;
 }
+
+.docs-content [data-streamdown] {
+  overflow-wrap: anywhere;
+}
+
+.docs-content h1,
+.docs-content h2,
+.docs-content h3,
+.docs-content h4 {
+  margin: 1.5rem 0 0.75rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.docs-content h1:first-child,
+.docs-content h2:first-child,
+.docs-content h3:first-child {
+  margin-top: 0;
+}
+
+.docs-content h1 {
+  font-size: 1.5rem;
+}
+
+.docs-content h2 {
+  font-size: 1.2rem;
+}
+
+.docs-content h3 {
+  font-size: 1rem;
+}
+
+.docs-content p,
+.docs-content ul,
+.docs-content ol,
+.docs-content table,
+.docs-content blockquote {
+  margin: 0.75rem 0;
+}
+
+.docs-content ul,
+.docs-content ol {
+  padding-left: 1.25rem;
+}
+
+.docs-content li + li {
+  margin-top: 0.35rem;
+}
+
+.docs-content a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.docs-content hr {
+  margin: 1.25rem 0;
+  border: 0;
+  border-top: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+}
+
+.docs-content blockquote {
+  border-left: 3px solid color-mix(in oklab, var(--border) 100%, transparent);
+  padding-left: 1rem;
+  color: var(--muted-foreground);
+}
+
+.docs-content table {
+  width: 100%;
+  border-collapse: collapse;
+  overflow: hidden;
+  border-radius: 0.875rem;
+  border: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+}
+
+.docs-content th,
+.docs-content td {
+  border-bottom: 1px solid color-mix(in oklab, var(--border) 100%, transparent);
+  padding: 0.75rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+.docs-content th {
+  background: color-mix(in oklab, var(--muted) 80%, var(--background));
+  font-weight: 600;
+}
+
+.docs-content tbody tr:last-child td {
+  border-bottom: 0;
+}

package/lib/__templates__/pi-agent/tests/config.test.ts

@@ -300,78 +300,16 @@ test("loadBotAppConfig builds the app config from config.json plus env-backed ch
 
   rmSync(tempRoot, { recursive: true, force: true });
 
-  assert.equal(getDefaultConfigPath(), resolve(process.cwd(), "<%= workspaceDir %>/config.json"));
+  assert.equal(getDefaultConfigPath(), resolve(process.cwd(), "../workspace/config.json"));
   assert.equal(loaded.agent.mode, "pi");
   assert.equal(loaded.agent.provider, "coze");
   assert.equal(loaded.agent.model, "auto");
   assert.equal(loaded.agent.configPath, configPath);
   assert.equal(loaded.agent.thinkingLevel, "high");
   assert.equal(loaded.agent.cwd, dirname(configPath));
-  assert.equal(
-    (((loaded.configRoot?.agents as { defaults?: { model?: { primary?: string } } })?.defaults?.model?.primary) ?? ""),
-    "coze/auto"
-  );
   assert.equal(loaded.channels.feishu?.appId, "app-id");
   assert.equal(loaded.channels.feishu?.verificationToken, "verify-token");
   assert.equal(loaded.routing.feishuGroupRequireMention, false);
   assert.equal(loaded.channels.feishu?.thinkingReaction?.enabled, false);
   assert.equal(loaded.channels.feishu?.thinkingReaction?.emojiType, "OneSecond");
 });
-
-test("loadConfig falls back to a minimal mock config when config.json is missing", () => {
-  const tempDir = mkdtempSync(join(tmpdir(), "pi-bot-missing-config-"));
-  const configPath = join(tempDir, "workspace", "config.json");
-
-  const loaded = loadConfig(configPath);
-
-  rmSync(tempDir, { recursive: true, force: true });
-
-  assert.equal(loaded.source, "fallback-mock");
-  assert.equal(loaded.path, configPath);
-  assert.equal(loaded.workspaceDir, dirname(configPath));
-  assert.deepEqual(loaded.defaultModel, {
-    provider: "openai",
-    modelId: "gpt-5-mini"
-  });
-  assert.equal(loaded.config.channels?.feishu?.enabled, false);
-  assert.equal(loaded.config.channels?.wechat?.enabled, false);
-});
-
-test("loadBotAppConfig falls back to mock mode and skips file config path when config.json is missing", () => {
-  const tempDir = mkdtempSync(join(tmpdir(), "pi-bot-missing-config-"));
-  const configPath = join(tempDir, "workspace", "config.json");
-
-  const loaded = loadBotAppConfig({
-    configPath,
-    env: {}
-  });
-
-  rmSync(tempDir, { recursive: true, force: true });
-
-  assert.equal(loaded.agent.mode, "mock");
-  assert.equal(loaded.agent.provider, "openai");
-  assert.equal(loaded.agent.model, "gpt-5-mini");
-  assert.equal(loaded.agent.configPath, undefined);
-  assert.equal(loaded.agent.cwd, dirname(configPath));
-  assert.equal(
-    (((loaded.configRoot?.agents as { defaults?: { model?: { primary?: string } } })?.defaults?.model?.primary) ?? ""),
-    "openai/gpt-5-mini"
-  );
-});
-
-test("loadBotAppConfig still allows env to override mode when config.json is missing", () => {
-  const tempDir = mkdtempSync(join(tmpdir(), "pi-bot-missing-config-"));
-  const configPath = join(tempDir, "workspace", "config.json");
-
-  const loaded = loadBotAppConfig({
-    configPath,
-    env: {
-      PI_BOT_AGENT_MODE: "pi"
-    }
-  });
-
-  rmSync(tempDir, { recursive: true, force: true });
-
-  assert.equal(loaded.agent.mode, "pi");
-  assert.equal(loaded.agent.configPath, undefined);
-});