feat(arcrun): mira wiki page with tag filter + accumulated WIP

- landing/app/mira/wiki: tag=mira-wiki list now shows all wiki paragraphs (depends on KBDB tag filter exposed in matrix/kbdb commit, separate repo) - landing: app/mira hub + feed split + various WIP from prior sessions - registry/components: claude_api / kbdb_create_block / kbdb_get / km_writer / platform_crypto / auth_oauth2 contracts + main.go (accumulated) - .component-builds: pkg-lock updates + index.ts adjustments (WIP) - .agents/specs/arcrun/frontend-redesign: design notes - docs/test_credentials, docs/user_requirements/arcrun-landing-page: WIP docs - cypher-executor: auth-dispatcher / wasi-shim adjustments (WIP) Includes accumulated work from prior sessions plus the wiki UI tag-filter update that surfaces the AI-generated wiki paragraphs at /mira/wiki. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-07 16:52:01 +08:00
parent e8fca33f80
commit 519423cb0d
127 changed files with 23909 additions and 264 deletions
@@ -0,0 +1,90 @@
+'use client';
+
+// 九宮格 App Launcher（受 Google Apps menu 啟發）
+// 規範：matrix/identity/.agents/specs/identity/design.md §2.5
+// 非白名單 user 看到 mira 等受限 app 顯示為灰色 + tooltip「即將開放」
+
+import { useEffect, useRef, useState } from 'react';
+import { MATRIX_APPS, isAppAccessible, type AppEntry } from './apps';
+
+export default function AppLauncher({ userEmail }: { userEmail: string | null }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        onClick={() => setOpen(o => !o)}
+        aria-label="切換應用"
+        className="flex items-center justify-center w-9 h-9 rounded-md text-[#888] hover:text-white hover:bg-[#1a1a1a] transition-colors"
+      >
+        {/* 九宮格 icon */}
+        <svg width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
+          <circle cx="3" cy="3" r="1.5" /><circle cx="9" cy="3" r="1.5" /><circle cx="15" cy="3" r="1.5" />
+          <circle cx="3" cy="9" r="1.5" /><circle cx="9" cy="9" r="1.5" /><circle cx="15" cy="9" r="1.5" />
+          <circle cx="3" cy="15" r="1.5" /><circle cx="9" cy="15" r="1.5" /><circle cx="15" cy="15" r="1.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          className="absolute right-0 mt-2 w-72 bg-[#0f0f0f] border border-[#222] rounded-lg shadow-xl p-2 z-50"
+          role="menu"
+        >
+          <div className="grid grid-cols-3 gap-1">
+            {MATRIX_APPS.map(app => (
+              <AppTile key={app.id} app={app} userEmail={userEmail} onClose={() => setOpen(false)} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AppTile({
+  app,
+  userEmail,
+  onClose,
+}: {
+  app: AppEntry;
+  userEmail: string | null;
+  onClose: () => void;
+}) {
+  const accessible = isAppAccessible(app, userEmail);
+  const tooltip = !accessible ? (app.locked_tooltip ?? '即將開放') : (app.description ?? '');
+
+  if (!accessible) {
+    return (
+      <div
+        title={tooltip}
+        className="flex flex-col items-center justify-center gap-1 p-3 rounded-md cursor-not-allowed opacity-40"
+      >
+        <span className="text-2xl grayscale">{app.icon ?? '📦'}</span>
+        <span className="text-xs text-[#666] text-center">{app.name}</span>
+      </div>
+    );
+  }
+
+  return (
+    <a
+      href={app.url}
+      onClick={onClose}
+      title={tooltip}
+      className="flex flex-col items-center justify-center gap-1 p-3 rounded-md hover:bg-[#1a1a1a] transition-colors text-[#ccc] hover:text-white"
+    >
+      <span className="text-2xl">{app.icon ?? '📦'}</span>
+      <span className="text-xs text-center">{app.name}</span>
+    </a>
+  );
+}
@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import AppLauncher from './AppLauncher';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_BASE ?? 'https://cypher.arcrun.dev';
+
+type NavUser = {
+  display_name: string;
+  email: string;
+  avatar_url?: string;
+};
+
+export default function SiteNav({ currentPath }: { currentPath?: string }) {
+  const [user, setUser] = useState<NavUser | null | undefined>(undefined);
+
+  useEffect(() => {
+    fetch(`${API_BASE}/me`, { credentials: 'include' })
+      .then(r => r.ok ? r.json() as Promise<NavUser> : null)
+      .then(u => setUser(u))
+      .catch(() => setUser(null));
+  }, []);
+
+  const logout = async () => {
+    await fetch(`${API_BASE}/auth/logout`, { method: 'POST', credentials: 'include' });
+    window.location.href = '/';
+  };
+
+  const linkCls = (path: string) =>
+    `transition-colors text-sm ${currentPath === path ? 'text-white' : 'text-[#666] hover:text-white'}`;
+
+  return (
+    <nav className="flex items-center justify-between px-6 py-4 border-b border-[#1a1a1a]">
+      <Link href="/" className="text-white font-bold text-lg tracking-tight hover:opacity-80 transition-opacity">
+        arcrun
+      </Link>
+
+      <div className="flex items-center gap-4 text-sm">
+        <Link href="/integrations" className={linkCls('/integrations')}>Integrations</Link>
+        <Link href="/api-docs" className={linkCls('/api-docs')}>API</Link>
+        <a
+          href="https://github.com/richblack/arcrun"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-[#666] hover:text-white transition-colors"
+        >
+          GitHub
+        </a>
+
+        {user === undefined ? (
+          // Loading — placeholder to prevent layout shift
+          <div className="w-20 h-7" />
+        ) : user ? (
+          <>
+            <AppLauncher userEmail={user.email} />
+            <Link href="/dashboard" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
+              {user.avatar_url && (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={user.avatar_url} alt="" width={26} height={26} className="rounded-full" />
+              )}
+              <span className="text-[#aaa]">{user.display_name}</span>
+            </Link>
+            <button
+              onClick={logout}
+              className="text-[#555] hover:text-[#888] transition-colors cursor-pointer"
+            >
+              登出
+            </button>
+          </>
+        ) : (
+          <Link
+            href="/login"
+            className="bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-1.5 rounded-md font-medium transition-colors"
+          >
+            Get API Key
+          </Link>
+        )}
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,54 @@
+// Matrix App Launcher 九宮格清單
+// 來源：matrix/identity/.agents/specs/identity/apps.json（v0 過渡複製，未來 v1 抽進 @matrix/identity-ui）
+// 規範：matrix/identity/.agents/specs/identity/design.md §2.5
+
+export type AppEntry = {
+  id: string;
+  name: string;
+  url: string;
+  icon?: string;
+  description?: string;
+  access?: 'public' | 'allowlist';
+  allowlist_emails?: string[];
+  locked_tooltip?: string;
+};
+
+export const MATRIX_APPS: AppEntry[] = [
+  {
+    id: 'arcrun',
+    name: 'Arcrun',
+    url: 'https://arcrun.dev',
+    icon: '🔄',
+    description: '工作流引擎與零件平台',
+  },
+  {
+    id: 'dashboard',
+    name: 'Dashboard',
+    url: 'https://arcrun.dev/dashboard',
+    icon: '🔑',
+    description: 'API Key 管理',
+  },
+  {
+    id: 'integrations',
+    name: 'Integrations',
+    url: 'https://arcrun.dev/integrations',
+    icon: '🧩',
+    description: '服務目錄',
+  },
+  {
+    id: 'mira',
+    name: 'Mira',
+    url: 'https://arcrun.dev/mira',
+    icon: '🌊',
+    description: '個人化 KM 河道',
+    access: 'allowlist',
+    allowlist_emails: ['leo21c@gmail.com'],
+    locked_tooltip: '即將開放',
+  },
+];
+
+export function isAppAccessible(app: AppEntry, userEmail: string | null): boolean {
+  if (app.access !== 'allowlist') return true;
+  if (!userEmail) return false;
+  return (app.allowlist_emails ?? []).includes(userEmail);
+}