From 8d4c3a3464700960574615a3b68332262ed17ea7 Mon Sep 17 00:00:00 2001
From: richblack <leo21c@gmail.com>
Date: Sat, 16 May 2026 10:35:32 +0800
Subject: [PATCH] =?UTF-8?q?feat(mira):=20P0=20=E6=B2=B3=E9=81=93=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=203=20task=20=E2=80=94=20Mira=20=E9=A0=AD=E5=83=8F=20?=
 =?UTF-8?q?/=20@mira=20=E9=81=B8=E6=93=87=E6=80=A7=E5=9B=9E=E8=A6=86=20/?=
 =?UTF-8?q?=20=E7=B7=A8=E8=BC=AF=E5=99=A8=20popup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

對應 tasks.md backlog #5a / #5b / #5c（leo 2026-05-16 P0），design.md §3.6.5。

#5a Mira 發文獨立頭像
- 新 MiraAvatar 元件（紫色漸層圓 + 🤖 emoji）
- isMiraSource() 判斷 post 來源是 leo（km-writer-direct/logseq/mobile/web/tg/rss）
  還是 mira（ai-* / mira-* / 其他 test sources）
- PostCard header：showMira ? Mira 頭像 + 名「Mira」 : leo 頭像 + leo 名

#5b @mira 選擇性回覆（撤回每篇 auto-reply）
- 新 hasMiraMention() regex：偵測文字含 @mira（前後可有標點）
- PostComposer / BlockEditor / ReplyLine 三處 submit：只有 @mira 時 triggerAiReply
- triggerAiReply prompt 加 topic 抽取（@mira 後第一段到標點）+ scope hint
- wiki_synthesis trigger 跟 @mira 無關，每篇都跑（KB 副本同步）
- 不擋手動筆記（leo 隨手寫不需要 mira 每篇都回）

#5c 編輯器 popup 放大
- composer 加 ⇱ 放大按鈕 → 切到 fullscreen overlay popup
- popup 含大 textarea + 同 markdown toolbar + 同 submit 邏輯
- ⌘+Enter 發布、Esc 收起、外點 backdrop 收起
- 對應 leo「寫長文 textarea 太小」需求

CSS 加 .mira-avatar-mira / .mira-composer-popup-* 系列。
TS check pass。
---
 landing/app/mira/feed/page.tsx | 238 ++++++++++++++++++++++++++-------
 landing/app/mira/mira.css      |  84 ++++++++++++
 2 files changed, 273 insertions(+), 49 deletions(-)

diff --git a/landing/app/mira/feed/page.tsx b/landing/app/mira/feed/page.tsx
index b8928db..c0d4ff5 100644
--- a/landing/app/mira/feed/page.tsx
+++ b/landing/app/mira/feed/page.tsx
@@ -158,6 +158,12 @@ export default function MiraPage() {
 
 // ─── AI 回覆觸發器（fire-and-forget）──────────────────────
 
+// P0 #5b：偵測文字含 @mira（mention） — 大小寫不限，前後可有標點
+// 用法：leo 在貼文 / 留言寫 `@mira <主題>` → 觸發 mira reply
+function hasMiraMention(text: string): boolean {
+  return /(^|[^\w])@mira\b/i.test(text);
+}
+
 async function triggerWikiSynthesis(opts: { apiKey: string; rawBlockId: string }) {
   // 觸發 arcrun wiki_synthesis workflow（arcrun-native public trigger endpoint）
   // 不等結果（workflow 60-90s 含 2 次 claude_api pause/resume）
@@ -187,10 +193,18 @@ async function triggerAiReply(opts: {
   parentBlockId: string;
   pageName: string;
 }) {
+  // 抽 @mira 後面的 topic（同行第一段，到換行 / 句號 / 標點停）
+  const mentionMatch = opts.postContent.match(/@mira\s*([^\n。.！!？?，,]*)/i);
+  const topic = mentionMatch?.[1]?.trim() || '';
+  const topicHint = topic
+    ? `\nleo 用 \`@mira ${topic}\` 呼叫了你，所以這則對話的主題鎖定在「${topic}」。\n`
+    : '\nleo 用 \`@mira\` 呼叫了你，請針對訊息回覆。\n';
+
   const prompt =
-    `用戶 leo 在 mira 河道發了這則貼文：\n\n` +
+    `用戶 leo 在 mira 河道發了這則訊息：\n\n` +
     `「${opts.postContent}」\n\n` +
-    `請以 Mira 副駕 AI 的身份留言回應。\n` +
+    topicHint +
+    `\n請以 Mira 副駕 AI 的身份留言回應。\n` +
     `規則：\n` +
     `- 繁體中文（台灣用語）\n` +
     `- 簡短 1-3 段，務實，不客套\n` +
@@ -257,7 +271,9 @@ function PostComposer({
   const [text, setText] = useState('');
   const [submitting, setSubmitting] = useState(false);
   const [err, setErr] = useState<string | null>(null);
+  const [expanded, setExpanded] = useState(false);
   const taRef = useRef<HTMLTextAreaElement>(null);
+  const popupTaRef = useRef<HTMLTextAreaElement>(null);
 
   const submit = useCallback(async () => {
     const trimmed = text.trim();
@@ -288,16 +304,18 @@ function PostComposer({
       const postBlockId = data.data.id;
       setText('');
 
-      // fire-and-forget 觸發 Mira AI 回覆（不擋用戶）
-      void triggerAiReply({
-        apiKey: me.api_key,
-        postContent: trimmed,
-        parentBlockId: postBlockId,
-        pageName,
-      });
+      // P0 #5b：只有 @mira 時才觸發 Mira AI 回覆（撤回每篇 auto-reply）
+      // 對應 design.md §3.6.5「河道是 process 場 + Mira 是 KB 同步介面」
+      if (hasMiraMention(trimmed)) {
+        void triggerAiReply({
+          apiKey: me.api_key,
+          postContent: trimmed,
+          parentBlockId: postBlockId,
+          pageName,
+        });
+      }
       // 7B.3h：fire-and-forget 觸發 wiki_synthesis（browser → cypher.arcrun.dev，arcrun-native）
-      // 不走 watcher 是因為 cypher-executor 自己 fetch 自己 workers.dev URL 被 CF 1042 擋
-      // watcher 仍作為 cron-driven backup（漏掉的 raws 5 分鐘後補跑），但需先解 self-fetch 問題
+      // 跟 @mira 無關，每篇都跑 — 河道書寫永遠進 wiki KB 副本
       void triggerWikiSynthesis({ apiKey: me.api_key, rawBlockId: postBlockId });
       onAiTriggered(pageName);
 
@@ -312,42 +330,120 @@ function PostComposer({
   }, [text, submitting, me, onPosted, onAiTriggered]);
 
   return (
-    <div className="mira-card mira-composer-card">
-      <div className="mira-composer-row">
-        <Avatar me={me} />
-        <textarea
-          ref={taRef}
-          value={text}
-          onChange={e => setText(e.target.value)}
-          onKeyDown={e => {
-            if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-              e.preventDefault();
-              submit();
-              return;
-            }
-            handleTabIndent(e, text, setText);
+    <>
+      <div className="mira-card mira-composer-card">
+        <div className="mira-composer-row">
+          <Avatar me={me} />
+          <textarea
+            ref={taRef}
+            value={text}
+            onChange={e => setText(e.target.value)}
+            onKeyDown={e => {
+              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                e.preventDefault();
+                submit();
+                return;
+              }
+              handleTabIndent(e, text, setText);
+            }}
+            placeholder="現在想分享什麼？（@mira 呼叫 Mira 回覆）"
+            rows={2}
+            disabled={submitting}
+            className="mira-composer-textarea"
+          />
+        </div>
+        <div className="mira-composer-actions">
+          <MarkdownToolbar textareaRef={taRef} value={text} setValue={setText} compact />
+          <button
+            type="button"
+            onClick={() => {
+              setExpanded(true);
+              setTimeout(() => popupTaRef.current?.focus(), 50);
+            }}
+            className="mira-btn-ghost mira-composer-expand"
+            title="放大編輯（⇱）"
+            aria-label="放大編輯"
+          >
+            ⇱
+          </button>
+          {err && <span className="mira-msg-error">{err}</span>}
+          <span style={{ flex: 1 }} />
+          <span className="mira-kbd">⌘+Enter</span>
+          <button
+            type="button"
+            disabled={submitting || !text.trim()}
+            onClick={submit}
+            className={`mira-btn-primary${!text.trim() ? ' disabled' : ''}`}
+          >
+            {submitting ? '送出中⋯' : '貼文'}
+          </button>
+        </div>
+      </div>
+
+      {/* Popup 放大編輯（FB 覆蓋版面風格）— P0 #5c */}
+      {expanded && (
+        <div
+          className="mira-composer-popup-backdrop"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setExpanded(false);
           }}
-          placeholder="現在想分享什麼？"
-          rows={2}
-          disabled={submitting}
-          className="mira-composer-textarea"
-        />
-      </div>
-      <div className="mira-composer-actions">
-        <MarkdownToolbar textareaRef={taRef} value={text} setValue={setText} compact />
-        {err && <span className="mira-msg-error">{err}</span>}
-        <span style={{ flex: 1 }} />
-        <span className="mira-kbd">⌘+Enter</span>
-        <button
-          type="button"
-          disabled={submitting || !text.trim()}
-          onClick={submit}
-          className={`mira-btn-primary${!text.trim() ? ' disabled' : ''}`}
         >
-          {submitting ? '送出中⋯' : '貼文'}
-        </button>
-      </div>
-    </div>
+          <div className="mira-composer-popup">
+            <header className="mira-composer-popup-header">
+              <Avatar me={me} size={32} />
+              <span className="mira-composer-popup-title">寫一篇</span>
+              <span style={{ flex: 1 }} />
+              <button
+                type="button"
+                onClick={() => setExpanded(false)}
+                className="mira-btn-ghost"
+                title="收起"
+                aria-label="關閉"
+              >
+                ✕
+              </button>
+            </header>
+            <textarea
+              ref={popupTaRef}
+              value={text}
+              onChange={e => setText(e.target.value)}
+              onKeyDown={e => {
+                if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                  e.preventDefault();
+                  submit().then(() => setExpanded(false));
+                  return;
+                }
+                if (e.key === 'Escape') {
+                  setExpanded(false);
+                  return;
+                }
+                handleTabIndent(e, text, setText);
+              }}
+              placeholder="現在想分享什麼？（Esc 收起、⌘+Enter 發布）"
+              disabled={submitting}
+              className="mira-composer-popup-textarea"
+            />
+            <div className="mira-composer-popup-actions">
+              <MarkdownToolbar textareaRef={popupTaRef} value={text} setValue={setText} />
+              {err && <span className="mira-msg-error">{err}</span>}
+              <span style={{ flex: 1 }} />
+              <span className="mira-kbd">⌘+Enter</span>
+              <button
+                type="button"
+                disabled={submitting || !text.trim()}
+                onClick={async () => {
+                  await submit();
+                  setExpanded(false);
+                }}
+                className={`mira-btn-primary${!text.trim() ? ' disabled' : ''}`}
+              >
+                {submitting ? '送出中⋯' : '貼文'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }
 
@@ -373,6 +469,35 @@ function Avatar({ me, size = 40 }: { me: Me; size?: number }) {
   );
 }
 
+// Mira 自有頭像（區別於 leo），用機器人 emoji + 紫色圓
+// 對應 design.md §3.6.5 + tasks.md backlog #5a (P0)
+function MiraAvatar({ size = 40 }: { size?: number }) {
+  return (
+    <div
+      className="mira-avatar mira-avatar-mira"
+      style={{ width: size, height: size, fontSize: size * 0.55 }}
+      title="Mira"
+      aria-label="Mira"
+    >
+      🤖
+    </div>
+  );
+}
+
+// 用 source 判斷該 post 是 leo 寫的還是 mira 生成的
+// 已知 leo 來源 → leo 頭像；其他（ai-* / mira-* / test sources）→ mira 頭像
+function isMiraSource(source: string | null | undefined): boolean {
+  if (!source) return false;
+  const s = source.toLowerCase();
+  // leo 寫入的所有 channels
+  if (s.startsWith('km-writer-direct')) return false;
+  if (s.startsWith('logseq')) return false;
+  if (s === 'mobile' || s === 'web' || s.startsWith('tg') || s === 'telegram') return false;
+  if (s === 'rss') return false;
+  // 其他（ai-* / mira* / test sources）視為 mira
+  return true;
+}
+
 // ─── ⋮ 選單 ──────────────────────────────────────────────
 
 type MenuItem = { label: string; onClick: () => void; danger?: boolean };
@@ -646,15 +771,18 @@ function DocCard({
     setBlocks(curr => curr ? curr.map(b => b.id === id ? { ...b, content: newContent } : b) : null);
   }, []);
 
+  const postSource = inferSource(blocks, doc.page_name);
+  const showMira = isMiraSource(postSource);
+
   return (
     <article className="mira-card mira-post" ref={cardRef}>
-      {/* 頭部：作者區塊 */}
+      {/* 頭部：作者區塊（依 source 判斷頭像 + 名字） */}
       <header className="mira-post-header">
-        <Avatar me={me} size={40} />
+        {showMira ? <MiraAvatar size={40} /> : <Avatar me={me} size={40} />}
         <div className="mira-post-author">
-          <div className="mira-post-name">{me.display_name || me.email}</div>
+          <div className="mira-post-name">{showMira ? 'Mira' : (me.display_name || me.email)}</div>
           <div className="mira-post-time">
-            <SourceBadge source={inferSource(blocks, doc.page_name)} />
+            <SourceBadge source={postSource} />
             <span>·</span>
             <RelTime when={doc.updated_at} />
           </div>
@@ -979,6 +1107,12 @@ function BlockLine({
         tags_json: '[]', refs_json: '[]', sort_order: 0,
         created_at: Math.floor(Date.now() / 1000), updated_at: Math.floor(Date.now() / 1000),
       });
+      // P0 #5b：reply 內含 @mira → 觸發 mira 接龍（parent = 此 reply 形成 thread）
+      if (hasMiraMention(trimmed)) {
+        void triggerAiReply({
+          apiKey, postContent: trimmed, parentBlockId: data.data.id, pageName: docPageName,
+        });
+      }
       setMode('view'); setDraft('');
     } catch (e) { setErr(e instanceof Error ? e.message : String(e)); }
     finally { setSaving(false); }
@@ -1094,6 +1228,12 @@ function ReplyLine({
         tags_json: '[]', refs_json: '[]', sort_order: 0,
         created_at: Math.floor(Date.now() / 1000), updated_at: Math.floor(Date.now() / 1000),
       });
+      // P0 #5b：reply 內含 @mira → 觸發 mira 接龍（parent = 此 reply 形成 thread）
+      if (hasMiraMention(trimmed)) {
+        void triggerAiReply({
+          apiKey, postContent: trimmed, parentBlockId: data.data.id, pageName: docPageName,
+        });
+      }
       setMode('view'); setDraft('');
     } catch (e) { setErr(e instanceof Error ? e.message : String(e)); }
     finally { setSaving(false); }
diff --git a/landing/app/mira/mira.css b/landing/app/mira/mira.css
index ee29904..a8783ca 100644
--- a/landing/app/mira/mira.css
+++ b/landing/app/mira/mira.css
@@ -139,6 +139,18 @@
   font-family: var(--mira-font-en);
 }
 
+/* Mira 自有頭像 — 跟 leo 區分（紫色漸層 + 機器人 emoji） */
+.mira-app .mira-avatar-mira {
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, oklch(0.45 0.15 280), oklch(0.55 0.18 300));
+  color: #fff;
+  border-radius: 50%;
+  flex-shrink: 0;
+  /* emoji 本身有色彩，背景僅當邊框襯托 */
+  line-height: 1;
+}
+
 /* ── post 貼文 ── */
 .mira-app .mira-post {
   display: flex;
@@ -775,3 +787,75 @@
   border-bottom: 1px solid var(--mira-line-soft);
   padding-bottom: 4px;
 }
+
+/* ── Composer popup (P0 #5c 編輯器放大) ── */
+.mira-app .mira-composer-expand {
+  font-size: 18px;
+  padding: 0 8px;
+  cursor: pointer;
+  color: var(--mira-text-3);
+}
+.mira-app .mira-composer-expand:hover {
+  color: var(--mira-text-1);
+}
+
+/* backdrop 蓋全頁 + 居中 */
+.mira-composer-popup-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 1000;
+  display: grid;
+  place-items: center;
+  padding: 16px;
+}
+
+/* popup card 大編輯區 */
+.mira-composer-popup {
+  background: var(--mira-bg-1);
+  border: 1px solid var(--mira-line);
+  border-radius: var(--mira-radius-lg);
+  width: min(800px, 100%);
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font-family: var(--mira-font-zh);
+  color: var(--mira-text-1);
+}
+
+.mira-composer-popup-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--mira-line);
+}
+
+.mira-composer-popup-title {
+  font-weight: 600;
+  font-size: 15px;
+}
+
+.mira-composer-popup-textarea {
+  flex: 1;
+  min-height: 320px;
+  padding: 16px;
+  background: transparent;
+  color: var(--mira-text-1);
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  font-size: 15px;
+  line-height: 1.7;
+}
+
+.mira-composer-popup-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--mira-line);
+  background: var(--mira-bg-0);
+}