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>
+  );
+}