BPOS-MVP/apps/web/src/features/gov-system/internal/panel.tsx

/**
 * feature `gov-system` —— 系统管理:LLM 实例四元绑定、通道实例
 *
 * 自 `~/coding/JCAI_PRD/governance/_components/Governance.tsx` 平移:
 * DOM 结构、类名(`g-*` + 色调 `t-*`)与文案原样保留,mock 常量换成服务端投影(README 平移规则 1/2/4)。
 * 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
 */
import { Card, Chip, NList, NRow, Note, PageHead, QueryGate, Rows, St } from '@web-shared/gov/primitives.tsx';
import type { Nav } from '@web-shared/gov/gov-route.ts';
import {
  useGovChannels,
  useGovLlm,
} from '@web-shared/gov/gov-api.ts';

export type HomeProps = { tab: string; nav: Nav };

export function SystemHome({ tab, nav }: HomeProps) {
  const llm = useGovLlm();
  const channels = useGovChannels();

  if (tab === 'chan') {
    return (
      <>
        <Note>
          通道实例声明<b>归属键规则</b>与默认认领岗位。归属解析三级逐级短路:会话线程 → 监听键 → 地址窗口;
          歧义或失败一律判无主——<b>宁交人,不错投</b>。
        </Note>
        <NList>
          {(channels.data?.channels ?? []).map((ch) => (
            <NRow
              key={ch.id}
              tone={ch.enabled ? 'brand' : 'mute'}
              ico="mail"
              title={ch.name}
              sub={ch.address}
              cols={[
                { k: '归属键规则', v: ch.extractCount },
                { k: '载荷映射', v: ch.mappingCount },
                { k: '地址窗口', v: <span className="g-mono">{Math.round(ch.addressWindowMs / 3600_000)}h</span> },
                { k: '默认认领岗位', v: ch.fallbackPosition ?? '—' },
              ]}
              right={
                <St tone={ch.enabled ? 'ok' : 'mute'} ico={ch.enabled ? 'circle-check' : 'power'}>
                  {ch.enabled ? '已启用' : '已停用'}
                </St>
              }
              onClick={() => nav.push({ k: 'chan', id: ch.id })}
            />
          ))}
        </NList>
      </>
    );
  }

  return (
    <QueryGate query={llm}>
    <>
      <Note>
        LLM 实例是<b>名称间接层</b>:活动只见自定义模型名,Provider / URL / API-Key / Model 四元在系统侧绑定。
        密钥与 endpoint 值只存治理台——不入包、不入活动、不入留痕明文。
      </Note>
      <NList>
        {(llm.data?.instances ?? []).map((i) => (
          <NRow
            key={i.id}
            tone={i.enabled ? 'brand' : 'mute'}
            ico="cpu"
            title={i.name}
            sub={`${i.provider} · ${i.model}`}
            cols={[
              { k: 'Base URL', v: <span className="g-mono">{i.baseUrl}</span> },
              { k: '系统用途', v: i.systemUse ? '是' : '—' },
            ]}
            right={
              <St tone={i.apiKeyBound ? 'ok' : 'warn'} ico={i.apiKeyBound ? 'shield-check' : 'alert-triangle'}>
                {i.apiKeyBound ? '密钥已绑定' : '密钥未绑定'}
              </St>
            }
            onClick={() => nav.push({ k: 'llm', id: i.id })}
          />
        ))}
      </NList>
    </>
    </QueryGate>
  );
}

export function LlmPage({ id }: { id: string }) {
  const q = useGovLlm();
  const i = (q.data?.instances ?? []).find((x) => x.id === id);
  if (i === undefined) return <Note>实例不存在。</Note>;
  return (
    <>
      <PageHead
        ico="cpu"
        kicker={`LLM 实例 · ${i.provider}`}
        title={i.name}
        chips={
          <>
            <Chip ico="hash">{i.model}</Chip>
            <Chip tone={i.apiKeyBound ? 'ok' : 'warn'}>{i.apiKeyBound ? '密钥已绑定' : '密钥未绑定'}</Chip>
            {i.systemUse && <Chip tone="brand">系统用途</Chip>}
          </>
        }
        desc="名称间接层:活动只声明自定义模型名,四元绑定在系统侧。换厂商、换端点、换密钥都不动活动一行代码。"
      />
      <Card ico="settings" title="四元绑定">
        <Rows
          items={[
            { k: 'Provider', v: i.provider },
            { k: 'Base URL', v: i.baseUrl, mono: true },
            { k: 'Model', v: i.model, mono: true },
            { k: 'API-Key', v: i.apiKeyBound ? '已绑定(密文存储,永不回显)' : '未绑定' },
          ]}
        />
      </Card>
    </>
  );
}

export function ChanPage({ id }: { id: string }) {
  const q = useGovChannels();
  const ch = (q.data?.channels ?? []).find((x) => x.id === id);
  if (ch === undefined) return <Note>通道不存在。</Note>;
  return (
    <>
      <PageHead
        ico="mail"
        kicker={`通道实例 · ${ch.kind}`}
        title={ch.name}
        chips={
          <>
            <Chip ico="at-sign">{ch.address}</Chip>
            <Chip tone={ch.enabled ? 'ok' : 'mute'}>{ch.enabled ? '已启用' : '已停用'}</Chip>
          </>
        }
        desc="归属解析三级逐级短路:会话线程 → 监听键 → 地址窗口;歧义或失败一律判无主——宁交人,不错投。"
      />
      <Card ico="settings" title="归属与映射">
        <Rows
          items={[
            { k: '归属键规则', v: `${ch.extractCount} 条` },
            { k: '载荷映射', v: `${ch.mappingCount} 条` },
            { k: '地址窗口', v: `${Math.round(ch.addressWindowMs / 3600_000)} 小时`, mono: true },
            { k: '默认认领岗位', v: ch.fallbackPosition ?? '—' },
          ]}
        />
      </Card>
    </>
  );
}