feat(ui): 添加 /raw 模式支持及相关组件和逻辑

- 新增 RawMode 功能，包括 Normal、Lite 和 Raw scrollback 模式
- App 组件中集成 RawMode 上下文及切换逻辑，支持在 Raw 模式下直接向 stdout 渲染消息
- 增加 RawModeExitPrompt 组件，支持按 ESC 退出原始模式
- 新增 RawModelDropdown 组件，提供原始模式选择下拉菜单
- 在 PromptInput 中集成原始模式选择交互及状态管理
- 调整消息视图实现，拆分 MessageView 到 compoments 目录，支持根据 RawMode 呈现不同内容
- 新建 AppContainer 组件，包装 App 并提供版本上下文和 RawModeProvider
- 修改 SlashCommand 体系，支持内置 /raw 命令及对应测试覆盖
- 更新 cli 入口，使用 AppContainer 替换直接渲染 App，传递版本信息
- 移除旧 MessageView 文件，重构消息渲染逻辑
- 优化 SlashCommandMenu 显示，支持命令参数提示显示
- 更新相关测试，支持原始模式功能验证

Author: hqwlkj

src/cli.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { render } from "ink";
-import { App } from "./ui";
 import { setShellIfWindows } from "./common/shell-utils";
 import { checkForNpmUpdate, promptForPendingUpdate, type PackageInfo } from "./updateCheck";
+import AppContainer from "./ui/AppContainer";
 
 const args = process.argv.slice(2);
 const packageInfo = readPackageInfo();
@@ -81,7 +81,7 @@ async function main(): Promise<void> {
     const appInitialPrompt = initialPrompt;
     initialPrompt = undefined;
     const inkInstance = render(
-      <App
+      <AppContainer
         projectRoot={projectRoot}
         version={packageInfo.version}
         initialPrompt={appInitialPrompt}

src/tests/messageView.test.ts

@@ -1,7 +1,8 @@
 import { test } from "node:test";
 import assert from "node:assert/strict";
-import { MessageView, parseDiffPreview } from "../ui";
-import type { SessionMessage } from "../session";
+import { parseDiffPreview } from "../ui";
+import { buildThinkingSummary } from "../ui/compoments/MessageView/utils";
+import { RawMode } from "../ui/contexts";
 
 test("parseDiffPreview removes headers and classifies lines", () => {
   const lines = parseDiffPreview(
@@ -25,45 +26,29 @@ test("parseDiffPreview keeps nonstandard context lines", () => {
 
 test("MessageView summarizes thinking content across lines", () => {
   assert.equal(
-    getThinkingParams({
-      content: "Plan:\n\nInspect the code   and update tests",
-    }),
+    buildThinkingSummary("Plan:\n\nInspect the code   and update tests", null, RawMode.Lite),
     "Plan: Inspect the code and update tests"
   );
 });
 
-test("MessageView removes a trailing colon from thinking summaries", () => {
-  assert.equal(getThinkingParams({ content: "Planning:" }), "Planning");
+test("MessageView removes a trailing colon from thinking summary", () => {
+  assert.equal(buildThinkingSummary("Planning:", null, RawMode.Lite), "Planning");
 });
 
-test("MessageView falls back to a reasoning placeholder for hidden reasoning content", () => {
+test("MessageView falls back to a reasoning placeholder for hidden reasoning content in Lite mode", () => {
   assert.equal(
-    getThinkingParams({
-      content: "",
-      messageParams: { reasoning_content: "hidden chain of thought" },
-    }),
+    buildThinkingSummary("", { reasoning_content: "hidden chain of thought" }, RawMode.Lite),
     "(reasoning...)"
   );
 });
 
-function getThinkingParams(overrides: Partial<SessionMessage>): string {
-  const view = MessageView({ message: buildAssistantMessage(overrides) }) as any;
-  return view.props.children.props.params;
-}
-
-function buildAssistantMessage(overrides: Partial<SessionMessage>): SessionMessage {
-  return {
-    id: "message-1",
-    sessionId: "session-1",
-    role: "assistant",
-    content: "",
-    contentParams: null,
-    messageParams: null,
-    compacted: false,
-    visible: true,
-    createTime: "2026-01-01T00:00:00.000Z",
-    updateTime: "2026-01-01T00:00:00.000Z",
-    meta: { asThinking: true },
-    ...overrides,
-  };
-}
+test("MessageView shows full reasoning content in Normal/Raw mode", () => {
+  assert.equal(
+    buildThinkingSummary("", { reasoning_content: "hidden chain of thought" }, RawMode.None),
+    "hidden chain of thought"
+  );
+  assert.equal(
+    buildThinkingSummary("", { reasoning_content: "hidden chain of thought" }, RawMode.Raw),
+    "hidden chain of thought"
+  );
+});

src/tests/slashCommands.test.ts

@@ -19,7 +19,7 @@ test("buildSlashCommands prefixes skills before built-ins", () => {
   assert.equal(items[0].kind, "skill");
   assert.equal(items[0].name, "skill-writer");
   const builtinNames = items.filter((i) => i.kind !== "skill").map((i) => i.name);
-  assert.deepEqual(builtinNames, ["skills", "model", "new", "init", "resume", "continue", "mcp", "exit"]);
+  assert.deepEqual(builtinNames, ["skills", "model", "new", "init", "resume", "continue", "mcp", "raw", "exit"]);
 });
 
 test("filterSlashCommands matches partial prefixes", () => {
@@ -80,6 +80,13 @@ test("findExactSlashCommand returns built-in /model", () => {
   assert.equal(item?.kind, "model");
 });
 
+test("findExactSlashCommand returns built-in /raw", () => {
+  const items = buildSlashCommands(skills);
+  const item = findExactSlashCommand(items, "/raw");
+  assert.ok(item);
+  assert.equal(item?.kind, "raw");
+});
+
 test("findExactSlashCommand returns the matching skill", () => {
   const items = buildSlashCommands(skills);
   const item = findExactSlashCommand(items, "/code-review");

src/ui/App.tsx

@@ -6,24 +6,24 @@ import * as os from "os";
 import * as path from "path";
 import OpenAI from "openai";
 import {
-  SessionManager,
   type LlmStreamProgress,
   type MessageMeta,
   type SessionEntry,
+  SessionManager,
   type SessionMessage,
   type SessionStatus,
   type SkillInfo,
   type UserPromptContent,
 } from "../session";
 import {
   applyModelConfigSelection,
-  resolveSettingsSources,
   type DeepcodingSettings,
   type ModelConfigSelection,
   type ResolvedDeepcodingSettings,
+  resolveSettingsSources,
 } from "../settings";
 import { PromptInput, type PromptSubmission } from "./PromptInput";
-import { MessageView } from "./MessageView";
+import { MessageView, RawModeExitPrompt } from "./compoments";
 import { SessionList } from "./SessionList";
 import { buildLoadingText } from "./loadingText";
 import { findExpandedThinkingId } from "./thinkingState";
@@ -32,11 +32,13 @@ import { AskUserQuestionPrompt } from "./AskUserQuestionPrompt";
 import { McpStatusList } from "./McpStatusList";
 import { ProcessStdoutView } from "./ProcessStdoutView";
 import {
+  type AskUserQuestionAnswers,
   findPendingAskUserQuestion,
   formatAskUserQuestionAnswers,
-  type AskUserQuestionAnswers,
 } from "./askUserQuestion";
 import { buildExitSummaryText } from "./exitSummary";
+import { RawMode, useRawModeContext } from "./contexts";
+import { renderMessageToStdout } from "./compoments/MessageView/utils";
 
 const DEFAULT_MODEL = "deepseek-v4-pro";
 const DEFAULT_BASE_URL = "https://api.deepseek.com";
@@ -45,12 +47,11 @@ type View = "chat" | "session-list" | "mcp-status";
 
 type AppProps = {
   projectRoot: string;
-  version?: string;
   initialPrompt?: string;
   onRestart?: () => void;
 };
 
-export function App({ projectRoot, version = "", initialPrompt, onRestart }: AppProps): React.ReactElement {
+export function App({ projectRoot, initialPrompt, onRestart }: AppProps): React.ReactElement {
   const { exit } = useApp();
   const { stdout, write } = useStdout();
   const { columns } = useWindowSize();
@@ -75,6 +76,10 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
   const [showProcessStdout, setShowProcessStdout] = useState(false);
   const processStdoutRef = useRef<Map<number, string>>(new Map());
 
+  const { mode, setMode } = useRawModeContext();
+  const rawModeRef = useRef<RawMode>(mode);
+  rawModeRef.current = mode;
+
   const messagesRef = useRef<SessionMessage[]>([]);
   messagesRef.current = messages;
 
@@ -86,6 +91,10 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
       renderMarkdown: (text) => text,
       onAssistantMessage: (message: SessionMessage) => {
         setMessages((prev) => [...prev, message]);
+        if (rawModeRef.current === RawMode.Raw) {
+          process.stdout.write("\n");
+          process.stdout.write(renderMessageToStdout(message, rawModeRef.current) + "\n\n");
+        }
       },
       onSessionEntryUpdated: (entry) => {
         setStatusLine(buildStatusLine(entry));
@@ -362,6 +371,39 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
     [sessionManager, refreshSkills]
   );
 
+  const handleRawModeChange = useCallback(
+    (nextMode: string) => {
+      const activeSessionId = sessionManager.getActiveSessionId();
+      if (!activeSessionId) {
+        return;
+      }
+
+      setMode(nextMode as RawMode);
+
+      // Clear screen to remove stale formatted text.
+      process.stdout.write("\u001B[2J\u001B[3J\u001B[H");
+
+      setTimeout(() => {
+        if (nextMode === RawMode.Raw) {
+          // Write all messages directly to stdout for raw scrollback mode.
+          const allMessages = loadVisibleMessages(sessionManager, activeSessionId);
+          for (const msg of allMessages) {
+            process.stdout.write("\n");
+            process.stdout.write(renderMessageToStdout(msg, nextMode) + "\n\n");
+          }
+          if (allMessages.length > 0) {
+            process.stdout.write("\n\n");
+            process.stdout.write(chalk.dim("Press ESC to exit raw mode"));
+          }
+        } else {
+          // Switch to chat view to render messages.
+          handleSelectSession(activeSessionId);
+        }
+      }, 200);
+    },
+    [handleSelectSession, sessionManager, setMode]
+  );
+
   const [stableColumns, setStableColumns] = useState(columns);
   useEffect(() => {
     const timer = setTimeout(() => setStableColumns(columns), 100);
@@ -413,7 +455,7 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
     // eslint-disable-next-line react-hooks/exhaustive-deps -- nowTick forces periodic recalculation for spinner animation
     [busy, streamProgress, runningProcesses, nowTick]
   );
-  const welcomeSettings = resolvedSettings;
+
   const welcomeItem: SessionMessage = useMemo(
     () => ({
       id: `__welcome__${welcomeNonce}`,
@@ -430,11 +472,14 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
     [welcomeNonce]
   );
   const staticItems = useMemo(() => {
+    if (mode === RawMode.Raw) {
+      return [];
+    }
     if (showWelcome && view === "chat") {
       return [welcomeItem, ...messages];
     }
     return messages;
-  }, [showWelcome, view, messages, welcomeItem]);
+  }, [mode, showWelcome, view, messages, welcomeItem]);
 
   const handleQuestionAnswers = useCallback(
     (answers: AskUserQuestionAnswers) => {
@@ -453,6 +498,10 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
     setDismissedQuestionIds((prev) => new Set(prev).add(pendingQuestion.messageId));
   }, [pendingQuestion]);
 
+  if (mode === RawMode.Raw) {
+    return <RawModeExitPrompt onExit={() => handleRawModeChange(RawMode.None)} />;
+  }
+
   return (
     <Box flexDirection="column" width={screenWidth} minWidth={80} overflowX={"visible"}>
       <Static items={staticItems}>
@@ -462,9 +511,8 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
               <WelcomeScreen
                 key={item.id}
                 projectRoot={projectRoot}
-                settings={welcomeSettings}
+                settings={resolvedSettings}
                 skills={skills}
-                version={version}
                 width={screenWidth}
               />
             );
@@ -521,6 +569,7 @@ export function App({ projectRoot, version = "", initialPrompt, onRestart }: App
           runningProcesses={runningProcesses}
           onSubmit={handleSubmit}
           onModelConfigChange={handleModelConfigChange}
+          onRawModeChange={handleRawModeChange}
           onInterrupt={handleInterrupt}
           onToggleProcessStdout={handleToggleProcessStdout}
           placeholder="Type your message..."

src/ui/AppContainer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { AppContext } from "./contexts";
+import { App } from "./App";
+import { RawModeProvider } from "./contexts/RawModeContext";
+
+const AppContainer: React.FC<{
+  projectRoot: string;
+  version: string;
+  initialPrompt: string | undefined;
+  onRestart: () => void;
+}> = ({ version, projectRoot, initialPrompt, onRestart }) => {
+  return (
+    <AppContext.Provider value={{ version: version }}>
+      <RawModeProvider>
+        <App initialPrompt={initialPrompt} projectRoot={projectRoot} onRestart={onRestart} />
+      </RawModeProvider>
+    </AppContext.Provider>
+  );
+};
+
+export default AppContainer;