@coze-arch/cli 0.0.18 → 0.0.19-beta.1

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

@@ -0,0 +1,65 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { Streamdown } from "streamdown";
+import { code } from "@streamdown/code";
+import { Link } from "react-router-dom";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { useFetch } from "../hooks/use-fetch";
+
+type DashboardDocDetail = {
+  slug: string;
+  title: string;
+  content: string;
+};
+
+type DashboardDocsResponse = {
+  selectedDoc: DashboardDocDetail | null;
+};
+
+const DEFAULT_DOC_SLUG = "getting-started";
+
+function DocsLink(props: ComponentPropsWithoutRef<"a">) {
+  const href = typeof props.href === "string" ? props.href : "";
+  const isInternalRoute = href.startsWith("/") && !href.startsWith("//");
+
+  if (isInternalRoute) {
+    return (
+      <Link to={href} className={props.className} title={props.title}>
+        {props.children}
+      </Link>
+    );
+  }
+
+  return <a {...props} />;
+}
+
+export function DocsPage() {
+  const { data, error, loading } = useFetch<DashboardDocsResponse>(`/api/docs?slug=${DEFAULT_DOC_SLUG}`);
+  const selectedDoc = data?.selectedDoc ?? null;
+
+  return (
+    <section className="p-4 sm:p-5 md:p-6">
+      {loading ? (
+        <Alert>
+          <AlertTitle>加载中</AlertTitle>
+          <AlertDescription>正在读取项目文档。</AlertDescription>
+        </Alert>
+      ) : error ? (
+        <Alert className="border-destructive/20 bg-destructive/5 text-destructive">
+          <AlertTitle>读取失败</AlertTitle>
+          <AlertDescription>错误：{error}</AlertDescription>
+        </Alert>
+      ) : !selectedDoc ? (
+        <Alert>
+          <AlertTitle>暂无文档</AlertTitle>
+          <AlertDescription>当前项目里还没有可展示的用户文档。</AlertDescription>
+        </Alert>
+      ) : (
+        <div className="docs-content streamdown-content">
+          <Streamdown plugins={{ code }} parseIncompleteMarkdown={true} components={{ a: DocsLink }}>
+            {selectedDoc.content}
+          </Streamdown>
+        </div>
+      )}
+    </section>
+  );
+}

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

@@ -0,0 +1,134 @@
+import React from "react";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { Badge } from "../components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
+import { useFetch } from "../hooks/use-fetch";
+
+type Overview = {
+  appName: string;
+  botStatus: string;
+  dashboardUrl: string;
+  agentMode: string;
+  workspaceDir: string;
+  agentDir: string;
+  enabledChannels: Array<{ id: string; enabled: boolean }>;
+};
+
+export function OverviewPage() {
+  const { data, error, loading } = useFetch<Overview>("/api/overview");
+  const enabledChannels = data?.enabledChannels ?? [];
+  const activeChannelCount = enabledChannels.filter((c) => c.enabled).length;
+  const botStatusText = data?.botStatus === "running" ? "运行中" : data?.botStatus === "stopped" ? "已停止" : "未知";
+
+  return (
+    <section className="space-y-4 p-4 sm:p-5 md:p-6">
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,1.6fr)_minmax(320px,1fr)]">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">系统摘要</CardTitle>
+            <CardDescription>当前 bot、渠道与工作区的核心状态。</CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-3">
+            <SummaryStat
+              label="运行状态"
+              value={botStatusText}
+              hint={data?.botStatus === "running" ? "服务运行中" : "等待服务状态"}
+            />
+            <SummaryStat
+              label="启用渠道"
+              value={String(activeChannelCount)}
+              hint={enabledChannels.length ? `${enabledChannels.length} 个渠道已接入` : "暂无渠道信息"}
+            />
+            <SummaryStat
+              label="Agent 模式"
+              value={data?.agentMode ?? "--"}
+              hint="当前启动模式"
+            />
+          </CardContent>
+        </Card>
+
+        <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>
+
+      <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>
+          )}
+        </CardContent>
+      </Card>
+    </section>
+  );
+}
+
+function SummaryStat(props: { label: string; value: string; hint: string }) {
+  return (
+    <div className="rounded-2xl border border-border/70 bg-muted/30 p-4">
+      <div className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{props.label}</div>
+      <div className="mt-3 text-2xl font-semibold tracking-tight">{props.value}</div>
+      <div className="mt-2 text-sm text-muted-foreground">{props.hint}</div>
+    </div>
+  );
+}
+
+function InfoRow(props: { label: string; children: React.ReactNode; mono?: boolean }) {
+  return (
+    <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>
+  );
+}

package/lib/__templates__/pi-agent/src/dashboard/web/src/services/chat-ws-service.ts

@@ -0,0 +1,167 @@
+export type ChatSessionIdentity = {
+  channel: "dashboard" | "feishu" | "wechat";
+  isDirectMessage: boolean;
+  senderId: string;
+  conversationId: string;
+  threadId?: string;
+};
+
+export type ChatWsClientFrame =
+  | { type: "chat.send"; runId: string; session?: ChatSessionIdentity; sessionKey?: string; text: string }
+  | { type: "chat.abort"; runId?: string; session?: ChatSessionIdentity; sessionKey?: string }
+  | { type: "ping" };
+
+export type ChatWsServerFrame =
+  | { type: "ack"; runId: string; status: "started" | "in_flight" }
+  | { type: "meta"; runId: string; sessionKey: string }
+  | { type: "delta"; runId: string; sessionKey: string; delta: string }
+  | { type: "done"; runId: string; sessionKey: string; text: string }
+  | { type: "error"; runId: string; sessionKey?: string; error: string };
+
+export type ChatWsLogFn = (
+  level: "debug" | "info" | "warn" | "error",
+  msg: string,
+  data?: Record<string, unknown>,
+) => void;
+
+export class ChatWsService {
+  private ws: WebSocket | null = null;
+  private ready: Promise<WebSocket> | null = null;
+  private manualClose = false;
+  private reconnectTimer: number | null = null;
+  private reconnectDelayMs = 300;
+
+  constructor(
+    private readonly opts: {
+      resolveUrl: () => string;
+      onFrame: (frame: ChatWsServerFrame) => void;
+      log?: ChatWsLogFn;
+    },
+  ) {}
+
+  private log(level: "debug" | "info" | "warn" | "error", msg: string, data?: Record<string, unknown>) {
+    try {
+      this.opts.log?.(level, msg, data);
+    } catch {
+      // ignore
+    }
+  }
+
+  async connect(): Promise<WebSocket> {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      return this.ws;
+    }
+    if (this.ready) {
+      return this.ready;
+    }
+
+    const wsUrl = this.opts.resolveUrl();
+    this.log("debug", "ws.connect.begin", { wsUrl });
+
+    this.ready = new Promise<WebSocket>((resolve, reject) => {
+      try {
+        const ws = new WebSocket(wsUrl);
+        this.ws = ws;
+        this.manualClose = false;
+
+        ws.onopen = () => {
+          this.log("info", "ws.open", { wsUrl });
+          this.reconnectDelayMs = 300;
+          resolve(ws);
+        };
+
+        ws.onerror = () => {
+          this.log("warn", "ws.onerror", { wsUrl });
+        };
+
+        ws.onclose = (evt) => {
+          this.log("warn", "ws.onclose", { wsUrl, code: evt.code, reason: evt.reason, manual: this.manualClose });
+          this.ws = null;
+          this.ready = null;
+          if (!this.manualClose && this.reconnectTimer == null) {
+            const delay = Math.min(2000, this.reconnectDelayMs);
+            this.reconnectDelayMs = Math.min(2000, this.reconnectDelayMs * 2);
+            this.reconnectTimer = window.setTimeout(() => {
+              this.reconnectTimer = null;
+              void this.connect();
+            }, delay);
+          }
+        };
+
+        ws.onmessage = (evt) => {
+          let msg: unknown = null;
+          try {
+            msg = JSON.parse(String(evt.data)) as unknown;
+          } catch {
+            this.log("warn", "ws.bad-json", { dataType: typeof evt.data });
+            return;
+          }
+          if (!msg || typeof msg !== "object") return;
+          const type = (msg as { type?: unknown }).type;
+          if (typeof type !== "string") return;
+          this.opts.onFrame(msg as ChatWsServerFrame);
+        };
+      } catch (e) {
+        reject(e);
+      }
+    });
+
+    try {
+      return await this.ready;
+    } catch (e) {
+      this.ready = null;
+      throw e;
+    }
+  }
+
+  async sendChat(params: { runId: string; session: ChatSessionIdentity; text: string }): Promise<void> {
+    const ws = await this.connect();
+    const frame: ChatWsClientFrame = {
+      type: "chat.send",
+      runId: params.runId,
+      session: params.session,
+      text: params.text,
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  async sendChatByKey(params: { runId: string; sessionKey: string; text: string }): Promise<void> {
+    const ws = await this.connect();
+    const frame: ChatWsClientFrame = {
+      type: "chat.send",
+      runId: params.runId,
+      sessionKey: params.sessionKey,
+      text: params.text,
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  abort(params: { runId?: string; session?: ChatSessionIdentity; sessionKey?: string }): void {
+    const ws = this.ws;
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    const frame: ChatWsClientFrame = {
+      type: "chat.abort",
+      ...(params.runId ? { runId: params.runId } : {}),
+      ...(params.session ? { session: params.session } : {}),
+      ...(params.sessionKey ? { sessionKey: params.sessionKey } : {}),
+    };
+    ws.send(JSON.stringify(frame));
+  }
+
+  close(): void {
+    if (this.reconnectTimer != null) {
+      window.clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.manualClose = true;
+    try {
+      this.ws?.close();
+    } catch {
+      // ignore
+    }
+    this.ws = null;
+    this.ready = null;
+  }
+}