hololake-system-architecture/product-source/hololake-clean-desktop/src/App.tsx

import { useEffect, useMemo, useRef, useState } from "react";
import { check } from "@tauri-apps/plugin-updater";
import { relaunch } from "@tauri-apps/plugin-process";
import { listen } from "@tauri-apps/api/event";
import { Icon } from "./icons";
import * as api from "./runtime";
import type {
  KnowledgeDocument,
  KnowledgeSummary,
  SourceKind,
  RuntimeOverview,
  SystemSnapshot,
} from "./types";
import {
  MarkdownDocument,
  documentOutline,
  jumpToHeading,
  splitFrontmatter,
} from "./modules/knowledge-render";
import { formatHoloLakeTime } from "./time";

type View =
  | "channel"
  | "knowledge"
  | "market"
  | "history"
  | "portal"
  | "settings";
const nav: [View, string, string][] = [
  ["channel", "我的频道", "channel"],
  ["knowledge", "光湖知识库", "book"],
  ["market", "模块商城", "cube"],
  ["history", "系统演化史", "history"],
  ["portal", "企业门户", "building"],
  ["settings", "设置", "settings"],
];
const labels: Record<SourceKind, string> = {
  USER_MESSAGE: "用户语言",
  PERSONA_RESPONSE: "人格回应",
  EXTERNAL_AI_MESSAGE: "外部 AI",
  SYSTEM_CONTEXT: "系统环境",
  PROTOCOL_EVENT: "协议运行",
  AGENT_ACTION: "Agent 执行",
  TOOL_RESULT: "工具结果",
  SYSTEM_RECEIPT: "系统回执",
};

export default function App() {
  const [data, setData] = useState<SystemSnapshot | null>(null),
    [runtime, setRuntime] = useState<RuntimeOverview | null>(null),
    [view, setView] = useState<View>("channel"),
    [error, setError] = useState(""),
    [busy, setBusy] = useState(false);
  const refresh = () =>
    api
      .snapshot()
      .then(setData)
      .catch((e) => setError(String(e)));
  const refreshRuntime = () =>
    api
      .runtimeOverview()
      .then(setRuntime)
      .catch((e) => setError(String(e)));
  const refreshAll = () => {
    refresh();
    refreshRuntime();
  };
  useEffect(() => {
    refreshAll();
    if (!("__TAURI_INTERNALS__" in window)) return;
    let unlisten: (() => void) | undefined;
    listen("hololake-runtime-event", () => refreshAll()).then((dispose) => {
      unlisten = dispose;
    });
    return () => unlisten?.();
  }, []);
  if (!data)
    return (
      <div className="boot">
        <div className="lake-mark" />
        正在进入 HoloLake…
      </div>
    );
  if (!data.channel) return <Onboarding onDone={refreshAll} error={error} />;
  return (
    <div className="app-shell">
      <div className="titlebar">
        <div className="traffic">
          <i />
          <i />
          <i />
        </div>
        <span>HoloLake</span>
        <span className="version">
          v{data.appVersion.replace("-browser", "")}
        </span>
      </div>
      <aside className="rail">
        <div className="brand-orbit">
          <span />
        </div>
        <nav>
          {nav.map(([id, label, icon]) => (
            <button
              key={id}
              className={view === id ? "active" : ""}
              aria-label={label}
              onClick={() => setView(id)}
            >
              <Icon name={icon} />
              <span>{label}</span>
            </button>
          ))}
        </nav>
        <div className="channel-mini">
          <div className="mini-lake" />
          <div>
            <strong>{data.channel.name}</strong>
            <small>{data.channel.channelId}</small>
          </div>
        </div>
      </aside>
      <main>
        {view === "channel" && (
          <Channel
            data={data}
            runtime={runtime}
            refresh={refreshAll}
            openKnowledge={() => setView("knowledge")}
          />
        )}{" "}
        {view === "knowledge" && <Knowledge data={data} refresh={refresh} />}{" "}
        {view === "market" && <Market />}{" "}
        {view === "history" && <History data={data} />}{" "}
        {view === "portal" && <Portal />}{" "}
        {view === "settings" && (
          <Settings
            data={data}
            runtime={runtime}
            refresh={refreshAll}
            busy={busy}
            setBusy={setBusy}
            setError={setError}
          />
        )}
      </main>
      {error && (
        <div className="toast" role="alert">
          <span>{error}</span>
          <button onClick={() => setError("")}>关闭</button>
        </div>
      )}
    </div>
  );
}

function Onboarding({ onDone, error }: { onDone: () => void; error: string }) {
  const [name, setName] = useState("");
  const go = async () => {
    if (!name.trim()) return;
    await api.createChannel(name.trim());
    onDone();
  };
  return (
    <div className="onboard">
      <div className="stars" />
      <section>
        <div className="origin-light" />
        <h1>为你的频道起一个名字</h1>
        <p>
          这是属于你的私人初始化频道。系统将为它登记唯一编号，并在本机建立私人
          Git。
        </p>
        <label>
          频道名称
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            onKeyDown={(e) => e.key === "Enter" && go()}
            placeholder="例如：我的光湖"
            autoFocus
          />
        </label>
        <button onClick={go} disabled={!name.trim()}>
          建立我的频道
        </button>
        {error && <small>{error}</small>}
      </section>
      <footer>GH-AIOS · 光湖语言系统 · 通用人工智能操作平台</footer>
    </div>
  );
}

function Channel({
  data,
  runtime,
  refresh,
  openKnowledge,
}: {
  data: SystemSnapshot;
  runtime: RuntimeOverview | null;
  refresh: () => void;
  openKnowledge: () => void;
}) {
  const [text, setText] = useState("");
  const send = async () => {
    if (!text.trim()) return;
    await api.submitMessage(text.trim());
    setText("");
    refresh();
  };
  return (
    <div className="page channel-page">
      <header>
        <div>
          <h1>{data.channel?.name}</h1>
          <p>个人初始化频道</p>
        </div>
        <button className="soft" onClick={openKnowledge}>
          打开光湖知识库
        </button>
      </header>
      <div className="channel-grid">
        <div className="channel-primary">
          <section className="conversation">
            <div className="welcome">
              <div className="lake-mark" />
              <h2>频道已经准备好</h2>
              <p>
                这里保存你与人格体的语言。系统动作会被分流到下方执行记录，不再混入对话。
              </p>
            </div>
            {data.timeline
              .filter(
                (e) =>
                  e.sourceKind === "USER_MESSAGE" ||
                  e.sourceKind === "PERSONA_RESPONSE" ||
                  e.sourceKind === "EXTERNAL_AI_MESSAGE",
              )
              .slice(0, 8)
              .reverse()
              .map((e) => (
                <article
                  className={
                    e.sourceKind === "USER_MESSAGE"
                      ? "human"
                      : e.sourceKind === "PERSONA_RESPONSE"
                        ? "persona"
                        : "external-ai"
                  }
                  key={e.eventId}
                >
                  <span>{labels[e.sourceKind]}</span>
                  <p>{e.content}</p>
                </article>
              ))}
          </section>
          {runtime &&
            runtime.proposals.some(
              (proposal) => proposal.state === "PENDING_HUMAN_APPROVAL",
            ) && (
              <section className="approval-queue">
                <h2>等待你确认的 Agent 动作</h2>
                {runtime.proposals
                  .filter(
                    (proposal) => proposal.state === "PENDING_HUMAN_APPROVAL",
                  )
                  .map((proposal) => (
                    <article key={proposal.proposalId}>
                      <div>
                        <strong>{proposal.gir.programId}</strong>
                        <p>
                          {proposal.gir.actions
                            .map((action) => action.operation)
                            .join(" → ")}
                        </p>
                        <small>
                          {proposal.clientId} · {proposal.proposalId}
                        </small>
                      </div>
                      <div>
                        <button
                          className="soft"
                          onClick={async () => {
                            await api.rejectProposal(proposal.proposalId);
                            refresh();
                          }}
                        >
                          驳回
                        </button>
                        <button
                          onClick={async () => {
                            await api.approveProposal(proposal.proposalId);
                            refresh();
                          }}
                        >
                          批准并执行
                        </button>
                      </div>
                    </article>
                  ))}
              </section>
            )}
          <ReceiptStream data={data} />
          <div className="composer">
            <textarea
              value={text}
              onChange={(e) => setText(e.target.value)}
              placeholder={`和${data.channel?.name}说点什么…`}
              onKeyDown={(e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                  e.preventDefault();
                  send();
                }
              }}
            />
            <button onClick={send} aria-label="发送">
              ↗
            </button>
            <small>Enter 发送 · Shift + Enter 换行</small>
          </div>
        </div>
        <aside className="channel-context" aria-label="频道运行状态">
          <article>
            <h2>当前频道</h2>
            <strong>{data.channel?.name}</strong>
            <p>{data.channel?.channelId}</p>
          </article>
          <article>
            <h2>私人 Git</h2>
            <strong>本机已建立</strong>
            <p className="path">{data.channel?.privateGitPath}</p>
          </article>
          <article>
            <h2>公众人格运行时</h2>
            <strong>
              {runtime?.persona.personas[0]?.displayName ?? "尚未建立"}
            </strong>
            <p>
              {runtime?.persona.personas[0]?.state ?? "不会自动生成默认人格"}
            </p>
          </article>
          <article>
            <h2>GLP 实时桥</h2>
            <strong>
              {runtime?.realtime.state ?? "正在启动"} ·{" "}
              {runtime?.realtime.connectedClients ?? 0} 个连接
            </strong>
            <p>{runtime?.realtime.endpoint ?? "仅监听本机回环地址"}</p>
          </article>
          <article>
            <h2>公共更新</h2>
            <strong>
              {data.publicDistributionState ===
              "SIGNED_UPDATE_FEED_READY_NO_RELEASE"
                ? "更新入口在线 · 暂无发行"
                : data.publicDistributionState}
            </strong>
            <p>只接收签名发行，不自动执行普通 Git 拉取。</p>
          </article>
        </aside>
      </div>
    </div>
  );
}

function ReceiptStream({ data }: { data: SystemSnapshot }) {
  const rows = data.timeline
    .filter(
      (e) =>
        e.sourceKind !== "USER_MESSAGE" &&
        e.sourceKind !== "PERSONA_RESPONSE" &&
        e.sourceKind !== "EXTERNAL_AI_MESSAGE",
    )
    .slice(0, 5);
  return (
    <section className="receipt-stream">
      <h2>执行记录</h2>
      {rows.length === 0 ? (
        <p className="empty">
          还没有系统动作。你的语言与执行记录会在这里分开呈现。
        </p>
      ) : (
        rows.map((e) => (
          <div
            className={`receipt ${e.sourceKind.toLowerCase()}`}
            key={e.eventId}
          >
            <span className="kind">{labels[e.sourceKind]}</span>
            <strong>{e.title}</strong>
            <p>{e.content}</p>
            <time>
              {formatHoloLakeTime(e.occurredAt)}
            </time>
          </div>
        ))
      )}
    </section>
  );
}

const tagTints = ["tag-sky", "tag-violet", "tag-amber", "tag-mint", "tag-rose"];
function tagTint(tag: string) {
  let hash = 0;
  for (const char of tag) hash = (hash * 31 + (char.codePointAt(0) || 0)) % 997;
  return tagTints[hash % tagTints.length];
}

interface KnowledgeTreeNode {
  name: string;
  key: string;
  folders: Map<string, KnowledgeTreeNode>;
  documents: KnowledgeSummary[];
}
function buildKnowledgeTree(documents: KnowledgeSummary[]) {
  const root: KnowledgeTreeNode = {
    name: "知识",
    key: "",
    folders: new Map(),
    documents: [],
  };
  for (const document of documents) {
    const segments = document.path.split("/").filter(Boolean);
    segments.pop();
    let cursor = root;
    for (const segment of segments) {
      const key = cursor.key ? `${cursor.key}/${segment}` : segment;
      if (!cursor.folders.has(segment))
        cursor.folders.set(segment, {
          name: segment,
          key,
          folders: new Map(),
          documents: [],
        });
      cursor = cursor.folders.get(segment)!;
    }
    cursor.documents.push(document);
  }
  return root;
}
function treeCount(node: KnowledgeTreeNode): number {
  return (
    node.documents.length +
    [...node.folders.values()].reduce((sum, child) => sum + treeCount(child), 0)
  );
}
function KnowledgeTree({
  node,
  depth,
  expanded,
  active,
  onToggle,
  onOpen,
}: {
  node: KnowledgeTreeNode;
  depth: number;
  expanded: Set<string>;
  active: string | null;
  onToggle: (key: string) => void;
  onOpen: (path: string) => void;
}) {
  const folders = [...node.folders.values()].sort((a, b) =>
    a.name.localeCompare(b.name, "zh-CN"),
  );
  const documents = [...node.documents].sort((a, b) =>
    a.title.localeCompare(b.title, "zh-CN"),
  );
  return (
    <>
      {folders.map((folder) => {
        const open = depth === 0 || expanded.has(folder.key);
        return (
          <div className="tree-branch" key={folder.key}>
            <button
              className="tree-folder"
              style={{ paddingLeft: 10 + depth * 13 }}
              onClick={() => onToggle(folder.key)}
            >
              <span className={open ? "tree-chevron open" : "tree-chevron"}>
                ›
              </span>
              <Icon name="folder" />
              <span>{folder.name}</span>
              <em>{treeCount(folder)}</em>
            </button>
            {open && (
              <KnowledgeTree
                node={folder}
                depth={depth + 1}
                expanded={expanded}
                active={active}
                onToggle={onToggle}
                onOpen={onOpen}
              />
            )}
          </div>
        );
      })}
      {documents.map((document) => (
        <button
          className={
            active === document.path ? "tree-document active" : "tree-document"
          }
          style={{ paddingLeft: 28 + depth * 13 }}
          key={document.path}
          onClick={() => onOpen(document.path)}
        >
          <Icon name="file" />
          <span>{document.title}</span>
        </button>
      ))}
    </>
  );
}

function Knowledge({
  data,
  refresh,
}: {
  data: SystemSnapshot;
  refresh: () => void;
}) {
  const [selected, setSelected] = useState<string | null>(
      data.documents[0]?.path ?? null,
    ),
    [doc, setDoc] = useState<KnowledgeDocument | null>(null),
    [body, setBody] = useState(""),
    [query, setQuery] = useState(""),
    [newTitle, setNewTitle] = useState<string | null>(null),
    [editing, setEditing] = useState(false),
    [inspectorOpen, setInspectorOpen] = useState(true),
    [expanded, setExpanded] = useState<Set<string>>(new Set(["导入"])),
    [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
  const headingScrollTimer = useRef<number | null>(null);
  useEffect(() => {
    if (selected)
      api.readDocument(selected).then((d) => {
        setDoc(d);
        setBody(d.body);
        setEditing(false);
        setActiveHeadingId(null);
      });
  }, [selected]);
  const list = useMemo(
    () =>
      data.documents.filter((d) =>
        d.title.toLowerCase().includes(query.toLowerCase()),
      ),
    [data.documents, query],
  );
  const tree = useMemo(() => buildKnowledgeTree(list), [list]);
  const create = async () => {
    const title = newTitle?.trim();
    if (title) {
      await api.createDocument(title);
      setNewTitle(null);
      await refresh();
      setSelected(`${title.replace(/[\\/:*?\"<>|]/g, "-")}.md`);
    }
  };
  const save = async () => {
    if (doc) {
      await api.saveDocument(doc.path, body);
      setDoc({ ...doc, body });
      setEditing(false);
      refresh();
    }
  };
  const del = async () => {
    if (doc && confirm(`把“${doc.title}”移入回收站？`)) {
      await api.deleteDocument(doc.path);
      setSelected(null);
      setDoc(null);
      refresh();
    }
  };
  const parsed = useMemo(() => splitFrontmatter(doc?.body ?? ""), [doc?.body]);
  const outline = useMemo(() => documentOutline(doc?.body ?? ""), [doc?.body]);
  const stats = useMemo(() => {
    const chars = parsed.content.replace(/\s/g, "").length;
    return { chars, minutes: Math.max(1, Math.ceil(chars / 400)) };
  }, [parsed.content]);
  useEffect(() => {
    if (!activeHeadingId) return;
    document
      .querySelector(".outline-list button.active")
      ?.scrollIntoView({ block: "nearest" });
  }, [activeHeadingId]);
  const handleReaderScroll = (event: React.UIEvent<HTMLDivElement>) => {
    const container = event.currentTarget;
    if (headingScrollTimer.current !== null) return;
    headingScrollTimer.current = window.setTimeout(() => {
      headingScrollTimer.current = null;
      const containerTop = container.getBoundingClientRect().top;
      let current: string | null = null;
      for (const heading of Array.from(
        container.querySelectorAll<HTMLElement>(
          "h1[id], h2[id], h3[id], h4[id]",
        ),
      )) {
        if (heading.getBoundingClientRect().top - containerTop <= 28)
          current = heading.id;
        else break;
      }
      setActiveHeadingId(current);
    }, 100);
  };
  const openWiki = (target: string) => {
    const normalized = target.replace(/[\s·•・\-_|*`]/g, "").toLowerCase();
    const hit = data.documents.find(
      (item) =>
        item.title.replace(/[\s·•・\-_|*`]/g, "").toLowerCase() === normalized,
    );
    if (hit) setSelected(hit.path);
  };
  return (
    <div className="page knowledge-page">
      <header>
        <div>
          <h1>光湖知识库</h1>
          <p>预装模块 · HLP-MOD-KB-0001</p>
        </div>
        <div className="actions">
          <button
            className="soft"
            onClick={async () => {
              await api.importFolder();
              refresh();
            }}
          >
            导入文件夹
          </button>
          <button onClick={() => setNewTitle("")}>新建知识页</button>
        </div>
      </header>
      <div
        className={`knowledge-workspace complete ${inspectorOpen ? "" : "inspector-closed"}`}
      >
        <aside className="knowledge-browser">
          <div className="browser-title">
            <strong>知识目录</strong>
            <span>{data.documents.length} 篇</span>
          </div>
          <input
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="搜索知识库"
          />
          {list.length === 0 ? (
            <p className="empty">暂无知识页</p>
          ) : (
            <div className="knowledge-tree">
              <KnowledgeTree
                node={tree}
                depth={0}
                expanded={expanded}
                active={selected}
                onToggle={(key) =>
                  setExpanded((current) => {
                    const next = new Set(current);
                    if (next.has(key)) next.delete(key);
                    else next.add(key);
                    return next;
                  })
                }
                onOpen={setSelected}
              />
            </div>
          )}
        </aside>
        <section className="document-workspace">
          {doc ? (
            <>
              <div className="editor-tools">
                <strong>{doc.title}</strong>
                <span />
                <button onClick={() => setInspectorOpen((value) => !value)}>
                  {inspectorOpen ? "收起大纲" : "展开大纲"}
                </button>
                <button onClick={() => api.exportDocument(doc.path)}>
                  下载
                </button>
                {editing ? (
                  <>
                    <button
                      onClick={() => {
                        setBody(doc.body);
                        setEditing(false);
                      }}
                    >
                      取消
                    </button>
                    <button onClick={save}>保存</button>
                  </>
                ) : (
                  <>
                    <button className="danger" onClick={del}>
                      删除
                    </button>
                    <button onClick={() => setEditing(true)}>编辑</button>
                  </>
                )}
              </div>
              {editing ? (
                <textarea
                  className="editor"
                  aria-label="Markdown 编辑器"
                  value={body}
                  onChange={(e) => setBody(e.target.value)}
                />
              ) : (
                <div className="document-scroll" onScroll={handleReaderScroll}>
                  <header className="reader-heading">
                    <h1>{doc.title}</h1>
                    <p>
                      {stats.chars.toLocaleString()} 字 · 约 {stats.minutes}{" "}
                      分钟读完
                    </p>
                    {parsed.tags.length > 0 && (
                      <div className="meta-tags">
                        {parsed.tags.map((tag) => (
                          <span key={tag} className={tagTint(tag)}>
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                    <div className="meta-properties">
                      {Object.entries(parsed.metadata)
                        .filter(([key]) => key !== "tags")
                        .slice(0, 6)
                        .map(([key, value]) => (
                          <span key={key}>
                            <b>{key}</b>
                            {value}
                          </span>
                        ))}
                    </div>
                  </header>
                  <MarkdownDocument
                    body={doc.body}
                    knownTitles={data.documents.map((item) => item.title)}
                    onWiki={openWiki}
                  />
                </div>
              )}
            </>
          ) : (
            <div className="welcome">
              <Icon name="book" />
              <h2>从第一条知识开始</h2>
              <p>新建页面，或导入一个外部文件夹。原文件不会被改写。</p>
              <button onClick={() => setNewTitle("")}>新建知识页</button>
            </div>
          )}
        </section>
        {inspectorOpen && (
          <aside className="document-inspector">
            <header>
              <strong>页面大纲</strong>
              <span>来源与证据</span>
            </header>
            {doc ? (
              <>
                <nav className="outline-list">
                  {outline.length ? (
                    outline.map((item) => (
                      <button
                        className={activeHeadingId === item.id ? "active" : ""}
                        key={item.id}
                        style={{ paddingLeft: 12 + (item.level - 1) * 10 }}
                        onClick={() => {
                          jumpToHeading(item.id);
                          setActiveHeadingId(item.id);
                        }}
                      >
                        {item.title}
                      </button>
                    ))
                  ) : (
                    <p>当前页面没有标题层级。</p>
                  )}
                </nav>
                <dl className="document-evidence">
                  <div>
                    <dt>知识根</dt>
                    <dd>本机私人 Git</dd>
                  </div>
                  <div>
                    <dt>路径</dt>
                    <dd>{doc.path}</dd>
                  </div>
                  <div>
                    <dt>内容指纹</dt>
                    <dd>{doc.sha256.slice(0, 16)}</dd>
                  </div>
                  <div>
                    <dt>状态</dt>
                    <dd>可编辑 · 可回收</dd>
                  </div>
                </dl>
              </>
            ) : (
              <p className="empty">选择页面后显示大纲与证据。</p>
            )}
          </aside>
        )}
      </div>
      {newTitle !== null && (
        <div className="modal-backdrop" onMouseDown={() => setNewTitle(null)}>
          <form
            className="modal"
            onSubmit={(e) => {
              e.preventDefault();
              create();
            }}
            onMouseDown={(e) => e.stopPropagation()}
          >
            <h2>新建知识页</h2>
            <p>名称将成为本地 Markdown 文件名，并进入私人 Git。</p>
            <label>
              知识页名称
              <input
                value={newTitle}
                onChange={(e) => setNewTitle(e.target.value)}
                placeholder="例如：第一条知识"
                autoFocus
              />
            </label>
            <div>
              <button
                type="button"
                className="soft"
                onClick={() => setNewTitle(null)}
              >
                取消
              </button>
              <button type="submit" disabled={!newTitle.trim()}>
                创建
              </button>
            </div>
          </form>
        </div>
      )}
    </div>
  );
}

function Market() {
  return (
    <div className="page simple">
      <header>
        <div>
          <h1>模块商城</h1>
          <p>能力按使用主体分开登记</p>
        </div>
      </header>
      <section className="split-list">
        <div>
          <h2>人格体使用</h2>
          <p>动态脑、技能和执行零件将在签名审核后出现。</p>
          <span>当前没有已发布模块</span>
        </div>
        <div>
          <h2>人类使用</h2>
          <p>行业工作模块将在完成独立验收后出现。</p>
          <span>光湖知识库为预装模块</span>
        </div>
      </section>
    </div>
  );
}
function History({ data }: { data: SystemSnapshot }) {
  return (
    <div className="page simple">
      <header>
        <div>
          <h1>系统演化史</h1>
          <p>事实与计划分开记录</p>
        </div>
      </header>
      <section className="timeline-list">
        {data.timeline.map((e) => (
          <article key={e.eventId}>
            <time>{formatHoloLakeTime(e.occurredAt, true)}</time>
            <div>
              <strong>
                {labels[e.sourceKind]} · {e.title}
              </strong>
              <p>{e.content}</p>
            </div>
          </article>
        ))}
      </section>
    </div>
  );
}
function Portal() {
  return (
    <div className="page simple">
      <header>
        <div>
          <h1>企业门户</h1>
          <p>公共四域的官方入口位于企业服务器</p>
        </div>
      </header>
      <section className="portal">
        <div className="origin-light" />
        <h2>公共内容不嵌入私人频道</h2>
        <p>
          官方通知、四域规则和团队发布由企业门户承载。HoloLake
          只读取经过签名审核的公共发行事实。
        </p>
        <div className="portal-actions">
          <a href="https://guanghu.chat" target="_blank" rel="noreferrer">
            打开企业门户 ↗
          </a>
          <a
            href="https://guanghu.chat/code/user/login"
            target="_blank"
            rel="noreferrer"
          >
            团队代码仓库登录 ↗
          </a>
        </div>
      </section>
    </div>
  );
}
function Settings({
  data,
  runtime,
  refresh,
  busy,
  setBusy,
  setError,
}: {
  data: SystemSnapshot;
  runtime: RuntimeOverview | null;
  refresh: () => void;
  busy: boolean;
  setBusy: (v: boolean) => void;
  setError: (v: string) => void;
}) {
  const [bridgeName, setBridgeName] = useState(""),
    [personaName, setPersonaName] = useState(""),
    [runtimeMessage, setRuntimeMessage] = useState("");
  const update = async () => {
    setBusy(true);
    try {
      const u = await check();
      if (!u) throw new Error("当前已是最新版本，或公共发行尚未发布。");
      if (confirm(`发现 HoloLake ${u.version}，现在安装？`)) {
        await u.downloadAndInstall();
        await relaunch();
      }
    } catch (e) {
      setError(String(e));
    } finally {
      setBusy(false);
    }
  };
  return (
    <div className="page simple">
      <header>
        <div>
          <h1>设置</h1>
          <p>本机节点、公共更新与外部 AI</p>
        </div>
      </header>
      <section className="settings-list">
        <article>
          <div>
            <h2>私人 Git</h2>
            <p>{data.channel?.privateGitPath}</p>
          </div>
          <span className="status ok">已建立</span>
        </article>
        <article>
          <div>
            <h2>公共更新</h2>
            <p>{data.publicUpdateEndpoint}</p>
          </div>
          <button className="soft" onClick={update} disabled={busy}>
            {busy ? "正在检查…" : "检查更新"}
          </button>
        </article>
        <article className="bridge">
          <div>
            <h2>外部编程 AI</h2>
            <p>
              {runtime?.realtime.endpoint ?? "本机实时桥正在启动"} ·{" "}
              {runtime?.realtime.connectedClients ?? 0}{" "}
              个实时连接。连接不授予人格或执行权。
            </p>
          </div>
          <div>
            <input
              value={bridgeName}
              onChange={(e) => setBridgeName(e.target.value)}
              placeholder="给这个 AI 入口起名"
            />
            <button
              onClick={async () => {
                if (bridgeName.trim()) {
                  await api.registerBridge(bridgeName.trim());
                  setBridgeName("");
                  refresh();
                }
              }}
            >
              建立入口
            </button>
          </div>
        </article>
        <article className="bridge">
          <div>
            <h2>公众人格运行时</h2>
            <p>
              {runtime?.persona.personas.length
                ? `${runtime.persona.personas.length} 个本频道试用人格；既有人格验证数 ${runtime.persona.verifiedExistingPersonaCount}`
                : "建立一个本频道可逆试用人格，再由外部 AI 宿主实时承载。"}
            </p>
          </div>
          <div>
            <input
              value={personaName}
              onChange={(e) => setPersonaName(e.target.value)}
              placeholder="给试用人格起名"
            />
            <button
              onClick={async () => {
                if (personaName.trim()) {
                  const persona = await api.registerPersona(personaName.trim());
                  setPersonaName("");
                  setRuntimeMessage(
                    `${persona.displayName} 已建立；尚未验证为既有历史人格。`,
                  );
                  refresh();
                }
              }}
            >
              建立试用人格
            </button>
          </div>
        </article>
        <article>
          <div>
            <h2>实时接入命令</h2>
            <p>
              {runtimeMessage ||
                "先建立一个外部 AI 入口，然后复制本机 GLP 接入命令给外部编程 AI。"}
            </p>
          </div>
          <button
            className="soft"
            disabled={!data.externalAiBridges.length}
            onClick={async () => {
              const invitation = await api.realtimeInvitation();
              const bridge = data.externalAiBridges[0];
              const persona = runtime?.persona.personas[0];
              const command = `${invitation.connectorCommand} --bridge-id ${bridge.bridgeId}${persona ? ` --persona-id ${persona.personaId}` : ""}`;
              await navigator.clipboard.writeText(command);
              setRuntimeMessage(
                "实时接入命令已复制。令牌只在本机 descriptor 文件中。",
              );
            }}
          >
            复制接入命令
          </button>
        </article>
        {data.externalAiBridges.map((b) => (
          <article key={b.bridgeId}>
            <div>
              <h2>{b.displayName}</h2>
              <p>
                {b.bridgeId} ·{" "}
                {runtime?.realtime.protocol ?? "GLP_LOCAL_REALTIME/1"}
              </p>
            </div>
            <span className="status">{b.state}</span>
          </article>
        ))}
        {runtime?.persona.personas.map((persona) => (
          <article key={persona.personaId}>
            <div>
              <h2>{persona.displayName}</h2>
              <p>
                {persona.personaId} · {persona.state}
              </p>
            </div>
            <button
              className="soft danger"
              onClick={async () => {
                if (confirm(`删除试用人格 ${persona.personaId}？`)) {
                  await api.deleteTrialPersona(persona.personaId);
                  refresh();
                }
              }}
            >
              移除试用人格
            </button>
          </article>
        ))}
      </section>
    </div>
  );
}