feat(chat): 代码块语法高亮 + GFM 表格渲染，提取共享 codeTheme 模块

- CollapsibleContent 集成 react-syntax-highlighter + remark-gfm
- 提取 warmAcademicTheme 到 src/lib/codeTheme.ts，DocumentReader 与 Chat 共用
- 微调若干 store atom / GlobalHeader / ProjectList 细节

Author: MarkShawn2020

.changeset/v0-27-0.md

@@ -0,0 +1,11 @@
+---
+"lovcode": minor
+---
+
+Chat experience upgrades:
+
+- 数据源细分为 cli / app-code / app-web / app-cowork，会话详情支持双层 tab 切换
+- 会话详情底部支持直接输入消息继续对话
+- 会话详情合并同角色连续消息，菜单分组重构
+- Chat markdown 渲染升级：支持 GFM 表格、代码块语法高亮（Warm Academic 主题）
+- 提取 `codeTheme.ts` 共享模块，DocumentReader 与 Chat 复用同一套代码主题

src/components/DocumentReader.tsx

@@ -4,61 +4,7 @@ import { docReaderCollapsedGroupsAtom } from "../store";
 import Markdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-import type { CSSProperties } from "react";
-
-// Warm Academic code theme - matches design system
-const warmAcademicTheme: { [key: string]: CSSProperties } = {
-  'code[class*="language-"]': {
-    color: "#181818",
-    background: "none",
-    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
-    fontSize: "0.875rem",
-    textAlign: "left",
-    whiteSpace: "pre",
-    wordSpacing: "normal",
-    wordBreak: "normal",
-    wordWrap: "normal",
-    lineHeight: "1.6",
-  },
-  'pre[class*="language-"]': {
-    color: "#181818",
-    background: "#F0EEE6",
-    padding: "1rem",
-    margin: "0",
-    overflow: "auto",
-  },
-  comment: { color: "#87867F", fontStyle: "italic" },
-  prolog: { color: "#87867F" },
-  doctype: { color: "#87867F" },
-  cdata: { color: "#87867F" },
-  punctuation: { color: "#5C5C5C" },
-  property: { color: "#CC785C" },
-  tag: { color: "#CC785C" },
-  boolean: { color: "#CC785C" },
-  number: { color: "#CC785C" },
-  constant: { color: "#CC785C" },
-  symbol: { color: "#CC785C" },
-  deleted: { color: "#CC785C" },
-  selector: { color: "#6B7F59" },
-  "attr-name": { color: "#6B7F59" },
-  string: { color: "#6B7F59" },
-  char: { color: "#6B7F59" },
-  builtin: { color: "#6B7F59" },
-  inserted: { color: "#6B7F59" },
-  operator: { color: "#87867F" },
-  entity: { color: "#87867F", cursor: "help" },
-  url: { color: "#87867F" },
-  ".language-css .token.string": { color: "#87867F" },
-  ".style .token.string": { color: "#87867F" },
-  atrule: { color: "#7D6B99" },
-  "attr-value": { color: "#7D6B99" },
-  keyword: { color: "#7D6B99" },
-  function: { color: "#4A6785" },
-  "class-name": { color: "#4A6785" },
-  regex: { color: "#CC785C" },
-  important: { color: "#CC785C", fontWeight: "bold" },
-  variable: { color: "#CC785C" },
-};
+import { warmAcademicTheme } from "../lib/codeTheme";
 // Lucide icons (no Radix equivalent)
 import { PanelLeftClose, PanelLeft, PanelRightClose, PanelRight, Maximize2, Minimize2 } from "lucide-react";
 // Radix icons

src/components/GlobalHeader/GlobalHeader.tsx

@@ -90,7 +90,7 @@ export function GlobalHeader({
             isActive={primaryFeature === "chat"}
             onClick={() => handleMainNavClick("chat")}
             icon={<CounterClockwiseClockIcon className="w-4 h-4" />}
-            label="Chat"
+            label="History"
           />
           <NavButton
             isActive={primaryFeature === "workspace"}

src/lib/codeTheme.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from "react";
+
+// Warm Academic Prism theme — matches Lovstudio design system
+export const warmAcademicTheme: { [key: string]: CSSProperties } = {
+  'code[class*="language-"]': {
+    color: "#181818",
+    background: "none",
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+    fontSize: "0.875rem",
+    textAlign: "left",
+    whiteSpace: "pre",
+    wordSpacing: "normal",
+    wordBreak: "normal",
+    wordWrap: "normal",
+    lineHeight: "1.6",
+  },
+  'pre[class*="language-"]': {
+    color: "#181818",
+    background: "#F0EEE6",
+    padding: "1rem",
+    margin: "0",
+    overflow: "auto",
+  },
+  comment: { color: "#87867F", fontStyle: "italic" },
+  prolog: { color: "#87867F" },
+  doctype: { color: "#87867F" },
+  cdata: { color: "#87867F" },
+  punctuation: { color: "#5C5C5C" },
+  property: { color: "#CC785C" },
+  tag: { color: "#CC785C" },
+  boolean: { color: "#CC785C" },
+  number: { color: "#CC785C" },
+  constant: { color: "#CC785C" },
+  symbol: { color: "#CC785C" },
+  deleted: { color: "#CC785C" },
+  selector: { color: "#6B7F59" },
+  "attr-name": { color: "#6B7F59" },
+  string: { color: "#6B7F59" },
+  char: { color: "#6B7F59" },
+  builtin: { color: "#6B7F59" },
+  inserted: { color: "#6B7F59" },
+  operator: { color: "#87867F" },
+  entity: { color: "#87867F", cursor: "help" },
+  url: { color: "#87867F" },
+  ".language-css .token.string": { color: "#87867F" },
+  ".style .token.string": { color: "#87867F" },
+  atrule: { color: "#7D6B99" },
+  "attr-value": { color: "#7D6B99" },
+  keyword: { color: "#7D6B99" },
+  function: { color: "#4A6785" },
+  "class-name": { color: "#4A6785" },
+  regex: { color: "#CC785C" },
+  important: { color: "#CC785C", fontWeight: "bold" },
+  variable: { color: "#CC785C" },
+};

src/store/atoms/chat.ts

@@ -3,6 +3,7 @@ import { atomWithStorage } from "jotai/utils";
 // MessageView
 export const originalChatAtom = atomWithStorage("lovcode:originalChat", true);
 export const markdownPreviewAtom = atomWithStorage("lovcode:markdownPreview", false);
+export const expandMessagesAtom = atomWithStorage("lovcode:expandMessages", true);
 
 // SessionList
 export const sessionContextTabAtom = atomWithStorage<"global" | "project">("lovcode:sessions:contextTab", "project");

src/store/atoms/ui.ts

@@ -38,7 +38,7 @@ function parseUrlToView(hash: string): View {
   const path = hash.startsWith("/") ? hash.slice(1) : hash;
   const segments = path.split("/").filter(Boolean);
 
-  if (segments.length === 0) return { type: "home" };
+  if (segments.length === 0) return { type: "chat-projects" };
 
   const [first, second] = segments;
 

src/store/index.ts

@@ -9,7 +9,7 @@ export { expandedPathsAtom } from "./atoms/fileTree";
 
 // Chat atoms
 export {
-  originalChatAtom, markdownPreviewAtom,
+  originalChatAtom, markdownPreviewAtom, expandMessagesAtom,
   sessionContextTabAtom, sessionSelectModeAtom, hideEmptySessionsAtom, userPromptsOnlyAtom,
   chatViewModeAtom, allProjectsSortByAtom, hideEmptySessionsAllAtom,
   sidebarSessionSortByAtom, type SessionSortBy,

src/views/Chat/CollapsibleContent.tsx

@@ -1,5 +1,8 @@
 import { useState, useLayoutEffect, useRef, useMemo } from "react";
 import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { warmAcademicTheme } from "../../lib/codeTheme";
 import { HighlightText } from "./HighlightText";
 
 interface CollapsibleContentProps {
@@ -93,8 +96,42 @@ export function CollapsibleContent({ content, markdown, defaultCollapsed = false
         className={`text-ink text-sm leading-relaxed ${collapsed ? "overflow-hidden max-h-10" : ""}`}
       >
         {markdown ? (
-          <div className="prose prose-sm max-w-none prose-p:my-1 prose-headings:my-2 prose-pre:my-2 prose-ul:my-1 prose-ol:my-1">
-            <Markdown rehypePlugins={rehypePlugins as never}>{content}</Markdown>
+          <div className="prose prose-sm max-w-none prose-p:my-1 prose-headings:my-2 prose-pre:my-0 prose-ul:my-1 prose-ol:my-1 prose-table:my-0 prose-th:px-2 prose-th:py-1 prose-td:px-2 prose-td:py-1 prose-th:border prose-td:border prose-th:border-border prose-td:border-border prose-table:border-collapse prose-code:before:hidden prose-code:after:hidden">
+            <Markdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={rehypePlugins as never}
+              components={{
+                table: ({ node: _node, ...props }) => (
+                  <div className="my-2 overflow-x-auto">
+                    <table {...props} />
+                  </div>
+                ),
+                code: ({ node: _node, inline, className, children, ...props }: { node?: unknown; inline?: boolean; className?: string; children?: React.ReactNode }) => {
+                  const match = /language-(\w+)/.exec(className || "");
+                  if (!inline && match) {
+                    return (
+                      <div className="my-2 rounded-md overflow-hidden border border-border">
+                        <SyntaxHighlighter
+                          style={warmAcademicTheme}
+                          language={match[1]}
+                          PreTag="div"
+                          customStyle={{ margin: 0, borderRadius: 0, padding: "0.75rem 1rem", background: "#F0EEE6" }}
+                        >
+                          {String(children).replace(/\n$/, "")}
+                        </SyntaxHighlighter>
+                      </div>
+                    );
+                  }
+                  return (
+                    <code className={`${className || ""} px-1 py-0.5 rounded bg-card-alt text-ink/90 font-mono text-[0.85em]`} {...props}>
+                      {children}
+                    </code>
+                  );
+                },
+              }}
+            >
+              {content}
+            </Markdown>
           </div>
         ) : (
           <p className="whitespace-pre-wrap break-words">

src/views/Chat/ProjectList.tsx

@@ -458,7 +458,7 @@ export function ProjectList({ onSelectProject, onSelectSession }: ProjectListPro
       <div className="w-80 shrink-0 border-r border-border overflow-y-auto overscroll-contain">
         <div className="px-4 py-4">
           <div className="flex items-center justify-between mb-1">
-            <h2 className="font-serif text-lg font-semibold text-ink">Chat History</h2>
+            <h2 className="font-serif text-lg font-semibold text-ink">Lovcode History</h2>
             <button
               onClick={() => setSearchOpen(true)}
               className="flex items-center gap-1.5 p-1.5 rounded-md text-muted-foreground hover:text-ink hover:bg-card-alt transition-colors"