Leo
3689f30409
兩個 leo 反饋的 UI bug： 1. wiki/[pageName] 對 index-entry 渲染時，h1 用 block.content（整篇 markdown） 會把整個內容塞進 h1。改：wiki-page 用 content 當 entity 名；其他類型 （index-entry/schema/log）用 page_name 剝 `wiki-` / `index-` prefix。 2. listing「Wiki Pages (21)」累積式設計造成同 entity 多版顯示為多張卡，雜亂。 改：用 useMemo dedupe by entity（content）— 每 entity 一張卡顯示最新版， 標題顯示「N 版累積」當 N>1。原始 21 筆 → 現在約 6-7 個 unique entity。
347 lines
12 KiB
TypeScript
347 lines
12 KiB
TypeScript
'use client';
|
||
|
||
// Mira Wiki 索引頁
|
||
// SDD: polaris/mira/.agents/specs/mira-app/design.md §5.2 + §3.5.10
|
||
// 對應 task: 7C.1
|
||
// 階段 7-A 已建：mira-wiki-schema、mira-wiki-index(+4 children)、mira-wiki-log(+1 child)
|
||
// 此頁列出這些 infra block 與既有 wiki-page，方便 leo 在瀏覽器確認 schema 寫得對不對
|
||
|
||
import { useEffect, useMemo, useState } from 'react';
|
||
import Link from 'next/link';
|
||
import '../mira.css';
|
||
|
||
const KBDB_BASE = 'https://kbdb.finally.click';
|
||
const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? 'https://cypher.arcrun.dev';
|
||
|
||
type Block = {
|
||
id: string;
|
||
page_name: string;
|
||
content: string;
|
||
type: string;
|
||
parent_id: string | null;
|
||
tags_json: string | null;
|
||
created_at: number;
|
||
};
|
||
|
||
export default function WikiIndexPage() {
|
||
const [schema, setSchema] = useState<Block | null>(null);
|
||
const [indexChildren, setIndexChildren] = useState<Block[]>([]);
|
||
const [logEntries, setLogEntries] = useState<Block[]>([]);
|
||
const [otherWikiPages, setOtherWikiPages] = useState<Block[]>([]);
|
||
const [indexEntries, setIndexEntries] = useState<Block[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
useEffect(() => {
|
||
let cancelled = false;
|
||
async function load() {
|
||
try {
|
||
// 先拿 ak_ partner key（同 page.tsx pattern）
|
||
const meRes = await fetch(`${API_BASE}/me`, { credentials: 'include' });
|
||
if (!meRes.ok) throw new Error('未登入');
|
||
const me = (await meRes.json()) as { api_key: string };
|
||
const headers = { Authorization: `Bearer ${me.api_key}` };
|
||
|
||
// 撈所有 type=wiki-page，再 client 端過濾 tags 含 'mira-wiki'
|
||
// 原本 ?tag=mira-wiki 撞 KBDB worker D1 bug（malformed JSON），改 type filter
|
||
// 待 KBDB 修 tag filter 後可改回（SDD 待開 kbdb-tag-filter-fix）
|
||
const res = await fetch(
|
||
`${KBDB_BASE}/blocks?type=wiki-page&limit=200`,
|
||
{ headers },
|
||
);
|
||
if (!res.ok) throw new Error(`KBDB ${res.status}`);
|
||
const data = await res.json();
|
||
if (cancelled) return;
|
||
const allWikiBlocks: Block[] = data.blocks ?? [];
|
||
// Client 端過濾：只留 tags 含 'mira-wiki'
|
||
const blocks: Block[] = allWikiBlocks.filter((b) => {
|
||
if (!b.tags_json) return false;
|
||
try {
|
||
const tags = JSON.parse(b.tags_json) as string[];
|
||
return tags.includes('mira-wiki');
|
||
} catch {
|
||
return false;
|
||
}
|
||
});
|
||
|
||
const tagsOf = (b: Block): string[] => {
|
||
if (!b.tags_json) return [];
|
||
try {
|
||
return JSON.parse(b.tags_json) as string[];
|
||
} catch {
|
||
return [];
|
||
}
|
||
};
|
||
const hasSubtype = (b: Block, st: string) =>
|
||
tagsOf(b).includes(`subtype:${st}`);
|
||
const hasAnyInfraSubtype = (b: Block) =>
|
||
['schema', 'index', 'index-child', 'log', 'log-child'].some((st) => hasSubtype(b, st));
|
||
const hasMetaTag = (b: Block) =>
|
||
tagsOf(b).some((t) => t === 'data-source-config' || t === 'source-skill');
|
||
|
||
setSchema(blocks.find((b) => hasSubtype(b, 'schema')) ?? null);
|
||
setIndexChildren(
|
||
blocks
|
||
.filter((b) => hasSubtype(b, 'index-child'))
|
||
.sort((a, b) => a.page_name.localeCompare(b.page_name)),
|
||
);
|
||
setLogEntries(
|
||
blocks
|
||
.filter((b) => hasSubtype(b, 'log-child'))
|
||
.sort((a, b) => b.page_name.localeCompare(a.page_name)),
|
||
);
|
||
// 真正的 wiki-page paragraphs（排除 infra 跟 meta 配置）
|
||
setOtherWikiPages(
|
||
blocks
|
||
.filter((b) => !hasAnyInfraSubtype(b) && !hasMetaTag(b))
|
||
.sort((a, b) => (b.created_at ?? 0) - (a.created_at ?? 0)),
|
||
);
|
||
|
||
// 平行撈 index-entry blocks（per-entity 摘要，CC navigation entry point）
|
||
// 對應 design.md §3.5.12.4.1 / 7B.3f
|
||
const idxRes = await fetch(
|
||
`${KBDB_BASE}/blocks?type=index-entry&limit=200`,
|
||
{ headers },
|
||
);
|
||
if (idxRes.ok) {
|
||
const idxData = await idxRes.json();
|
||
if (!cancelled) {
|
||
const idxBlocks: Block[] = idxData.blocks ?? [];
|
||
setIndexEntries(
|
||
idxBlocks.sort((a, b) => (a.page_name ?? '').localeCompare(b.page_name ?? '')),
|
||
);
|
||
}
|
||
}
|
||
} catch (e: any) {
|
||
if (!cancelled) setError(e?.message ?? 'load failed');
|
||
} finally {
|
||
if (!cancelled) setLoading(false);
|
||
}
|
||
}
|
||
load();
|
||
return () => {
|
||
cancelled = true;
|
||
};
|
||
}, []);
|
||
|
||
// Dedupe wiki-pages by entity（content）— 累積式設計每個 raw 各建一個 wiki-page，
|
||
// 同 entity 多版只在 listing 顯示最新一張卡 + 版本數提示
|
||
const dedupedWikiPages = useMemo(() => {
|
||
const groups = new Map<string, { entity: string; latest: Block; versionCount: number }>();
|
||
for (const p of otherWikiPages) {
|
||
const entity = (p.content || '').trim() || p.page_name || '?';
|
||
const existing = groups.get(entity);
|
||
if (!existing) {
|
||
groups.set(entity, { entity, latest: p, versionCount: 1 });
|
||
} else {
|
||
existing.versionCount++;
|
||
if ((p.created_at ?? 0) > (existing.latest.created_at ?? 0)) {
|
||
existing.latest = p;
|
||
}
|
||
}
|
||
}
|
||
return Array.from(groups.values()).sort(
|
||
(a, b) => (b.latest.created_at ?? 0) - (a.latest.created_at ?? 0),
|
||
);
|
||
}, [otherWikiPages]);
|
||
|
||
return (
|
||
<main className="mira-app">
|
||
<div className="mira-content">
|
||
<header style={{ padding: '24px 0 16px', borderBottom: '1px solid #2a2a2a' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
|
||
<Link
|
||
href="/mira"
|
||
style={{ color: '#888', fontSize: 14, textDecoration: 'none' }}
|
||
>
|
||
← Mira 首頁
|
||
</Link>
|
||
</div>
|
||
<h1 style={{ fontSize: 28, fontWeight: 700, color: '#fff', margin: 0 }}>
|
||
📚 Mira Wiki
|
||
</h1>
|
||
<p style={{ color: '#888', fontSize: 14, marginTop: 4 }}>
|
||
leo 的個人觀點累積（Karpathy LLM Wiki 風格）
|
||
</p>
|
||
</header>
|
||
|
||
{loading && <div style={{ padding: 24, color: '#666' }}>載入中⋯</div>}
|
||
{error && (
|
||
<div style={{ padding: 24, color: '#e66' }}>讀取失敗：{error}</div>
|
||
)}
|
||
|
||
{!loading && !error && (
|
||
<>
|
||
<Section title="📋 Schema（合成規則）">
|
||
{schema ? (
|
||
<WikiCardLink page_name={schema.page_name} title="mira-wiki-schema" excerpt="ingest 規則手冊：cypher binding、17 predicates、entity normalize⋯" />
|
||
) : (
|
||
<Empty>尚未建立 schema</Empty>
|
||
)}
|
||
</Section>
|
||
|
||
<Section title="🗂 Index（4 個分類）">
|
||
{indexChildren.length > 0 ? (
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
{indexChildren.map((b) => {
|
||
const tags = b.tags_json ? (JSON.parse(b.tags_json) as string[]) : [];
|
||
const key = tags.find((t) => t.startsWith('index-key:'))?.replace('index-key:', '') ?? '?';
|
||
return (
|
||
<WikiCardLink
|
||
key={b.id}
|
||
page_name={b.page_name}
|
||
title={`${iconForKey(key)} ${key}`}
|
||
excerpt={firstLineOf(b.content)}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<Empty>index children 尚未建立</Empty>
|
||
)}
|
||
</Section>
|
||
|
||
<Section title={`🧭 Index Entries（${indexEntries.length}）— CC 看的 entity 摘要`}>
|
||
{indexEntries.length > 0 ? (
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
{indexEntries.map((b) => {
|
||
const entity = (b.page_name ?? '').replace(/^index-/, '');
|
||
const firstLine = firstLineOf(b.content)
|
||
.replace(/^#+\s*/, '')
|
||
.slice(0, 80);
|
||
return (
|
||
<WikiCardLink
|
||
key={b.id}
|
||
page_name={b.page_name ?? ''}
|
||
title={entity}
|
||
excerpt={firstLine || `index for ${entity}`}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<Empty>尚未有 index-entry（wiki_synthesis 跑完後自動建）</Empty>
|
||
)}
|
||
</Section>
|
||
|
||
<Section title="📜 Log（每月一筆）">
|
||
{logEntries.length > 0 ? (
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
{logEntries.map((b) => (
|
||
<WikiCardLink
|
||
key={b.id}
|
||
page_name={b.page_name}
|
||
title={b.page_name}
|
||
excerpt={firstLineOf(b.content)}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<Empty>尚未有 log</Empty>
|
||
)}
|
||
</Section>
|
||
|
||
<Section title={`📖 Wiki Pages（${dedupedWikiPages.length}，原 ${otherWikiPages.length} 筆累積版本）`}>
|
||
{dedupedWikiPages.length > 0 ? (
|
||
<div style={{ display: 'grid', gap: 8 }}>
|
||
{dedupedWikiPages.map((g) => (
|
||
<WikiCardLink
|
||
key={g.latest.id}
|
||
page_name={g.latest.page_name}
|
||
title={g.entity}
|
||
excerpt={
|
||
g.versionCount > 1
|
||
? `${g.versionCount} 版累積 ・ 最新 ${new Date((g.latest.created_at ?? 0) * 1000).toLocaleString('zh-TW')}`
|
||
: `建立 ${new Date((g.latest.created_at ?? 0) * 1000).toLocaleString('zh-TW')}`
|
||
}
|
||
/>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<Empty>尚未有 wiki page（待 7-B ai-canon-wiki workflow 跑出第一張）</Empty>
|
||
)}
|
||
</Section>
|
||
</>
|
||
)}
|
||
</div>
|
||
</main>
|
||
);
|
||
}
|
||
|
||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||
return (
|
||
<section style={{ padding: '20px 0', borderBottom: '1px solid #1f1f1f' }}>
|
||
<h2 style={{ fontSize: 16, fontWeight: 600, color: '#ddd', marginBottom: 12 }}>
|
||
{title}
|
||
</h2>
|
||
{children}
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function Empty({ children }: { children: React.ReactNode }) {
|
||
return (
|
||
<div style={{ color: '#555', fontStyle: 'italic', fontSize: 13 }}>{children}</div>
|
||
);
|
||
}
|
||
|
||
function WikiCardLink({
|
||
page_name,
|
||
title,
|
||
excerpt,
|
||
}: {
|
||
page_name: string;
|
||
title: string;
|
||
excerpt: string;
|
||
}) {
|
||
return (
|
||
<Link
|
||
href={`/mira/wiki/${encodeURIComponent(page_name)}`}
|
||
style={{
|
||
display: 'block',
|
||
padding: '12px 14px',
|
||
background: '#1a1a1a',
|
||
border: '1px solid #2a2a2a',
|
||
borderRadius: 6,
|
||
textDecoration: 'none',
|
||
color: 'inherit',
|
||
}}
|
||
>
|
||
<div style={{ color: '#ddd', fontWeight: 500, marginBottom: 4 }}>{title}</div>
|
||
{excerpt && (
|
||
<div
|
||
style={{
|
||
color: '#888',
|
||
fontSize: 13,
|
||
overflow: 'hidden',
|
||
textOverflow: 'ellipsis',
|
||
whiteSpace: 'nowrap',
|
||
}}
|
||
>
|
||
{excerpt}
|
||
</div>
|
||
)}
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function iconForKey(key: string): string {
|
||
return (
|
||
{
|
||
entities: '🧩',
|
||
topics: '📂',
|
||
sources: '🔗',
|
||
stale: '⚠️',
|
||
}[key] ?? '•'
|
||
);
|
||
}
|
||
|
||
function firstLineOf(content: string): string {
|
||
if (!content) return '';
|
||
const firstNonHeader = content
|
||
.split('\n')
|
||
.map((l) => l.trim())
|
||
.find((l) => l && !l.startsWith('#') && !l.startsWith('>'));
|
||
return firstNonHeader ?? '';
|
||
}
|