diff --git a/App.tsx b/App.tsx
index ac47945..09652aa 100644
--- a/App.tsx
+++ b/App.tsx
@@ -4,7 +4,7 @@ import Layout from './components/Layout';
 import Home from './views/Home';
 import Write from './views/Write';
 import QuestionDetail from './views/QuestionDetail';
-import DarkMatter from './views/DarkMatter';
+import WanderingPlanet from './views/WanderingPlanet';
 import Privacy from './views/Privacy';
 import About from './views/About';
 import { AppProvider } from './contexts/AppContext';
@@ -21,7 +21,7 @@ const AnimatedRoutes: React.FC = () => {
         <Route path="/" element={<Home />} />
         <Route path="/write" element={<Write />} />
         <Route path="/question/:id" element={<QuestionDetail />} />
-        <Route path="/dark-matter" element={<DarkMatter />} />
+        <Route path="/wandering-planet" element={<WanderingPlanet />} />
         <Route path="/about" element={<About />} />
         <Route path="/privacy" element={<Privacy />} />
       </Routes>
diff --git a/README.md b/README.md
index 1caddc6..cd9a473 100644
--- a/README.md
+++ b/README.md
@@ -1,91 +1,92 @@
-1| # Cognitive Space
-2| 
-3| Cognitive Space is a web application designed to help users organize and explore their thoughts, questions, and ideas. It allows you to drop unstructured thoughts, promote them into structured questions, and build context with claims, evidence, and triggers. Visualize connections between questions to uncover emerging patterns.
-4| 
-5| Built with React for the frontend and deployed as a Cloudflare Worker for the backend API.
-6| 
-7| ## Features
-8| 
-9| - **Thought Capture**: Quickly jot down ideas without structure.
-10| - **Question Organization**: Promote thoughts into questions and add supporting elements.
-11| - **Visualization**: Explore relationships between questions graphically.
-12| - **Dark Matter Recovery**: Rescue orphaned thoughts and link them back.
-13| - **PWA Support**: Installable as a progressive web app.
-14| 
-15| ## Guide
-16| 
-17| 1. Open the app and use `Just write` to drop a thought without worrying about structure.
-18| 2. Create a new Question by tagging or promoting a thought when the theme becomes clear.
-19| 3. Add supporting notes as Claims, Evidence, or Triggers to build context over time.
-20| 4. Use `Visualize` to explore related questions and spot emerging clusters.
-21| 5. Visit `Dark Matter` to rescue orphaned fragments and link them to a question.
-22| 
-23| For more details, see [Product Design](docs/product_design.md) and [Visualization Proposal](docs/visualization_proposal.md).
-24| 
-25| ## Prerequisites
-26| 
-27| - Node.js (version 16 or higher)
-28| - Cloudflare Wrangler CLI (`npm install -g wrangler`)
-29| 
-30| ## Installation
-31| 
-32| 1. Clone the repository:
-33|    ```bash
-34|    git clone https://github.com/mingzhangyang/cognitive-space
-35|    cd cognitive-space
-36|    ```
-37| 
-38| 2. Install dependencies:
-39|    ```bash
-40|    npm install
-41|    ```
-42| 
-43| ## Local Development
-44| 
-45| 1. Set the `BIGMODEL_API_KEY` secret using Wrangler:
-46|    ```bash
-47|    wrangler secret put BIGMODEL_API_KEY
-48|    ```
-49| 
-50| 2. Run the Worker locally (builds assets first):
-51|    ```bash
-52|    npm run dev
-53|    ```
-54| 
-55| 3. Optional: Run UI-only dev server (no Worker API):
-56|    ```bash
-57|    npm run dev:ui
-58|    ```
-59| 
-60| ## Deployment
-61| 
-62| 1. Build the static assets:
-63|    ```bash
-64|    npm run build
-65|    ```
-66| 
-67| 2. Deploy the Worker:
-68|    ```bash
-69|    npm run deploy
-70|    ```
-71| 
-72| ## Configuration
-73| 
-74| - `BIGMODEL_API_KEY`: Required. Your API key for the AI model.
-75| - `BIGMODEL_MODEL`: Optional. Defaults to `glm-4.5-flash`. Specify a different model if needed.
-76| 
-77| ## Scripts
-78| 
-79| - `npm run build`: Builds the static assets.
-80| - `npm run dev`: Runs the Worker locally.
-81| - `npm run dev:ui`: Runs the UI dev server.
-82| - `npm run deploy`: Deploys to Cloudflare.
-83| 
-84| ## Contributing
-85| 
-86| Contributions are welcome! Please read the contributing guidelines (if any) before submitting a pull request.
-87| 
-88| ## License
-89| 
-90| This project is licensed under the MIT License.
-91| 
\ No newline at end of file
+# Cognitive Space
+
+Cognitive Space is a web application designed to help users organize and explore their thoughts, questions, and ideas. It allows you to drop unstructured thoughts, promote them into structured questions, and build context with claims, evidence, and triggers. Visualize connections between questions to uncover emerging patterns.
+
+Built with React for the frontend and deployed as a Cloudflare Worker for the backend API.
+
+## Features
+
+- **Thought Capture**: Quickly jot down ideas without structure.
+- **Question Organization**: Promote thoughts into questions and add supporting elements.
+- **Visualization**: Explore relationships between questions graphically.
+- **Wandering Planet Recovery**: Rescue orphaned thoughts and link them back.
+- **PWA Support**: Installable as a progressive web app.
+
+## Guide
+
+1. Open the app and use `Just write` to drop a thought without worrying about structure.
+2. Create a new Question by tagging or promoting a thought when the theme becomes clear.
+3. Add supporting notes as Claims, Evidence, or Triggers to build context over time.
+4. Use `Visualize` to explore related questions and spot emerging clusters.
+5. Visit `Wandering Planet` to rescue orphaned fragments and link them to a question.
+
+For more details, see [Product Design](docs/product_design.md) and [Visualization Proposal](docs/visualization_proposal.md).
+
+## Prerequisites
+
+- Node.js (version 18 or higher)
+- Cloudflare Wrangler CLI (`npm install -g wrangler`)
+
+## Installation
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/mingzhangyang/cognitive-space
+   cd cognitive-space
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+
+## Local Development
+
+1. Set the `BIGMODEL_API_KEY` secret using Wrangler:
+   ```bash
+   wrangler secret put BIGMODEL_API_KEY
+   ```
+
+2. Run the Worker locally (builds assets first):
+   ```bash
+   npm run dev
+   ```
+
+3. Optional: Run UI-only dev server (no Worker API):
+   ```bash
+   npm run dev:ui
+   ```
+
+## Deployment
+
+1. Build the static assets:
+   ```bash
+   npm run build
+   ```
+
+2. Deploy the Worker:
+   ```bash
+   npm run deploy
+   ```
+
+## Configuration
+
+- `BIGMODEL_API_KEY`: Required. Your API key for the AI model.
+- `BIGMODEL_MODEL`: Optional. Defaults to `glm-4.7-flashx`. Specify a different model if needed.
+- `VITE_BUILD_ID`: Optional. Injected by build scripts for service worker cache versioning. Override to control the cache tag.
+
+## Scripts
+
+- `npm run build`: Builds the static assets.
+- `npm run dev`: Runs the Worker locally.
+- `npm run dev:ui`: Runs the UI dev server.
+- `npm run preview`: Builds the assets and runs the Worker locally.
+- `npm run deploy`: Deploys to Cloudflare.
+
+## Contributing
+
+Contributions are welcome! Please read the contributing guidelines (if any) before submitting a pull request.
+
+## License
+
+This project is licensed under the MIT License.
diff --git a/README.zh.md b/README.zh.md
index 095dcc2..f498ed6 100644
--- a/README.zh.md
+++ b/README.zh.md
@@ -9,7 +9,7 @@
 - **想法捕捉**: 快速记录没有结构的想法。
 - **问题整理**: 将想法提升为问题，并添加支持元素。
 - **可视化**: 图形化地探索问题之间的关系。
-- **暗物质恢复**: 拯救孤立的想法并将它们重新链接起来。
+- **流浪天体恢复**: 拯救孤立的想法并将它们重新链接起来。
 - **PWA支持**: 可安装为渐进式Web应用。
 
 ## 使用指南
@@ -18,13 +18,13 @@
 2. 当主题明确时，通过标记或提升想法，创建一个新的问题。
 3. 随着时间的推移，添加论点、证据或触发器等支持内容来构建背景。
 4. 使用“Visualize”功能探索相关问题，找到新出现的聚集点。
-5. 访问“Dark Matter”版块，拯救孤立的碎片并将它们链接到一个问题。
+5. 访问“流浪天体”版块，拯救孤立的碎片并将它们链接到一个问题。
 
 更多详情，请参考[产品设计](docs/product_design.md)和[可视化提案](docs/visualization_proposal.md)。
 
 ## 先决条件
 
-- Node.js（版本16或更高）
+- Node.js（版本18或更高）
 - Cloudflare Wrangler CLI（`npm install -g wrangler`）
 
 ## 安装
@@ -72,13 +72,15 @@
 ## 配置
 
 - `BIGMODEL_API_KEY`: 必需，AI模型的API密钥。
-- `BIGMODEL_MODEL`: 可选，默认为`glm-4.5-flash`。如需使用其它模型，请指定。
+- `BIGMODEL_MODEL`: 可选，默认为`glm-4.7-flashx`。如需使用其它模型，请指定。
+- `VITE_BUILD_ID`: 可选。构建脚本会自动注入用于 Service Worker 缓存版本控制，可手动覆盖以固定缓存标签。
 
 ## 脚本
 
 - `npm run build`: 构建静态资源。
 - `npm run dev`: 本地运行Worker服务。
 - `npm run dev:ui`: 运行UI开发服务器。
+- `npm run preview`: 构建资源并本地运行Worker服务。
 - `npm run deploy`: 部署到Cloudflare。
 
 ## 贡献
@@ -87,4 +89,4 @@
 
 ## 许可证
 
-此项目基于MIT许可证授权。
\ No newline at end of file
+此项目基于MIT许可证授权。
diff --git a/components/ActionIconButton.tsx b/components/ActionIconButton.tsx
index b516981..02abd70 100644
--- a/components/ActionIconButton.tsx
+++ b/components/ActionIconButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useAppContext } from '../contexts/AppContext';
-import { CopyIcon, EditIcon, TrashIcon } from './Icons';
+import { CopyIcon, CopyToIcon, EditIcon, MoveIcon, TrashIcon } from './Icons';
 import Tooltip from './Tooltip';
 
-type ActionKind = 'edit' | 'copy' | 'delete';
+type ActionKind = 'edit' | 'copy' | 'copy_to' | 'delete' | 'move';
 
 type ActionIconButtonProps = {
   action: ActionKind;
@@ -27,10 +27,20 @@ const actionConfig: Record<ActionKind, { labelKey: string; hoverClassName: strin
     hoverClassName: 'hover:text-warning dark:hover:text-warning-dark',
     Icon: CopyIcon
   },
+  copy_to: {
+    labelKey: 'copy_to_question',
+    hoverClassName: 'hover:text-accent dark:hover:text-accent-dark',
+    Icon: CopyToIcon
+  },
   delete: {
     labelKey: 'delete',
     hoverClassName: 'hover:text-red-500 dark:hover:text-red-400',
     Icon: TrashIcon
+  },
+  move: {
+    labelKey: 'move_to_question',
+    hoverClassName: 'hover:text-accent dark:hover:text-accent-dark',
+    Icon: MoveIcon
   }
 };
 
diff --git a/components/ActionSheetButton.tsx b/components/ActionSheetButton.tsx
index c792e34..5137fc1 100644
--- a/components/ActionSheetButton.tsx
+++ b/components/ActionSheetButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAppContext } from '../contexts/AppContext';
-import { CopyIcon, EditIcon, TrashIcon, MoveIcon } from './Icons';
+import { CopyIcon, CopyToIcon, EditIcon, TrashIcon, MoveIcon } from './Icons';
 
 /**
  * CSS class used for action sheet option text to ensure a unified muted color
@@ -12,10 +12,11 @@ export const UNIFIED_TEXT_CLASS = 'text-muted-400 dark:text-muted-500';
  * Action kinds supported by the action sheet.
  * - `edit`: edit the item
  * - `copy`: copy the item content
+ * - `copy_to`: copy the item to another question
  * - `delete`: remove the item
  * - `move`: move the item to another question
  */
-export type ActionKind = 'edit' | 'copy' | 'delete' | 'move';
+export type ActionKind = 'edit' | 'copy' | 'copy_to' | 'delete' | 'move';
 
 /**
  * Props for `ActionSheetButton`.
@@ -39,6 +40,7 @@ const actionConfig: Record<
 > = {
   edit: { labelKey: 'edit', textClassName: UNIFIED_TEXT_CLASS, Icon: EditIcon },
   copy: { labelKey: 'copy_note', textClassName: UNIFIED_TEXT_CLASS, Icon: CopyIcon },
+  copy_to: { labelKey: 'copy_to_question', textClassName: UNIFIED_TEXT_CLASS, Icon: CopyToIcon },
   delete: { labelKey: 'delete', textClassName: UNIFIED_TEXT_CLASS, Icon: TrashIcon },
   move: { labelKey: 'move_to_question', textClassName: UNIFIED_TEXT_CLASS, Icon: MoveIcon }
 };
diff --git a/components/Icons.tsx b/components/Icons.tsx
index 4a09686..61e8978 100644
--- a/components/Icons.tsx
+++ b/components/Icons.tsx
@@ -80,6 +80,15 @@ export const CopyIcon = ({ className }: { className?: string }) => (
   </svg>
 );
 
+export const CopyToIcon = ({ className }: { className?: string }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className={className}>
+    <rect x="9" y="9" width="12" height="12" rx="2" ry="2"></rect>
+    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+    <line x1="18" y1="5" x2="18" y2="9"></line>
+    <line x1="16" y1="7" x2="20" y2="7"></line>
+  </svg>
+);
+
 export const CheckIcon = ({ className }: { className?: string }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" className={className}>
     <polyline points="20 6 9 17 4 12"></polyline>
diff --git a/components/MessageCenterPanel.tsx b/components/MessageCenterPanel.tsx
index 5bd0387..0fec6fd 100644
--- a/components/MessageCenterPanel.tsx
+++ b/components/MessageCenterPanel.tsx
@@ -12,13 +12,13 @@ import { coerceConfidenceLabel } from '../utils/confidence';
 const isNoteSuggestion = (message: AssistantMessage): message is Extract<AssistantMessage, { kind: 'note_suggestion' }> =>
   message.kind === 'note_suggestion';
 
-const isDarkMatterReady = (message: AssistantMessage): message is Extract<AssistantMessage, { kind: 'dark_matter_ready' }> =>
-  message.kind === 'dark_matter_ready';
+const isWanderingPlanetReady = (message: AssistantMessage): message is Extract<AssistantMessage, { kind: 'wandering_planet_ready' }> =>
+  message.kind === 'wandering_planet_ready';
 
 const getConfidenceLabelText = (label: string, t: (key: string) => string) => {
-  if (label === 'likely') return t('dark_matter_ai_confidence_likely');
-  if (label === 'possible') return t('dark_matter_ai_confidence_possible');
-  return t('dark_matter_ai_confidence_loose');
+  if (label === 'likely') return t('wandering_planet_ai_confidence_likely');
+  if (label === 'possible') return t('wandering_planet_ai_confidence_possible');
+  return t('wandering_planet_ai_confidence_loose');
 };
 
 const buildNoteSuggestionDetails = (payload: NoteSuggestionPayload, t: (key: string) => string) => {
@@ -109,7 +109,7 @@ const MessageCenterPanel: React.FC<{ isOpen: boolean; onClose: () => void }> = (
               {runningJobs.map((job) => {
                 const jobLabel = job.kind === 'note_analysis'
                   ? translate('assistant_job_note')
-                  : formatTemplate(translate('assistant_job_dark_matter'), { count: job.meta?.noteCount ?? 0 });
+                  : formatTemplate(translate('assistant_job_wandering_planet'), { count: job.meta?.noteCount ?? 0 });
                 return (
                   <div key={job.id} className="surface-card p-3 flex items-start gap-3">
                     <LoadingSpinner className="w-4 h-4 text-accent dark:text-accent-dark mt-0.5" />
@@ -184,26 +184,26 @@ const MessageCenterPanel: React.FC<{ isOpen: boolean; onClose: () => void }> = (
                   );
                 }
 
-                if (isDarkMatterReady(message)) {
+                if (isWanderingPlanetReady(message)) {
                   const count = message.payload.suggestionCount;
                   return (
                     <div key={message.id} className="surface-card p-4 space-y-3">
                       <div>
-                        <p className="text-body-sm-muted">{translate('assistant_suggestion_dark_matter')}</p>
+                        <p className="text-body-sm-muted">{translate('assistant_suggestion_wandering_planet')}</p>
                         <p className="text-ink dark:text-ink-dark text-base font-medium">
-                          {formatTemplate(translate('assistant_dark_matter_ready_title'), { count })}
+                          {formatTemplate(translate('assistant_wandering_planet_ready_title'), { count })}
                         </p>
                       </div>
                       <div className="flex flex-wrap gap-2 pt-2">
                         <button
                           type="button"
                           onClick={() => {
-                            navigate('/dark-matter');
+                            navigate('/wandering-planet');
                             onClose();
                           }}
                           className="px-3 py-1.5 rounded-full bg-ink text-white dark:bg-muted-600 hover:opacity-90 transition-opacity text-xs"
                         >
-                          {translate('assistant_suggestion_open_dark_matter')}
+                          {translate('assistant_suggestion_open_wandering_planet')}
                         </button>
                         <button
                           type="button"
diff --git a/components/MoveToQuestionModal.tsx b/components/MoveToQuestionModal.tsx
index 3277e62..be1d921 100644
--- a/components/MoveToQuestionModal.tsx
+++ b/components/MoveToQuestionModal.tsx
@@ -11,6 +11,8 @@ interface MoveToQuestionModalProps {
   onSelectQuestion: (questionId: string) => void;
   onConfirm: () => void;
   onCancel: () => void;
+  titleKey?: TranslationKey;
+  confirmKey?: TranslationKey;
   t: (key: TranslationKey) => string;
 }
 
@@ -22,6 +24,8 @@ const MoveToQuestionModal: React.FC<MoveToQuestionModalProps> = ({
   onSelectQuestion,
   onConfirm,
   onCancel,
+  titleKey = 'move_to_question_title',
+  confirmKey = 'move_to_question_confirm',
   t
 }) => {
   return (
@@ -32,7 +36,7 @@ const MoveToQuestionModal: React.FC<MoveToQuestionModalProps> = ({
       isDismissable={!isWorking}
     >
       <div className="space-y-2 mb-5">
-        <p className="text-ink dark:text-ink-dark text-lg font-medium">{t('move_to_question_title')}</p>
+        <p className="text-ink dark:text-ink-dark text-lg font-medium">{t(titleKey)}</p>
       </div>
       <div className="mb-6">
         <select
@@ -66,7 +70,7 @@ const MoveToQuestionModal: React.FC<MoveToQuestionModalProps> = ({
           }`}
         >
           {isWorking && <LoadingSpinner className="w-3.5 h-3.5 text-white" />}
-          {t('move_to_question_confirm')}
+          {t(confirmKey)}
         </button>
       </div>
     </Modal>
diff --git a/components/QuestionGraph.tsx b/components/QuestionGraph.tsx
index 81a1564..215b30f 100644
--- a/components/QuestionGraph.tsx
+++ b/components/QuestionGraph.tsx
@@ -1,8 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Note, NoteType } from '../types';
+import React, { useEffect, useRef, useState } from 'react';
+import { Note } from '../types';
 import { useAppContext } from '../contexts/AppContext';
 import QuestionGraphControls from './questionGraph/QuestionGraphControls';
 import QuestionGraphLegend from './questionGraph/QuestionGraphLegend';
+import QuestionGraphTooltip from './questionGraph/QuestionGraphTooltip';
+import { useQuestionGraphLayout, type GraphNode } from './questionGraph/useQuestionGraphLayout';
 import { getTypeLabel } from '../utils/notes';
 
 interface QuestionGraphProps {
@@ -12,16 +14,6 @@ interface QuestionGraphProps {
   onSelectNote?: (note: Note) => void;
 }
 
-interface GraphNode {
-  id: string;
-  note: Note;
-  x: number;
-  y: number;
-  radius: number;
-  color: string;
-  stroke: string;
-}
-
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
 const QuestionGraph: React.FC<QuestionGraphProps> = ({
@@ -48,11 +40,6 @@ const QuestionGraph: React.FC<QuestionGraphProps> = ({
   });
   const pressedNodeIdRef = useRef<string | null>(null);
 
-  const idPrefix = useMemo(() => {
-    const sanitized = String(question.id ?? '').replace(/[^a-zA-Z0-9]/g, '');
-    return `qg-${sanitized.slice(0, 8) || 'graph'}`;
-  }, [question.id]);
-
   useEffect(() => {
     if (!containerRef.current) return;
     const element = containerRef.current;
@@ -66,117 +53,13 @@ const QuestionGraph: React.FC<QuestionGraphProps> = ({
     return () => observer.disconnect();
   }, []);
 
-  const palette = useMemo(() => {
-    const pick = (light: string, dark: string) =>
-      theme === 'dark' ? `var(${dark})` : `var(${light})`;
-
-    return {
-      question: pick('--color-warning', '--color-warning-dark'),
-      claim: pick('--color-note-claim', '--color-note-claim-dark'),
-      evidence: pick('--color-note-evidence', '--color-note-evidence-dark'),
-      trigger: pick('--color-note-trigger', '--color-note-trigger-dark'),
-      other: pick('--color-muted-400', '--color-muted-500'),
-      line: pick('--color-line', '--color-line-dark'),
-      lineSoft: pick('--color-line-soft', '--color-line-dark'),
-      lineStrong: pick('--color-line-muted', '--color-line-strong-dark'),
-      inner: pick('--color-surface', '--color-surface-dark')
-    };
-  }, [theme]);
-
-  const layout = useMemo(() => {
-    if (!size.width || !size.height) return null;
-
-    const centerX = size.width / 2;
-    const centerY = size.height / 2;
-    const minDim = Math.min(size.width, size.height);
-    const baseRadius = Math.max(90, minDim * 0.22);
-    const ringGap = Math.max(55, minDim * 0.12);
-    const maxRadius = minDim / 2 - 28;
-
-    const claimNotes = notes.filter((note) => note.type === NoteType.CLAIM);
-    const evidenceNotes = notes.filter((note) => note.type === NoteType.EVIDENCE);
-    const triggerNotes = notes.filter((note) => note.type === NoteType.TRIGGER);
-    const otherNotes = notes.filter(
-      (note) =>
-        ![NoteType.CLAIM, NoteType.EVIDENCE, NoteType.TRIGGER].includes(note.type)
-    );
-
-    const ringConfigs = [
-      {
-        id: NoteType.CLAIM,
-        label: t('type_claim'),
-        list: claimNotes,
-        radius: Math.min(baseRadius, maxRadius),
-        color: palette.claim,
-        size: 12
-      },
-      {
-        id: NoteType.EVIDENCE,
-        label: t('type_evidence'),
-        list: evidenceNotes,
-        radius: Math.min(baseRadius + ringGap, maxRadius),
-        color: palette.evidence,
-        size: 10
-      },
-      {
-        id: NoteType.TRIGGER,
-        label: t('type_trigger'),
-        list: triggerNotes,
-        radius: Math.min(baseRadius + ringGap * 2, maxRadius),
-        color: palette.trigger,
-        size: 9
-      },
-      {
-        id: NoteType.UNCATEGORIZED,
-        label: t('type_uncategorized'),
-        list: otherNotes,
-        radius: Math.min(baseRadius + ringGap * 3, maxRadius),
-        color: palette.other,
-        size: 8
-      }
-    ];
-
-    const ringNodes: GraphNode[] = [];
-    ringConfigs.forEach((ring, ringIndex) => {
-      const count = ring.list.length;
-      if (!count) return;
-      const angleStep = (Math.PI * 2) / count;
-      const startAngle = (Math.PI / 6) * ringIndex;
-      ring.list.forEach((note, index) => {
-        const angle = startAngle + angleStep * index;
-        ringNodes.push({
-          id: note.id,
-          note,
-          x: centerX + Math.cos(angle) * ring.radius,
-          y: centerY + Math.sin(angle) * ring.radius,
-          radius: ring.size,
-          color: ring.color,
-          stroke: palette.line
-        });
-      });
-    });
-
-    const questionNode: GraphNode = {
-      id: question.id,
-      note: question,
-      x: centerX,
-      y: centerY,
-      radius: 18,
-      color: palette.question,
-      stroke: palette.line
-    };
-
-    return {
-      centerX,
-      centerY,
-      minDim,
-      baseRadius,
-      ringGap,
-      maxRadius,
-      nodes: [questionNode, ...ringNodes],
-      rings: ringConfigs
-    };
-  }, [notes, palette, question, size.height, size.width, t]);
+  const { idPrefix, palette, layout, legendItems, showLegend } = useQuestionGraphLayout({
+    theme,
+    t,
+    question,
+    notes,
+    size
+  });
 
   const handlePointerDown = (event: React.PointerEvent<SVGSVGElement>) => {
     const target = event.target as Element | null;
@@ -248,13 +131,6 @@ const QuestionGraph: React.FC<QuestionGraphProps> = ({
   }
 
   const focusId = hoveredNode?.id ?? selectedNoteId ?? null;
-  const showLegend = notes.length > 0;
-  const legendItems = [
-    { id: 'question', label: t('type_question'), color: palette.question },
-    ...layout.rings
-      .filter((ring) => ring.list.length > 0)
-      .map((ring) => ({ id: ring.id, label: ring.label, color: ring.color }))
-  ];
   const zoomIn = () => setView((prev) => ({ ...prev, scale: clamp(prev.scale + 0.15, 0.6, 2.4) }));
   const zoomOut = () => setView((prev) => ({ ...prev, scale: clamp(prev.scale - 0.15, 0.6, 2.4) }));
   const resetView = () => setView({ x: 0, y: 0, scale: 1 });
@@ -414,22 +290,18 @@ const QuestionGraph: React.FC<QuestionGraphProps> = ({
       {showLegend && <QuestionGraphLegend items={legendItems} />}
 
       {hoveredNode && (
-        <div
-          className="absolute z-10 max-w-xs rounded-lg border border-line dark:border-line-dark bg-surface dark:bg-surface-dark shadow-lg p-3 text-caption-ink"
+        <QuestionGraphTooltip
+          title={getTypeLabel(hoveredNode.note.type, t)}
+          content={
+            hoveredNode.note.content.length > 100
+              ? `${hoveredNode.note.content.slice(0, 100)}...`
+              : hoveredNode.note.content
+          }
           style={{
             left: clamp(hoverPosition.x + 12, 8, Math.max(8, size.width - 260)),
             top: clamp(hoverPosition.y + 12, 8, Math.max(8, size.height - 120))
           }}
-        >
-          <div className="font-semibold mb-1">
-            {getTypeLabel(hoveredNode.note.type, t)}
-          </div>
-          <div className="text-subtle dark:text-subtle-dark leading-relaxed">
-            {hoveredNode.note.content.length > 100
-              ? `${hoveredNode.note.content.slice(0, 100)}...`
-              : hoveredNode.note.content}
-          </div>
-        </div>
+        />
       )}
     </div>
   );
diff --git a/components/SeoManager.tsx b/components/SeoManager.tsx
index 23bd314..2cae4bc 100644
--- a/components/SeoManager.tsx
+++ b/components/SeoManager.tsx
@@ -72,10 +72,10 @@ const SeoManager = () => {
               title: t('seo_title_write'),
               description: t('seo_desc_write')
             };
-          case '/dark-matter':
+          case '/wandering-planet':
             return {
-              title: t('seo_title_dark_matter'),
-              description: t('seo_desc_dark_matter')
+              title: t('seo_title_wandering_planet'),
+              description: t('seo_desc_wandering_planet')
             };
           case '/privacy':
             return {
diff --git a/components/home/HomeEmptyState.tsx b/components/home/HomeEmptyState.tsx
new file mode 100644
index 0000000..ff02d2b
--- /dev/null
+++ b/components/home/HomeEmptyState.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { EmptyStateIllustration } from '../Icons';
+
+interface HomeEmptyStateProps {
+  t: (key: string) => string;
+  hasQuestions: boolean;
+  isFiltering: boolean;
+  hasNotes: boolean;
+  onboardingDismissed: boolean;
+  onDismissOnboarding: () => void;
+}
+
+const HomeEmptyState: React.FC<HomeEmptyStateProps> = ({
+  t,
+  hasQuestions,
+  isFiltering,
+  hasNotes,
+  onboardingDismissed,
+  onDismissOnboarding
+}) => {
+  return (
+    <div className="text-center py-14 px-5 surface-empty shadow-[var(--shadow-elev-1)] dark:shadow-[var(--shadow-elev-1-dark)]">
+      {hasQuestions && isFiltering ? (
+        <>
+          <p className="text-ink dark:text-ink-dark font-serif mb-2 text-lg">
+            {t('no_recall_results')}
+          </p>
+          <p className="text-body-sm-muted">
+            {t('recall_hint')}
+          </p>
+        </>
+      ) : (
+        <>
+          <EmptyStateIllustration className="w-40 h-auto mx-auto mb-4 text-accent/50 dark:text-accent-dark/40" />
+          <p className="text-ink dark:text-ink-dark font-serif mb-2 text-lg">
+            {hasNotes ? t('no_question_yet') : t('space_empty')}
+          </p>
+          <p className="text-body-sm-muted">
+            {t('just_write')}
+          </p>
+          {!hasNotes && !onboardingDismissed && (
+            <div className="mt-6 mx-auto max-w-xs rounded-xl border border-accent/20 dark:border-accent-dark/20 bg-accent/5 dark:bg-accent-dark/5 px-4 py-3 animate-fade-in">
+              <p className="text-body-sm text-ink dark:text-ink-dark mb-2">
+                {t('empty_state_onboarding')}
+              </p>
+              <button
+                type="button"
+                onClick={onDismissOnboarding}
+                className="text-xs text-accent dark:text-accent-dark hover:underline cursor-pointer"
+              >
+                {t('empty_state_onboarding_dismiss')}
+              </button>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default HomeEmptyState;
diff --git a/components/home/HomeFab.tsx b/components/home/HomeFab.tsx
new file mode 100644
index 0000000..be8acf3
--- /dev/null
+++ b/components/home/HomeFab.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Link } from 'react-router-dom';
+import { PlusIcon } from '../Icons';
+import Tooltip from '../Tooltip';
+
+interface HomeFabProps {
+  t: (key: string) => string;
+  fabContainer: HTMLElement | null;
+}
+
+const HomeFab: React.FC<HomeFabProps> = ({ t, fabContainer }) => {
+  if (!fabContainer) return null;
+
+  return createPortal(
+    <div className="fixed bottom-20 right-4 sm:bottom-24 sm:right-8 z-50 flex flex-col items-center gap-2">
+      <Tooltip content={t('keyboard_shortcut_write')}>
+        <Link
+          to="/write"
+          className="bg-action text-white w-14 h-14 rounded-full flex items-center justify-center shadow-xl hover:scale-105 transition-transform hover:bg-action-hover focus:outline-none focus:ring-4 focus:ring-action-ring dark:bg-action dark:hover:bg-action-hover-dark dark:focus:ring-action-ring/50"
+          aria-label={t('write_label')}
+        >
+          <PlusIcon className="w-6 h-6" />
+        </Link>
+      </Tooltip>
+    </div>,
+    fabContainer
+  );
+};
+
+export default HomeFab;
diff --git a/components/home/HomeHeader.tsx b/components/home/HomeHeader.tsx
new file mode 100644
index 0000000..1eff8bb
--- /dev/null
+++ b/components/home/HomeHeader.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface HomeHeaderProps {
+  t: (key: string) => string;
+  hasQuestions: boolean;
+  questionCount: number;
+}
+
+const HomeHeader: React.FC<HomeHeaderProps> = ({
+  t,
+  hasQuestions,
+  questionCount
+}) => {
+  return (
+    <div className="mb-7 sm:mb-8">
+      <h1 className="page-title mb-2">
+        {t('living_questions')}
+        {hasQuestions && (
+          <span className="ml-2 text-muted-400 dark:text-muted-500 tabular-nums font-sans text-lg sm:text-xl font-normal">
+            {t('question_count_separator')} {questionCount}
+          </span>
+        )}
+      </h1>
+      <p className="page-subtitle">{t('problems_mind')}</p>
+    </div>
+  );
+};
+
+export default HomeHeader;
diff --git a/components/home/HomeRecallPanel.tsx b/components/home/HomeRecallPanel.tsx
new file mode 100644
index 0000000..9379eea
--- /dev/null
+++ b/components/home/HomeRecallPanel.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { SearchIcon, XIcon } from '../Icons';
+import IconButton from '../IconButton';
+
+interface HomeRecallPanelProps {
+  t: (key: string) => string;
+  wanderingPlanetCount: number;
+  isRecallOpen: boolean;
+  query: string;
+  isFiltering: boolean;
+  onOpenRecall: () => void;
+  onCloseRecall: () => void;
+  onQueryChange: (value: string) => void;
+  onClearQuery: () => void;
+  onExitRecall: () => void;
+}
+
+const HomeRecallPanel: React.FC<HomeRecallPanelProps> = ({
+  t,
+  wanderingPlanetCount,
+  isRecallOpen,
+  query,
+  isFiltering,
+  onOpenRecall,
+  onCloseRecall,
+  onQueryChange,
+  onClearQuery,
+  onExitRecall
+}) => {
+  return (
+    <div className="mb-6">
+      <div className="flex flex-wrap gap-3">
+        {!isRecallOpen ? (
+          <button
+            type="button"
+            onClick={onOpenRecall}
+            className="btn-pill btn-outline muted-label w-full sm:w-auto"
+            aria-label={t('recall_label')}
+          >
+            <SearchIcon className="w-4 h-4" />
+            <span>{t('recall_label')}</span>
+          </button>
+        ) : null}
+        {wanderingPlanetCount > 0 && (
+          <Link
+            to="/wandering-planet"
+            className="btn-pill btn-outline muted-label w-full sm:w-auto"
+          >
+            <span className="text-sm">🌑</span>
+            <span>{t('wandering_planet')}</span>
+            <span className="ml-1 px-1.5 py-0.5 bg-line dark:bg-line-dark rounded-full text-micro">
+              {wanderingPlanetCount}
+            </span>
+          </Link>
+        )}
+      </div>
+      {isRecallOpen && (
+        <>
+          <label htmlFor="recall" className="muted-label">
+            {t('recall_label')}
+          </label>
+          <div className="mt-3 relative">
+            <SearchIcon className="w-4 h-4 text-muted-500 dark:text-muted-400 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" />
+            <input
+              id="recall"
+              type="text"
+              value={query}
+              onChange={(e) => onQueryChange(e.target.value)}
+              onBlur={onCloseRecall}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  onExitRecall();
+                }
+              }}
+              placeholder={t('recall_placeholder')}
+              className="input-pill"
+              aria-label={t('recall_label')}
+              autoFocus
+            />
+            {isFiltering && (
+              <IconButton
+                label={t('clear_recall')}
+                sizeClassName="h-10 w-10"
+                onClick={onClearQuery}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-400 hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark"
+              >
+                <XIcon className="w-4 h-4" />
+              </IconButton>
+            )}
+          </div>
+          <p className="mt-2 text-caption">{t('recall_hint')}</p>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default HomeRecallPanel;
diff --git a/components/layout/LayoutHeader.tsx b/components/layout/LayoutHeader.tsx
index 55d7f74..c2c1bbe 100644
--- a/components/layout/LayoutHeader.tsx
+++ b/components/layout/LayoutHeader.tsx
@@ -1,19 +1,12 @@
 import React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
-import {
-  DatabaseIcon,
-  HomeIcon,
-  InboxIcon,
-  InfoIcon,
-  MenuIcon,
-  MoonIcon,
-  SunIcon
-} from '../Icons';
+import { HomeIcon, InboxIcon, MenuIcon } from '../Icons';
 import IconButton from '../IconButton';
 import Tooltip from '../Tooltip';
 import { useAppContext } from '../../contexts/AppContext';
 import { useAssistantInbox } from '../../contexts/AssistantInboxContext';
 import { useMenuFocus } from '../../hooks/useMenuFocus';
+import LayoutMenu from './LayoutMenu';
 
 interface LayoutHeaderProps {
   isHome: boolean;
@@ -51,7 +44,25 @@ const LayoutHeader: React.FC<LayoutHeaderProps> = ({
       ? 'bg-accent dark:bg-accent-dark'
       : 'bg-line dark:bg-line-dark';
 
-  const aboutIndex = isHome ? 3 : 2;
+  const handleToggleLanguage = () => {
+    setLanguage(language === 'en' ? 'zh' : 'en');
+    setMenuOpen(false);
+  };
+
+  const handleToggleTheme = () => {
+    toggleTheme();
+    setMenuOpen(false);
+  };
+
+  const handleOpenDataMenu = () => {
+    setMenuOpen(false);
+    onOpenDataMenu();
+  };
+
+  const handleNavigateAbout = () => {
+    setMenuOpen(false);
+    navigate('/about');
+  };
 
   return (
     <header className="relative z-20 mb-8 sm:mb-10 flex flex-wrap items-center justify-between gap-3">
@@ -98,135 +109,21 @@ const LayoutHeader: React.FC<LayoutHeaderProps> = ({
           >
             <MenuIcon className="w-4 h-4" />
           </IconButton>
-          {menuOpen && (
-            <div
-              id="app-menu"
-              role="menu"
-              className="menu-popover animate-fade-in motion-reduce:animate-none"
-              onKeyDown={handleMenuKeyDown}
-            >
-              <span aria-hidden="true" className="menu-caret" />
-              <button
-                role="menuitem"
-                ref={(el) => {
-                  menuItemRefs.current[0] = el;
-                }}
-                onClick={() => {
-                  setLanguage(language === 'en' ? 'zh' : 'en');
-                  setMenuOpen(false);
-                }}
-                className="menu-item"
-                tabIndex={activeIndex === 0 ? 0 : -1}
-                onMouseEnter={() => setActiveIndex(0)}
-                onFocus={() => setActiveIndex(0)}
-              >
-                <span className="h-9 w-9 rounded-full border border-line dark:border-line-dark bg-surface/80 dark:bg-surface-dark/60 grid place-items-center text-subtle dark:text-subtle-dark">
-                  <svg
-                    className="w-4 h-4"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.8"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <circle cx="12" cy="12" r="9" />
-                    <path d="M3 12h18" />
-                    <path d="M12 3a16 16 0 0 1 0 18" />
-                    <path d="M12 3a16 16 0 0 0 0 18" />
-                  </svg>
-                </span>
-                <span className="flex-1">
-                  <span className="block text-body-sm font-medium">{t('menu_language_label')}</span>
-                  <span className="block text-mini text-subtle dark:text-subtle-dark">
-                    {language === 'en' ? t('menu_language_action_en') : t('menu_language_action_zh')}
-                  </span>
-                </span>
-                <span className="text-micro uppercase tracking-[0.2em] text-muted-400 dark:text-muted-400">
-                  {language === 'en' ? t('menu_language_en') : t('menu_language_zh')}
-                </span>
-              </button>
-              <button
-                role="menuitem"
-                ref={(el) => {
-                  menuItemRefs.current[1] = el;
-                }}
-                onClick={() => {
-                  toggleTheme();
-                  setMenuOpen(false);
-                }}
-                className="menu-item"
-                tabIndex={activeIndex === 1 ? 0 : -1}
-                onMouseEnter={() => setActiveIndex(1)}
-                onFocus={() => setActiveIndex(1)}
-              >
-                <span className="h-9 w-9 rounded-full border border-line dark:border-line-dark bg-surface/80 dark:bg-surface-dark/60 grid place-items-center text-subtle dark:text-subtle-dark">
-                  {theme === 'light' ? (
-                    <MoonIcon className="w-4 h-4" />
-                  ) : (
-                    <SunIcon className="w-4 h-4" />
-                  )}
-                </span>
-                <span className="flex-1">
-                  <span className="block text-body-sm font-medium">{t('menu_theme_label')}</span>
-                  <span className="block text-mini text-subtle dark:text-subtle-dark">
-                    {theme === 'light' ? t('menu_theme_action_light') : t('menu_theme_action_dark')}
-                  </span>
-                </span>
-              </button>
-              {isHome && (
-                <button
-                  role="menuitem"
-                  ref={(el) => {
-                    menuItemRefs.current[2] = el;
-                  }}
-                  onClick={() => {
-                    setMenuOpen(false);
-                    onOpenDataMenu();
-                  }}
-                  className="menu-item"
-                  tabIndex={activeIndex === 2 ? 0 : -1}
-                  onMouseEnter={() => setActiveIndex(2)}
-                  onFocus={() => setActiveIndex(2)}
-                >
-                  <span className="h-9 w-9 rounded-full border border-line dark:border-line-dark bg-surface/80 dark:bg-surface-dark/60 grid place-items-center text-subtle dark:text-subtle-dark">
-                    <DatabaseIcon className="w-4 h-4" />
-                  </span>
-                  <span className="flex-1">
-                    <span className="block text-body-sm font-medium">{t('menu_data_label')}</span>
-                    <span className="block text-mini text-subtle dark:text-subtle-dark">
-                      {t('menu_data_action')}
-                    </span>
-                  </span>
-                </button>
-              )}
-              <button
-                role="menuitem"
-                ref={(el) => {
-                  menuItemRefs.current[aboutIndex] = el;
-                }}
-                onClick={() => {
-                  setMenuOpen(false);
-                  navigate('/about');
-                }}
-                className="menu-item"
-                tabIndex={activeIndex === aboutIndex ? 0 : -1}
-                onMouseEnter={() => setActiveIndex(aboutIndex)}
-                onFocus={() => setActiveIndex(aboutIndex)}
-              >
-                <span className="h-9 w-9 rounded-full border border-line dark:border-line-dark bg-surface/80 dark:bg-surface-dark/60 grid place-items-center text-subtle dark:text-subtle-dark">
-                  <InfoIcon className="w-4 h-4" />
-                </span>
-                <span className="flex-1">
-                  <span className="block text-body-sm font-medium">{t('menu_about_label')}</span>
-                  <span className="block text-mini text-subtle dark:text-subtle-dark">
-                    {t('menu_about_action')}
-                  </span>
-                </span>
-              </button>
-            </div>
-          )}
+          <LayoutMenu
+            isOpen={menuOpen}
+            isHome={isHome}
+            language={language}
+            theme={theme}
+            activeIndex={activeIndex}
+            setActiveIndex={setActiveIndex}
+            menuItemRefs={menuItemRefs}
+            onKeyDown={handleMenuKeyDown}
+            onToggleLanguage={handleToggleLanguage}
+            onToggleTheme={handleToggleTheme}
+            onOpenDataMenu={handleOpenDataMenu}
+            onNavigateAbout={handleNavigateAbout}
+            t={t}
+          />
         </div>
       </div>
     </header>
diff --git a/components/layout/LayoutMenu.tsx b/components/layout/LayoutMenu.tsx
new file mode 100644
index 0000000..783de64
--- /dev/null
+++ b/components/layout/LayoutMenu.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { DatabaseIcon, InfoIcon, MoonIcon, SunIcon } from '../Icons';
+import { Language, Theme } from '../../contexts/AppContext';
+
+interface LayoutMenuProps {
+  isOpen: boolean;
+  isHome: boolean;
+  language: Language;
+  theme: Theme;
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  menuItemRefs: React.MutableRefObject<Array<HTMLButtonElement | HTMLAnchorElement | null>>;
+  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  onToggleLanguage: () => void;
+  onToggleTheme: () => void;
+  onOpenDataMenu: () => void;
+  onNavigateAbout: () => void;
+  t: (key: string) => string;
+}
+
+interface LayoutMenuItemProps {
+  index: number;
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  menuItemRefs: React.MutableRefObject<Array<HTMLButtonElement | HTMLAnchorElement | null>>;
+  onClick: () => void;
+  icon: React.ReactNode;
+  title: string;
+  subtitle?: string;
+  rightLabel?: string;
+}
+
+const LayoutMenuItem: React.FC<LayoutMenuItemProps> = ({
+  index,
+  activeIndex,
+  setActiveIndex,
+  menuItemRefs,
+  onClick,
+  icon,
+  title,
+  subtitle,
+  rightLabel
+}) => {
+  return (
+    <button
+      role="menuitem"
+      ref={(el) => {
+        menuItemRefs.current[index] = el;
+      }}
+      onClick={onClick}
+      className="menu-item"
+      tabIndex={activeIndex === index ? 0 : -1}
+      onMouseEnter={() => setActiveIndex(index)}
+      onFocus={() => setActiveIndex(index)}
+    >
+      <span className="h-9 w-9 rounded-full border border-line dark:border-line-dark bg-surface/80 dark:bg-surface-dark/60 grid place-items-center text-subtle dark:text-subtle-dark">
+        {icon}
+      </span>
+      <span className="flex-1">
+        <span className="block text-body-sm font-medium">{title}</span>
+        {subtitle && (
+          <span className="block text-mini text-subtle dark:text-subtle-dark">
+            {subtitle}
+          </span>
+        )}
+      </span>
+      {rightLabel && (
+        <span className="text-micro uppercase tracking-[0.2em] text-muted-400 dark:text-muted-400">
+          {rightLabel}
+        </span>
+      )}
+    </button>
+  );
+};
+
+const LayoutMenu: React.FC<LayoutMenuProps> = ({
+  isOpen,
+  isHome,
+  language,
+  theme,
+  activeIndex,
+  setActiveIndex,
+  menuItemRefs,
+  onKeyDown,
+  onToggleLanguage,
+  onToggleTheme,
+  onOpenDataMenu,
+  onNavigateAbout,
+  t
+}) => {
+  if (!isOpen) return null;
+
+  const aboutIndex = isHome ? 3 : 2;
+
+  return (
+    <div
+      id="app-menu"
+      role="menu"
+      className="menu-popover animate-fade-in motion-reduce:animate-none"
+      onKeyDown={onKeyDown}
+    >
+      <span aria-hidden="true" className="menu-caret" />
+      <LayoutMenuItem
+        index={0}
+        activeIndex={activeIndex}
+        setActiveIndex={setActiveIndex}
+        menuItemRefs={menuItemRefs}
+        onClick={onToggleLanguage}
+        icon={(
+          <svg
+            className="w-4 h-4"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <circle cx="12" cy="12" r="9" />
+            <path d="M3 12h18" />
+            <path d="M12 3a16 16 0 0 1 0 18" />
+            <path d="M12 3a16 16 0 0 0 0 18" />
+          </svg>
+        )}
+        title={t('menu_language_label')}
+        subtitle={language === 'en' ? t('menu_language_action_en') : t('menu_language_action_zh')}
+        rightLabel={language === 'en' ? t('menu_language_en') : t('menu_language_zh')}
+      />
+      <LayoutMenuItem
+        index={1}
+        activeIndex={activeIndex}
+        setActiveIndex={setActiveIndex}
+        menuItemRefs={menuItemRefs}
+        onClick={onToggleTheme}
+        icon={theme === 'light' ? <MoonIcon className="w-4 h-4" /> : <SunIcon className="w-4 h-4" />}
+        title={t('menu_theme_label')}
+        subtitle={theme === 'light' ? t('menu_theme_action_light') : t('menu_theme_action_dark')}
+      />
+      {isHome && (
+        <LayoutMenuItem
+          index={2}
+          activeIndex={activeIndex}
+          setActiveIndex={setActiveIndex}
+          menuItemRefs={menuItemRefs}
+          onClick={onOpenDataMenu}
+          icon={<DatabaseIcon className="w-4 h-4" />}
+          title={t('menu_data_label')}
+          subtitle={t('menu_data_action')}
+        />
+      )}
+      <LayoutMenuItem
+        index={aboutIndex}
+        activeIndex={activeIndex}
+        setActiveIndex={setActiveIndex}
+        menuItemRefs={menuItemRefs}
+        onClick={onNavigateAbout}
+        icon={<InfoIcon className="w-4 h-4" />}
+        title={t('menu_about_label')}
+        subtitle={t('menu_about_action')}
+      />
+    </div>
+  );
+};
+
+export default LayoutMenu;
diff --git a/components/questionDetail/QuestionDetailDialogs.tsx b/components/questionDetail/QuestionDetailDialogs.tsx
new file mode 100644
index 0000000..2b194fa
--- /dev/null
+++ b/components/questionDetail/QuestionDetailDialogs.tsx
@@ -0,0 +1,128 @@
+import React from 'react';
+import ConfirmDialog from '../ConfirmDialog';
+import MoveToQuestionModal from '../MoveToQuestionModal';
+import QuestionDowngradeDialog from '../QuestionDowngradeDialog';
+
+interface RelinkTarget {
+  id: string;
+  title: string;
+}
+
+interface QuestionDetailDialogsProps {
+  t: (key: string) => string;
+  deleteTarget: string | null;
+  onConfirmDelete: () => void;
+  onCancelDelete: () => void;
+  isDowngradeOpen: boolean;
+  relatedCount: number;
+  selectedType: string;
+  typeOptions: Array<{ id: string; label: string }>;
+  destination: string;
+  relinkTargets: RelinkTarget[];
+  relinkQuestionId: string | null;
+  isDowngrading: boolean;
+  onSelectType: (type: string) => void;
+  onDestinationChange: (destination: string) => void;
+  onSelectRelinkQuestion: (id: string) => void;
+  onConfirmDowngrade: () => void;
+  onCancelDowngrade: () => void;
+  isMoveOpen: boolean;
+  isMoving: boolean;
+  questions: RelinkTarget[];
+  selectedQuestionId: string | null;
+  onSelectQuestion: (id: string) => void;
+  onConfirmMove: () => void;
+  onCancelMove: () => void;
+  isCopyOpen: boolean;
+  isCopying: boolean;
+  copyQuestions: RelinkTarget[];
+  selectedCopyQuestionId: string | null;
+  onSelectCopyQuestion: (id: string) => void;
+  onConfirmCopy: () => void;
+  onCancelCopy: () => void;
+}
+
+const QuestionDetailDialogs: React.FC<QuestionDetailDialogsProps> = ({
+  t,
+  deleteTarget,
+  onConfirmDelete,
+  onCancelDelete,
+  isDowngradeOpen,
+  relatedCount,
+  selectedType,
+  typeOptions,
+  destination,
+  relinkTargets,
+  relinkQuestionId,
+  isDowngrading,
+  onSelectType,
+  onDestinationChange,
+  onSelectRelinkQuestion,
+  onConfirmDowngrade,
+  onCancelDowngrade,
+  isMoveOpen,
+  isMoving,
+  questions,
+  selectedQuestionId,
+  onSelectQuestion,
+  onConfirmMove,
+  onCancelMove,
+  isCopyOpen,
+  isCopying,
+  copyQuestions,
+  selectedCopyQuestionId,
+  onSelectCopyQuestion,
+  onConfirmCopy,
+  onCancelCopy
+}) => {
+  return (
+    <>
+      <ConfirmDialog
+        isOpen={deleteTarget !== null}
+        message={t('confirm_delete_question_with_notes')}
+        onConfirm={onConfirmDelete}
+        onCancel={onCancelDelete}
+      />
+      <QuestionDowngradeDialog
+        isOpen={isDowngradeOpen}
+        relatedCount={relatedCount}
+        selectedType={selectedType}
+        typeOptions={typeOptions}
+        destination={destination}
+        relinkTargets={relinkTargets}
+        relinkQuestionId={relinkQuestionId}
+        isWorking={isDowngrading}
+        onSelectType={onSelectType}
+        onDestinationChange={onDestinationChange}
+        onSelectRelinkQuestion={onSelectRelinkQuestion}
+        onConfirm={onConfirmDowngrade}
+        onCancel={onCancelDowngrade}
+        t={t}
+      />
+      <MoveToQuestionModal
+        isOpen={isMoveOpen}
+        isWorking={isMoving}
+        questions={questions}
+        selectedQuestionId={selectedQuestionId}
+        onSelectQuestion={onSelectQuestion}
+        onConfirm={onConfirmMove}
+        onCancel={onCancelMove}
+        t={t}
+      />
+      <MoveToQuestionModal
+        isOpen={isCopyOpen}
+        isWorking={isCopying}
+        questions={copyQuestions}
+        selectedQuestionId={selectedCopyQuestionId}
+        onSelectQuestion={onSelectCopyQuestion}
+        onConfirm={onConfirmCopy}
+        onCancel={onCancelCopy}
+        titleKey="copy_to_question_title"
+        confirmKey="copy_to_question_confirm"
+        t={t}
+      />
+    </>
+  );
+};
+
+export default QuestionDetailDialogs;
diff --git a/components/questionDetail/QuestionDetailHeader.tsx b/components/questionDetail/QuestionDetailHeader.tsx
new file mode 100644
index 0000000..4df0c28
--- /dev/null
+++ b/components/questionDetail/QuestionDetailHeader.tsx
@@ -0,0 +1,155 @@
+import React from 'react';
+import { Note } from '../../types';
+import { ArrowDownIcon, CheckIcon, EyeIcon, EyeOffIcon, LoadingSpinner, XIcon } from '../Icons';
+import ActionIconButton from '../ActionIconButton';
+import Tooltip from '../Tooltip';
+
+interface QuestionDetailHeaderProps {
+  t: (key: string) => string;
+  question: Note;
+  visualizationOpen: boolean;
+  onToggleVisualization: () => void;
+  onOpenDowngrade: () => void;
+  isSavingEdit: boolean;
+  editingId: string | null;
+  isDowngrading: boolean;
+  editContent: string;
+  onEditContentChange: (value: string) => void;
+  onSaveEdit: () => void;
+  onCancelEdit: () => void;
+  onEditQuestion: () => void;
+  onCopyQuestion: () => void;
+  onDeleteQuestion: () => void;
+}
+
+const QuestionDetailHeader: React.FC<QuestionDetailHeaderProps> = ({
+  t,
+  question,
+  visualizationOpen,
+  onToggleVisualization,
+  onOpenDowngrade,
+  isSavingEdit,
+  editingId,
+  isDowngrading,
+  editContent,
+  onEditContentChange,
+  onSaveEdit,
+  onCancelEdit,
+  onEditQuestion,
+  onCopyQuestion,
+  onDeleteQuestion
+}) => {
+  const isEditingQuestion = editingId === question.id;
+
+  return (
+    <div className="mb-10 sm:mb-12 section-divider pb-8">
+      <div className="flex justify-between items-start">
+        <span className="text-xs font-bold text-accent dark:text-accent-dark tracking-widest uppercase mb-3 block">
+          {t('current_problem')}
+        </span>
+        <div className="flex items-center gap-2">
+          <Tooltip content={visualizationOpen ? t('hide_visualization') : t('visualize')}>
+            <button
+              onClick={onToggleVisualization}
+              className="h-10 w-10 sm:h-auto sm:w-auto sm:px-3 sm:py-2 muted-label border-0 sm:border sm:border-line dark:sm:border-line-dark hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark sm:hover:border-line-muted dark:sm:hover:border-muted-600 btn-icon cursor-pointer"
+              aria-label={visualizationOpen ? t('hide_visualization') : t('visualize')}
+            >
+              <span className="sm:hidden">
+                {visualizationOpen ? <EyeOffIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
+              </span>
+              <span className="hidden sm:inline">
+                {visualizationOpen ? t('hide_visualization') : t('visualize')}
+              </span>
+            </button>
+          </Tooltip>
+          <Tooltip content={t('downgrade_question_action')}>
+            <button
+              onClick={onOpenDowngrade}
+              disabled={isSavingEdit || isEditingQuestion || isDowngrading}
+              className={`h-10 w-10 sm:h-auto sm:w-auto sm:px-3 sm:py-2 muted-label border-0 sm:border sm:border-line dark:sm:border-line-dark hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark sm:hover:border-line-muted dark:sm:hover:border-muted-600 btn-icon ${
+                isSavingEdit || isEditingQuestion || isDowngrading ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'
+              }`}
+              aria-label={t('downgrade_question_action')}
+            >
+              <span className="sm:hidden">
+                <ArrowDownIcon className="w-4 h-4" />
+              </span>
+              <span className="hidden sm:inline">
+                {t('downgrade_question_action')}
+              </span>
+            </button>
+          </Tooltip>
+          {!isEditingQuestion && (
+            <>
+              <ActionIconButton
+                action="edit"
+                onClick={onEditQuestion}
+                disabled={isSavingEdit}
+              />
+              <ActionIconButton
+                action="copy"
+                onClick={onCopyQuestion}
+              />
+            </>
+          )}
+          <ActionIconButton
+            action="delete"
+            onClick={onDeleteQuestion}
+          />
+        </div>
+      </div>
+      {isEditingQuestion ? (
+        <div className="space-y-2">
+          <textarea
+            className="textarea-base"
+            value={editContent}
+            onChange={(event) => onEditContentChange(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Escape') {
+                event.preventDefault();
+                onCancelEdit();
+              }
+              if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+                event.preventDefault();
+                void onSaveEdit();
+              }
+            }}
+            rows={2}
+            autoFocus
+          />
+          <div className="flex gap-2">
+            <button
+              onClick={onSaveEdit}
+              disabled={isSavingEdit || !editContent.trim()}
+              className={`flex items-center gap-1 px-3 py-1.5 text-sm bg-accent dark:bg-accent-dark text-white rounded-md hover:opacity-90 transition-opacity ${
+                isSavingEdit || !editContent.trim() ? 'opacity-60 cursor-not-allowed' : ''
+              }`}
+            >
+              {isSavingEdit ? <LoadingSpinner className="w-3.5 h-3.5 text-white" /> : <CheckIcon className="w-3.5 h-3.5" />}
+              {isSavingEdit ? t('saving') : t('save')}
+            </button>
+            <button
+              onClick={onCancelEdit}
+              disabled={isSavingEdit}
+              className={`flex items-center gap-1 px-3 py-1.5 text-body-sm-muted hover:text-ink dark:hover:text-ink-dark transition-colors ${
+                isSavingEdit ? 'opacity-60 cursor-not-allowed' : ''
+              }`}
+            >
+              <XIcon className="w-3.5 h-3.5" />
+              {t('cancel')}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <h1 className="page-title-lg">
+          {question.content}
+        </h1>
+      )}
+      <div className="mt-4 text-caption">
+        {t('initiated_on')} {new Date(question.createdAt).toLocaleDateString()}
+      </div>
+    </div>
+  );
+};
+
+export default QuestionDetailHeader;
diff --git a/components/questionDetail/QuestionDetailNote.tsx b/components/questionDetail/QuestionDetailNote.tsx
index 47a3a41..c6fb4f0 100644
--- a/components/questionDetail/QuestionDetailNote.tsx
+++ b/components/questionDetail/QuestionDetailNote.tsx
@@ -28,6 +28,7 @@ export interface QuestionDetailNoteSharedProps {
   handleSaveEdit: () => Promise<void> | void;
   handleCancelEdit: () => void;
   handleDelete: (id: string, isQuestion: boolean) => void;
+  openCopyToQuestion: (noteId: string) => void;
   openMoveToQuestion: (noteId: string) => void;
   handleDragStart: (noteId: string, sectionKey: string) => void;
   handleDragEnter: (noteId: string, sectionKey: string) => void;
@@ -58,6 +59,7 @@ const QuestionDetailNote: React.FC<QuestionDetailNoteProps> = ({
   handleSaveEdit,
   handleCancelEdit,
   handleDelete,
+  openCopyToQuestion,
   openMoveToQuestion,
   handleDragStart,
   handleDragEnter,
@@ -77,6 +79,12 @@ const QuestionDetailNote: React.FC<QuestionDetailNoteProps> = ({
         action="copy"
         onClick={() => handleCopyNote(note.content)}
       />
+      {availableQuestions.length > 0 && (
+        <ActionIconButton
+          action="copy_to"
+          onClick={() => openCopyToQuestion(note.id)}
+        />
+      )}
       {availableQuestions.length > 0 && (
         <IconButton
           label={t('move_to_question')}
@@ -158,6 +166,15 @@ const QuestionDetailNote: React.FC<QuestionDetailNoteProps> = ({
                     handleCopyNote(note.content);
                   }}
                 />
+                {availableQuestions.length > 0 && (
+                  <ActionSheetButton
+                    action="copy_to"
+                    onClick={() => {
+                      setMobileNoteActionsId(null);
+                      openCopyToQuestion(note.id);
+                    }}
+                  />
+                )}
                 {availableQuestions.length > 0 && (
                   <ActionSheetButton
                     action="move"
diff --git a/components/questionDetail/QuestionDetailSections.tsx b/components/questionDetail/QuestionDetailSections.tsx
new file mode 100644
index 0000000..3b93f4a
--- /dev/null
+++ b/components/questionDetail/QuestionDetailSections.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Note } from '../../types';
+import QuestionDetailSection from './QuestionDetailSection';
+import type { QuestionDetailNoteSharedProps } from './QuestionDetailNote';
+
+interface QuestionDetailSectionsProps {
+  t: (key: string) => string;
+  relatedCount: number;
+  claims: Note[];
+  evidence: Note[];
+  triggers: Note[];
+  otherNotes: Note[];
+  collapsedSections: Record<string, boolean>;
+  toggleSection: (sectionKey: string) => void;
+  getOrderedNotes: (sectionKey: string, notes: Note[]) => Note[];
+  noteProps: QuestionDetailNoteSharedProps;
+}
+
+const QuestionDetailSections: React.FC<QuestionDetailSectionsProps> = ({
+  t,
+  relatedCount,
+  claims,
+  evidence,
+  triggers,
+  otherNotes,
+  collapsedSections,
+  toggleSection,
+  getOrderedNotes,
+  noteProps
+}) => {
+  if (relatedCount === 0) {
+    return (
+      <div className="text-center py-10 opacity-60 text-subtle dark:text-subtle-dark">
+        <p className="text-body-sm-muted">{t('no_thoughts_here')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <QuestionDetailSection
+        sectionKey="claims"
+        title={t('section_claims')}
+        emptyText={t('no_claims')}
+        notes={claims}
+        orderedNotes={getOrderedNotes('claims', claims)}
+        isCollapsed={collapsedSections.claims ?? false}
+        onToggle={() => toggleSection('claims')}
+        noteProps={noteProps}
+      />
+      <QuestionDetailSection
+        sectionKey="evidence"
+        title={t('section_evidence')}
+        emptyText={t('no_evidence')}
+        notes={evidence}
+        orderedNotes={getOrderedNotes('evidence', evidence)}
+        isCollapsed={collapsedSections.evidence ?? false}
+        onToggle={() => toggleSection('evidence')}
+        noteProps={noteProps}
+      />
+      <QuestionDetailSection
+        sectionKey="triggers"
+        title={t('section_triggers')}
+        emptyText={t('no_triggers')}
+        notes={triggers}
+        orderedNotes={getOrderedNotes('triggers', triggers)}
+        isCollapsed={collapsedSections.triggers ?? false}
+        onToggle={() => toggleSection('triggers')}
+        noteProps={noteProps}
+      />
+      <QuestionDetailSection
+        sectionKey="other"
+        title={t('section_other')}
+        emptyText={t('no_other')}
+        notes={otherNotes}
+        orderedNotes={getOrderedNotes('other', otherNotes)}
+        isCollapsed={collapsedSections.other ?? false}
+        onToggle={() => toggleSection('other')}
+        noteProps={noteProps}
+      />
+    </>
+  );
+};
+
+export default QuestionDetailSections;
diff --git a/components/questionGraph/QuestionGraphTooltip.tsx b/components/questionGraph/QuestionGraphTooltip.tsx
new file mode 100644
index 0000000..5607f2d
--- /dev/null
+++ b/components/questionGraph/QuestionGraphTooltip.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+
+interface QuestionGraphTooltipProps {
+  title: string;
+  content: string;
+  style: React.CSSProperties;
+}
+
+const QuestionGraphTooltip: React.FC<QuestionGraphTooltipProps> = ({
+  title,
+  content,
+  style
+}) => {
+  return (
+    <div
+      className="absolute z-10 max-w-xs rounded-lg border border-line dark:border-line-dark bg-surface dark:bg-surface-dark shadow-lg p-3 text-caption-ink"
+      style={style}
+    >
+      <div className="font-semibold mb-1">
+        {title}
+      </div>
+      <div className="text-subtle dark:text-subtle-dark leading-relaxed">
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export default QuestionGraphTooltip;
diff --git a/components/questionGraph/useQuestionGraphLayout.ts b/components/questionGraph/useQuestionGraphLayout.ts
new file mode 100644
index 0000000..fd78f00
--- /dev/null
+++ b/components/questionGraph/useQuestionGraphLayout.ts
@@ -0,0 +1,206 @@
+import { useMemo } from 'react';
+import { Note, NoteType } from '../../types';
+
+export interface GraphNode {
+  id: string;
+  note: Note;
+  x: number;
+  y: number;
+  radius: number;
+  color: string;
+  stroke: string;
+}
+
+interface GraphRingConfig {
+  id: NoteType;
+  label: string;
+  list: Note[];
+  radius: number;
+  color: string;
+  size: number;
+}
+
+export interface GraphLayout {
+  centerX: number;
+  centerY: number;
+  minDim: number;
+  baseRadius: number;
+  ringGap: number;
+  maxRadius: number;
+  nodes: GraphNode[];
+  rings: GraphRingConfig[];
+}
+
+export interface GraphPalette {
+  question: string;
+  claim: string;
+  evidence: string;
+  trigger: string;
+  other: string;
+  line: string;
+  lineSoft: string;
+  lineStrong: string;
+  inner: string;
+}
+
+export interface GraphLegendItem {
+  id: string;
+  label: string;
+  color: string;
+}
+
+interface GraphSize {
+  width: number;
+  height: number;
+}
+
+interface UseQuestionGraphLayoutArgs {
+  theme: 'light' | 'dark';
+  t: (key: string) => string;
+  question: Note;
+  notes: Note[];
+  size: GraphSize;
+}
+
+export const useQuestionGraphLayout = ({
+  theme,
+  t,
+  question,
+  notes,
+  size
+}: UseQuestionGraphLayoutArgs) => {
+  const idPrefix = useMemo(() => {
+    const sanitized = String(question.id ?? '').replace(/[^a-zA-Z0-9]/g, '');
+    return `qg-${sanitized.slice(0, 8) || 'graph'}`;
+  }, [question.id]);
+
+  const palette = useMemo<GraphPalette>(() => {
+    const pick = (light: string, dark: string) =>
+      theme === 'dark' ? `var(${dark})` : `var(${light})`;
+
+    return {
+      question: pick('--color-warning', '--color-warning-dark'),
+      claim: pick('--color-note-claim', '--color-note-claim-dark'),
+      evidence: pick('--color-note-evidence', '--color-note-evidence-dark'),
+      trigger: pick('--color-note-trigger', '--color-note-trigger-dark'),
+      other: pick('--color-muted-400', '--color-muted-500'),
+      line: pick('--color-line', '--color-line-dark'),
+      lineSoft: pick('--color-line-soft', '--color-line-dark'),
+      lineStrong: pick('--color-line-muted', '--color-line-strong-dark'),
+      inner: pick('--color-surface', '--color-surface-dark')
+    };
+  }, [theme]);
+
+  const layout = useMemo<GraphLayout | null>(() => {
+    if (!size.width || !size.height) return null;
+
+    const centerX = size.width / 2;
+    const centerY = size.height / 2;
+    const minDim = Math.min(size.width, size.height);
+    const baseRadius = Math.max(90, minDim * 0.22);
+    const ringGap = Math.max(55, minDim * 0.12);
+    const maxRadius = minDim / 2 - 28;
+
+    const claimNotes = notes.filter((note) => note.type === NoteType.CLAIM);
+    const evidenceNotes = notes.filter((note) => note.type === NoteType.EVIDENCE);
+    const triggerNotes = notes.filter((note) => note.type === NoteType.TRIGGER);
+    const otherNotes = notes.filter(
+      (note) =>
+        ![NoteType.CLAIM, NoteType.EVIDENCE, NoteType.TRIGGER].includes(note.type)
+    );
+
+    const ringConfigs: GraphRingConfig[] = [
+      {
+        id: NoteType.CLAIM,
+        label: t('type_claim'),
+        list: claimNotes,
+        radius: Math.min(baseRadius, maxRadius),
+        color: palette.claim,
+        size: 12
+      },
+      {
+        id: NoteType.EVIDENCE,
+        label: t('type_evidence'),
+        list: evidenceNotes,
+        radius: Math.min(baseRadius + ringGap, maxRadius),
+        color: palette.evidence,
+        size: 10
+      },
+      {
+        id: NoteType.TRIGGER,
+        label: t('type_trigger'),
+        list: triggerNotes,
+        radius: Math.min(baseRadius + ringGap * 2, maxRadius),
+        color: palette.trigger,
+        size: 9
+      },
+      {
+        id: NoteType.UNCATEGORIZED,
+        label: t('type_uncategorized'),
+        list: otherNotes,
+        radius: Math.min(baseRadius + ringGap * 3, maxRadius),
+        color: palette.other,
+        size: 8
+      }
+    ];
+
+    const ringNodes: GraphNode[] = [];
+    ringConfigs.forEach((ring, ringIndex) => {
+      const count = ring.list.length;
+      if (!count) return;
+      const angleStep = (Math.PI * 2) / count;
+      const startAngle = (Math.PI / 6) * ringIndex;
+      ring.list.forEach((note, index) => {
+        const angle = startAngle + angleStep * index;
+        ringNodes.push({
+          id: note.id,
+          note,
+          x: centerX + Math.cos(angle) * ring.radius,
+          y: centerY + Math.sin(angle) * ring.radius,
+          radius: ring.size,
+          color: ring.color,
+          stroke: palette.line
+        });
+      });
+    });
+
+    const questionNode: GraphNode = {
+      id: question.id,
+      note: question,
+      x: centerX,
+      y: centerY,
+      radius: 18,
+      color: palette.question,
+      stroke: palette.line
+    };
+
+    return {
+      centerX,
+      centerY,
+      minDim,
+      baseRadius,
+      ringGap,
+      maxRadius,
+      nodes: [questionNode, ...ringNodes],
+      rings: ringConfigs
+    };
+  }, [notes, palette, question, size.height, size.width, t]);
+
+  const legendItems = useMemo<GraphLegendItem[]>(() => {
+    if (!layout) return [];
+    return [
+      { id: 'question', label: t('type_question'), color: palette.question },
+      ...layout.rings
+        .filter((ring) => ring.list.length > 0)
+        .map((ring) => ({ id: ring.id, label: ring.label, color: ring.color }))
+    ];
+  }, [layout, palette.question, t]);
+
+  return {
+    idPrefix,
+    palette,
+    layout,
+    legendItems,
+    showLegend: notes.length > 0
+  };
+};
diff --git a/components/write/WriteEditor.tsx b/components/write/WriteEditor.tsx
new file mode 100644
index 0000000..4daa775
--- /dev/null
+++ b/components/write/WriteEditor.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+interface WriteEditorProps {
+  t: (key: string) => string;
+  content: string;
+  previewHtml: string;
+  showPreview: boolean;
+  isProcessing: boolean;
+  onContentChange: (value: string) => void;
+  textareaRef: React.RefObject<HTMLTextAreaElement>;
+}
+
+const WriteEditor: React.FC<WriteEditorProps> = ({
+  t,
+  content,
+  previewHtml,
+  showPreview,
+  isProcessing,
+  onContentChange,
+  textareaRef
+}) => {
+  return (
+    <div className="flex-1 flex flex-col pt-2">
+      {showPreview ? (
+        <div
+          className="w-full text-lg sm:text-xl leading-relaxed text-ink dark:text-ink-dark font-serif prose-preview"
+          dangerouslySetInnerHTML={{ __html: previewHtml }}
+        />
+      ) : (
+        <textarea
+          ref={textareaRef}
+          className="w-full bg-transparent text-lg sm:text-xl leading-relaxed text-ink dark:text-ink-dark resize-none focus:outline-none placeholder:text-muted-500 dark:placeholder:text-muted-500 font-serif"
+          placeholder={t('write_placeholder')}
+          value={content}
+          onChange={(e) => {
+            onContentChange(e.target.value);
+          }}
+          autoFocus
+          disabled={isProcessing}
+        />
+      )}
+    </div>
+  );
+};
+
+export default WriteEditor;
diff --git a/components/write/WriteFooter.tsx b/components/write/WriteFooter.tsx
new file mode 100644
index 0000000..34be3fe
--- /dev/null
+++ b/components/write/WriteFooter.tsx
@@ -0,0 +1,89 @@
+import React from 'react';
+import { EyeIcon, EyeOffIcon, LoadingSpinner } from '../Icons';
+import IconButton from '../IconButton';
+
+interface WriteFooterProps {
+  t: (key: string) => string;
+  charCount: number;
+  wordCount: number;
+  showCounter: boolean;
+  isProcessing: boolean;
+  showPreviewToggle: boolean;
+  showPreview: boolean;
+  onTogglePreview: () => void;
+  castSuccess: boolean;
+  canSave: boolean;
+  onSave: () => void;
+}
+
+const WriteFooter: React.FC<WriteFooterProps> = ({
+  t,
+  charCount,
+  wordCount,
+  showCounter,
+  isProcessing,
+  showPreviewToggle,
+  showPreview,
+  onTogglePreview,
+  castSuccess,
+  canSave,
+  onSave
+}) => {
+  return (
+    <>
+      <div className="flex items-center justify-between mt-2 min-h-6">
+        <span
+          className={`text-micro tabular-nums muted-label transition-opacity duration-300 ${
+            showCounter && !isProcessing ? 'opacity-100' : 'opacity-0'
+          }`}
+          aria-hidden={!showCounter}
+        >
+          {t('write_char_count').replace('{count}', String(charCount))}
+          {' / '}
+          {t('write_word_count').replace('{count}', String(wordCount))}
+        </span>
+
+        {showPreviewToggle && !isProcessing && (
+          <IconButton
+            label={showPreview ? t('write_edit') : t('write_preview')}
+            onClick={onTogglePreview}
+            sizeClassName="h-7 w-7"
+            className="text-muted-400 dark:text-muted-500 hover:text-accent dark:hover:text-accent-dark active:scale-95"
+          >
+            {showPreview ? <EyeOffIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
+          </IconButton>
+        )}
+      </div>
+
+      <div className="min-h-[4.5rem] flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-line-soft dark:border-line-dark mt-2 pt-4">
+        <div className="text-body-sm-muted flex items-center gap-2 w-full sm:w-auto">
+          {isProcessing && (
+            <>
+              <LoadingSpinner className="w-4 h-4 text-accent dark:text-accent-dark" />
+              <span className="animate-pulse">{t('absorbing')}</span>
+            </>
+          )}
+          {castSuccess && !isProcessing && (
+            <span className="text-accent dark:text-accent-dark font-medium animate-cast-success">
+              {t('cast_success')}
+            </span>
+          )}
+        </div>
+
+        <button
+          onClick={onSave}
+          disabled={!canSave}
+          className={`w-full sm:w-auto px-6 py-3 min-h-11 rounded-full font-medium transition-all ${
+            canSave
+              ? 'bg-action dark:bg-action text-white hover:bg-action-hover dark:hover:bg-action-hover-dark shadow-[var(--shadow-elev-2)] dark:shadow-[var(--shadow-elev-2-dark)]'
+              : 'bg-line dark:bg-surface-hover-dark text-muted-400 dark:text-muted-500 cursor-not-allowed'
+          }`}
+        >
+          {isProcessing ? t('saving') : t('cast')}
+        </button>
+      </div>
+    </>
+  );
+};
+
+export default WriteFooter;
diff --git a/contexts/AssistantInboxContext.tsx b/contexts/AssistantInboxContext.tsx
index b74c5c4..03452e7 100644
--- a/contexts/AssistantInboxContext.tsx
+++ b/contexts/AssistantInboxContext.tsx
@@ -1,10 +1,10 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { DarkMatterSuggestion, NoteType, ConfidenceLabel } from '../types';
+import { WanderingPlanetSuggestion, NoteType, ConfidenceLabel } from '../types';
 
 const STORAGE_KEY = 'cs_assistant_inbox_v1';
 const STALE_JOB_MS = 20 * 60 * 1000;
 
-export type AssistantJobKind = 'note_analysis' | 'dark_matter_analysis';
+export type AssistantJobKind = 'note_analysis' | 'wandering_planet_analysis';
 
 export type AssistantJob = {
   id: string;
@@ -35,7 +35,7 @@ export type NoteSuggestionPayload = {
   reasoning?: string;
 };
 
-export type DarkMatterReadyPayload = {
+export type WanderingPlanetReadyPayload = {
   suggestionCount: number;
 };
 
@@ -49,14 +49,14 @@ export type AssistantMessage =
     }
   | {
       id: string;
-      kind: 'dark_matter_ready';
+      kind: 'wandering_planet_ready';
       title: string;
       createdAt: number;
-      payload: DarkMatterReadyPayload;
+      payload: WanderingPlanetReadyPayload;
     };
 
-export type DarkMatterAnalysisSession = {
-  suggestions: DarkMatterSuggestion[];
+export type WanderingPlanetAnalysisSession = {
+  suggestions: WanderingPlanetSuggestion[];
   noteIds: string[];
   createdAt: number;
 };
@@ -64,20 +64,20 @@ export type DarkMatterAnalysisSession = {
 type AssistantInboxState = {
   jobs: AssistantJob[];
   messages: AssistantMessage[];
-  darkMatterAnalysis: DarkMatterAnalysisSession | null;
+  wanderingPlanetAnalysis: WanderingPlanetAnalysisSession | null;
 };
 
 type AssistantInboxContextProps = {
   jobs: AssistantJob[];
   messages: AssistantMessage[];
-  darkMatterAnalysis: DarkMatterAnalysisSession | null;
+  wanderingPlanetAnalysis: WanderingPlanetAnalysisSession | null;
   createJob: (kind: AssistantJobKind, meta?: AssistantJob['meta']) => string;
   removeJob: (id: string) => void;
   addMessage: (message: AssistantMessage) => void;
   dismissMessage: (id: string) => void;
   dismissMessagesByKind: (kind: AssistantMessage['kind']) => void;
-  setDarkMatterAnalysis: (analysis: DarkMatterAnalysisSession | null) => void;
-  updateDarkMatterSuggestions: (suggestions: DarkMatterSuggestion[]) => void;
+  setWanderingPlanetAnalysis: (analysis: WanderingPlanetAnalysisSession | null) => void;
+  updateWanderingPlanetSuggestions: (suggestions: WanderingPlanetSuggestion[]) => void;
   messageCount: number;
   hasMessages: boolean;
 };
@@ -93,27 +93,27 @@ const createInboxId = () => {
 
 const sanitizeState = (value: unknown): AssistantInboxState => {
   if (!value || typeof value !== 'object') {
-    return { jobs: [], messages: [], darkMatterAnalysis: null };
+    return { jobs: [], messages: [], wanderingPlanetAnalysis: null };
   }
   const raw = value as Partial<AssistantInboxState>;
   return {
     jobs: Array.isArray(raw.jobs) ? raw.jobs : [],
     messages: Array.isArray(raw.messages) ? raw.messages : [],
-    darkMatterAnalysis: raw.darkMatterAnalysis ?? null
+    wanderingPlanetAnalysis: raw.wanderingPlanetAnalysis ?? null
   };
 };
 
 const loadStoredState = (): AssistantInboxState => {
   if (typeof window === 'undefined') {
-    return { jobs: [], messages: [], darkMatterAnalysis: null };
+    return { jobs: [], messages: [], wanderingPlanetAnalysis: null };
   }
   try {
     const raw = sessionStorage.getItem(STORAGE_KEY);
-    if (!raw) return { jobs: [], messages: [], darkMatterAnalysis: null };
+    if (!raw) return { jobs: [], messages: [], wanderingPlanetAnalysis: null };
     const stored = sanitizeState(JSON.parse(raw));
     return { ...stored, jobs: [] };
   } catch {
-    return { jobs: [], messages: [], darkMatterAnalysis: null };
+    return { jobs: [], messages: [], wanderingPlanetAnalysis: null };
   }
 };
 
@@ -126,7 +126,7 @@ export const AssistantInboxProvider: React.FC<{ children: React.ReactNode }> = (
       const persistedState: AssistantInboxState = {
         jobs: [],
         messages: state.messages,
-        darkMatterAnalysis: state.darkMatterAnalysis
+        wanderingPlanetAnalysis: state.wanderingPlanetAnalysis
       };
       sessionStorage.setItem(STORAGE_KEY, JSON.stringify(persistedState));
     } catch {
@@ -175,17 +175,17 @@ export const AssistantInboxProvider: React.FC<{ children: React.ReactNode }> = (
     setState((prev) => ({ ...prev, messages: prev.messages.filter((message) => message.kind !== kind) }));
   }, []);
 
-  const setDarkMatterAnalysis = useCallback((analysis: DarkMatterAnalysisSession | null) => {
-    setState((prev) => ({ ...prev, darkMatterAnalysis: analysis }));
+  const setWanderingPlanetAnalysis = useCallback((analysis: WanderingPlanetAnalysisSession | null) => {
+    setState((prev) => ({ ...prev, wanderingPlanetAnalysis: analysis }));
   }, []);
 
-  const updateDarkMatterSuggestions = useCallback((suggestions: DarkMatterSuggestion[]) => {
+  const updateWanderingPlanetSuggestions = useCallback((suggestions: WanderingPlanetSuggestion[]) => {
     setState((prev) => {
-      if (!prev.darkMatterAnalysis) return prev;
+      if (!prev.wanderingPlanetAnalysis) return prev;
       return {
         ...prev,
-        darkMatterAnalysis: {
-          ...prev.darkMatterAnalysis,
+        wanderingPlanetAnalysis: {
+          ...prev.wanderingPlanetAnalysis,
           suggestions
         }
       };
@@ -199,28 +199,28 @@ export const AssistantInboxProvider: React.FC<{ children: React.ReactNode }> = (
     () => ({
       jobs: state.jobs,
       messages: state.messages,
-      darkMatterAnalysis: state.darkMatterAnalysis,
+      wanderingPlanetAnalysis: state.wanderingPlanetAnalysis,
       createJob,
       removeJob,
       addMessage,
       dismissMessage,
       dismissMessagesByKind,
-      setDarkMatterAnalysis,
-      updateDarkMatterSuggestions,
+      setWanderingPlanetAnalysis,
+      updateWanderingPlanetSuggestions,
       messageCount,
       hasMessages
     }),
     [
       state.jobs,
       state.messages,
-      state.darkMatterAnalysis,
+      state.wanderingPlanetAnalysis,
       createJob,
       removeJob,
       addMessage,
       dismissMessage,
       dismissMessagesByKind,
-      setDarkMatterAnalysis,
-      updateDarkMatterSuggestions,
+      setWanderingPlanetAnalysis,
+      updateWanderingPlanetSuggestions,
       messageCount,
       hasMessages
     ]
diff --git a/contexts/translations/en.ts b/contexts/translations/en.ts
index d7a4ea3..fa82392 100644
--- a/contexts/translations/en.ts
+++ b/contexts/translations/en.ts
@@ -4,8 +4,8 @@ export const translationsEn = {
     seo_desc_home: "Externalize ideas, then let AI organize them into questions, claims, and evidence. A cognitive workspace for deep thinking.",
     seo_title_write: "Write - Capture Ideas in Cognitive Space",
     seo_desc_write: "Capture thoughts fast, then let AI organize them into questions, claims, and evidence.",
-    seo_title_dark_matter: "Dark Matter - Cluster Unsorted Thoughts",
-    seo_desc_dark_matter: "Review drifting fragments and group them into new or existing questions.",
+    seo_title_wandering_planet: "Wandering Planet - Cluster Unsorted Thoughts",
+    seo_desc_wandering_planet: "Review drifting fragments and group them into new or existing questions.",
     seo_title_privacy: "Privacy Policy - Cognitive Space",
     seo_desc_privacy: "How Cognitive Space stores notes locally and handles AI analysis requests.",
     seo_title_question: "Question - Cognitive Space",
@@ -30,15 +30,15 @@ export const translationsEn = {
     analysis_notice_title: "Analysis complete",
     analysis_notice_question: "Promoted to a Question.",
     analysis_notice_linked: "Filed under \"{title}\".",
-    analysis_notice_moved: "Moved out of Dark Matter.",
+    analysis_notice_moved: "Moved out of Wandering Planet.",
     downgrade_question_action: "Release",
     downgrade_question_title: "Release this question?",
     downgrade_question_body: "It will become {type}.",
-    downgrade_question_related: "Releases {count} related notes back into Dark Matter.",
+    downgrade_question_related: "Releases {count} related notes back into Wandering Planet.",
     downgrade_question_related_none: "No related notes to release.",
     downgrade_question_label: "Downgrade to",
     downgrade_question_destination_label: "Related notes",
-    downgrade_question_destination_release: "Release to Dark Matter",
+    downgrade_question_destination_release: "Release to Wandering Planet",
     downgrade_question_destination_relink: "Relink to another question",
     downgrade_question_select_question: "Choose a question",
     downgrade_question_relink: "Links this note and {count} related notes to \"{title}\".",
@@ -49,18 +49,18 @@ export const translationsEn = {
     assistant_inbox_suggestions: "Suggestions",
     assistant_inbox_empty: "No messages right now.",
     assistant_job_note: "Analyzing a note",
-    assistant_job_dark_matter: "Analyzing dark matter ({count})",
+    assistant_job_wandering_planet: "Analyzing Wandering Planet ({count})",
     assistant_suggestion_note: "Note suggestion",
     assistant_suggestion_type: "Suggested type",
     assistant_suggestion_related: "Related question",
     assistant_suggestion_confidence: "Confidence",
     assistant_suggestion_apply: "Apply",
     assistant_suggestion_dismiss: "Dismiss",
-    assistant_suggestion_dark_matter: "Dark Matter analysis",
-    assistant_dark_matter_ready_title: "Dark Matter results ready",
-    assistant_dark_matter_ready_body: "{count} possible groupings found.",
-    assistant_dark_matter_ready_empty: "No strong groupings yet.",
-    assistant_suggestion_open_dark_matter: "Open Dark Matter",
+    assistant_suggestion_wandering_planet: "Wandering Planet analysis",
+    assistant_wandering_planet_ready_title: "Wandering Planet results ready",
+    assistant_wandering_planet_ready_body: "{count} possible groupings found.",
+    assistant_wandering_planet_ready_empty: "No strong groupings yet.",
+    assistant_suggestion_open_wandering_planet: "Open Wandering Planet",
     assistant_suggestion_reasoning_fallback: "Suggested classification: {type}.",
     actions: "Actions",
     actions_show: "Show actions",
@@ -68,7 +68,7 @@ export const translationsEn = {
     saving: "Saving",
     save: "Save",
     edit: "Edit",
-    copy_note: "Copy note",
+    copy_note: "Copy text",
     copy_note_success: "Copied to clipboard",
     cast: "Cast",
     related_hint: "May relate to",
@@ -227,7 +227,7 @@ export const translationsEn = {
     privacy_local_item_notes: "Notes, links, and related metadata are stored in your browser's IndexedDB.",
     privacy_local_item_prefs: "Language and theme preferences are stored in localStorage.",
     privacy_ai_title: "AI analysis",
-    privacy_ai_body: "If you use the AI analysis feature, the text you submit (including dark matter fragments when requesting grouping) and a list of existing question titles are sent to the /api/analyze or /api/dark-matter/analyze endpoints for classification. Those endpoints may be backed by a third-party model provider and may cache responses briefly for performance.",
+    privacy_ai_body: "If you use the AI analysis feature, the text you submit (including Wandering Planet fragments when requesting grouping) and a list of existing question titles are sent to the /api/analyze or /api/wandering-planet/analyze endpoints for classification. Those endpoints may be backed by a third-party model provider and may cache responses briefly for performance.",
     privacy_tracking_title: "No ads or analytics",
     privacy_tracking_body: "This app does not embed third-party advertising or analytics scripts. Your hosting provider may still record basic access logs.",
     privacy_choices_title: "Your choices",
@@ -274,13 +274,13 @@ export const translationsEn = {
     subtype_preference: "Preference",
     subtype_diagnosis: "Diagnosis",
     subtype_proposal: "Proposal",
-    // Dark Matter
-    dark_matter: "Dark Matter",
-    dark_matter_desc: "Fragments drifting in the void, not yet bound to any question.",
-    dark_matter_count: "fragments",
+    // Wandering Planet
+    wandering_planet: "Wandering Planet",
+    wandering_planet_desc: "Fragments drifting in the void, not yet bound to any question.",
+    wandering_planet_count: "fragments",
     link_to_question: "Link to question",
     promote_to_question: "Promote to question",
-    no_dark_matter: "No dark matter. All thoughts have found their orbit.",
+    no_wandering_planet: "No Wandering Planet. All thoughts have found their orbit.",
     back_home: "Back to Home",
     select_question: "Select a question",
     cancel: "Cancel",
@@ -290,25 +290,25 @@ export const translationsEn = {
     confirm_delete_note: "Delete this note?",
     confirm_delete_fragment: "Delete this fragment?",
     no_questions_available: "No questions available. Create one first.",
-    dark_matter_ai_title: "Possible constellations",
-    dark_matter_ai_desc: "Optional AI grouping for drifting fragments.",
-    dark_matter_ai_action: "Analyze Dark Matter",
-    dark_matter_ai_running: "Listening for patterns...",
-    dark_matter_ai_empty: "No strong groupings yet.",
-    dark_matter_ai_suggestions: "Suggestions",
-    dark_matter_ai_kind_new: "Proposed question",
-    dark_matter_ai_kind_existing: "Existing question",
-    dark_matter_ai_action_create: "Create question + link all",
-    dark_matter_ai_action_link: "Link all",
-    dark_matter_ai_action_dismiss: "Dismiss",
-    dark_matter_ai_confidence_likely: "Likely",
-    dark_matter_ai_confidence_possible: "Possible",
-    dark_matter_ai_confidence_loose: "Loose",
-    dark_matter_suggestion_reasoning_fallback: "Suggested grouping: \"{title}\".",
+    wandering_planet_ai_title: "Possible constellations",
+    wandering_planet_ai_desc: "Optional AI grouping for drifting fragments.",
+    wandering_planet_ai_action: "Analyze Wandering Planet",
+    wandering_planet_ai_running: "Listening for patterns...",
+    wandering_planet_ai_empty: "No strong groupings yet.",
+    wandering_planet_ai_suggestions: "Suggestions",
+    wandering_planet_ai_kind_new: "Proposed question",
+    wandering_planet_ai_kind_existing: "Existing question",
+    wandering_planet_ai_action_create: "Create question + link all",
+    wandering_planet_ai_action_link: "Link all",
+    wandering_planet_ai_action_dismiss: "Dismiss",
+    wandering_planet_ai_confidence_likely: "Likely",
+    wandering_planet_ai_confidence_possible: "Possible",
+    wandering_planet_ai_confidence_loose: "Loose",
+    wandering_planet_suggestion_reasoning_fallback: "Suggested grouping: \"{title}\".",
     load_more: "Load more",
     loading_more: "Loading more...",
-    dark_matter_confirm_create: "Create question \"{title}\" and link {count} fragments?",
-    dark_matter_confirm_link: "Link {count} fragments to \"{title}\"?",
+    wandering_planet_confirm_create: "Create question \"{title}\" and link {count} fragments?",
+    wandering_planet_confirm_link: "Link {count} fragments to \"{title}\"?",
     empty_state_onboarding: "No questions yet? Start writing — structure will come later.",
     empty_state_onboarding_dismiss: "Got it",
     keyboard_shortcut_write: "Press N to write",
@@ -326,17 +326,21 @@ export const translationsEn = {
     move_to_question: "Move to...",
     move_to_question_title: "Move note to another question",
     move_to_question_confirm: "Move",
+    copy_to_question: "Copy to...",
+    copy_to_question_title: "Copy note to another question",
+    copy_to_question_confirm: "Copy",
+    copy_to_question_success: "Copied to the question",
     note_moved_success: "Note moved",
-    dark_matter_select: "Select",
-    dark_matter_select_done: "Done",
-    dark_matter_selected_count: "{count} selected",
-    dark_matter_batch_link: "Link all to…",
-    dark_matter_batch_promote: "Promote to question",
-    dark_matter_select_all: "Select all",
-    dark_matter_deselect_all: "Deselect all",
-    dark_matter_sort_newest: "Newest first",
-    dark_matter_sort_oldest: "Oldest first",
-    dark_matter_batch_promote_confirm: "Promote {count} fragments to individual questions?",
+    wandering_planet_select: "Select",
+    wandering_planet_select_done: "Done",
+    wandering_planet_selected_count: "{count} selected",
+    wandering_planet_batch_link: "Link all to…",
+    wandering_planet_batch_promote: "Promote to question",
+    wandering_planet_select_all: "Select all",
+    wandering_planet_deselect_all: "Deselect all",
+    wandering_planet_sort_newest: "Newest first",
+    wandering_planet_sort_oldest: "Oldest first",
+    wandering_planet_batch_promote_confirm: "Promote {count} fragments to individual questions?",
     undo: "Undo",
     fragment_deleted: "Fragment deleted",
     note_deleted: "Note deleted"
diff --git a/contexts/translations/zh.ts b/contexts/translations/zh.ts
index 1c65fb9..c362d26 100644
--- a/contexts/translations/zh.ts
+++ b/contexts/translations/zh.ts
@@ -6,8 +6,8 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     seo_desc_home: "先外化想法，再让 AI 组织为问题、主张与证据。面向深度思考的认知工作台。",
     seo_title_write: "书写 - 在认知空间捕捉想法",
     seo_desc_write: "快速记录思绪，并交由 AI 组织为问题、主张与证据。",
-    seo_title_dark_matter: "暗物质 - 聚合未成型的想法",
-    seo_desc_dark_matter: "回看漂浮碎片，将它们归入新的或已有的问题。",
+    seo_title_wandering_planet: "流浪天体 - 聚合未成型的想法",
+    seo_desc_wandering_planet: "回看漂浮碎片，将它们归入新的或已有的问题。",
     seo_title_privacy: "隐私政策 - 认知空间",
     seo_desc_privacy: "了解认知空间如何本地存储笔记并处理 AI 分析请求。",
     seo_title_question: "问题 - 认知空间",
@@ -32,15 +32,15 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     analysis_notice_title: "分析完成",
     analysis_notice_question: "已升级为问题。",
     analysis_notice_linked: "已归入「{title}」。",
-    analysis_notice_moved: "已移出暗物质。",
+    analysis_notice_moved: "已移出流浪天体。",
     downgrade_question_action: "释放",
     downgrade_question_title: "释放这个问题？",
     downgrade_question_body: "它将变为{type}。",
-    downgrade_question_related: "将 {count} 条相关笔记放回暗物质。",
+    downgrade_question_related: "将 {count} 条相关笔记放回流浪天体。",
     downgrade_question_related_none: "没有关联笔记需要释放。",
     downgrade_question_label: "降为",
     downgrade_question_destination_label: "相关笔记",
-    downgrade_question_destination_release: "放回暗物质",
+    downgrade_question_destination_release: "放回流浪天体",
     downgrade_question_destination_relink: "改归到另一个问题",
     downgrade_question_select_question: "选择一个问题",
     downgrade_question_relink: "将此条与 {count} 条相关笔记归入「{title}」。",
@@ -51,18 +51,18 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     assistant_inbox_suggestions: "建议",
     assistant_inbox_empty: "暂无消息。",
     assistant_job_note: "正在分析一条笔记",
-    assistant_job_dark_matter: "正在分析暗物质（{count} 条）",
+    assistant_job_wandering_planet: "正在分析流浪天体（{count} 条）",
     assistant_suggestion_note: "笔记建议",
     assistant_suggestion_type: "建议类型",
     assistant_suggestion_related: "相关问题",
     assistant_suggestion_confidence: "置信度",
     assistant_suggestion_apply: "应用",
     assistant_suggestion_dismiss: "忽略",
-    assistant_suggestion_dark_matter: "暗物质分析",
-    assistant_dark_matter_ready_title: "暗物质结果已就绪",
-    assistant_dark_matter_ready_body: "发现 {count} 组可能关联。",
-    assistant_dark_matter_ready_empty: "暂未发现清晰的归类。",
-    assistant_suggestion_open_dark_matter: "打开暗物质",
+    assistant_suggestion_wandering_planet: "流浪天体分析",
+    assistant_wandering_planet_ready_title: "流浪天体结果已就绪",
+    assistant_wandering_planet_ready_body: "发现 {count} 组可能关联。",
+    assistant_wandering_planet_ready_empty: "暂未发现清晰的归类。",
+    assistant_suggestion_open_wandering_planet: "打开流浪天体",
     assistant_suggestion_reasoning_fallback: "建议归为「{type}」。",
     actions: "操作",
     actions_show: "显示操作",
@@ -70,7 +70,7 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     saving: "正在保存",
     save: "保存",
     edit: "编辑",
-    copy_note: "复制笔记",
+    copy_note: "复制文本",
     copy_note_success: "已复制到剪贴板",
     cast: "投掷",
     related_hint: "可能与此相关",
@@ -229,7 +229,7 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     privacy_local_item_notes: "笔记、链接与相关元数据保存在浏览器的 IndexedDB 中。",
     privacy_local_item_prefs: "语言与主题偏好保存在 localStorage 中。",
     privacy_ai_title: "AI 分析",
-    privacy_ai_body: "当你使用 AI 分析功能时，你提交的文本（包括请求暗物质归类时的碎片）与已有问题标题列表会发送至 /api/analyze 或 /api/dark-matter/analyze 进行分类处理。该端点可能由第三方模型服务提供，并会为性能进行短暂缓存。",
+    privacy_ai_body: "当你使用 AI 分析功能时，你提交的文本（包括请求流浪天体归类时的碎片）与已有问题标题列表会发送至 /api/analyze 或 /api/wandering-planet/analyze 进行分类处理。该端点可能由第三方模型服务提供，并会为性能进行短暂缓存。",
     privacy_tracking_title: "无广告或分析",
     privacy_tracking_body: "本应用不内嵌第三方广告或分析脚本。你的托管平台仍可能记录基础访问日志。",
     privacy_choices_title: "你的选择",
@@ -276,13 +276,13 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     subtype_preference: "偏好",
     subtype_diagnosis: "判断",
     subtype_proposal: "主张",
-    // Dark Matter
-    dark_matter: "暗物质",
-    dark_matter_desc: "游离在虚空中的碎片，尚未被任何问题捕获。",
-    dark_matter_count: "个碎片",
+    // Wandering Planet
+    wandering_planet: "流浪天体",
+    wandering_planet_desc: "游离在虚空中的碎片，尚未被任何问题捕获。",
+    wandering_planet_count: "个碎片",
     link_to_question: "关联到问题",
     promote_to_question: "升级为问题",
-    no_dark_matter: "没有暗物质。所有思绪都已找到归宿。",
+    no_wandering_planet: "没有流浪天体。所有思绪都已找到归宿。",
     back_home: "回到首页",
     select_question: "选择一个问题",
     cancel: "取消",
@@ -292,25 +292,25 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     confirm_delete_note: "删除这条笔记？",
     confirm_delete_fragment: "删除这条碎片？",
     no_questions_available: "暂无可选问题，请先创建一个。",
-    dark_matter_ai_title: "可能的星群",
-    dark_matter_ai_desc: "可选的 AI 归类建议。",
-    dark_matter_ai_action: "分析暗物质",
-    dark_matter_ai_running: "正在捕捉关联...",
-    dark_matter_ai_empty: "暂未发现清晰的归类。",
-    dark_matter_ai_suggestions: "建议",
-    dark_matter_ai_kind_new: "新问题建议",
-    dark_matter_ai_kind_existing: "关联到已有问题",
-    dark_matter_ai_action_create: "创建问题并关联",
-    dark_matter_ai_action_link: "全部关联",
-    dark_matter_ai_action_dismiss: "忽略",
-    dark_matter_ai_confidence_likely: "较可能",
-    dark_matter_ai_confidence_possible: "可能",
-    dark_matter_ai_confidence_loose: "松散",
-    dark_matter_suggestion_reasoning_fallback: "建议归为「{title}」。",
+    wandering_planet_ai_title: "可能的星群",
+    wandering_planet_ai_desc: "可选的 AI 归类建议。",
+    wandering_planet_ai_action: "分析流浪天体",
+    wandering_planet_ai_running: "正在捕捉关联...",
+    wandering_planet_ai_empty: "暂未发现清晰的归类。",
+    wandering_planet_ai_suggestions: "建议",
+    wandering_planet_ai_kind_new: "新问题建议",
+    wandering_planet_ai_kind_existing: "关联到已有问题",
+    wandering_planet_ai_action_create: "创建问题并关联",
+    wandering_planet_ai_action_link: "全部关联",
+    wandering_planet_ai_action_dismiss: "忽略",
+    wandering_planet_ai_confidence_likely: "较可能",
+    wandering_planet_ai_confidence_possible: "可能",
+    wandering_planet_ai_confidence_loose: "松散",
+    wandering_planet_suggestion_reasoning_fallback: "建议归为「{title}」。",
     load_more: "加载更多",
     loading_more: "正在加载...",
-    dark_matter_confirm_create: "创建问题「{title}」并关联 {count} 条碎片？",
-    dark_matter_confirm_link: "将 {count} 条碎片关联到「{title}」？",
+    wandering_planet_confirm_create: "创建问题「{title}」并关联 {count} 条碎片？",
+    wandering_planet_confirm_link: "将 {count} 条碎片关联到「{title}」？",
     empty_state_onboarding: "还没有问题？先写下来——结构会自然浮现。",
     empty_state_onboarding_dismiss: "知道了",
     keyboard_shortcut_write: "按 N 开始书写",
@@ -328,17 +328,21 @@ export const translationsZh: Record<keyof typeof translationsEn, string> = {
     move_to_question: "移动到...",
     move_to_question_title: "将笔记移至其他问题",
     move_to_question_confirm: "移动",
+    copy_to_question: "复制到...",
+    copy_to_question_title: "将笔记复制到其他问题",
+    copy_to_question_confirm: "复制",
+    copy_to_question_success: "已复制到该问题",
     note_moved_success: "笔记已移动",
-    dark_matter_select: "选择",
-    dark_matter_select_done: "完成",
-    dark_matter_selected_count: "已选 {count} 条",
-    dark_matter_batch_link: "全部关联到…",
-    dark_matter_batch_promote: "升级为问题",
-    dark_matter_select_all: "全选",
-    dark_matter_deselect_all: "取消全选",
-    dark_matter_sort_newest: "最新优先",
-    dark_matter_sort_oldest: "最早优先",
-    dark_matter_batch_promote_confirm: "将 {count} 条碎片分别升级为独立问题？",
+    wandering_planet_select: "选择",
+    wandering_planet_select_done: "完成",
+    wandering_planet_selected_count: "已选 {count} 条",
+    wandering_planet_batch_link: "全部关联到…",
+    wandering_planet_batch_promote: "升级为问题",
+    wandering_planet_select_all: "全选",
+    wandering_planet_deselect_all: "取消全选",
+    wandering_planet_sort_newest: "最新优先",
+    wandering_planet_sort_oldest: "最早优先",
+    wandering_planet_batch_promote_confirm: "将 {count} 条碎片分别升级为独立问题？",
     undo: "撤销",
     fragment_deleted: "碎片已删除",
     note_deleted: "笔记已删除"
diff --git a/docs/ui_ux_suggestions.md b/docs/ui_ux_suggestions.md
index 166e22d..8a82b91 100644
--- a/docs/ui_ux_suggestions.md
+++ b/docs/ui_ux_suggestions.md
@@ -45,11 +45,11 @@ e.g. "Claims (3)" so users can scan density at a glance without counting.
 Notes are currently ordered by creation time. Letting users drag to reorder (or at least pin a key note) supports deliberate review — what the product doc calls "the cross-section of a thinking scene."
 
 ### 11. Quick-link a note to another question
-If a note under Question A feels more relevant to Question B, a "Move to..." action (already exposed in Dark Matter) would reduce friction.
+If a note under Question A feels more relevant to Question B, a "Move to..." action (already exposed in Wandering Planet) would reduce friction.
 
 ---
 
-## Dark Matter (`/dark-matter`)
+## Wandering Planet (`/wandering-planet`)
 
 ### 12. Multi-select for batch actions
 When many fragments accumulate, linking them one-by-one is tedious. A checkbox mode (`Select` pill button) + batch "Link all to..." or "Promote to question" would drastically speed up triage.
diff --git a/docs/visualization_proposal.md b/docs/visualization_proposal.md
index 29bfe8b..7c66dc8 100644
--- a/docs/visualization_proposal.md
+++ b/docs/visualization_proposal.md
@@ -1,4 +1,4 @@
-# Cognitive Space: Question Visualization & Dark Matter Proposal
+# Cognitive Space: Question Visualization & Wandering Planet Proposal
 
 > 让思考的结构可见，让孤岛浮出水面。
 
@@ -9,7 +9,7 @@
 本提案为 Cognitive Space 引入两个相关功能：
 
 1. **问题内可视化**（Question Constellation）—— 在问题详情页中可选开启，呈现该问题与其相关笔记的关系网络
-2. **暗物质视图**（Dark Matter View）—— 专门展示尚未与任何问题建立联系的孤立笔记
+2. **流浪天体视图**（Wandering Planet View）—— 专门展示尚未与任何问题建立联系的孤立笔记
 
 这两个功能延续产品"延迟显现结构"的核心理念，不强迫用户整理，而是帮助用户**发现**已经存在的结构与遗漏。
 
@@ -27,7 +27,7 @@
 | **判断（Claim）** | 行星 —— 围绕问题形成轨道 |
 | **证据（Evidence）** | 卫星 —— 支撑或挑战判断的附属物 |
 | **触发物（Trigger）** | 彗星 —— 偶尔掠过，可能被捕获 |
-| **暗物质（Dark Matter）** | 孤立的星体 —— 尚未被任何引力场捕获的思绪 |
+| **流浪天体（Wandering Planet）** | 孤立的星体 —— 尚未被任何引力场捕获的思绪 |
 
 这个隐喻服务于产品哲学：**问题是引力中心，思绪围绕问题自然聚合**。
 
@@ -85,26 +85,26 @@
 
 ---
 
-### 3.2 暗物质视图（Dark Matter View）
+### 3.2 流浪天体视图（Wandering Planet View）
 
 #### 定义
-**暗物质**指满足以下条件的笔记：
+**流浪天体**指满足以下条件的笔记：
 - `parentId` 为 `null` 或 `undefined`
 - 类型不是 `QUESTION`
 
 这些是用户写下但尚未与任何问题建立联系的思绪碎片。
-暗物质视图是**全局列表**，不依附于任何单一问题。
+流浪天体视图是**全局列表**，不依附于任何单一问题。
 
 #### 入口
-- 主页增加「暗物质」入口（可选）
-- 路由：`/dark-matter`
+- 主页增加「流浪天体」入口（可选）
+- 路由：`/wandering-planet`
 
 #### 视图设计
 
 ##### 列表模式（默认）
 ```
 ┌─────────────────────────────────────────────────┐
-│  🌑 暗物质 · 12 fragments                        │
+│  🌑 流浪天体 · 12 fragments                        │
 │  思绪碎片，尚未与任何问题产生联系                   │
 ├─────────────────────────────────────────────────┤
 │                                                 │
@@ -130,7 +130,7 @@
 ```
 
 ##### 散点模式（可选）
-将暗物质以散点形式展示，按时间或语义聚类：
+将流浪天体以散点形式展示，按时间或语义聚类：
 - X轴：创建时间
 - Y轴：随机分布（或按类型）
 - 悬停查看内容
@@ -140,14 +140,14 @@
 1. **关联到问题**
    - 点击后显示现有问题列表
    - 选择后将 `parentId` 设为该问题的 ID
-   - 笔记从暗物质中"消失"，进入问题引力场
+   - 笔记从流浪天体中"消失"，进入问题引力场
 
 2. **升级为问题**
    - 将当前笔记转换为问题（修改 `type` 为 `QUESTION`，清除 `parentId`）
    - 在主页出现为新的"鲜活问题"
 
 3. **批量操作**
-   - 多选暗物质
+   - 多选流浪天体
    - 批量关联到同一问题
    - 批量删除
 
@@ -156,17 +156,17 @@
    - 按时间排序（最新 / 最旧）
    - 按内容长度排序
 
-#### 暗物质健康指标
+#### 流浪天体健康指标
 
 在视图顶部显示：
 
 | 指标 | 健康状态 |
 |------|----------|
-| 暗物质占比 < 20% | 🟢 健康 —— 思绪都在围绕问题 |
-| 暗物质占比 20-50% | 🟡 正常 —— 有些碎片等待整合 |
-| 暗物质占比 > 50% | 🟠 关注 —— 大量思绪游离在外 |
+| 流浪天体占比 < 20% | 🟢 健康 —— 思绪都在围绕问题 |
+| 流浪天体占比 20-50% | 🟡 正常 —— 有些碎片等待整合 |
+| 流浪天体占比 > 50% | 🟠 关注 —— 大量思绪游离在外 |
 
-> **设计说明**：这不是要制造焦虑，而是提供一个温和的提醒。产品哲学允许暗物质长期存在。
+> **设计说明**：这不是要制造焦虑，而是提供一个温和的提醒。产品哲学允许流浪天体长期存在。
 
 ---
 
@@ -177,8 +177,8 @@
 ```typescript
 // storageService.ts 新增
 
-// 获取暗物质（孤立笔记）
-export const getDarkMatter = async (): Promise<Note[]> => {
+// 获取流浪天体（孤立笔记）
+export const getWanderingPlanet = async (): Promise<Note[]> => {
   const allNotes = await getNotes();
   return allNotes.filter(note => 
     note.type !== NoteType.QUESTION && 
@@ -234,11 +234,11 @@ export const getQuestionConstellationStats = async (
 ```
 views/
 ├── QuestionDetail.tsx    # 问题详情（内嵌可视化入口）
-├── DarkMatter.tsx        # 暗物质视图
+├── WanderingPlanet.tsx        # 流浪天体视图
 components/
 ├── QuestionGraph.tsx         # 问题可视化组件
 ├── QuestionStatsPanel.tsx    # 问题统计面板
-├── DarkMatterList.tsx        # 暗物质列表组件
+├── WanderingPlanetList.tsx        # 流浪天体列表组件
 ├── NotePreview.tsx           # 笔记预览卡片
 ```
 
@@ -250,7 +250,7 @@ components/
   <Route path="/" element={<Home />} />
   <Route path="/write" element={<Write />} />
   <Route path="/question/:id" element={<QuestionDetail />} />
-  <Route path="/dark-matter" element={<DarkMatter />} />
+  <Route path="/wandering-planet" element={<WanderingPlanet />} />
 </Routes>
 ```
 
@@ -266,14 +266,14 @@ components/
 | Claim | `#2563eb` (blue) | `#60a5fa` |
 | Evidence | `#059669` (emerald) | `#34d399` |
 | Trigger | `#7c3aed` (violet) | `#a78bfa` |
-| Dark Matter | `#9ca3af` (gray) | `#6b7280` |
+| Wandering Planet | `#9ca3af` (gray) | `#6b7280` |
 | 连接线 | `#e5e7eb` | `#374151` |
 
 ### 5.2 动画与过渡
 
 - 进入星图时：节点从中心扩散
 - 点击节点时：其他节点淡出，焦点节点居中
-- 暗物质被关联时：节点移动到目标问题附近后消失
+- 流浪天体被关联时：节点移动到目标问题附近后消失
 - 切换视图：平滑过渡（300ms）
 
 ### 5.3 响应式设计
@@ -295,37 +295,37 @@ components/
 visualize: "Visualize",
 hide_visualization: "Hide visualization",
 question_constellation: "Question Constellation",
-dark_matter: "Dark Matter",
-dark_matter_desc: "Fragments not yet connected to any question.",
-dark_matter_count: "{count} fragments",
+wandering_planet: "Wandering Planet",
+wandering_planet_desc: "Fragments not yet connected to any question.",
+wandering_planet_count: "{count} fragments",
 link_to_question: "Link to question",
 promote_to_question: "Promote to question",
-dark_matter_healthy: "Your thoughts are well-connected.",
-dark_matter_moderate: "Some fragments await integration.",
-dark_matter_attention: "Many thoughts are floating freely.",
+wandering_planet_healthy: "Your thoughts are well-connected.",
+wandering_planet_moderate: "Some fragments await integration.",
+wandering_planet_attention: "Many thoughts are floating freely.",
 stats_related_notes: "Related notes",
 stats_type_distribution: "Type distribution",
 stats_last_updated: "Last updated",
 stats_relation_density: "Relation density",
-no_dark_matter: "No dark matter. All thoughts are connected.",
+no_wandering_planet: "No Wandering Planet. All thoughts are connected.",
 
 // Chinese
 visualize: "可视化",
 hide_visualization: "收起可视化",
 question_constellation: "问题星图",
-dark_matter: "暗物质",
-dark_matter_desc: "尚未与任何问题产生联系的思绪碎片。",
-dark_matter_count: "{count} 个碎片",
+wandering_planet: "流浪天体",
+wandering_planet_desc: "尚未与任何问题产生联系的思绪碎片。",
+wandering_planet_count: "{count} 个碎片",
 link_to_question: "关联到问题",
 promote_to_question: "升级为问题",
-dark_matter_healthy: "你的思绪已经很好地聚合了。",
-dark_matter_moderate: "有些碎片等待整合。",
-dark_matter_attention: "许多思绪正在自由漂浮。",
+wandering_planet_healthy: "你的思绪已经很好地聚合了。",
+wandering_planet_moderate: "有些碎片等待整合。",
+wandering_planet_attention: "许多思绪正在自由漂浮。",
 stats_related_notes: "关联笔记数",
 stats_type_distribution: "类型分布",
 stats_last_updated: "最近更新",
 stats_relation_density: "关联密度",
-no_dark_matter: "没有暗物质。所有思绪都已连接。",
+no_wandering_planet: "没有流浪天体。所有思绪都已连接。",
 ```
 
 ---
@@ -341,9 +341,9 @@ no_dark_matter: "没有暗物质。所有思绪都已连接。",
 
 **预计工时**：2-3 天
 
-### Phase 2：暗物质视图
-1. ✅ 实现 `getDarkMatter()` 查询
-2. ✅ 创建 `/dark-matter` 路由和视图
+### Phase 2：流浪天体视图
+1. ✅ 实现 `getWanderingPlanet()` 查询
+2. ✅ 创建 `/wandering-planet` 路由和视图
 3. ✅ 列表展示孤立笔记
 4. ✅ "关联到问题"功能
 5. ✅ 主页增加入口
@@ -354,7 +354,7 @@ no_dark_matter: "没有暗物质。所有思绪都已连接。",
 1. 动画效果
 2. 更丰富的节点样式
 3. 可选的关系过滤（按类型）
-4. 暗物质批量操作
+4. 流浪天体批量操作
 
 **预计工时**：3-4 天
 
@@ -375,17 +375,17 @@ no_dark_matter: "没有暗物质。所有思绪都已连接。",
 | 大量笔记时性能问题 | 星图卡顿 | 分页加载、WebGL渲染、虚拟化 |
 | 移动端体验差 | 用户流失 | 提供简化的列表视图替代 |
 | 可视化过于复杂 | 违背产品理念 | 保持简约，只展示必要信息 |
-| 暗物质过多让用户焦虑 | 负面情绪 | 强调"允许存在"的产品哲学 |
+| 流浪天体过多让用户焦虑 | 负面情绪 | 强调"允许存在"的产品哲学 |
 
 ---
 
 ## 九、未来扩展可能
 
-1. **语义聚类**：AI 分析暗物质，建议潜在的问题归属
+1. **语义聚类**：AI 分析流浪天体，建议潜在的问题归属
 2. **时间线视图**：按时间维度观察思考演化
 3. **问题合并建议**：识别语义相近的问题
 4. **导出功能**：将星图导出为图片
-5. **思考回顾**：定期回顾暗物质，轻推整理
+5. **思考回顾**：定期回顾流浪天体，轻推整理
 
 ---
 
@@ -394,11 +394,11 @@ no_dark_matter: "没有暗物质。所有思绪都已连接。",
 这个提案为 Cognitive Space 增加了两个互补的功能：
 
 - **问题星图（Question Constellation）**让用户在单个问题内观察认知结构
-- **暗物质（Dark Matter）**帮助用户发现被遗忘的思绪碎片
+- **流浪天体（Wandering Planet）**帮助用户发现被遗忘的思绪碎片
 
 两者都遵循产品的核心理念：**不强迫整理，只帮助发现**。
 
-> "暗物质不是问题，它是思考的自然状态。
+> "流浪天体不是问题，它是思考的自然状态。
 > 可视化不是为了修复什么，而是为了看见。"
 
 ---
diff --git a/hooks/questionDetail/useQuestionDetailCopyTo.ts b/hooks/questionDetail/useQuestionDetailCopyTo.ts
new file mode 100644
index 0000000..78253f7
--- /dev/null
+++ b/hooks/questionDetail/useQuestionDetailCopyTo.ts
@@ -0,0 +1,75 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useCallback, useState } from 'react';
+import { saveNote } from '../../services/storageService';
+import { Note } from '../../types';
+import { useAppContext } from '../../contexts/AppContext';
+import { useNotifications } from '../../contexts/NotificationContext';
+
+interface QuestionDetailCopyToOptions {
+  availableQuestions: Note[];
+  relatedNotes: Note[];
+  loadData: () => Promise<void>;
+  setMobileNoteActionsId: Dispatch<SetStateAction<string | null>>;
+}
+
+export const useQuestionDetailCopyTo = ({
+  availableQuestions,
+  relatedNotes,
+  loadData,
+  setMobileNoteActionsId
+}: QuestionDetailCopyToOptions) => {
+  const { t } = useAppContext();
+  const { notify } = useNotifications();
+  const [copyNoteId, setCopyNoteId] = useState<string | null>(null);
+  const [copyTargetQuestionId, setCopyTargetQuestionId] = useState<string | null>(null);
+  const [isCopying, setIsCopying] = useState(false);
+
+  const openCopyToQuestion = useCallback((noteId: string) => {
+    setMobileNoteActionsId(null);
+    setCopyNoteId(noteId);
+    setCopyTargetQuestionId(availableQuestions.length > 0 ? availableQuestions[0].id : null);
+  }, [availableQuestions, setMobileNoteActionsId]);
+
+  const handleConfirmCopy = useCallback(async () => {
+    if (!copyNoteId || !copyTargetQuestionId || isCopying) return;
+    const sourceNote = relatedNotes.find((note) => note.id === copyNoteId);
+    if (!sourceNote) {
+      setCopyNoteId(null);
+      setCopyTargetQuestionId(null);
+      return;
+    }
+    setIsCopying(true);
+    try {
+      const now = Date.now();
+      const duplicatedNote: Note = {
+        ...sourceNote,
+        id: crypto.randomUUID(),
+        parentId: copyTargetQuestionId,
+        createdAt: now,
+        updatedAt: now,
+        analysisPending: false
+      };
+      await saveNote(duplicatedNote);
+      notify({
+        message: t('copy_to_question_success'),
+        variant: 'success',
+        duration: 2000
+      });
+      setCopyNoteId(null);
+      setCopyTargetQuestionId(null);
+      await loadData();
+    } finally {
+      setIsCopying(false);
+    }
+  }, [copyNoteId, copyTargetQuestionId, isCopying, loadData, notify, relatedNotes, t]);
+
+  return {
+    copyNoteId,
+    copyTargetQuestionId,
+    isCopying,
+    setCopyNoteId,
+    setCopyTargetQuestionId,
+    openCopyToQuestion,
+    handleConfirmCopy
+  };
+};
diff --git a/hooks/questionDetail/useQuestionDetailDowngrade.ts b/hooks/questionDetail/useQuestionDetailDowngrade.ts
index 96b9b21..e620ce8 100644
--- a/hooks/questionDetail/useQuestionDetailDowngrade.ts
+++ b/hooks/questionDetail/useQuestionDetailDowngrade.ts
@@ -47,7 +47,7 @@ export const useQuestionDetailDowngrade = ({
       if (shouldRelink) {
         navigate(`/question/${relinkQuestionId}`);
       } else {
-        navigate('/dark-matter');
+        navigate('/wandering-planet');
       }
     } finally {
       setIsDowngrading(false);
diff --git a/hooks/useHomeModel.ts b/hooks/useHomeModel.ts
index 54c84b5..f68ed10 100644
--- a/hooks/useHomeModel.ts
+++ b/hooks/useHomeModel.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'reac
 import { useNavigate } from 'react-router-dom';
 import {
   deleteNote,
-  getDarkMatterCount,
+  getWanderingPlanetCount,
   getNotes,
   getQuestions,
   updateNoteContent
@@ -14,7 +14,7 @@ import { useCopyToClipboard } from './useCopyToClipboard';
 export const useHomeModel = () => {
   const [questions, setQuestions] = useState<Note[]>([]);
   const [hasNotes, setHasNotes] = useState(false);
-  const [darkMatterCount, setDarkMatterCount] = useState(0);
+  const [wanderingPlanetCount, setWanderingPlanetCount] = useState(0);
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const [mobileQuestionActionsId, setMobileQuestionActionsId] = useState<string | null>(null);
   const [editingQuestionId, setEditingQuestionId] = useState<string | null>(null);
@@ -35,8 +35,8 @@ export const useHomeModel = () => {
     setHasNotes(allNotes.length > 0);
     const nextQuestions = await getQuestions();
     setQuestions(nextQuestions.sort((a, b) => b.updatedAt - a.updatedAt));
-    const darkMatterTotal = await getDarkMatterCount();
-    setDarkMatterCount(darkMatterTotal);
+    const wanderingPlanetTotal = await getWanderingPlanetCount();
+    setWanderingPlanetCount(wanderingPlanetTotal);
   }, []);
 
   const handleKeyDown = useCallback((event: KeyboardEvent) => {
@@ -159,7 +159,7 @@ export const useHomeModel = () => {
     t,
     questions,
     hasNotes,
-    darkMatterCount,
+    wanderingPlanetCount,
     deleteTarget,
     mobileQuestionActionsId,
     editingQuestionId,
diff --git a/hooks/useQuestionDetailModel.ts b/hooks/useQuestionDetailModel.ts
index aee584f..9b6814a 100644
--- a/hooks/useQuestionDetailModel.ts
+++ b/hooks/useQuestionDetailModel.ts
@@ -8,6 +8,7 @@ import { useQuestionDetailEditing } from './questionDetail/useQuestionDetailEdit
 import { useQuestionDetailDelete } from './questionDetail/useQuestionDetailDelete';
 import { useQuestionDetailMove } from './questionDetail/useQuestionDetailMove';
 import { useQuestionDetailDowngrade } from './questionDetail/useQuestionDetailDowngrade';
+import { useQuestionDetailCopyTo } from './questionDetail/useQuestionDetailCopyTo';
 
 export const useQuestionDetailModel = () => {
   const { id } = useParams<{ id: string }>();
@@ -51,6 +52,13 @@ export const useQuestionDetailModel = () => {
     setMobileNoteActionsId
   });
 
+  const copyTo = useQuestionDetailCopyTo({
+    availableQuestions: data.availableQuestions,
+    relatedNotes: data.relatedNotes,
+    loadData: data.loadData,
+    setMobileNoteActionsId
+  });
+
   const downgrade = useQuestionDetailDowngrade({
     question: data.question,
     relinkQuestionId: data.relinkQuestionId,
@@ -108,6 +116,9 @@ export const useQuestionDetailModel = () => {
     moveNoteId: move.moveNoteId,
     moveTargetQuestionId: move.moveTargetQuestionId,
     isMoving: move.isMoving,
+    copyNoteId: copyTo.copyNoteId,
+    copyTargetQuestionId: copyTo.copyTargetQuestionId,
+    isCopying: copyTo.isCopying,
     downgradeOptions: downgrade.downgradeOptions,
     claims,
     evidence,
@@ -126,6 +137,8 @@ export const useQuestionDetailModel = () => {
     setSectionOrder: sections.setSectionOrder,
     setMoveNoteId: move.setMoveNoteId,
     setMoveTargetQuestionId: move.setMoveTargetQuestionId,
+    setCopyNoteId: copyTo.setCopyNoteId,
+    setCopyTargetQuestionId: copyTo.setCopyTargetQuestionId,
     toggleSection: sections.toggleSection,
     loadData: data.loadData,
     handleEdit: editing.handleEdit,
@@ -133,8 +146,10 @@ export const useQuestionDetailModel = () => {
     handleSaveEdit: editing.handleSaveEdit,
     handleCancelEdit: editing.handleCancelEdit,
     handleDelete: deletion.handleDelete,
+    openCopyToQuestion: copyTo.openCopyToQuestion,
     openMoveToQuestion: move.openMoveToQuestion,
     handleConfirmMove: move.handleConfirmMove,
+    handleConfirmCopy: copyTo.handleConfirmCopy,
     getOrderedNotes: sections.getOrderedNotes,
     handleDragStart: sections.handleDragStart,
     handleDragEnter: sections.handleDragEnter,
diff --git a/hooks/useDarkMatterModel.ts b/hooks/useWanderingPlanetModel.ts
similarity index 88%
rename from hooks/useDarkMatterModel.ts
rename to hooks/useWanderingPlanetModel.ts
index 08a0bf7..22fef74 100644
--- a/hooks/useDarkMatterModel.ts
+++ b/hooks/useWanderingPlanetModel.ts
@@ -10,16 +10,16 @@ import { useAppContext } from '../contexts/AppContext';
 import { useNotifications } from '../contexts/NotificationContext';
 import { useCopyToClipboard } from './useCopyToClipboard';
 import { formatTemplate } from '../utils/text';
-import { useDarkMatterData } from './darkMatter/useDarkMatterData';
-import { useDarkMatterSelection } from './darkMatter/useDarkMatterSelection';
-import { useDarkMatterAnalysis } from './darkMatter/useDarkMatterAnalysis';
+import { useWanderingPlanetData } from './wanderingPlanet/useWanderingPlanetData';
+import { useWanderingPlanetSelection } from './wanderingPlanet/useWanderingPlanetSelection';
+import { useWanderingPlanetAnalysis } from './wanderingPlanet/useWanderingPlanetAnalysis';
 
-export const useDarkMatterModel = () => {
+export const useWanderingPlanetModel = () => {
   const { t, language } = useAppContext();
   const { copyText } = useCopyToClipboard();
   const { notify } = useNotifications();
 
-  const data = useDarkMatterData();
+  const data = useWanderingPlanetData();
 
   const [linkTarget, setLinkTarget] = useState<string | null>(null);
   const [editingId, setEditingId] = useState<string | null>(null);
@@ -27,20 +27,20 @@ export const useDarkMatterModel = () => {
   const [isSavingEdit, setIsSavingEdit] = useState(false);
   const [mobileNoteActionsId, setMobileNoteActionsId] = useState<string | null>(null);
 
-  const selection = useDarkMatterSelection({
-    sortedDarkMatter: data.sortedDarkMatter,
+  const selection = useWanderingPlanetSelection({
+    sortedWanderingPlanet: data.sortedWanderingPlanet,
     onClearEditing: () => {
       setEditingId(null);
       setEditContent('');
     }
   });
 
-  const analysis = useDarkMatterAnalysis({
+  const analysis = useWanderingPlanetAnalysis({
     t,
     language,
-    darkMatter: data.darkMatter,
+    wanderingPlanet: data.wanderingPlanet,
     analysisNotes: data.analysisNotes,
-    darkMatterCount: data.darkMatterCount,
+    wanderingPlanetCount: data.wanderingPlanetCount,
     aiRevealThreshold: data.aiRevealThreshold,
     loadInitial: data.loadInitial,
     setAnalysisNotes: data.setAnalysisNotes,
@@ -50,7 +50,7 @@ export const useDarkMatterModel = () => {
 
   const handleDelete = useCallback(async (noteId: string) => {
     setMobileNoteActionsId(null);
-    const note = data.darkMatter.find((n) => n.id === noteId)
+    const note = data.wanderingPlanet.find((n) => n.id === noteId)
       || data.analysisNotes.find((n) => n.id === noteId);
     if (!note) return;
     const savedNote = { ...note };
@@ -114,7 +114,7 @@ export const useDarkMatterModel = () => {
     if (!editingId || !trimmed || isSavingEdit) return;
     setIsSavingEdit(true);
     const optimisticUpdatedAt = Date.now();
-    data.updateDarkMatterOptimistic(editingId, trimmed, optimisticUpdatedAt);
+    data.updateWanderingPlanetOptimistic(editingId, trimmed, optimisticUpdatedAt);
     try {
       await updateNoteContent(editingId, trimmed);
       setEditingId(null);
@@ -170,8 +170,8 @@ export const useDarkMatterModel = () => {
   return {
     t,
     language,
-    darkMatter: data.darkMatter,
-    darkMatterCount: data.darkMatterCount,
+    wanderingPlanet: data.wanderingPlanet,
+    wanderingPlanetCount: data.wanderingPlanetCount,
     questions: data.questions,
     analysisNotes: data.analysisNotes,
     linkTarget,
@@ -192,7 +192,7 @@ export const useDarkMatterModel = () => {
     batchPromoteConfirm: selection.batchPromoteConfirm,
     sortOrder: data.sortOrder,
     noteById: data.noteById,
-    sortedDarkMatter: data.sortedDarkMatter,
+    sortedWanderingPlanet: data.sortedWanderingPlanet,
     confirmMessage: analysis.confirmMessage,
     confirmLabel: analysis.confirmLabel,
     shouldShowAiCard: analysis.shouldShowAiCard,
diff --git a/hooks/useWriteModel.ts b/hooks/useWriteModel.ts
index eec2451..a5cbe91 100644
--- a/hooks/useWriteModel.ts
+++ b/hooks/useWriteModel.ts
@@ -141,12 +141,17 @@ export const useWriteModel = () => {
 
     removeJob(jobId);
 
-    if (!aiResult) {
+    const clearAnalysisPending = async () => {
       try {
         await updateNoteMeta(newNote.id, { analysisPending: false });
       } catch (error) {
         console.error('Error clearing analysis pending state:', error);
       }
+    };
+
+    await clearAnalysisPending();
+
+    if (!aiResult) {
       return;
     }
 
diff --git a/hooks/darkMatter/useDarkMatterAnalysis.ts b/hooks/wanderingPlanet/useWanderingPlanetAnalysis.ts
similarity index 65%
rename from hooks/darkMatter/useDarkMatterAnalysis.ts
rename to hooks/wanderingPlanet/useWanderingPlanetAnalysis.ts
index 01ff257..120e807 100644
--- a/hooks/darkMatter/useDarkMatterAnalysis.ts
+++ b/hooks/wanderingPlanet/useWanderingPlanetAnalysis.ts
@@ -1,29 +1,29 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { analyzeDarkMatter } from '../../services/aiService';
+import { analyzeWanderingPlanet } from '../../services/aiService';
 import {
   createNoteObject,
-  getDarkMatter,
+  getWanderingPlanet,
   getQuestions,
-  recordDarkMatterAnalysisRequested,
-  recordDarkMatterSuggestionApplied,
-  recordDarkMatterSuggestionDismissed,
+  recordWanderingPlanetAnalysisRequested,
+  recordWanderingPlanetSuggestionApplied,
+  recordWanderingPlanetSuggestionDismissed,
   saveNote,
   updateNoteMeta
 } from '../../services/storageService';
-import { DarkMatterSuggestion, Note, NoteType } from '../../types';
+import { WanderingPlanetSuggestion, Note, NoteType } from '../../types';
 import { useAssistantInbox } from '../../contexts/AssistantInboxContext';
 import { createMessageId } from '../../utils/ids';
 import { coerceConfidenceLabel } from '../../utils/confidence';
 import { containsCjk, formatTemplate } from '../../utils/text';
 import type { TranslationKey } from '../../contexts/translations';
 
-interface DarkMatterAnalysisOptions {
+interface WanderingPlanetAnalysisOptions {
   t: (key: TranslationKey) => string;
   language: 'en' | 'zh';
-  darkMatter: Note[];
+  wanderingPlanet: Note[];
   analysisNotes: Note[];
-  darkMatterCount: number;
+  wanderingPlanetCount: number;
   aiRevealThreshold: number;
   loadInitial: () => Promise<void>;
   setAnalysisNotes: Dispatch<SetStateAction<Note[]>>;
@@ -33,10 +33,10 @@ interface DarkMatterAnalysisOptions {
 
 type PendingAction = {
   type: 'create' | 'link';
-  suggestion: DarkMatterSuggestion;
+  suggestion: WanderingPlanetSuggestion;
 } | null;
 
-const normalizeSuggestionForCompare = (suggestion: DarkMatterSuggestion) => ({
+const normalizeSuggestionForCompare = (suggestion: WanderingPlanetSuggestion) => ({
   ...suggestion,
   confidenceLabel: coerceConfidenceLabel(
     (suggestion as { confidenceLabel?: unknown }).confidenceLabel,
@@ -46,7 +46,7 @@ const normalizeSuggestionForCompare = (suggestion: DarkMatterSuggestion) => ({
   noteIds: [...suggestion.noteIds].sort()
 });
 
-const areSuggestionsEqual = (left: DarkMatterSuggestion[], right: DarkMatterSuggestion[]) => {
+const areSuggestionsEqual = (left: WanderingPlanetSuggestion[], right: WanderingPlanetSuggestion[]) => {
   if (left === right) return true;
   if (left.length !== right.length) return false;
   const normalizedLeft = left.map(normalizeSuggestionForCompare);
@@ -72,29 +72,29 @@ const areSuggestionsEqual = (left: DarkMatterSuggestion[], right: DarkMatterSugg
   return true;
 };
 
-export const useDarkMatterAnalysis = ({
+export const useWanderingPlanetAnalysis = ({
   t,
   language,
-  darkMatter,
+  wanderingPlanet,
   analysisNotes,
-  darkMatterCount,
+  wanderingPlanetCount,
   aiRevealThreshold,
   loadInitial,
   setAnalysisNotes,
   setQuestionsSorted,
   removeAnalysisNotes
-}: DarkMatterAnalysisOptions) => {
+}: WanderingPlanetAnalysisOptions) => {
   const {
     createJob,
     removeJob,
     addMessage,
     dismissMessagesByKind,
-    setDarkMatterAnalysis,
-    updateDarkMatterSuggestions,
-    darkMatterAnalysis
+    setWanderingPlanetAnalysis,
+    updateWanderingPlanetSuggestions,
+    wanderingPlanetAnalysis
   } = useAssistantInbox();
 
-  const [suggestions, setSuggestions] = useState<DarkMatterSuggestion[]>([]);
+  const [suggestions, setSuggestions] = useState<WanderingPlanetSuggestion[]>([]);
   const [isAnalyzing, setIsAnalyzing] = useState(false);
   const [hasAnalyzed, setHasAnalyzed] = useState(false);
   const [isAiPanelOpen, setIsAiPanelOpen] = useState(false);
@@ -102,31 +102,31 @@ export const useDarkMatterAnalysis = ({
 
   useEffect(() => {
     if (isAnalyzing) return;
-    if (!darkMatterAnalysis) return;
+    if (!wanderingPlanetAnalysis) return;
     setHasAnalyzed(true);
-    setSuggestions(darkMatterAnalysis.suggestions);
-    if (darkMatterAnalysis.noteIds.length === 0) {
+    setSuggestions(wanderingPlanetAnalysis.suggestions);
+    if (wanderingPlanetAnalysis.noteIds.length === 0) {
       setAnalysisNotes([]);
       return;
     }
     let isActive = true;
-    void getDarkMatter().then((allNotes) => {
+    void getWanderingPlanet().then((allNotes) => {
       if (!isActive) return;
-      const noteIdSet = new Set(darkMatterAnalysis.noteIds);
+      const noteIdSet = new Set(wanderingPlanetAnalysis.noteIds);
       setAnalysisNotes(allNotes.filter((note) => noteIdSet.has(note.id)));
     });
     return () => {
       isActive = false;
     };
-  }, [darkMatterAnalysis, isAnalyzing, setAnalysisNotes]);
+  }, [wanderingPlanetAnalysis, isAnalyzing, setAnalysisNotes]);
 
   useEffect(() => {
-    const suggestionSource = analysisNotes.length > 0 ? analysisNotes : darkMatter;
+    const suggestionSource = analysisNotes.length > 0 ? analysisNotes : wanderingPlanet;
     if (suggestionSource.length === 0) {
       setSuggestions((prev) => {
         if (prev.length === 0) return prev;
-        updateDarkMatterSuggestions([]);
-        dismissMessagesByKind('dark_matter_ready');
+        updateWanderingPlanetSuggestions([]);
+        dismissMessagesByKind('wandering_planet_ready');
         return [];
       });
       return;
@@ -140,58 +140,58 @@ export const useDarkMatterAnalysis = ({
         }))
         .filter((suggestion) => suggestion.noteIds.length >= 2);
       if (areSuggestionsEqual(prev, next)) return prev;
-      updateDarkMatterSuggestions(next);
-      if (next.length === 0 && prev.length > 0) dismissMessagesByKind('dark_matter_ready');
+      updateWanderingPlanetSuggestions(next);
+      if (next.length === 0 && prev.length > 0) dismissMessagesByKind('wandering_planet_ready');
       return next;
     });
-  }, [analysisNotes, darkMatter, dismissMessagesByKind, updateDarkMatterSuggestions]);
+  }, [analysisNotes, wanderingPlanet, dismissMessagesByKind, updateWanderingPlanetSuggestions]);
 
-  const getSuggestionReasoning = useCallback((suggestion: DarkMatterSuggestion) => {
+  const getSuggestionReasoning = useCallback((suggestion: WanderingPlanetSuggestion) => {
     const raw = typeof suggestion.reasoning === 'string' ? suggestion.reasoning.trim() : '';
     if (!raw || (language === 'zh' && !containsCjk(raw))) {
       if (language !== 'zh') return raw;
-      return formatTemplate(t('dark_matter_suggestion_reasoning_fallback'), { title: suggestion.title });
+      return formatTemplate(t('wandering_planet_suggestion_reasoning_fallback'), { title: suggestion.title });
     }
     return raw;
   }, [language, t]);
 
-  const getSuggestionConfidenceLabel = useCallback((suggestion: DarkMatterSuggestion) => {
+  const getSuggestionConfidenceLabel = useCallback((suggestion: WanderingPlanetSuggestion) => {
     const label = coerceConfidenceLabel(
       (suggestion as { confidenceLabel?: unknown }).confidenceLabel,
       (suggestion as { confidence?: unknown }).confidence
     );
-    if (label === 'likely') return t('dark_matter_ai_confidence_likely');
-    if (label === 'possible') return t('dark_matter_ai_confidence_possible');
-    return t('dark_matter_ai_confidence_loose');
+    if (label === 'likely') return t('wandering_planet_ai_confidence_likely');
+    if (label === 'possible') return t('wandering_planet_ai_confidence_possible');
+    return t('wandering_planet_ai_confidence_loose');
   }, [t]);
 
   const handleAnalyze = useCallback(async () => {
     if (isAnalyzing) return;
     setIsAnalyzing(true);
     setHasAnalyzed(true);
-    const [allDarkMatter, allQuestions] = await Promise.all([
-      getDarkMatter(),
+    const [allWanderingPlanet, allQuestions] = await Promise.all([
+      getWanderingPlanet(),
       getQuestions()
     ]);
-    setAnalysisNotes(allDarkMatter);
+    setAnalysisNotes(allWanderingPlanet);
     setQuestionsSorted(allQuestions);
-    void recordDarkMatterAnalysisRequested(allDarkMatter.length, allQuestions.length);
-    const jobId = createJob('dark_matter_analysis', { noteCount: allDarkMatter.length });
-    const result = await analyzeDarkMatter(allDarkMatter, allQuestions, language, 5);
+    void recordWanderingPlanetAnalysisRequested(allWanderingPlanet.length, allQuestions.length);
+    const jobId = createJob('wandering_planet_analysis', { noteCount: allWanderingPlanet.length });
+    const result = await analyzeWanderingPlanet(allWanderingPlanet, allQuestions, language, 5);
     setSuggestions(result.suggestions);
     setIsAnalyzing(false);
     removeJob(jobId);
-    setDarkMatterAnalysis({
+    setWanderingPlanetAnalysis({
       suggestions: result.suggestions,
-      noteIds: allDarkMatter.map((note) => note.id),
+      noteIds: allWanderingPlanet.map((note) => note.id),
       createdAt: Date.now()
     });
-    dismissMessagesByKind('dark_matter_ready');
+    dismissMessagesByKind('wandering_planet_ready');
     if (result.suggestions.length > 0) {
       addMessage({
         id: createMessageId(),
-        kind: 'dark_matter_ready',
-        title: t('assistant_dark_matter_ready_title'),
+        kind: 'wandering_planet_ready',
+        title: t('assistant_wandering_planet_ready_title'),
         createdAt: Date.now(),
         payload: { suggestionCount: result.suggestions.length }
       });
@@ -204,7 +204,7 @@ export const useDarkMatterAnalysis = ({
     language,
     removeJob,
     setAnalysisNotes,
-    setDarkMatterAnalysis,
+    setWanderingPlanetAnalysis,
     setQuestionsSorted,
     t
   ]);
@@ -212,14 +212,14 @@ export const useDarkMatterAnalysis = ({
   const dismissSuggestion = useCallback((id: string) => {
     setSuggestions((prev) => {
       const next = prev.filter((suggestion) => suggestion.id !== id);
-      updateDarkMatterSuggestions(next);
-      if (next.length === 0) dismissMessagesByKind('dark_matter_ready');
+      updateWanderingPlanetSuggestions(next);
+      if (next.length === 0) dismissMessagesByKind('wandering_planet_ready');
       return next;
     });
-    void recordDarkMatterSuggestionDismissed(id);
-  }, [dismissMessagesByKind, updateDarkMatterSuggestions]);
+    void recordWanderingPlanetSuggestionDismissed(id);
+  }, [dismissMessagesByKind, updateWanderingPlanetSuggestions]);
 
-  const requestApplySuggestion = useCallback((type: 'create' | 'link', suggestion: DarkMatterSuggestion) => {
+  const requestApplySuggestion = useCallback((type: 'create' | 'link', suggestion: WanderingPlanetSuggestion) => {
     setPendingAction({ type, suggestion });
   }, []);
 
@@ -247,7 +247,7 @@ export const useDarkMatterAnalysis = ({
         );
       }
 
-      await recordDarkMatterSuggestionApplied(
+      await recordWanderingPlanetSuggestionApplied(
         suggestion.kind,
         suggestion.noteIds.length,
         suggestion.id
@@ -255,8 +255,8 @@ export const useDarkMatterAnalysis = ({
       removeAnalysisNotes(suggestion.noteIds);
       setSuggestions((prev) => {
         const next = prev.filter((item) => item.id !== suggestion.id);
-        updateDarkMatterSuggestions(next);
-        if (next.length === 0) dismissMessagesByKind('dark_matter_ready');
+        updateWanderingPlanetSuggestions(next);
+        if (next.length === 0) dismissMessagesByKind('wandering_planet_ready');
         return next;
       });
     } catch (error) {
@@ -264,11 +264,11 @@ export const useDarkMatterAnalysis = ({
     } finally {
       await loadInitial();
     }
-  }, [dismissMessagesByKind, loadInitial, pendingAction, removeAnalysisNotes, updateDarkMatterSuggestions]);
+  }, [dismissMessagesByKind, loadInitial, pendingAction, removeAnalysisNotes, updateWanderingPlanetSuggestions]);
 
   const confirmMessage = pendingAction
     ? formatTemplate(
-      pendingAction.type === 'create' ? t('dark_matter_confirm_create') : t('dark_matter_confirm_link'),
+      pendingAction.type === 'create' ? t('wandering_planet_confirm_create') : t('wandering_planet_confirm_link'),
       {
         title: pendingAction.suggestion.title,
         count: pendingAction.suggestion.noteIds.length
@@ -276,11 +276,11 @@ export const useDarkMatterAnalysis = ({
     )
     : '';
   const confirmLabel = pendingAction
-    ? (pendingAction.type === 'create' ? t('dark_matter_ai_action_create') : t('dark_matter_ai_action_link'))
+    ? (pendingAction.type === 'create' ? t('wandering_planet_ai_action_create') : t('wandering_planet_ai_action_link'))
     : t('confirm');
 
-  const shouldShowAiCard = darkMatterCount > 0
-    && (darkMatterCount >= aiRevealThreshold || isAiPanelOpen);
+  const shouldShowAiCard = wanderingPlanetCount > 0
+    && (wanderingPlanetCount >= aiRevealThreshold || isAiPanelOpen);
 
   return {
     suggestions,
diff --git a/hooks/darkMatter/useDarkMatterData.ts b/hooks/wanderingPlanet/useWanderingPlanetData.ts
similarity index 70%
rename from hooks/darkMatter/useDarkMatterData.ts
rename to hooks/wanderingPlanet/useWanderingPlanetData.ts
index 2f45fd7..967118a 100644
--- a/hooks/darkMatter/useDarkMatterData.ts
+++ b/hooks/wanderingPlanet/useWanderingPlanetData.ts
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { getDarkMatterCount, getDarkMatterPage, getQuestions } from '../../services/storageService';
+import { getWanderingPlanetCount, getWanderingPlanetPage, getQuestions } from '../../services/storageService';
 import { Note } from '../../types';
 
-export const useDarkMatterData = () => {
-  const [darkMatter, setDarkMatter] = useState<Note[]>([]);
-  const [darkMatterCount, setDarkMatterCount] = useState(0);
+export const useWanderingPlanetData = () => {
+  const [wanderingPlanet, setWanderingPlanet] = useState<Note[]>([]);
+  const [wanderingPlanetCount, setWanderingPlanetCount] = useState(0);
   const [questions, setQuestions] = useState<Note[]>([]);
   const [analysisNotes, setAnalysisNotes] = useState<Note[]>([]);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
@@ -17,30 +17,30 @@ export const useDarkMatterData = () => {
 
   const noteById = useMemo(() => {
     const map = new Map<string, Note>();
-    darkMatter.forEach((note) => map.set(note.id, note));
+    wanderingPlanet.forEach((note) => map.set(note.id, note));
     analysisNotes.forEach((note) => {
       if (!map.has(note.id)) map.set(note.id, note);
     });
     return map;
-  }, [darkMatter, analysisNotes]);
+  }, [wanderingPlanet, analysisNotes]);
 
-  const sortedDarkMatter = useMemo(() => {
-    if (sortOrder === 'newest') return darkMatter;
-    return [...darkMatter].sort((a, b) => a.createdAt - b.createdAt);
-  }, [darkMatter, sortOrder]);
+  const sortedWanderingPlanet = useMemo(() => {
+    if (sortOrder === 'newest') return wanderingPlanet;
+    return [...wanderingPlanet].sort((a, b) => a.createdAt - b.createdAt);
+  }, [wanderingPlanet, sortOrder]);
 
   const loadInitial = useCallback(async () => {
     setIsLoadingMore(true);
     try {
       const [page, qs, totalCount] = await Promise.all([
-        getDarkMatterPage(pageSize),
+        getWanderingPlanetPage(pageSize),
         getQuestions(),
-        getDarkMatterCount()
+        getWanderingPlanetCount()
       ]);
-      setDarkMatter(page.notes);
+      setWanderingPlanet(page.notes);
       setNextCursor(page.nextCursor);
       setHasMore(page.hasMore);
-      setDarkMatterCount(totalCount);
+      setWanderingPlanetCount(totalCount);
       setQuestions(qs.sort((a, b) => b.updatedAt - a.updatedAt));
     } finally {
       setIsLoadingMore(false);
@@ -51,8 +51,8 @@ export const useDarkMatterData = () => {
     if (isLoadingMore || !hasMore || nextCursor === null) return;
     setIsLoadingMore(true);
     try {
-      const page = await getDarkMatterPage(pageSize, nextCursor);
-      setDarkMatter((prev) => {
+      const page = await getWanderingPlanetPage(pageSize, nextCursor);
+      setWanderingPlanet((prev) => {
         const existingIds = new Set(prev.map((note) => note.id));
         const merged = [...prev];
         for (const note of page.notes) {
@@ -80,8 +80,8 @@ export const useDarkMatterData = () => {
     setQuestions(nextQuestions.sort((a, b) => b.updatedAt - a.updatedAt));
   }, []);
 
-  const updateDarkMatterOptimistic = useCallback((noteId: string, content: string, updatedAt: number) => {
-    setDarkMatter((prev) =>
+  const updateWanderingPlanetOptimistic = useCallback((noteId: string, content: string, updatedAt: number) => {
+    setWanderingPlanet((prev) =>
       prev.map((note) => (note.id === noteId ? { ...note, content, updatedAt } : note))
     );
   }, []);
@@ -95,22 +95,22 @@ export const useDarkMatterData = () => {
   }, [loadInitial]);
 
   return {
-    darkMatter,
-    darkMatterCount,
+    wanderingPlanet,
+    wanderingPlanetCount,
     questions,
     analysisNotes,
     isLoadingMore,
     hasMore,
     sortOrder,
     noteById,
-    sortedDarkMatter,
+    sortedWanderingPlanet,
     aiRevealThreshold,
     loadInitial,
     loadMore,
     setAnalysisNotes,
     setQuestionsSorted,
     removeAnalysisNotes,
-    updateDarkMatterOptimistic,
+    updateWanderingPlanetOptimistic,
     toggleSortOrder
   };
 };
diff --git a/hooks/darkMatter/useDarkMatterSelection.ts b/hooks/wanderingPlanet/useWanderingPlanetSelection.ts
similarity index 81%
rename from hooks/darkMatter/useDarkMatterSelection.ts
rename to hooks/wanderingPlanet/useWanderingPlanetSelection.ts
index 882bc0f..bf2778c 100644
--- a/hooks/darkMatter/useDarkMatterSelection.ts
+++ b/hooks/wanderingPlanet/useWanderingPlanetSelection.ts
@@ -1,15 +1,15 @@
 import { useCallback, useState } from 'react';
 import { Note } from '../../types';
 
-interface DarkMatterSelectionOptions {
-  sortedDarkMatter: Note[];
+interface WanderingPlanetSelectionOptions {
+  sortedWanderingPlanet: Note[];
   onClearEditing: () => void;
 }
 
-export const useDarkMatterSelection = ({
-  sortedDarkMatter,
+export const useWanderingPlanetSelection = ({
+  sortedWanderingPlanet,
   onClearEditing
-}: DarkMatterSelectionOptions) => {
+}: WanderingPlanetSelectionOptions) => {
   const [isSelectMode, setIsSelectMode] = useState(false);
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
   const [batchLinkOpen, setBatchLinkOpen] = useState(false);
@@ -40,11 +40,11 @@ export const useDarkMatterSelection = ({
 
   const toggleSelectAll = useCallback(() => {
     setSelectedIds((prev) =>
-      prev.size === sortedDarkMatter.length
+      prev.size === sortedWanderingPlanet.length
         ? new Set()
-        : new Set(sortedDarkMatter.map((note) => note.id))
+        : new Set(sortedWanderingPlanet.map((note) => note.id))
     );
-  }, [sortedDarkMatter]);
+  }, [sortedWanderingPlanet]);
 
   const handleBatchLink = useCallback(() => {
     if (selectedIds.size === 0) return;
diff --git a/index.tsx b/index.tsx
index 3022fa9..3e66f53 100644
--- a/index.tsx
+++ b/index.tsx
@@ -17,7 +17,9 @@ root.render(
 
 if (import.meta.env.PROD && 'serviceWorker' in navigator) {
   window.addEventListener('load', () => {
-    navigator.serviceWorker.register('/sw.js').catch((error) => {
+    const buildId = import.meta.env.VITE_BUILD_ID;
+    const swUrl = buildId ? `/sw.js?v=${encodeURIComponent(buildId)}` : '/sw.js';
+    navigator.serviceWorker.register(swUrl).catch((error) => {
       console.error('Service worker registration failed:', error);
     });
   });
diff --git a/package-lock.json b/package-lock.json
index 52163d2..6e232e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cognitive-space",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cognitive-space",
-      "version": "0.0.1",
+      "version": "0.0.3",
       "dependencies": {
         "idb": "^8.0.3",
         "react": "^19.2.4",
@@ -27,6 +27,9 @@
         "vite": "^6.2.0",
         "vitest": "^2.1.9",
         "wrangler": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=18"
       }
     },
     "node_modules/@alloc/quick-lru": {
diff --git a/package.json b/package.json
index bd2f862..d7176c2 100644
--- a/package.json
+++ b/package.json
@@ -1,17 +1,20 @@
 {
   "name": "cognitive-space",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
+  "engines": {
+    "node": ">=18"
+  },
   "scripts": {
     "dev": "npm run build && wrangler dev",
-    "dev:ui": "vite",
-    "build": "vite build",
+    "dev:ui": "node scripts/run-with-build-id.mjs vite",
+    "build": "node scripts/run-with-build-id.mjs vite build",
     "favicons": "node scripts/generate-favicons.mjs",
     "lint": "tsc --noEmit",
     "test": "vitest run",
-    "preview": "wrangler dev",
-    "deploy": "wrangler deploy"
+    "preview": "npm run build && wrangler dev",
+    "deploy": "npm run build && wrangler deploy"
   },
   "dependencies": {
     "idb": "^8.0.3",
diff --git a/public/sw.js b/public/sw.js
index 98a6b3c..a9fcc3a 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1,6 +1,7 @@
-const CACHE_VERSION = 'v5';
-const PRECACHE = `precache-${CACHE_VERSION}`;
-const RUNTIME = `runtime-${CACHE_VERSION}`;
+const CACHE_VERSION = new URL(self.location.href).searchParams.get('v') || 'v1';
+const CACHE_TAG = CACHE_VERSION.startsWith('v') ? CACHE_VERSION : `v-${CACHE_VERSION}`;
+const PRECACHE = `precache-${CACHE_TAG}`;
+const RUNTIME = `runtime-${CACHE_TAG}`;
 
 const PRECACHE_URLS = [
   '/',
diff --git a/scripts/run-with-build-id.mjs b/scripts/run-with-build-id.mjs
new file mode 100644
index 0000000..25cb4f7
--- /dev/null
+++ b/scripts/run-with-build-id.mjs
@@ -0,0 +1,54 @@
+import { spawn } from 'node:child_process';
+import { randomUUID } from 'node:crypto';
+import { existsSync } from 'node:fs';
+import path from 'node:path';
+
+const args = process.argv.slice(2);
+if (args.length === 0) {
+  console.error('Usage: run-with-build-id <command> [...args]');
+  process.exit(1);
+}
+
+const buildId =
+  process.env.VITE_BUILD_ID ||
+  process.env.BUILD_ID ||
+  process.env.GIT_COMMIT ||
+  Date.now().toString(36) + '-' + randomUUID().slice(0, 8);
+
+const [command, ...commandArgs] = args;
+let spawnCommand = command;
+let spawnArgs = commandArgs;
+
+if (command === 'vite') {
+  const viteBin = path.resolve(process.cwd(), 'node_modules', 'vite', 'bin', 'vite.js');
+  if (existsSync(viteBin)) {
+    spawnCommand = process.execPath;
+    spawnArgs = [viteBin, ...commandArgs];
+  } else {
+    const viteCli = path.resolve(
+      process.cwd(),
+      'node_modules',
+      '.bin',
+      process.platform === 'win32' ? 'vite.cmd' : 'vite'
+    );
+    if (existsSync(viteCli)) {
+      spawnCommand = viteCli;
+      spawnArgs = commandArgs;
+    }
+  }
+}
+
+const child = spawn(spawnCommand, spawnArgs, {
+  stdio: 'inherit',
+  env: {
+    ...process.env,
+    VITE_BUILD_ID: buildId,
+  },
+});
+
+child.on('exit', (code, signal) => {
+  if (signal) {
+    process.exit(1);
+  }
+  process.exit(code ?? 1);
+});
diff --git a/services/aiService.ts b/services/aiService.ts
index f7f24ea..5019d2b 100644
--- a/services/aiService.ts
+++ b/services/aiService.ts
@@ -1,5 +1,5 @@
-import { Note, NoteType, AnalysisResult, DarkMatterAnalysisResult } from "../types";
-import { normalizeAnalysisResult, normalizeDarkMatterResult } from "../shared/aiNormalize";
+import { Note, NoteType, AnalysisResult, WanderingPlanetAnalysisResult } from "../types";
+import { normalizeAnalysisResult, normalizeWanderingPlanetResult } from "../shared/aiNormalize";
 
 export const analyzeText = async (
   text: string, 
@@ -38,14 +38,14 @@ export const analyzeText = async (
   }
 };
 
-export const analyzeDarkMatter = async (
+export const analyzeWanderingPlanet = async (
   notes: Note[],
   existingQuestions: Note[],
   language: 'en' | 'zh' = 'en',
   maxClusters = 5
-): Promise<DarkMatterAnalysisResult> => {
+): Promise<WanderingPlanetAnalysisResult> => {
   try {
-    const response = await fetch('/api/dark-matter/analyze', {
+    const response = await fetch('/api/wandering-planet/analyze', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -65,16 +65,16 @@ export const analyzeDarkMatter = async (
     });
 
     if (!response.ok) {
-      throw new Error(`Dark matter analyze request failed: ${response.status}`);
+      throw new Error(`Wandering Planet analysis request failed: ${response.status}`);
     }
 
     const result = await response.json();
     const validNoteIds = new Set(notes.map((note) => note.id));
     const validQuestionIds = new Set(existingQuestions.map((question) => question.id));
     const questionTitleById = new Map(existingQuestions.map((question) => [question.id, question.content]));
-    return normalizeDarkMatterResult(result, validNoteIds, validQuestionIds, questionTitleById, maxClusters);
+    return normalizeWanderingPlanetResult(result, validNoteIds, validQuestionIds, questionTitleById, maxClusters);
   } catch (error) {
-    console.error("Dark matter AI analysis failed:", error);
+    console.error("Wandering Planet AI analysis failed:", error);
     return { suggestions: [] };
   }
 };
diff --git a/services/storage/importExport.ts b/services/storage/importExport.ts
index e1d64fd..a30a018 100644
--- a/services/storage/importExport.ts
+++ b/services/storage/importExport.ts
@@ -121,17 +121,17 @@ const isTelemetryEvent = (value: unknown): value is TelemetryEvent => {
   if (!isRecord(value.payload)) return false;
 
   switch (value.type) {
-    case 'AI_DARK_MATTER_ANALYSIS_REQUESTED': {
+    case 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED': {
       const payload = value.payload as { noteCount?: unknown; questionCount?: unknown };
       return isNumber(payload.noteCount) && isNumber(payload.questionCount);
     }
-    case 'AI_DARK_MATTER_SUGGESTION_APPLIED': {
+    case 'AI_WANDERING_PLANET_SUGGESTION_APPLIED': {
       const payload = value.payload as { kind?: unknown; noteCount?: unknown; suggestionId?: unknown };
       const validKind = payload.kind === 'new_question' || payload.kind === 'existing_question';
       return validKind && isNumber(payload.noteCount) &&
         (typeof payload.suggestionId === 'undefined' || typeof payload.suggestionId === 'string');
     }
-    case 'AI_DARK_MATTER_SUGGESTION_DISMISSED': {
+    case 'AI_WANDERING_PLANET_SUGGESTION_DISMISSED': {
       const payload = value.payload as { suggestionId?: unknown };
       return typeof payload.suggestionId === 'undefined' || typeof payload.suggestionId === 'string';
     }
diff --git a/services/storage/notes.ts b/services/storage/notes.ts
index b9ce7dc..a900b5b 100644
--- a/services/storage/notes.ts
+++ b/services/storage/notes.ts
@@ -7,7 +7,7 @@ import { emitNoteEvent } from './noteEvents';
 import { STORE_EVENTS, STORE_META, STORE_NOTES } from './constants';
 import { CognitiveSpaceDB } from './schema';
 
-export interface DarkMatterPage {
+export interface WanderingPlanetPage {
   notes: Note[];
   nextCursor: number | null;
   hasMore: boolean;
@@ -321,10 +321,10 @@ export const demoteQuestion = async (
   );
 };
 
-export const getDarkMatterPage = async (
+export const getWanderingPlanetPage = async (
   limit: number,
   cursorUpdatedAt?: number
-): Promise<DarkMatterPage> => {
+): Promise<WanderingPlanetPage> => {
   return await withDb(
     { notes: [], nextCursor: null, hasMore: false },
     async (db) => {
@@ -339,17 +339,17 @@ export const getDarkMatterPage = async (
       let lastIncludedUpdatedAt: number | null = null;
       let hasMore = false;
 
-      const isDarkMatterNote = (note: Note) =>
+      const isWanderingPlanetNote = (note: Note) =>
         note.type !== NoteType.QUESTION && (note.parentId === null || note.parentId === undefined);
 
       while (cursor) {
-        if (isDarkMatterNote(cursor.value)) {
+        if (isWanderingPlanetNote(cursor.value)) {
           notes.push(cursor.value);
           lastIncludedUpdatedAt = cursor.value.updatedAt;
           if (notes.length >= limit) {
             cursor = await cursor.continue();
             while (cursor) {
-              if (isDarkMatterNote(cursor.value)) {
+              if (isWanderingPlanetNote(cursor.value)) {
                 hasMore = true;
                 break;
               }
@@ -364,11 +364,11 @@ export const getDarkMatterPage = async (
       await tx.done;
       return { notes, nextCursor: lastIncludedUpdatedAt, hasMore };
     },
-    'Failed to load dark matter page'
+    'Failed to load Wandering Planet page'
   );
 };
 
-export const getDarkMatterCount = async (): Promise<number> => {
+export const getWanderingPlanetCount = async (): Promise<number> => {
   return await withDb(
     0,
     async (db) => {
@@ -392,11 +392,11 @@ export const getDarkMatterCount = async (): Promise<number> => {
       await tx.done;
       return orphanCount - orphanQuestions;
     },
-    'Failed to count dark matter'
+    'Failed to count Wandering Planet'
   );
 };
 
-export const getDarkMatter = async (): Promise<Note[]> => {
+export const getWanderingPlanet = async (): Promise<Note[]> => {
   return await withDb(
     [],
     async (db) => {
@@ -408,7 +408,7 @@ export const getDarkMatter = async (): Promise<Note[]> => {
           (note.parentId === null || note.parentId === undefined)
       );
     },
-    'Failed to load dark matter'
+    'Failed to load Wandering Planet'
   );
 };
 
diff --git a/services/storage/projection.ts b/services/storage/projection.ts
index 625cecd..e15c8d1 100644
--- a/services/storage/projection.ts
+++ b/services/storage/projection.ts
@@ -38,9 +38,9 @@ export const applyEvent = (state: Map<string, Note>, event: AppEvent): void => {
       state.delete(event.payload.id);
       return;
     }
-    case 'AI_DARK_MATTER_ANALYSIS_REQUESTED':
-    case 'AI_DARK_MATTER_SUGGESTION_APPLIED':
-    case 'AI_DARK_MATTER_SUGGESTION_DISMISSED':
+    case 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED':
+    case 'AI_WANDERING_PLANET_SUGGESTION_APPLIED':
+    case 'AI_WANDERING_PLANET_SUGGESTION_DISMISSED':
     default:
       return;
   }
diff --git a/services/storage/telemetry.ts b/services/storage/telemetry.ts
index 3b3542d..df1d687 100644
--- a/services/storage/telemetry.ts
+++ b/services/storage/telemetry.ts
@@ -1,4 +1,4 @@
-import { DarkMatterSuggestionKind, TelemetryEvent } from '../../types';
+import { WanderingPlanetSuggestionKind, TelemetryEvent } from '../../types';
 import { withDb } from './db';
 import { appendEvent } from './events';
 
@@ -12,38 +12,38 @@ const logTelemetryEvent = async (event: TelemetryEvent): Promise<void> => {
   );
 };
 
-export const recordDarkMatterAnalysisRequested = async (
+export const recordWanderingPlanetAnalysisRequested = async (
   noteCount: number,
   questionCount: number
 ): Promise<void> => {
   const createdAt = Date.now();
   await logTelemetryEvent({
     id: crypto.randomUUID(),
-    type: 'AI_DARK_MATTER_ANALYSIS_REQUESTED',
+    type: 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED',
     createdAt,
     payload: { noteCount, questionCount }
   });
 };
 
-export const recordDarkMatterSuggestionApplied = async (
-  kind: DarkMatterSuggestionKind,
+export const recordWanderingPlanetSuggestionApplied = async (
+  kind: WanderingPlanetSuggestionKind,
   noteCount: number,
   suggestionId?: string
 ): Promise<void> => {
   const createdAt = Date.now();
   await logTelemetryEvent({
     id: crypto.randomUUID(),
-    type: 'AI_DARK_MATTER_SUGGESTION_APPLIED',
+    type: 'AI_WANDERING_PLANET_SUGGESTION_APPLIED',
     createdAt,
     payload: { kind, noteCount, suggestionId }
   });
 };
 
-export const recordDarkMatterSuggestionDismissed = async (suggestionId?: string): Promise<void> => {
+export const recordWanderingPlanetSuggestionDismissed = async (suggestionId?: string): Promise<void> => {
   const createdAt = Date.now();
   await logTelemetryEvent({
     id: crypto.randomUUID(),
-    type: 'AI_DARK_MATTER_SUGGESTION_DISMISSED',
+    type: 'AI_WANDERING_PLANET_SUGGESTION_DISMISSED',
     createdAt,
     payload: { suggestionId }
   });
diff --git a/services/storageService.ts b/services/storageService.ts
index 805ac5a..3dd8c98 100644
--- a/services/storageService.ts
+++ b/services/storageService.ts
@@ -8,9 +8,9 @@ export {
   createNoteObject,
   deleteNote,
   demoteQuestion,
-  getDarkMatter,
-  getDarkMatterCount,
-  getDarkMatterPage,
+  getWanderingPlanet,
+  getWanderingPlanetCount,
+  getWanderingPlanetPage,
   getNoteById,
   getNotes,
   getQuestions,
@@ -19,7 +19,7 @@ export {
   saveNote,
   updateNoteContent,
   updateNoteMeta,
-  type DarkMatterPage,
+  type WanderingPlanetPage,
   type QuestionConstellationStats
 } from './storage/notes';
 
@@ -33,7 +33,7 @@ export {
 } from './storage/importExport';
 
 export {
-  recordDarkMatterAnalysisRequested,
-  recordDarkMatterSuggestionApplied,
-  recordDarkMatterSuggestionDismissed
+  recordWanderingPlanetAnalysisRequested,
+  recordWanderingPlanetSuggestionApplied,
+  recordWanderingPlanetSuggestionDismissed
 } from './storage/telemetry';
diff --git a/shared/aiNormalize.ts b/shared/aiNormalize.ts
index 4a34c24..7639b3d 100644
--- a/shared/aiNormalize.ts
+++ b/shared/aiNormalize.ts
@@ -1,12 +1,12 @@
-import { ConfidenceLabel, DarkMatterSuggestionKind, NoteType } from './domain';
+import { ConfidenceLabel, WanderingPlanetSuggestionKind, NoteType } from './domain';
 import { confidenceLabelToScore, coerceConfidenceLabel } from './confidence';
 import { normalizeSubType } from './subtypes';
 import {
   CLASSIFICATIONS,
   CLASSIFICATION_CONFIDENCE_THRESHOLD,
-  DARK_MATTER_CONFIDENCE_THRESHOLD,
+  WANDERING_PLANET_CONFIDENCE_THRESHOLD,
   DEFAULT_ANALYSIS_REASONING,
-  DEFAULT_DARK_MATTER_REASONING,
+  DEFAULT_WANDERING_PLANET_REASONING,
   RELATION_CONFIDENCE_THRESHOLD
 } from './aiPolicy';
 
@@ -18,9 +18,9 @@ export type NormalizedAnalysisResult = {
   reasoning: string;
 };
 
-export type NormalizedDarkMatterSuggestion = {
+export type NormalizedWanderingPlanetSuggestion = {
   id: string;
-  kind: DarkMatterSuggestionKind;
+  kind: WanderingPlanetSuggestionKind;
   title: string;
   existingQuestionId?: string;
   noteIds: string[];
@@ -28,8 +28,8 @@ export type NormalizedDarkMatterSuggestion = {
   reasoning: string;
 };
 
-export type NormalizedDarkMatterResult = {
-  suggestions: NormalizedDarkMatterSuggestion[];
+export type NormalizedWanderingPlanetResult = {
+  suggestions: NormalizedWanderingPlanetSuggestion[];
 };
 
 const asRecord = (value: unknown): Record<string, unknown> | null =>
@@ -95,16 +95,16 @@ export function normalizeAnalysisResult(
   };
 }
 
-export function normalizeDarkMatterResult(
+export function normalizeWanderingPlanetResult(
   input: unknown,
   validNoteIds: Set<string>,
   validQuestionIds: Set<string>,
   questionTitleById: Map<string, string>,
   maxClusters: number
-): NormalizedDarkMatterResult {
+): NormalizedWanderingPlanetResult {
   const record = asRecord(input);
   const rawSuggestions = Array.isArray(record?.suggestions) ? record.suggestions : [];
-  const suggestions: NormalizedDarkMatterSuggestion[] = [];
+  const suggestions: NormalizedWanderingPlanetSuggestion[] = [];
   const usedNoteIds = new Set<string>();
   const usedSuggestionIds = new Set<string>();
 
@@ -116,7 +116,7 @@ export function normalizeDarkMatterResult(
     const kindRaw = typeof suggestion.kind === 'string' ? suggestion.kind : '';
     const kind =
       kindRaw === 'new_question' || kindRaw === 'existing_question'
-        ? (kindRaw as DarkMatterSuggestionKind)
+        ? (kindRaw as WanderingPlanetSuggestionKind)
         : null;
     if (!kind) continue;
 
@@ -153,12 +153,12 @@ export function normalizeDarkMatterResult(
 
     const confidenceLabel = normalizeConfidenceLabel(suggestion);
     const confidenceScore = confidenceLabelToScore(confidenceLabel);
-    if (confidenceScore < DARK_MATTER_CONFIDENCE_THRESHOLD) continue;
+    if (confidenceScore < WANDERING_PLANET_CONFIDENCE_THRESHOLD) continue;
 
     const reasoning =
       typeof suggestion.reasoning === 'string' && suggestion.reasoning.trim()
         ? suggestion.reasoning.trim()
-        : DEFAULT_DARK_MATTER_REASONING;
+        : DEFAULT_WANDERING_PLANET_REASONING;
 
     let id = normalizeId(suggestion.id) || `s${suggestions.length + 1}`;
     if (usedSuggestionIds.has(id)) {
diff --git a/shared/aiPolicy.ts b/shared/aiPolicy.ts
index 2813298..aebb148 100644
--- a/shared/aiPolicy.ts
+++ b/shared/aiPolicy.ts
@@ -2,9 +2,9 @@ import { NoteType } from './domain';
 
 export const CLASSIFICATION_CONFIDENCE_THRESHOLD = 0.55;
 export const RELATION_CONFIDENCE_THRESHOLD = 0.7;
-export const DARK_MATTER_CONFIDENCE_THRESHOLD = 0.6;
+export const WANDERING_PLANET_CONFIDENCE_THRESHOLD = 0.6;
 
 export const CLASSIFICATIONS = new Set<NoteType>(Object.values(NoteType));
 
 export const DEFAULT_ANALYSIS_REASONING = 'Analyzed by GLM';
-export const DEFAULT_DARK_MATTER_REASONING = 'Suggested by analysis.';
+export const DEFAULT_WANDERING_PLANET_REASONING = 'Suggested by analysis.';
diff --git a/shared/domain.ts b/shared/domain.ts
index 9cfc323..dbc4b3c 100644
--- a/shared/domain.ts
+++ b/shared/domain.ts
@@ -8,4 +8,4 @@ export enum NoteType {
 
 export type ConfidenceLabel = 'likely' | 'possible' | 'loose';
 
-export type DarkMatterSuggestionKind = 'new_question' | 'existing_question';
+export type WanderingPlanetSuggestionKind = 'new_question' | 'existing_question';
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..933095c 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_BUILD_ID?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/tests/appDataExport.test.ts b/tests/appDataExport.test.ts
index a3269c8..c8ddebe 100644
--- a/tests/appDataExport.test.ts
+++ b/tests/appDataExport.test.ts
@@ -73,13 +73,13 @@ describe('parseAppDataExport', () => {
         },
         {
           id: 'e2',
-          type: 'AI_DARK_MATTER_ANALYSIS_REQUESTED',
+          type: 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED',
           createdAt: 2,
           payload: { noteCount: 3, questionCount: 1 }
         },
         {
           id: 'e3',
-          type: 'AI_DARK_MATTER_SUGGESTION_APPLIED',
+          type: 'AI_WANDERING_PLANET_SUGGESTION_APPLIED',
           createdAt: 3,
           payload: { kind: 'new_question', noteCount: 2, suggestionId: 's1' }
         }
@@ -94,7 +94,7 @@ describe('parseAppDataExport', () => {
       events: [
         {
           id: 'e1',
-          type: 'AI_DARK_MATTER_ANALYSIS_REQUESTED',
+          type: 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED',
           createdAt: 2,
           payload: { noteCount: 'bad', questionCount: 1 }
         }
@@ -233,7 +233,7 @@ describe('parseAppDataExport', () => {
       events: [
         {
           id: 'e1',
-          type: 'AI_DARK_MATTER_SUGGESTION_APPLIED',
+          type: 'AI_WANDERING_PLANET_SUGGESTION_APPLIED',
           createdAt: 1,
           payload: { kind: 'maybe', noteCount: 2 }
         }
diff --git a/tests/darkMatterNormalize.test.ts b/tests/wanderingPlanetNormalize.test.ts
similarity index 90%
rename from tests/darkMatterNormalize.test.ts
rename to tests/wanderingPlanetNormalize.test.ts
index 7a98828..f3f04e2 100644
--- a/tests/darkMatterNormalize.test.ts
+++ b/tests/wanderingPlanetNormalize.test.ts
@@ -1,9 +1,9 @@
 import { describe, expect, it } from 'vitest';
-import { normalizeDarkMatterResult } from '../worker';
+import { normalizeWanderingPlanetResult } from '../worker';
 
-describe('normalizeDarkMatterResult', () => {
+describe('normalizeWanderingPlanetResult', () => {
   it('drops invalid notes and enforces minimum size', () => {
-    const result = normalizeDarkMatterResult(
+    const result = normalizeWanderingPlanetResult(
       {
         suggestions: [
           {
@@ -35,7 +35,7 @@ describe('normalizeDarkMatterResult', () => {
   });
 
   it('requires valid existing question id and fills title from map', () => {
-    const result = normalizeDarkMatterResult(
+    const result = normalizeWanderingPlanetResult(
       {
         suggestions: [
           {
@@ -69,7 +69,7 @@ describe('normalizeDarkMatterResult', () => {
   });
 
   it('prevents notes from appearing in multiple suggestions', () => {
-    const result = normalizeDarkMatterResult(
+    const result = normalizeWanderingPlanetResult(
       {
         suggestions: [
           {
@@ -101,7 +101,7 @@ describe('normalizeDarkMatterResult', () => {
   });
 
   it('trims ids before validation', () => {
-    const result = normalizeDarkMatterResult(
+    const result = normalizeWanderingPlanetResult(
       {
         suggestions: [
           {
diff --git a/types.ts b/types.ts
index 6a42634..d417b63 100644
--- a/types.ts
+++ b/types.ts
@@ -1,7 +1,7 @@
-import { NoteType, ConfidenceLabel, DarkMatterSuggestionKind } from './shared/domain';
+import { NoteType, ConfidenceLabel, WanderingPlanetSuggestionKind } from './shared/domain';
 
 export { NoteType };
-export type { ConfidenceLabel, DarkMatterSuggestionKind };
+export type { ConfidenceLabel, WanderingPlanetSuggestionKind };
 
 export interface Note {
   id: string;
@@ -26,9 +26,9 @@ export interface AnalysisResult {
   reasoning: string;
 }
 
-export interface DarkMatterSuggestion {
+export interface WanderingPlanetSuggestion {
   id: string;
-  kind: DarkMatterSuggestionKind;
+  kind: WanderingPlanetSuggestionKind;
   title: string;
   existingQuestionId?: string;
   noteIds: string[];
@@ -37,8 +37,8 @@ export interface DarkMatterSuggestion {
   reasoning: string;
 }
 
-export interface DarkMatterAnalysisResult {
-  suggestions: DarkMatterSuggestion[];
+export interface WanderingPlanetAnalysisResult {
+  suggestions: WanderingPlanetSuggestion[];
 }
 
 export type NoteEvent =
@@ -80,23 +80,23 @@ export type NoteEvent =
 export type TelemetryEvent =
   | {
       id: string;
-      type: 'AI_DARK_MATTER_ANALYSIS_REQUESTED';
+      type: 'AI_WANDERING_PLANET_ANALYSIS_REQUESTED';
       createdAt: number;
       payload: { noteCount: number; questionCount: number };
     }
   | {
       id: string;
-      type: 'AI_DARK_MATTER_SUGGESTION_APPLIED';
+      type: 'AI_WANDERING_PLANET_SUGGESTION_APPLIED';
       createdAt: number;
       payload: {
-        kind: DarkMatterSuggestionKind;
+        kind: WanderingPlanetSuggestionKind;
         noteCount: number;
         suggestionId?: string;
       };
     }
   | {
       id: string;
-      type: 'AI_DARK_MATTER_SUGGESTION_DISMISSED';
+      type: 'AI_WANDERING_PLANET_SUGGESTION_DISMISSED';
       createdAt: number;
       payload: { suggestionId?: string };
     };
diff --git a/views/Home.tsx b/views/Home.tsx
index 2000f71..c04d81c 100644
--- a/views/Home.tsx
+++ b/views/Home.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { createPortal } from 'react-dom';
-import { Link } from 'react-router-dom';
-import { PlusIcon, SearchIcon, EmptyStateIllustration, XIcon } from '../components/Icons';
 import ConfirmDialog from '../components/ConfirmDialog';
-import IconButton from '../components/IconButton';
-import Tooltip from '../components/Tooltip';
+import HomeEmptyState from '../components/home/HomeEmptyState';
+import HomeFab from '../components/home/HomeFab';
+import HomeHeader from '../components/home/HomeHeader';
 import HomeQuestionCard from '../components/home/HomeQuestionCard';
+import HomeRecallPanel from '../components/home/HomeRecallPanel';
 import { useHomeModel } from '../hooks/useHomeModel';
 
 const Home: React.FC = () => {
@@ -13,7 +12,7 @@ const Home: React.FC = () => {
     t,
     questions,
     hasNotes,
-    darkMatterCount,
+    wanderingPlanetCount,
     deleteTarget,
     mobileQuestionActionsId,
     editingQuestionId,
@@ -43,6 +42,11 @@ const Home: React.FC = () => {
     confirmDelete
   } = useHomeModel();
 
+  const handleExitRecall = () => {
+    setQuery('');
+    setIsRecallOpen(false);
+  };
+
   return (
     <div className="flex flex-col h-full relative">
       <ConfirmDialog
@@ -52,124 +56,35 @@ const Home: React.FC = () => {
         onCancel={() => setDeleteTarget(null)}
       />
 
-      <div className="mb-7 sm:mb-8">
-        <h1 className="page-title mb-2">
-          {t('living_questions')}
-          {hasQuestions && (
-            <span className="ml-2 text-muted-400 dark:text-muted-500 tabular-nums font-sans text-lg sm:text-xl font-normal">
-              {t('question_count_separator')} {questions.length}
-            </span>
-          )}
-        </h1>
-        <p className="page-subtitle">{t('problems_mind')}</p>
-      </div>
+      <HomeHeader
+        t={t}
+        hasQuestions={hasQuestions}
+        questionCount={questions.length}
+      />
 
       <div className="space-y-4 sm:space-y-5 pb-28 sm:pb-24">
-        <div className="mb-6">
-          <div className="flex flex-wrap gap-3">
-            {!isRecallOpen ? (
-              <button
-                type="button"
-                onClick={openRecall}
-                className="btn-pill btn-outline muted-label w-full sm:w-auto"
-                aria-label={t('recall_label')}
-              >
-                <SearchIcon className="w-4 h-4" />
-                <span>{t('recall_label')}</span>
-              </button>
-            ) : null}
-            {darkMatterCount > 0 && (
-              <Link
-                to="/dark-matter"
-                className="btn-pill btn-outline muted-label w-full sm:w-auto"
-              >
-                <span className="text-sm">🌑</span>
-                <span>{t('dark_matter')}</span>
-                <span className="ml-1 px-1.5 py-0.5 bg-line dark:bg-line-dark rounded-full text-micro">
-                  {darkMatterCount}
-                </span>
-              </Link>
-            )}
-          </div>
-          {isRecallOpen && (
-            <>
-              <label htmlFor="recall" className="muted-label">
-                {t('recall_label')}
-              </label>
-              <div className="mt-3 relative">
-                <SearchIcon className="w-4 h-4 text-muted-500 dark:text-muted-400 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" />
-                <input
-                  id="recall"
-                  type="text"
-                  value={query}
-                  onChange={(e) => setQuery(e.target.value)}
-                  onBlur={closeRecall}
-                  onKeyDown={(e) => {
-                    if (e.key === 'Escape') {
-                      setQuery('');
-                      setIsRecallOpen(false);
-                    }
-                  }}
-                  placeholder={t('recall_placeholder')}
-                  className="input-pill"
-                  aria-label={t('recall_label')}
-                  autoFocus
-                />
-                {isFiltering && (
-                  <IconButton
-                    label={t('clear_recall')}
-                    sizeClassName="h-10 w-10"
-                    onClick={() => setQuery('')}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-400 hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark"
-                  >
-                    <XIcon className="w-4 h-4" />
-                  </IconButton>
-                )}
-              </div>
-              <p className="mt-2 text-caption">{t('recall_hint')}</p>
-            </>
-          )}
-        </div>
+        <HomeRecallPanel
+          t={t}
+          wanderingPlanetCount={wanderingPlanetCount}
+          isRecallOpen={isRecallOpen}
+          query={query}
+          isFiltering={isFiltering}
+          onOpenRecall={openRecall}
+          onCloseRecall={closeRecall}
+          onQueryChange={setQuery}
+          onClearQuery={() => setQuery('')}
+          onExitRecall={handleExitRecall}
+        />
 
         {filteredQuestions.length === 0 ? (
-          <div className="text-center py-14 px-5 surface-empty shadow-[var(--shadow-elev-1)] dark:shadow-[var(--shadow-elev-1-dark)]">
-            {hasQuestions && isFiltering ? (
-              <>
-                <p className="text-ink dark:text-ink-dark font-serif mb-2 text-lg">
-                  {t('no_recall_results')}
-                </p>
-                <p className="text-body-sm-muted">
-                  {t('recall_hint')}
-                </p>
-              </>
-            ) : (
-              <>
-                {/* Empty-state illustration (suggestion #1) */}
-                <EmptyStateIllustration className="w-40 h-auto mx-auto mb-4 text-accent/50 dark:text-accent-dark/40" />
-                <p className="text-ink dark:text-ink-dark font-serif mb-2 text-lg">
-                  {hasNotes ? t('no_question_yet') : t('space_empty')}
-                </p>
-                <p className="text-body-sm-muted">
-                  {t('just_write')}
-                </p>
-                {/* Onboarding nudge for first-time users (suggestion #17) */}
-                {!hasNotes && !onboardingDismissed && (
-                  <div className="mt-6 mx-auto max-w-xs rounded-xl border border-accent/20 dark:border-accent-dark/20 bg-accent/5 dark:bg-accent-dark/5 px-4 py-3 animate-fade-in">
-                    <p className="text-body-sm text-ink dark:text-ink-dark mb-2">
-                      {t('empty_state_onboarding')}
-                    </p>
-                    <button
-                      type="button"
-                      onClick={dismissOnboarding}
-                      className="text-xs text-accent dark:text-accent-dark hover:underline cursor-pointer"
-                    >
-                      {t('empty_state_onboarding_dismiss')}
-                    </button>
-                  </div>
-                )}
-              </>
-            )}
-          </div>
+          <HomeEmptyState
+            t={t}
+            hasQuestions={hasQuestions}
+            isFiltering={isFiltering}
+            hasNotes={hasNotes}
+            onboardingDismissed={onboardingDismissed}
+            onDismissOnboarding={dismissOnboarding}
+          />
         ) : (
           filteredQuestions.map((question) => {
             const isMobileActionsOpen = mobileQuestionActionsId === question.id;
@@ -203,21 +118,7 @@ const Home: React.FC = () => {
         )}
       </div>
 
-      {/* Floating Action Button + keyboard hint */}
-      {fabContainer && createPortal(
-        <div className="fixed bottom-20 right-4 sm:bottom-24 sm:right-8 z-50 flex flex-col items-center gap-2">
-          <Tooltip content={t('keyboard_shortcut_write')}>
-            <Link
-              to="/write"
-              className="bg-action text-white w-14 h-14 rounded-full flex items-center justify-center shadow-xl hover:scale-105 transition-transform hover:bg-action-hover focus:outline-none focus:ring-4 focus:ring-action-ring dark:bg-action dark:hover:bg-action-hover-dark dark:focus:ring-action-ring/50"
-              aria-label={t('write_label')}
-            >
-              <PlusIcon className="w-6 h-6" />
-            </Link>
-          </Tooltip>
-        </div>,
-        fabContainer
-      )}
+      <HomeFab t={t} fabContainer={fabContainer} />
     </div>
   );
 };
diff --git a/views/QuestionDetail.tsx b/views/QuestionDetail.tsx
index 797f3ec..ced4210 100644
--- a/views/QuestionDetail.tsx
+++ b/views/QuestionDetail.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { EyeIcon, EyeOffIcon, ArrowDownIcon, CheckIcon, XIcon, LoadingSpinner } from '../components/Icons';
-import ActionIconButton from '../components/ActionIconButton';
-import ConfirmDialog from '../components/ConfirmDialog';
-import Tooltip from '../components/Tooltip';
-import QuestionDowngradeDialog from '../components/QuestionDowngradeDialog';
-import MoveToQuestionModal from '../components/MoveToQuestionModal';
-import QuestionDetailSection from '../components/questionDetail/QuestionDetailSection';
+import QuestionDetailDialogs from '../components/questionDetail/QuestionDetailDialogs';
+import QuestionDetailHeader from '../components/questionDetail/QuestionDetailHeader';
+import QuestionDetailSections from '../components/questionDetail/QuestionDetailSections';
 import QuestionDetailVisualization from '../components/questionDetail/QuestionDetailVisualization';
 import { useQuestionDetailModel } from '../hooks/useQuestionDetailModel';
 
@@ -35,6 +31,9 @@ const QuestionDetail: React.FC = () => {
     moveNoteId,
     moveTargetQuestionId,
     isMoving,
+    copyNoteId,
+    copyTargetQuestionId,
+    isCopying,
     downgradeOptions,
     claims,
     evidence,
@@ -51,14 +50,18 @@ const QuestionDetail: React.FC = () => {
     setMobileNoteActionsId,
     setMoveNoteId,
     setMoveTargetQuestionId,
+    setCopyNoteId,
+    setCopyTargetQuestionId,
     toggleSection,
     handleEdit,
     handleCopyNote,
     handleSaveEdit,
     handleCancelEdit,
     handleDelete,
+    openCopyToQuestion,
     openMoveToQuestion,
     handleConfirmMove,
+    handleConfirmCopy,
     getOrderedNotes,
     handleDragStart,
     handleDragEnter,
@@ -86,6 +89,7 @@ const QuestionDetail: React.FC = () => {
     handleSaveEdit,
     handleCancelEdit,
     handleDelete,
+    openCopyToQuestion,
     openMoveToQuestion,
     handleDragStart,
     handleDragEnter,
@@ -95,21 +99,19 @@ const QuestionDetail: React.FC = () => {
 
   return (
     <div>
-      <ConfirmDialog
-        isOpen={deleteTarget !== null}
-        message={t('confirm_delete_question_with_notes')}
-        onConfirm={confirmDelete}
-        onCancel={() => setDeleteTarget(null)}
-      />
-      <QuestionDowngradeDialog
-        isOpen={isDowngradeOpen}
+      <QuestionDetailDialogs
+        t={t}
+        deleteTarget={deleteTarget}
+        onConfirmDelete={confirmDelete}
+        onCancelDelete={() => setDeleteTarget(null)}
+        isDowngradeOpen={isDowngradeOpen}
         relatedCount={relatedNotes.length}
         selectedType={downgradeType}
         typeOptions={downgradeOptions}
         destination={downgradeDestination}
         relinkTargets={availableQuestions.map((note) => ({ id: note.id, title: note.content }))}
         relinkQuestionId={relinkQuestionId}
-        isWorking={isDowngrading}
+        isDowngrading={isDowngrading}
         onSelectType={setDowngradeType}
         onDestinationChange={(next) => {
           setDowngradeDestination(next);
@@ -118,126 +120,41 @@ const QuestionDetail: React.FC = () => {
           }
         }}
         onSelectRelinkQuestion={setRelinkQuestionId}
-        onConfirm={handleConfirmDowngrade}
-        onCancel={() => !isDowngrading && setIsDowngradeOpen(false)}
-        t={t}
-      />
-      <MoveToQuestionModal
-        isOpen={moveNoteId !== null}
-        isWorking={isMoving}
+        onConfirmDowngrade={handleConfirmDowngrade}
+        onCancelDowngrade={() => !isDowngrading && setIsDowngradeOpen(false)}
+        isMoveOpen={moveNoteId !== null}
+        isMoving={isMoving}
         questions={availableQuestions.map((q) => ({ id: q.id, title: q.content }))}
         selectedQuestionId={moveTargetQuestionId}
         onSelectQuestion={setMoveTargetQuestionId}
-        onConfirm={handleConfirmMove}
-        onCancel={() => setMoveNoteId(null)}
-        t={t}
+        onConfirmMove={handleConfirmMove}
+        onCancelMove={() => setMoveNoteId(null)}
+        isCopyOpen={copyNoteId !== null}
+        isCopying={isCopying}
+        copyQuestions={availableQuestions.map((q) => ({ id: q.id, title: q.content }))}
+        selectedCopyQuestionId={copyTargetQuestionId}
+        onSelectCopyQuestion={setCopyTargetQuestionId}
+        onConfirmCopy={handleConfirmCopy}
+        onCancelCopy={() => setCopyNoteId(null)}
       />
 
-      <div className="mb-10 sm:mb-12 section-divider pb-8">
-        <div className="flex justify-between items-start">
-          <span className="text-xs font-bold text-accent dark:text-accent-dark tracking-widest uppercase mb-3 block">{t('current_problem')}</span>
-          <div className="flex items-center gap-2">
-            <Tooltip content={visualizationOpen ? t('hide_visualization') : t('visualize')}>
-            <button
-              onClick={() => setVisualizationOpen((prev) => !prev)}
-              className="h-10 w-10 sm:h-auto sm:w-auto sm:px-3 sm:py-2 muted-label border-0 sm:border sm:border-line dark:sm:border-line-dark hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark sm:hover:border-line-muted dark:sm:hover:border-muted-600 btn-icon cursor-pointer"
-              aria-label={visualizationOpen ? t('hide_visualization') : t('visualize')}
-            >
-              <span className="sm:hidden">
-                {visualizationOpen ? <EyeOffIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
-              </span>
-              <span className="hidden sm:inline">
-                {visualizationOpen ? t('hide_visualization') : t('visualize')}
-              </span>
-            </button>
-            </Tooltip>
-            <Tooltip content={t('downgrade_question_action')}>
-            <button
-              onClick={openDowngrade}
-              disabled={isSavingEdit || editingId === question.id || isDowngrading}
-              className={`h-10 w-10 sm:h-auto sm:w-auto sm:px-3 sm:py-2 muted-label border-0 sm:border sm:border-line dark:sm:border-line-dark hover:text-ink dark:hover:text-ink-dark hover:bg-surface-hover dark:hover:bg-surface-hover-dark sm:hover:border-line-muted dark:sm:hover:border-muted-600 btn-icon ${
-                isSavingEdit || editingId === question.id || isDowngrading ? 'opacity-60 cursor-not-allowed' : 'cursor-pointer'
-              }`}
-              aria-label={t('downgrade_question_action')}
-            >
-              <span className="sm:hidden">
-                <ArrowDownIcon className="w-4 h-4" />
-              </span>
-              <span className="hidden sm:inline">
-                {t('downgrade_question_action')}
-              </span>
-            </button>
-            </Tooltip>
-            {editingId !== question.id && (
-              <>
-                <ActionIconButton
-                  action="edit"
-                  onClick={() => handleEdit(question)}
-                  disabled={isSavingEdit}
-                />
-                <ActionIconButton
-                  action="copy"
-                  onClick={() => handleCopyNote(question.content)}
-                />
-              </>
-            )}
-            <ActionIconButton
-              action="delete"
-              onClick={() => handleDelete(question.id, true)}
-            />
-          </div>
-        </div>
-        {editingId === question.id ? (
-          <div className="space-y-2">
-          <textarea
-            className="textarea-base"
-            value={editContent}
-            onChange={(e) => setEditContent(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Escape') {
-                e.preventDefault();
-                handleCancelEdit();
-              }
-              if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-                e.preventDefault();
-                void handleSaveEdit();
-              }
-            }}
-            rows={2}
-            autoFocus
-          />
-          <div className="flex gap-2">
-            <button
-              onClick={handleSaveEdit}
-              disabled={isSavingEdit || !editContent.trim()}
-              className={`flex items-center gap-1 px-3 py-1.5 text-sm bg-accent dark:bg-accent-dark text-white rounded-md hover:opacity-90 transition-opacity ${
-                isSavingEdit || !editContent.trim() ? 'opacity-60 cursor-not-allowed' : ''
-              }`}
-            >
-              {isSavingEdit ? <LoadingSpinner className="w-3.5 h-3.5 text-white" /> : <CheckIcon className="w-3.5 h-3.5" />}
-              {isSavingEdit ? t('saving') : t('save')}
-            </button>
-            <button
-              onClick={handleCancelEdit}
-              disabled={isSavingEdit}
-              className={`flex items-center gap-1 px-3 py-1.5 text-body-sm-muted hover:text-ink dark:hover:text-ink-dark transition-colors ${
-                isSavingEdit ? 'opacity-60 cursor-not-allowed' : ''
-              }`}
-            >
-              <XIcon className="w-3.5 h-3.5" />
-              {t('cancel')}
-            </button>
-          </div>
-        </div>
-      ) : (
-          <h1 className="page-title-lg">
-            {question.content}
-          </h1>
-        )}
-        <div className="mt-4 text-caption">
-          {t('initiated_on')} {new Date(question.createdAt).toLocaleDateString()}
-        </div>
-      </div>
+      <QuestionDetailHeader
+        t={t}
+        question={question}
+        visualizationOpen={visualizationOpen}
+        onToggleVisualization={() => setVisualizationOpen((prev) => !prev)}
+        onOpenDowngrade={openDowngrade}
+        isSavingEdit={isSavingEdit}
+        editingId={editingId}
+        isDowngrading={isDowngrading}
+        editContent={editContent}
+        onEditContentChange={setEditContent}
+        onSaveEdit={handleSaveEdit}
+        onCancelEdit={handleCancelEdit}
+        onEditQuestion={() => handleEdit(question)}
+        onCopyQuestion={() => handleCopyNote(question.content)}
+        onDeleteQuestion={() => handleDelete(question.id, true)}
+      />
 
       {visualizationOpen && (
         <QuestionDetailVisualization
@@ -254,54 +171,18 @@ const QuestionDetail: React.FC = () => {
       )}
 
       <div className="space-y-10">
-        {relatedNotes.length === 0 ? (
-          <div className="text-center py-10 opacity-60 text-subtle dark:text-subtle-dark">
-            <p className="text-body-sm-muted">{t('no_thoughts_here')}</p>
-          </div>
-        ) : (
-          <>
-            <QuestionDetailSection
-              sectionKey="claims"
-              title={t('section_claims')}
-              emptyText={t('no_claims')}
-              notes={claims}
-              orderedNotes={getOrderedNotes('claims', claims)}
-              isCollapsed={collapsedSections.claims ?? false}
-              onToggle={() => toggleSection('claims')}
-              noteProps={noteProps}
-            />
-            <QuestionDetailSection
-              sectionKey="evidence"
-              title={t('section_evidence')}
-              emptyText={t('no_evidence')}
-              notes={evidence}
-              orderedNotes={getOrderedNotes('evidence', evidence)}
-              isCollapsed={collapsedSections.evidence ?? false}
-              onToggle={() => toggleSection('evidence')}
-              noteProps={noteProps}
-            />
-            <QuestionDetailSection
-              sectionKey="triggers"
-              title={t('section_triggers')}
-              emptyText={t('no_triggers')}
-              notes={triggers}
-              orderedNotes={getOrderedNotes('triggers', triggers)}
-              isCollapsed={collapsedSections.triggers ?? false}
-              onToggle={() => toggleSection('triggers')}
-              noteProps={noteProps}
-            />
-            <QuestionDetailSection
-              sectionKey="other"
-              title={t('section_other')}
-              emptyText={t('no_other')}
-              notes={otherNotes}
-              orderedNotes={getOrderedNotes('other', otherNotes)}
-              isCollapsed={collapsedSections.other ?? false}
-              onToggle={() => toggleSection('other')}
-              noteProps={noteProps}
-            />
-          </>
-        )}
+        <QuestionDetailSections
+          t={t}
+          relatedCount={relatedNotes.length}
+          claims={claims}
+          evidence={evidence}
+          triggers={triggers}
+          otherNotes={otherNotes}
+          collapsedSections={collapsedSections}
+          toggleSection={toggleSection}
+          getOrderedNotes={getOrderedNotes}
+          noteProps={noteProps}
+        />
       </div>
 
       <div className="mt-16 sm:mt-20 flex justify-center">
diff --git a/views/DarkMatter.tsx b/views/WanderingPlanet.tsx
similarity index 84%
rename from views/DarkMatter.tsx
rename to views/WanderingPlanet.tsx
index 51ea66c..c3d235d 100644
--- a/views/DarkMatter.tsx
+++ b/views/WanderingPlanet.tsx
@@ -7,13 +7,13 @@ import TypeBadge from '../components/TypeBadge';
 import Tooltip from '../components/Tooltip';
 import QuestionSelectorModal from '../components/QuestionSelectorModal';
 import { formatTemplate } from '../utils/text';
-import { useDarkMatterModel } from '../hooks/useDarkMatterModel';
+import { useWanderingPlanetModel } from '../hooks/useWanderingPlanetModel';
 
-const DarkMatter: React.FC = () => {
+const WanderingPlanet: React.FC = () => {
   const {
     t,
-    darkMatter,
-    darkMatterCount,
+    wanderingPlanet,
+    wanderingPlanetCount,
     questions,
     linkTarget,
     editingId,
@@ -33,7 +33,7 @@ const DarkMatter: React.FC = () => {
     batchPromoteConfirm,
     sortOrder,
     noteById,
-    sortedDarkMatter,
+    sortedWanderingPlanet,
     confirmMessage,
     confirmLabel,
     shouldShowAiCard,
@@ -68,7 +68,7 @@ const DarkMatter: React.FC = () => {
     formatRelativeTime,
     getSuggestionReasoning,
     getSuggestionConfidenceLabel
-  } = useDarkMatterModel();
+  } = useWanderingPlanetModel();
 
   return (
     <div className="flex flex-col h-full relative">
@@ -97,8 +97,8 @@ const DarkMatter: React.FC = () => {
 
       <ConfirmDialog
         isOpen={batchPromoteConfirm}
-        message={formatTemplate(t('dark_matter_batch_promote_confirm'), { count: selectedIds.size })}
-        confirmLabel={t('dark_matter_batch_promote')}
+        message={formatTemplate(t('wandering_planet_batch_promote_confirm'), { count: selectedIds.size })}
+        confirmLabel={t('wandering_planet_batch_promote')}
         confirmTone="primary"
         onConfirm={handleBatchPromote}
         onCancel={() => setBatchPromoteConfirm(false)}
@@ -110,22 +110,22 @@ const DarkMatter: React.FC = () => {
           <div className="w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
             <span className="text-sm">🌑</span>
           </div>
-          <h1 className="page-title">{t('dark_matter')}</h1>
+          <h1 className="page-title">{t('wandering_planet')}</h1>
         </div>
-        <p className="page-subtitle">{t('dark_matter_desc')}</p>
-        {darkMatterCount > 0 && (
+        <p className="page-subtitle">{t('wandering_planet_desc')}</p>
+        {wanderingPlanetCount > 0 && (
           <div className="mt-2 flex items-center gap-3 flex-wrap">
             <p className="text-caption-upper">
-              {darkMatterCount} {t('dark_matter_count')}
+              {wanderingPlanetCount} {t('wandering_planet_count')}
             </p>
-            <Tooltip content={sortOrder === 'newest' ? t('dark_matter_sort_oldest') : t('dark_matter_sort_newest')}>
+            <Tooltip content={sortOrder === 'newest' ? t('wandering_planet_sort_oldest') : t('wandering_planet_sort_newest')}>
             <button
               onClick={toggleSortOrder}
               className="inline-flex items-center gap-1 text-xs text-subtle dark:text-subtle-dark hover:text-ink dark:hover:text-ink-dark transition-colors cursor-pointer"
-              aria-label={sortOrder === 'newest' ? t('dark_matter_sort_oldest') : t('dark_matter_sort_newest')}
+              aria-label={sortOrder === 'newest' ? t('wandering_planet_sort_oldest') : t('wandering_planet_sort_newest')}
             >
               {sortOrder === 'newest' ? <SortDescIcon className="w-3.5 h-3.5" /> : <SortAscIcon className="w-3.5 h-3.5" />}
-              <span>{sortOrder === 'newest' ? t('dark_matter_sort_newest') : t('dark_matter_sort_oldest')}</span>
+              <span>{sortOrder === 'newest' ? t('wandering_planet_sort_newest') : t('wandering_planet_sort_oldest')}</span>
             </button>
             </Tooltip>
             <button
@@ -136,29 +136,29 @@ const DarkMatter: React.FC = () => {
                   : 'border-line dark:border-line-dark text-subtle dark:text-subtle-dark hover:text-ink dark:hover:text-ink-dark hover:border-ink/30 dark:hover:border-ink-dark/30'
               }`}
             >
-              {isSelectMode ? t('dark_matter_select_done') : t('dark_matter_select')}
+              {isSelectMode ? t('wandering_planet_select_done') : t('wandering_planet_select')}
             </button>
-            {isSelectMode && sortedDarkMatter.length > 0 && (
+            {isSelectMode && sortedWanderingPlanet.length > 0 && (
               <button
                 onClick={toggleSelectAll}
                 className="text-xs text-subtle dark:text-subtle-dark hover:text-ink dark:hover:text-ink-dark transition-colors cursor-pointer"
               >
-                {selectedIds.size === sortedDarkMatter.length
-                  ? t('dark_matter_deselect_all')
-                  : t('dark_matter_select_all')}
+                {selectedIds.size === sortedWanderingPlanet.length
+                  ? t('wandering_planet_deselect_all')
+                  : t('wandering_planet_select_all')}
               </button>
             )}
           </div>
         )}
       </div>
 
-      {darkMatterCount > 0 && darkMatterCount < aiRevealThreshold && !isAiPanelOpen && (
+      {wanderingPlanetCount > 0 && wanderingPlanetCount < aiRevealThreshold && !isAiPanelOpen && (
         <div className="mb-4">
           <button
             onClick={() => setIsAiPanelOpen(true)}
             className="text-body-sm-muted hover:text-ink dark:hover:text-ink-dark transition-colors"
           >
-            {t('dark_matter_ai_action')}
+            {t('wandering_planet_ai_action')}
           </button>
         </div>
       )}
@@ -167,13 +167,13 @@ const DarkMatter: React.FC = () => {
         <div className="mb-6 surface-card p-4 sm:p-5">
           <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
             <div>
-              <p className="text-caption-upper">{t('dark_matter_ai_title')}</p>
-              <p className="text-body-sm-muted mt-1">{t('dark_matter_ai_desc')}</p>
+              <p className="text-caption-upper">{t('wandering_planet_ai_title')}</p>
+              <p className="text-body-sm-muted mt-1">{t('wandering_planet_ai_desc')}</p>
             </div>
             <button
               onClick={handleAnalyze}
-              disabled={isAnalyzing || darkMatterCount < 2}
-              className={`btn-pill ${(isAnalyzing || darkMatterCount < 2)
+              disabled={isAnalyzing || wanderingPlanetCount < 2}
+              className={`btn-pill ${(isAnalyzing || wanderingPlanetCount < 2)
                 ? 'bg-line dark:bg-surface-hover-dark text-muted-400 cursor-not-allowed'
                 : 'bg-action dark:bg-action text-white hover:bg-action-hover dark:hover:bg-action-hover-dark shadow-md'
               }`}
@@ -181,22 +181,22 @@ const DarkMatter: React.FC = () => {
               {isAnalyzing ? (
                 <>
                   <LoadingSpinner className="w-4 h-4 text-white" />
-                  <span>{t('dark_matter_ai_running')}</span>
+                  <span>{t('wandering_planet_ai_running')}</span>
                 </>
               ) : (
-                t('dark_matter_ai_action')
+                t('wandering_planet_ai_action')
               )}
             </button>
           </div>
           {hasAnalyzed && !isAnalyzing && suggestions.length === 0 && (
-            <p className="mt-4 text-body-sm-muted">{t('dark_matter_ai_empty')}</p>
+            <p className="mt-4 text-body-sm-muted">{t('wandering_planet_ai_empty')}</p>
           )}
         </div>
       )}
 
       {suggestions.length > 0 && (
         <div className="mb-6 space-y-3">
-          <p className="text-caption-upper">{t('dark_matter_ai_suggestions')}</p>
+          <p className="text-caption-upper">{t('wandering_planet_ai_suggestions')}</p>
           {suggestions.map((suggestion) => {
             const reasoning = getSuggestionReasoning(suggestion);
             return (
@@ -208,8 +208,8 @@ const DarkMatter: React.FC = () => {
                     </p>
                     <p className="text-body-sm-muted">
                       {suggestion.kind === 'new_question'
-                        ? t('dark_matter_ai_kind_new')
-                        : t('dark_matter_ai_kind_existing')}
+                        ? t('wandering_planet_ai_kind_new')
+                        : t('wandering_planet_ai_kind_existing')}
                     </p>
                   </div>
                   <span className="text-mini-up text-muted-500 dark:text-muted-400">
@@ -241,21 +241,21 @@ const DarkMatter: React.FC = () => {
                       onClick={() => requestApplySuggestion('create', suggestion)}
                       className="chip-outline hover:border-accent/30 dark:hover:border-accent-dark/30 hover:bg-accent/5 dark:hover:bg-accent-dark/5"
                     >
-                      {t('dark_matter_ai_action_create')}
+                      {t('wandering_planet_ai_action_create')}
                     </button>
                   ) : (
                     <button
                       onClick={() => requestApplySuggestion('link', suggestion)}
                       className="chip-outline hover:border-accent/30 dark:hover:border-accent-dark/30 hover:bg-accent/5 dark:hover:bg-accent-dark/5"
                     >
-                      {t('dark_matter_ai_action_link')}
+                      {t('wandering_planet_ai_action_link')}
                     </button>
                   )}
                   <button
                     onClick={() => dismissSuggestion(suggestion.id)}
                     className="chip-outline hover:border-line-muted dark:hover:border-muted-600 hover:bg-surface-hover dark:hover:bg-surface-hover-dark"
                   >
-                    {t('dark_matter_ai_action_dismiss')}
+                    {t('wandering_planet_ai_action_dismiss')}
                   </button>
                 </div>
               </div>
@@ -266,14 +266,14 @@ const DarkMatter: React.FC = () => {
 
       {/* Content */}
       <div className="space-y-4 pb-8">
-        {darkMatter.length === 0 && !isLoadingMore ? (
+        {wanderingPlanet.length === 0 && !isLoadingMore ? (
           <div className="text-center py-14 px-5 surface-empty shadow-[var(--shadow-elev-1)] dark:shadow-[var(--shadow-elev-1-dark)]">
             <SparklesIcon className="text-gray-500 dark:text-gray-400 w-6 h-6 mx-auto mb-2" />
-            <p className="text-body-sm-muted">{t('no_dark_matter')}</p>
+            <p className="text-body-sm-muted">{t('no_wandering_planet')}</p>
           </div>
         ) : (
           <>
-            {sortedDarkMatter.map((note) => {
+            {sortedWanderingPlanet.map((note) => {
               const isMobileActionsOpen = mobileNoteActionsId === note.id;
               const isSelected = selectedIds.has(note.id);
 
@@ -407,20 +407,20 @@ const DarkMatter: React.FC = () => {
       {isSelectMode && selectedIds.size > 0 && (
         <div className="sticky bottom-0 left-0 right-0 bg-surface dark:bg-surface-dark border-t border-line dark:border-line-dark px-4 py-3 flex items-center justify-between gap-3 z-10 shadow-[var(--shadow-elev-2)] dark:shadow-[var(--shadow-elev-2-dark)]">
           <span className="text-body-sm tabular-nums text-subtle dark:text-subtle-dark">
-            {formatTemplate(t('dark_matter_selected_count'), { count: selectedIds.size })}
+            {formatTemplate(t('wandering_planet_selected_count'), { count: selectedIds.size })}
           </span>
           <div className="flex gap-2">
             <button
               onClick={(e) => { e.stopPropagation(); handleBatchLink(); }}
               className="chip-outline hover:border-accent/30 dark:hover:border-accent-dark/30 hover:bg-accent/5 dark:hover:bg-accent-dark/5"
             >
-              {t('dark_matter_batch_link')}
+              {t('wandering_planet_batch_link')}
             </button>
             <button
               onClick={(e) => { e.stopPropagation(); setBatchPromoteConfirm(true); }}
               className="chip-outline hover:border-accent/30 dark:hover:border-accent-dark/30 hover:bg-accent/5 dark:hover:bg-accent-dark/5"
             >
-              {t('dark_matter_batch_promote')}
+              {t('wandering_planet_batch_promote')}
             </button>
           </div>
         </div>
@@ -429,4 +429,4 @@ const DarkMatter: React.FC = () => {
   );
 };
 
-export default DarkMatter;
+export default WanderingPlanet;
diff --git a/views/Write.tsx b/views/Write.tsx
index 4e94a24..6003e29 100644
--- a/views/Write.tsx
+++ b/views/Write.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { LoadingSpinner, EyeIcon, EyeOffIcon } from '../components/Icons';
-import IconButton from '../components/IconButton';
+import WriteEditor from '../components/write/WriteEditor';
+import WriteFooter from '../components/write/WriteFooter';
 import { useWriteModel } from '../hooks/useWriteModel';
 
 const Write: React.FC = () => {
@@ -21,81 +21,32 @@ const Write: React.FC = () => {
     textareaRef
   } = useWriteModel();
 
+  const canSave = Boolean(content.trim()) && !isProcessing;
+
   return (
     <div className="flex-1 flex flex-col">
-      <div className="flex-1 flex flex-col pt-2">
-        {showPreview ? (
-          <div
-            className="w-full text-lg sm:text-xl leading-relaxed text-ink dark:text-ink-dark font-serif prose-preview"
-            dangerouslySetInnerHTML={{ __html: previewHtml }}
-          />
-        ) : (
-          <textarea
-            ref={textareaRef}
-            className="w-full bg-transparent text-lg sm:text-xl leading-relaxed text-ink dark:text-ink-dark resize-none focus:outline-none placeholder:text-muted-500 dark:placeholder:text-muted-500 font-serif"
-            placeholder={t('write_placeholder')}
-            value={content}
-            onChange={(e) => {
-              setContent(e.target.value);
-            }}
-            autoFocus
-            disabled={isProcessing}
-          />
-        )}
-      </div>
-
-      {/* Word/char counter + preview toggle */}
-      <div className="flex items-center justify-between mt-2 min-h-6">
-        <span
-          className={`text-micro tabular-nums muted-label transition-opacity duration-300 ${
-            showCounter && !isProcessing ? 'opacity-100' : 'opacity-0'
-          }`}
-          aria-hidden={!showCounter}
-        >
-          {t('write_char_count').replace('{count}', String(charCount))}
-          {' / '}
-          {t('write_word_count').replace('{count}', String(wordCount))}
-        </span>
-
-        {showPreviewToggle && !isProcessing && (
-          <IconButton
-            label={showPreview ? t('write_edit') : t('write_preview')}
-            onClick={handleTogglePreview}
-            sizeClassName="h-7 w-7"
-            className="text-muted-400 dark:text-muted-500 hover:text-accent dark:hover:text-accent-dark active:scale-95"
-          >
-            {showPreview ? <EyeOffIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
-          </IconButton>
-        )}
-      </div>
-
-      <div className="min-h-[4.5rem] flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-t border-line-soft dark:border-line-dark mt-2 pt-4">
-        <div className="text-body-sm-muted flex items-center gap-2 w-full sm:w-auto">
-           {isProcessing && (
-             <>
-               <LoadingSpinner className="w-4 h-4 text-accent dark:text-accent-dark" />
-               <span className="animate-pulse">{t('absorbing')}</span>
-             </>
-           )}
-           {castSuccess && !isProcessing && (
-             <span className="text-accent dark:text-accent-dark font-medium animate-cast-success">
-               {t('cast_success')}
-             </span>
-           )}
-        </div>
-
-        <button
-          onClick={handleSave}
-          disabled={!content.trim() || isProcessing}
-          className={`w-full sm:w-auto px-6 py-3 min-h-11 rounded-full font-medium transition-all ${
-            content.trim() && !isProcessing
-              ? 'bg-action dark:bg-action text-white hover:bg-action-hover dark:hover:bg-action-hover-dark shadow-[var(--shadow-elev-2)] dark:shadow-[var(--shadow-elev-2-dark)]'
-              : 'bg-line dark:bg-surface-hover-dark text-muted-400 dark:text-muted-500 cursor-not-allowed'
-          }`}
-        >
-          {isProcessing ? t('saving') : t('cast')}
-        </button>
-      </div>
+      <WriteEditor
+        t={t}
+        content={content}
+        previewHtml={previewHtml}
+        showPreview={showPreview}
+        isProcessing={isProcessing}
+        onContentChange={setContent}
+        textareaRef={textareaRef}
+      />
+      <WriteFooter
+        t={t}
+        charCount={charCount}
+        wordCount={wordCount}
+        showCounter={showCounter}
+        isProcessing={isProcessing}
+        showPreviewToggle={showPreviewToggle}
+        showPreview={showPreview}
+        onTogglePreview={handleTogglePreview}
+        castSuccess={castSuccess}
+        canSave={canSave}
+        onSave={handleSave}
+      />
     </div>
   );
 };
diff --git a/worker.ts b/worker.ts
index 19c060c..53cba85 100644
--- a/worker.ts
+++ b/worker.ts
@@ -1,11 +1,11 @@
 import type { Env } from './worker/types';
 import { handleAnalyze } from './worker/handlers/analyze';
-import { handleDarkMatterAnalyze } from './worker/handlers/darkMatter';
+import { handleWanderingPlanetAnalyze } from './worker/handlers/wanderingPlanet';
 
-export { normalizeDarkMatterResult, normalizeResult } from './worker/normalize';
+export { normalizeWanderingPlanetResult, normalizeResult } from './worker/normalize';
 
 export default {
-  async fetch(request: Request, env: Env): Promise<Response> {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
     const url = new URL(request.url);
 
     if (url.pathname === '/api/analyze') {
@@ -18,10 +18,10 @@ export default {
           headers: { 'Content-Type': 'application/json' }
         });
       }
-      return handleAnalyze(request, env);
+      return handleAnalyze(request, env, ctx);
     }
 
-    if (url.pathname === '/api/dark-matter/analyze') {
+    if (url.pathname === '/api/wandering-planet/analyze') {
       if (request.method === 'OPTIONS') {
         return new Response(null, { status: 204 });
       }
@@ -31,7 +31,7 @@ export default {
           headers: { 'Content-Type': 'application/json' }
         });
       }
-      return handleDarkMatterAnalyze(request, env);
+      return handleWanderingPlanetAnalyze(request, env, ctx);
     }
 
     if (env.ASSETS) {
diff --git a/worker/README.md b/worker/README.md
index 87fc7b5..a539392 100644
--- a/worker/README.md
+++ b/worker/README.md
@@ -19,8 +19,8 @@ This folder contains the Cloudflare Worker server logic, split into focused modu
 ## Handlers
 
 `worker/handlers/analyze.ts` handles `POST /api/analyze`.
-`worker/handlers/darkMatter.ts` handles `POST /api/dark-matter/analyze`.
+`worker/handlers/wanderingPlanet.ts` handles `POST /api/wandering-planet/analyze`.
 
 ## Testing
 
-Unit tests import `normalizeResult` and `normalizeDarkMatterResult` from `worker.ts`, which re-exports them from `worker/normalize.ts`.
+Unit tests import `normalizeResult` and `normalizeWanderingPlanetResult` from `worker.ts`, which re-exports them from `worker/normalize.ts`.
diff --git a/worker/cache.ts b/worker/cache.ts
index df8a736..8abb0f1 100644
--- a/worker/cache.ts
+++ b/worker/cache.ts
@@ -1,29 +1,36 @@
 import { hashString } from './utils';
 
-export function getAnalyzeCacheKey(text: string, language: string, questionIds: string[]): string {
-  const sortedIds = [...questionIds].sort().join(',');
-  const raw = `analyze:v2:${language}:${sortedIds}:${text}`;
-  return raw;
+export function getAnalyzeCacheKey(
+  text: string,
+  language: string,
+  existingQuestions: Array<{ id: string; content: string }>
+): string {
+  const sortedQuestions = [...existingQuestions].sort((a, b) => a.id.localeCompare(b.id));
+  const questionDigest = sortedQuestions
+    .map((q) => `${q.id}:${q.content.length}:${hashString(q.content)}`)
+    .join('|');
+  const raw = `analyze:v3:${language}:text:${text.length}:${hashString(text)}:questions:${questionDigest}`;
+  return `analyze:${hashString(raw)}`;
 }
 
-export function getDarkMatterCacheKey(
+export function getWanderingPlanetCacheKey(
   language: string,
   maxClusters: number,
-  notes: Array<{ id: string; content: string }>,
+  notes: Array<{ id: string; content: string; type?: string }>,
   existingQuestions: Array<{ id: string; content: string }>
 ): string {
   const sortedNotes = [...notes].sort((a, b) => a.id.localeCompare(b.id));
   const sortedQuestions = [...existingQuestions].sort((a, b) => a.id.localeCompare(b.id));
 
   const noteDigest = sortedNotes
-    .map((note) => `${note.id}:${note.content.length}:${hashString(note.content)}`)
+    .map((note) => `${note.id}:${note.content.length}:${hashString(note.content)}:${note.type ?? ''}`)
     .join('|');
   const questionDigest = sortedQuestions
     .map((q) => `${q.id}:${q.content.length}:${hashString(q.content)}`)
     .join('|');
 
-  const raw = `dark-matter:v2:${language}:${maxClusters}:notes:${noteDigest}:questions:${questionDigest}`;
-  return `dm:${hashString(raw)}`;
+  const raw = `wandering-planet:v3:${language}:${maxClusters}:notes:${noteDigest}:questions:${questionDigest}`;
+  return `wp:${hashString(raw)}`;
 }
 
 export function getCacheClient(): Cache {
@@ -42,9 +49,21 @@ export function withCacheHitResponse(cachedResponse: Response): Response {
   return response;
 }
 
-export function storeInCache(cache: Cache, cacheRequest: Request, response: Response): void {
+export function storeInCache(
+  cache: Cache,
+  cacheRequest: Request,
+  response: Response,
+  ctx?: ExecutionContext
+): void {
   const responseToCache = response.clone();
-  cache.put(cacheRequest, responseToCache).catch(() => {
-    // Ignore cache put errors
-  });
+  const putPromise = cache.put(cacheRequest, responseToCache);
+  if (ctx?.waitUntil) {
+    ctx.waitUntil(putPromise.catch(() => {
+      // Ignore cache put errors
+    }));
+  } else {
+    putPromise.catch(() => {
+      // Ignore cache put errors
+    });
+  }
 }
diff --git a/worker/constants.ts b/worker/constants.ts
index 92141e5..b19bb7f 100644
--- a/worker/constants.ts
+++ b/worker/constants.ts
@@ -2,4 +2,4 @@ export const BIGMODEL_BASE_URL = 'https://open.bigmodel.cn/api/paas/v4/chat/comp
 export const DEFAULT_BIGMODEL_MODEL = 'glm-4.7-flashx';
 export const API_TIMEOUT_MS = 45000; // 45 second timeout for AI requests
 export const CACHE_TTL_SECONDS = 3600; // Cache responses for 1 hour
-export const DARK_MATTER_MAX_CLUSTERS = 6;
+export const WANDERING_PLANET_MAX_CLUSTERS = 6;
diff --git a/worker/handlers/analyze.ts b/worker/handlers/analyze.ts
index 9b6df42..bbb87fa 100644
--- a/worker/handlers/analyze.ts
+++ b/worker/handlers/analyze.ts
@@ -17,7 +17,11 @@ import { buildPrompt, heuristicClassify } from '../prompts';
 import type { AnalyzeRequest, BigModelResponse, Env } from '../types';
 import { asRecord, jsonResponse, safeParseJson } from '../utils';
 
-export async function handleAnalyze(request: Request, env: Env): Promise<Response> {
+export async function handleAnalyze(
+  request: Request,
+  env: Env,
+  ctx?: ExecutionContext
+): Promise<Response> {
   if (!env.BIGMODEL_API_KEY) {
     return jsonResponse({ error: 'BIGMODEL_API_KEY is not configured' }, 500);
   }
@@ -35,10 +39,17 @@ export async function handleAnalyze(request: Request, env: Env): Promise<Respons
   }
 
   const language = body.language === 'zh' ? 'zh' : 'en';
-  const existingQuestions = Array.isArray(body.existingQuestions) ? body.existingQuestions : [];
+  const existingQuestionsRaw = Array.isArray(body.existingQuestions) ? body.existingQuestions : [];
+  const existingQuestions = existingQuestionsRaw
+    .map((q) => {
+      const id = typeof q?.id === 'string' ? q.id.trim() : '';
+      const content = typeof q?.content === 'string' ? q.content.trim() : '';
+      return id && content ? { id, content } : null;
+    })
+    .filter((q): q is { id: string; content: string } => Boolean(q));
   const questionIds = existingQuestions.map((q) => q.id);
 
-  const cacheKey = getAnalyzeCacheKey(text, language, questionIds);
+  const cacheKey = getAnalyzeCacheKey(text, language, existingQuestions);
   const cache = getCacheClient();
   const cacheRequest = buildCacheRequest(request, cacheKey);
 
@@ -93,7 +104,7 @@ export async function handleAnalyze(request: Request, env: Env): Promise<Respons
     jsonRes.headers.set('X-Cache', 'MISS');
     jsonRes.headers.set('Cache-Control', `public, max-age=${CACHE_TTL_SECONDS}`);
 
-    storeInCache(cache, cacheRequest, jsonRes);
+    storeInCache(cache, cacheRequest, jsonRes, ctx);
 
     return jsonRes;
   } catch {
diff --git a/worker/handlers/darkMatter.ts b/worker/handlers/wanderingPlanet.ts
similarity index 83%
rename from worker/handlers/darkMatter.ts
rename to worker/handlers/wanderingPlanet.ts
index ce61a7c..b84f1d2 100644
--- a/worker/handlers/darkMatter.ts
+++ b/worker/handlers/wanderingPlanet.ts
@@ -3,27 +3,31 @@ import {
   API_TIMEOUT_MS,
   BIGMODEL_BASE_URL,
   CACHE_TTL_SECONDS,
-  DARK_MATTER_MAX_CLUSTERS,
+  WANDERING_PLANET_MAX_CLUSTERS,
   DEFAULT_BIGMODEL_MODEL
 } from '../constants';
 import {
   buildCacheRequest,
   getCacheClient,
-  getDarkMatterCacheKey,
+  getWanderingPlanetCacheKey,
   storeInCache,
   withCacheHitResponse
 } from '../cache';
-import { normalizeDarkMatterResult } from '../normalize';
-import { buildDarkMatterPrompt } from '../prompts';
-import type { BigModelResponse, DarkMatterAnalyzeRequest, Env } from '../types';
+import { normalizeWanderingPlanetResult } from '../normalize';
+import { buildWanderingPlanetPrompt } from '../prompts';
+import type { BigModelResponse, WanderingPlanetAnalyzeRequest, Env } from '../types';
 import { asRecord, jsonResponse, safeParseJson } from '../utils';
 
-export async function handleDarkMatterAnalyze(request: Request, env: Env): Promise<Response> {
+export async function handleWanderingPlanetAnalyze(
+  request: Request,
+  env: Env,
+  ctx?: ExecutionContext
+): Promise<Response> {
   if (!env.BIGMODEL_API_KEY) {
     return jsonResponse({ error: 'BIGMODEL_API_KEY is not configured' }, 500);
   }
 
-  let body: DarkMatterAnalyzeRequest;
+  let body: WanderingPlanetAnalyzeRequest;
   try {
     body = await request.json();
   } catch {
@@ -32,7 +36,7 @@ export async function handleDarkMatterAnalyze(request: Request, env: Env): Promi
 
   const language = body.language === 'zh' ? 'zh' : 'en';
   const maxClustersRaw = typeof body.maxClusters === 'number' ? body.maxClusters : 5;
-  const maxClusters = Math.max(1, Math.min(DARK_MATTER_MAX_CLUSTERS, Math.round(maxClustersRaw)));
+  const maxClusters = Math.max(1, Math.min(WANDERING_PLANET_MAX_CLUSTERS, Math.round(maxClustersRaw)));
 
   const rawNotes = Array.isArray(body.notes) ? body.notes : [];
   const noteMap = new Map<string, { id: string; content: string; type?: string; createdAt?: number }>();
@@ -66,7 +70,7 @@ export async function handleDarkMatterAnalyze(request: Request, env: Env): Promi
     }
   }
 
-  const cacheKey = getDarkMatterCacheKey(
+  const cacheKey = getWanderingPlanetCacheKey(
     language,
     maxClusters,
     notes,
@@ -82,7 +86,7 @@ export async function handleDarkMatterAnalyze(request: Request, env: Env): Promi
     return withCacheHitResponse(cachedResponse);
   }
 
-  const prompt = buildDarkMatterPrompt(notes, existingQuestions, language, maxClusters);
+  const prompt = buildWanderingPlanetPrompt(notes, existingQuestions, language, maxClusters);
   const model = env.BIGMODEL_MODEL || env.MODEL_ID || DEFAULT_BIGMODEL_MODEL;
   const baseUrl = env.BIGMODEL_BASE_URL || BIGMODEL_BASE_URL;
   const validNoteIds = new Set(notes.map((note) => note.id));
@@ -121,7 +125,7 @@ export async function handleDarkMatterAnalyze(request: Request, env: Env): Promi
       return jsonResponse({ suggestions: [] }, 200);
     }
 
-    const normalized = normalizeDarkMatterResult(
+    const normalized = normalizeWanderingPlanetResult(
       parsedRecord,
       validNoteIds,
       validQuestionIds,
@@ -133,7 +137,7 @@ export async function handleDarkMatterAnalyze(request: Request, env: Env): Promi
     jsonRes.headers.set('X-Cache', 'MISS');
     jsonRes.headers.set('Cache-Control', `public, max-age=${CACHE_TTL_SECONDS}`);
 
-    storeInCache(cache, cacheRequest, jsonRes);
+    storeInCache(cache, cacheRequest, jsonRes, ctx);
 
     return jsonRes;
   } catch {
diff --git a/worker/normalize.ts b/worker/normalize.ts
index 895c3e8..0c4127d 100644
--- a/worker/normalize.ts
+++ b/worker/normalize.ts
@@ -1,18 +1,18 @@
-import { normalizeAnalysisResult, normalizeDarkMatterResult as normalizeDarkMatterResultShared } from '../shared/aiNormalize';
-import type { AnalyzeResponse, DarkMatterAnalyzeResponse } from './types';
+import { normalizeAnalysisResult, normalizeWanderingPlanetResult as normalizeWanderingPlanetResultShared } from '../shared/aiNormalize';
+import type { AnalyzeResponse, WanderingPlanetAnalyzeResponse } from './types';
 
 export function normalizeResult(input: unknown, validQuestionIds: Set<string>): AnalyzeResponse {
   return normalizeAnalysisResult(input, validQuestionIds);
 }
 
-export function normalizeDarkMatterResult(
+export function normalizeWanderingPlanetResult(
   input: unknown,
   validNoteIds: Set<string>,
   validQuestionIds: Set<string>,
   questionTitleById: Map<string, string>,
   maxClusters: number
-): DarkMatterAnalyzeResponse {
-  return normalizeDarkMatterResultShared(
+): WanderingPlanetAnalyzeResponse {
+  return normalizeWanderingPlanetResultShared(
     input,
     validNoteIds,
     validQuestionIds,
diff --git a/worker/prompts.ts b/worker/prompts.ts
index b9a891d..c3c9dc2 100644
--- a/worker/prompts.ts
+++ b/worker/prompts.ts
@@ -65,7 +65,7 @@ Reasoning should be phrased as a suggestion so the user can decide whether to ac
 `.trim();
 }
 
-export function buildDarkMatterPrompt(
+export function buildWanderingPlanetPrompt(
   notes: Array<{ id: string; content: string; type?: string; createdAt?: number }>,
   existingQuestions: Array<{ id: string; content: string }>,
   language: Language,
@@ -89,7 +89,7 @@ export function buildDarkMatterPrompt(
       : "Return 'title' and 'reasoning' in English.";
 
   return `
-You are a cognitive assistant. These are "dark matter" notes: they are unlinked fragments.
+You are a cognitive assistant. These are "Wandering Planet" notes: they are unlinked fragments.
 
 Your task: suggest gentle groupings only when semantic overlap is clear. If there are no strong groupings, return an empty list.
 
@@ -102,7 +102,7 @@ Constraints:
 - Use only provided note IDs and question IDs.
 - If you're not confident, do not suggest a grouping.
 
-Dark Matter Notes:
+Wandering Planet Notes:
 ${noteContext}
 
 Existing Questions:
diff --git a/worker/types.ts b/worker/types.ts
index 91abe6f..253d716 100644
--- a/worker/types.ts
+++ b/worker/types.ts
@@ -1,4 +1,4 @@
-import { ConfidenceLabel, DarkMatterSuggestionKind } from '../shared/domain';
+import { ConfidenceLabel, WanderingPlanetSuggestionKind } from '../shared/domain';
 
 export interface Env {
   BIGMODEL_API_KEY: string;
@@ -24,7 +24,7 @@ export type AnalyzeResponse = {
   reasoning: string;
 };
 
-export type DarkMatterAnalyzeRequest = {
+export type WanderingPlanetAnalyzeRequest = {
   language?: Language;
   notes?: Array<{
     id: string;
@@ -36,9 +36,9 @@ export type DarkMatterAnalyzeRequest = {
   maxClusters?: number;
 };
 
-export type DarkMatterSuggestion = {
+export type WanderingPlanetSuggestion = {
   id: string;
-  kind: DarkMatterSuggestionKind;
+  kind: WanderingPlanetSuggestionKind;
   title: string;
   existingQuestionId?: string;
   noteIds: string[];
@@ -46,8 +46,8 @@ export type DarkMatterSuggestion = {
   reasoning: string;
 };
 
-export type DarkMatterAnalyzeResponse = {
-  suggestions: DarkMatterSuggestion[];
+export type WanderingPlanetAnalyzeResponse = {
+  suggestions: WanderingPlanetSuggestion[];
 };
 
 export interface BigModelResponse {