@deepseek-harness-tui/dsh-tui 0.12.0 → 0.14.0

package/lib/types/components/LogoV2.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type Tip } from '../tips.js';
 import { type UpstreamDriftSummary } from '../dsh-adapter/contract.js';
+import { type Brand } from '../branding.js';
 import { type SplashEgg } from './splashEggs.js';
 import { type WhaleIntroId } from './whaleFrames.js';
 /**
@@ -31,10 +32,11 @@ import { type WhaleIntroId } from './whaleFrames.js';
  * with a clickable "star us on GitHub" line whose indent is recomputed from
  * its own width.
  */
-export declare function LogoV2({ model, effort, cwd, skipIntro, intro, tip, fontId, whale, whaleIdle, whaleGirl, starred, starReveal, onStarClick, working, drift, egg, starChance, }: {
-    model: string;
+export declare function LogoV2({ model, effort, cwd, skipIntro, intro, tip, fontId, whale, whaleIdle, whaleGirl, brand, starred, starReveal, onStarClick, working, drift, egg, starChance, align, chrome, arrangement, companionSkin, }: {
+    /** 模型/effort/工作目录只画在 full 形态里；minimal（落地页）不传也行。 */
+    model?: string;
     effort?: string | undefined;
-    cwd: string;
+    cwd?: string;
     /** Test seam: mount straight into the settled header (probes skip the intro). */
     skipIntro?: boolean;
     /** Test seam: pin the intro animation instead of rolling one at startup. */
@@ -62,6 +64,11 @@ export declare function LogoV2({ model, effort, cwd, skipIntro, intro, tip, font
      * replaced with better art) takes the slot. Both forms are static, so
      * `whaleIdle` only animates the whale. */
     whaleGirl?: boolean;
+    /** 品牌档（当前后端 → `brandOfProvider`，见 `branding.ts`）：claude 时
+     * 大字词换 `CLAUDE`/`CODE`、配色换橙阶、立绘槽固定 Claude 娘（不看
+     * whaleGirl 设置——鲸鱼与鲸鱼娘是 DeepSeek 品牌资产）。测试缝：缺省
+     * `deepseek`，行为与品牌化之前逐字节一致。 */
+    brand?: Brand;
     /** 本次会话已经 star 过：彩蛋标题换成「捡到一颗小星星啦」，不再重复求。 */
     starred?: boolean;
     /** 彩蛋渐显的测试缝：`instant` 时三行一次画全（静态渲染夹具用；真机不传）。 */
@@ -82,5 +89,44 @@ export declare function LogoV2({ model, effort, cwd, skipIntro, intro, tip, font
     /** Test seam: pin/suppress the upstream-drift notice (`null` forces it off;
      * `undefined` — the production default — auto-detects the install). */
     drift?: UpstreamDriftSummary | null;
+    /**
+     * 排版对齐，默认 `start` = 转录区顶部那一版（逐字节不变）：
+     *
+     * - `start`  —— 并排行**占满整行**（`width="100%"`），欢迎语靠
+     *   `welcomePad` 对齐到鲸鱼的视觉中线。转录区顶部要的正是这个：它左对齐在
+     *   内容列上，下面的消息行也跟着左对齐。
+     * - `center` —— 落地页要的那一版：**整块按内容宽度居中**（并排行不再是
+     *   100% 宽，根盒 `alignItems="center"`），欢迎语交给外层居中、不再自己
+     *   加缩进。缩进那套是"左对齐时把标语钉在鲸鱼下方"的解，居中的版面上
+     *   再用一次就整体右移了。
+     *
+     * 内容完全同源（鲸鱼、字体、彩蛋、提示、漂移告警都走同一套代码），只有
+     * 对齐交给父级。
+     */
+    align?: 'start' | 'center';
+    /**
+     * 装饰密度，默认 full = 转录区顶部那一版（逐字节不变）：词标 + 版本、
+     * 模型/effort、工作目录、启动提示、漂移告警、欢迎语一应俱全。
+     *
+     * - full    —— 对话页开屏的信息密度（「我在哪、用的哪个模型」的答案）。
+     * - minimal —— 落地页那一版（opencode 式留白）：只留立绘与块体
+     *   DEEPSEEK/HARNESS 大字，其余信息行一概不画；欢迎语平时也不画
+     *   （落地页的版面契约里它整行删除），只有求 star 里程碑标语出现时才
+     *   画那几行——里程碑的露出不因落地页改版而丢。
+     *
+     * 内容与交互（字体、彩蛋、点击爱心/女仆娘、idle 规划器）两条 chrome
+     * 完全同源，差异只在文字列的密度。
+     */
+    chrome?: 'full' | 'minimal';
+    /**
+     * 立绘与词标的排布：`row`（默认，转录区开屏形态：图在左、字在右）或
+     * `column`（落地页形态：图在上、字在下，两者各自水平居中）。
+     * 用户实测反馈「logo 和标题一定要居中」——并排时是**整组**居中，词标仍然
+     * 偏在右半边；上下排布让两块各自落在中轴上，居中这件事不再有歧义。
+     */
+    arrangement?: 'row' | 'column';
+    /** 测试缝：钉住启动页吉祥物皮肤（undefined——生产——读 companion.skin；
+     *  'whale'/未知 = 维持原鲸鱼/女仆娘路径，见 SplashMascot.tsx）。 */
+    companionSkin?: string;
 }): React.ReactNode;
 //# sourceMappingURL=LogoV2.d.ts.map

package/lib/types/components/LogoV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LogoV2.d.ts","sourceRoot":"","sources":["../../../src/components/LogoV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,EAAoD,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAWxH,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAQ/E,OAAO,EAA+E,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA+CjI;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,MAAM,EACN,GAAG,EACH,SAAiB,EACjB,KAAK,EACL,GAAG,EACH,MAAM,EACN,KAAY,EACZ,SAAgB,EAChB,SAAiB,EACjB,OAAe,EACf,UAAU,EACV,WAAW,EACX,OAAe,EACf,KAAK,EACL,GAAG,EACH,UAAU,GACX,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;0CACsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,6EAA6E;IAC7E,GAAG,CAAC,EAAE,GAAG,CAAA;IACT;;qCAEiC;IACjC,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACtB;oEACgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;;8CAO0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;sCACkC;IAClC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;4CAGwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;mCAG+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;2EACuE;IACvE,KAAK,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;CACpC,GAAG,KAAK,CAAC,SAAS,CAgZlB"}
+{"version":3,"file":"LogoV2.d.ts","sourceRoot":"","sources":["../../../src/components/LogoV2.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAiB,KAAK,GAAG,EAAE,MAAM,YAAY,CAAA;AACpD,OAAO,EAAoD,KAAK,oBAAoB,EAAE,MAAM,4BAA4B,CAAA;AAMxH,OAAO,EAAqC,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAM9E,OAAO,EAAiC,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAU/E,OAAO,EAA+E,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAA;AA+CjI;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAU,EACV,MAAM,EACN,GAAQ,EACR,SAAiB,EACjB,KAAK,EACL,GAAG,EACH,MAAM,EACN,KAAY,EACZ,SAAgB,EAChB,SAAiB,EACjB,KAAkB,EAClB,OAAe,EACf,UAAU,EACV,WAAW,EACX,OAAe,EACf,KAAK,EACL,GAAG,EACH,UAAU,EACV,KAAe,EACf,MAAe,EACf,WAAmB,EACnB,aAAa,GACd,EAAE;IACD,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,YAAY,CAAA;IACpB;0CACsC;IACtC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,6EAA6E;IAC7E,GAAG,CAAC,EAAE,GAAG,CAAA;IACT;;qCAEiC;IACjC,GAAG,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;IACtB;oEACgE;IAChE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mFAAmF;IACnF,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;;;;8CAO0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;mCAG+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB;sCACkC;IAClC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB;;;4CAGwC;IACxC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;mCAG+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;2EACuE;IACvE,KAAK,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAA;IACnC;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC1B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC9B;wDACoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,KAAK,CAAC,SAAS,CAujBlB"}

package/lib/types/components/LogoV2.js

@@ -7,20 +7,23 @@ import { readFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Box, Text, useAnimationFrame, useTerminalImages, useTerminalSize } from '../ui.js';
-import { getTheme } from '../theme.js';
+import { getTheme, isLightThemeActive } from '../theme.js';
+import { BRAND_SPLASH_WORDS, BRAND_TAGLINE } from '../branding.js';
 import { useTheme } from './design-system/ThemeProvider.js';
-import { parseRGB } from './Spinner/spinnerUtils.js';
-import { renderBigText } from './bigfont.js';
+import { interpolateColor, parseRGB } from './Spinner/spinnerUtils.js';
+import { paintedWidth, renderBigText } from './bigfont.js';
 import { COLUMN_GAP, WHALE_BOX_WIDTH, resolveSplashLayout } from './splashLayout.js';
 import { withTagline, pickSplashFont, splashFontById } from './splashFonts.js';
 import { pickSplashEgg, splashStarLine } from './splashEggs.js';
 import { isHistoricMilestone, markStarAsked, pendingStarMilestone, recordLaunch, STAR_MILESTONES, usageSnapshot } from '../usageStats.js';
 import { effectiveComboDisplay } from '../utils/keymap.js';
 import { stringWidth } from '../ink/stringWidth.js';
-import { BRAND, FLASH, ICE, PALE, sweep } from './shimmer.js';
+import { BRAND, EMBER, EMBER_BRIGHT, EMBER_FLASH, EMBER_LIGHT, EMBER_PALE, EMBER_PAPER_FLASH, FLASH, ICE, LAVENDER, LAVENDER_BRIGHT, LAVENDER_FLASH, LAVENDER_LIGHT, LAVENDER_PALE, LAVENDER_PAPER, LAVENDER_PAPER_FLASH, LAVENDER_SOFT, PALE, sweep } from './shimmer.js';
 import { STANDARD_FRAME_INDEX, WhaleArt } from './Whale.js';
 import { WhaleGirlArt } from './WhaleGirl.js';
-import { MAID_BOX_CENTER, MaidPortrait, useMaidPortraits } from './maidPortrait.js';
+import { ClaudeGirlArt } from './ClaudeGirl.js';
+import { MAID_BOX_CENTER, MaidPortrait, portraitAssetsOf, useMaidPortraits } from './maidPortrait.js';
+import { SplashMascot, useSplashMascotSkin } from './sidePanel/companion/SplashMascot.js';
 import { OPENING_SEQUENCES, pickOpeningSequence, WHALE_FRAME_INDEX } from './whaleFrames.js';
 import { RESTING_POSE } from './whaleLayers.js';
 import { initialWhaleIdleState, nextWhaleIdleStep, } from './whaleIdle.js';
@@ -87,7 +90,7 @@ function capitalize(text) {
  * with a clickable "star us on GitHub" line whose indent is recomputed from
  * its own width.
  */
-export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, fontId, whale = true, whaleIdle = true, whaleGirl = false, starred = false, starReveal, onStarClick, working = false, drift, egg, starChance, }) {
+export function LogoV2({ model = '', effort, cwd = '', skipIntro = false, intro, tip, fontId, whale = true, whaleIdle = true, whaleGirl = false, brand = 'deepseek', starred = false, starReveal, onStarClick, working = false, drift, egg, starChance, align = 'start', chrome = 'full', arrangement = 'row', companionSkin, }) {
     // One intro per logo mount: the production path rolls (startup splash
     // and each /deepseek replay roll independently), the `intro` seam pins
     // a specific animation for probes.
@@ -118,6 +121,12 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
         if (working)
             setWhaleFrozen(true);
     }, [working]);
+    // ── 启动页吉祥物（2026-10 复用轮）：companion.skin 驱动 ────────────────
+    // deepy → 字母格动画；whaleGirl → 鲸娘动画（图像协议自适应，首帧字母格
+    // 同步可画）；两者都取代艺术槽的原住民（分层鲸/静态女仆娘立绘）。
+    // 'whale'/未知皮肤 → undefined，原路径零改动。冻结/落地页（whaleIdle=
+    // false）时吉祥物定格 idle 帧 0、零时钟（SplashMascot 内部保证）。
+    const mascotSkin = useSplashMascotSkin(companionSkin);
     // ── Whale behaviors (ported from the dsh-ui-whale pet) ─────────────────
     // Intro-phase click → heart pass: whole heart frames over the opening
     // animation (one-way heart1→heart2→heart3). Once the header settles, the
@@ -158,21 +167,49 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
     // 按天轮换的大字字体：同一天内恒定、隔天换一款；`fontId`（设置项）可 pin 住一款。
     const [dailyFont] = React.useState(() => pickSplashFont());
     const font = fontId === undefined ? dailyFont : splashFontById(fontId);
+    // 品牌词（`branding.ts`）：claude 内核换 `CLAUDE`/`CODE`、codex 内核换
+    // `CODEX`/`HARNESS`——字身不变、**两行同字距**（用户点名「间隙一致」：
+    // 等宽契约靠两行字距互补，字数差大的词对间隙观感差很多），块宽以默认
+    // 词对紧解为预算。窄终端阶梯阈值跟着当天真实标题宽度走，与彩蛋共用
+    // `withTagline`。
+    const words = BRAND_SPLASH_WORDS[brand];
+    const brandFont = brand !== 'deepseek' ? withTagline(font, words.top, words.bottom, { uniform: true }) : font;
     // 节日彩蛋：本地日期整天恒定，每次 mount 只判一次（照 pickSplashFont 的写法）。
-    // 只换词——字身宽度不变、字距按新词重解，所以阶梯阈值也跟着当天真实标题宽度走。
+    // 只换下排词——上排钉在品牌词上（deepseek 的 `DEEPSEEK` / claude 的 `CLAUDE`
+    // / codex 的 `CODEX`）。
     const [dailyEgg] = React.useState(() => (egg === undefined ? pickSplashEgg() : egg));
-    const titleFont = dailyEgg === null ? font : withTagline(font, dailyEgg.top, dailyEgg.bottom);
+    const titleFont = dailyEgg === null ? brandFont : withTagline(font, brand === 'deepseek' ? font.tagline.top : words.top, dailyEgg.bottom, brand === 'deepseek' ? undefined : { uniform: true });
     // 窄终端阶梯：鲸鱼 + 大字 → 纯大字 → 纯鲸鱼 → 一行纯文字（阈值随字体字身宽度变）。
-    const { showWhale, showBigTitle, showPlainTitle } = resolveSplashLayout(columns, { whale, font: titleFont });
+    const splash = resolveSplashLayout(columns, { whale, font: titleFont });
+    /**
+     * 上下排布（落地页）时立绘与词标**不共行**，宽轴那套「谁挤掉谁」的判定不适用：
+     * 立绘只看自己放不放得下（盒宽）。照并排阈值走会在 55–96 列这一大段把立绘判掉，
+     * 而落地页明明有一整行宽度给它——实测症状是「撤立绘」那一档不生效：矮屏上鲸鱼
+     * 照画，把大字与卡片挤出屏幕。
+     */
+    const stacked = arrangement === 'column';
+    const { showWhale, showBigTitle, showPlainTitle } = stacked
+        ? {
+            showWhale: whale && columns >= WHALE_BOX_WIDTH,
+            showBigTitle: splash.showBigTitle,
+            showPlainTitle: !splash.showBigTitle,
+        }
+        : splash;
     // 女仆娘档优先走**真图**（Kitty/Sixel 终端图像协议，见 `maidPortrait.tsx`）；
     // 协议不可用（内联模式、终端不支持）或资产解码失败时，回落到字符画版
     // 女仆娘（`WhaleGirl.tsx` 半块精灵——作者占位，之后会换更好看的）。
+    // 品牌档（`branding.ts`）的立绘槽固定各自的娘（同一套盒几何）：claude =
+    // Claude 娘（真图 `assets/claude-girl/`，回落 `ClaudeGirl.tsx`）；codex =
+    // 淡紫恶魔精灵（真图 `assets/codex-girl/`，回落 `WhaleGirl.tsx`）——都不看
+    // whaleGirl 设置。像素鲸鱼、鲸鱼娘与 deepy/鲸娘皮肤是 DeepSeek 品牌的资产。
     // 两种形态都是静态立绘：闲置动画与点击爱心仍是鲸鱼专属。
     // `maidImageActive` 只在「真图画出来了」时为真。
-    const imagesAvailable = useTerminalImages(whaleGirl);
-    const portraits = useMaidPortraits(whaleGirl && imagesAvailable);
+    const claudeArt = brand === 'claude';
+    const portraitMode = whaleGirl || brand !== 'deepseek';
+    const imagesAvailable = useTerminalImages(portraitMode);
+    const portraits = useMaidPortraits(portraitMode && imagesAvailable, portraitAssetsOf(brand));
     const maidSource = portraits?.normal;
-    const maidImageActive = whaleGirl && imagesAvailable && maidSource !== undefined;
+    const maidImageActive = portraitMode && imagesAvailable && maidSource !== undefined;
     // 点一下她 → 换成「高兴鲸娘」几秒（自动回安静版；第一个任务后定格、
     // 不再响应，与鲸鱼的规则一致）。定时器在卸载/重挂时清掉。
     const [maidHappy, setMaidHappy] = React.useState(false);
@@ -207,9 +244,9 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
     const pendingHeartRef = React.useRef(false);
     const tickRef = React.useRef(null);
     React.useEffect(() => {
-        // 女仆娘档（真图或字符画）没有闲置规划器：立绘是静态的，开屏定格
-        // 后不给她留任何定时器。
-        if (!settled || !whaleIdle || !showWhale || whaleFrozen || whaleGirl) {
+        // 女仆娘档（真图或字符画）与吉祥物档（SplashMascot 自带节拍器）都
+        // 不需要鲸鱼的闲置规划器：那两条路径里分层鲸根本没画。
+        if (!settled || !whaleIdle || !showWhale || whaleFrozen || portraitMode || mascotSkin !== undefined) {
             setIdlePose(null);
             tickRef.current = null;
             return;
@@ -240,7 +277,7 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
             if (timer !== undefined)
                 clearTimeout(timer);
         };
-    }, [settled, whaleIdle, showWhale, working, whaleFrozen, whaleGirl]);
+    }, [settled, whaleIdle, showWhale, working, whaleFrozen, portraitMode]);
     // Render priority: the layered planner pose owns the settled header while
     // it runs (hearts and blinks compose over the body planes). Otherwise a
     // click heart plays as whole heart frames over the intro — or over the
@@ -253,7 +290,14 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
     // Frozen clock for the settled header: t=0 parks every sweep highlight
     // off-screen, leaving the static gradient behind.
     const t = settled ? 0 : time;
-    const tagline = tr('logo-tagline');
+    // 品牌欢迎语（claude 档专用文案；deepseek 沿用 i18n 的 `logo-tagline`）。
+    // 英文是两行（\n 分隔）——渲染与居中都按行处理，见下方 welcomeWidth/渲染。
+    const brandTagline = BRAND_TAGLINE[brand];
+    const tagline = brand !== 'deepseek'
+        ? (getLang() === 'zh' ? brandTagline.zh : brandTagline.en)
+        : tr('logo-tagline');
+    /** 欢迎语逐行拆开（单行文案就是一元素）。 */
+    const taglineLines = tagline.split('\n');
     // 求 star 改由**本机用量里程碑**触发（累计启动次数 / 累计在线时长），不再每次随机：
     // 跨档时只报最高那一档、每档只报一次（`usageStats` 记账）。`starChance` 退化成测试缝
     // ——0 关掉、非 0 强开（强开时用最高那档的文案）。`DSH_TUI_STAR_LINE=1`
@@ -315,23 +359,96 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
     // the width the line ACTUALLY shows: the star easter egg renders a longer
     // line than `logo-tagline`, so reusing the tagline's width would push it
     // visibly off-center.
-    const welcomeWidth = starLine === null ? stringWidth(tagline) : starLine.width;
-    const welcomePad = showWhale
-        ? Math.max(0, Math.round((whaleGirl ? MAID_BOX_CENTER : WHALE_CENTER) - welcomeWidth / 2))
-        : 2;
+    // 多行欢迎语取**最宽行**算宽（居中缩进以此为准，窄行再各自补半差）。
+    const welcomeWidth = starLine === null
+        ? Math.max(...taglineLines.map(line => stringWidth(line)))
+        : starLine.width;
+    // 居中排版（落地页）交给父级的 `alignItems="center"`，缩进一律为 0；只有
+    // 转录区顶部那一版才需要"把标语钉在鲸鱼下方"。这条判据与根盒的
+    // `align` 走同一个开关，否则两种对齐会各偏一点。
+    const welcomePad = align === 'center'
+        ? 0
+        : showWhale
+            ? Math.max(0, Math.round((portraitMode ? MAID_BOX_CENTER : WHALE_CENTER) - welcomeWidth / 2))
+            : 2;
     // 两行标题各自用字体声明的字距；下排再按 `bottomIndent` 居中——
     // 两者一起保证画出来的列数相等（见 splashFonts 的 tagline 契约）。
-    // 节日彩蛋换的就是这里的两排词（`titleFont` 已按当天词对重解字距）；字体若自带
-    // 配色（半立体那款的灰阶）就用它，否则沿用主题的 accent→activity。
-    const { top, bottom, topKerning, bottomKerning, bottomIndent } = titleFont.tagline;
-    const bigDeepSeek = renderBigText(titleFont, top, t, titleFont.palette?.from ?? wordmarkRGB, titleFont.palette?.to ?? taglineRGB, FLASH, 60, topKerning);
-    const bigHarness = renderBigText(titleFont, bottom, t, titleFont.palette?.from ?? taglineRGB, titleFont.palette?.to ?? PALE, FLASH, 60, bottomKerning, bottomIndent);
-    // 立绘槽位的**唯一真源**：文字列的实际行数——词标 1 + 两排大字 + 两排
-    // 之间空 1 行 + 模型/目录/提示 3 行。槽位与它等高，图片既不压过文字列
+    // 节日彩蛋换的就是这里的两排词（`titleFont` 已按当天词对重解字距）。
+    const { top: fontTop, bottom, topKerning, bottomKerning, bottomIndent } = titleFont.tagline;
+    // 品牌词对经 withTagline 重解后 fontTop 即品牌上排词（含彩蛋日的钉顶）。
+    const top = fontTop;
+    // 大字配色按字体/品牌解析（运行时 `palette`（扩展缝）最优先）：
+    // - deepseek：主题 accent → activity → PALE 的蓝白阶（品牌化之前的行为）；
+    // - claude：cc-bridge 校过的深橙 → 浅橙，两行同一对端点——第二行终点不再
+    //   落到写死的蓝白 PALE；
+    // - bevel（半立体）两个品牌都随基色派生亮/暗两档（提亮 / 压暖黑）：字形
+    //   自带 █/▓ 明暗笔画，叠上主题色渐变才是"金属受光"。旧版写死的静态灰阶
+    //   在任何主题下都像没上色（用户反馈的"灰色字体"）。
+    // claude 双主题的大字端点：深底 #D77757 → 淡橙；浅底（claude-paper）反向
+    // ——正色压深 #C96442、高光也变深（浅底上"亮"是加深）。bevel 的金属明暗
+    // 两档同样以当档基色派生。
+    const brandPaper = brand !== 'deepseek' && isLightThemeActive(themeName);
+    // 品牌大字色阶（跨两行三档，从左上到右下走完）：claude 陶土橙、codex 薰衣草
+    // 紫；深底从亮档起步奔最亮收，浅底反向从深化档起步（浅底上"亮"是加深）。
+    // deepseek 不在表内——沿用主题 wordmark/tagline/PALE 的蓝白阶。
+    const brandLadder = brand === 'claude'
+        ? (brandPaper
+            ? { base: EMBER, start: EMBER, mid: EMBER_LIGHT, end: EMBER_BRIGHT, flash: EMBER_PAPER_FLASH }
+            : { base: EMBER_LIGHT, start: EMBER_LIGHT, mid: EMBER_BRIGHT, end: EMBER_PALE, flash: EMBER_FLASH })
+        : brand === 'codex'
+            ? (brandPaper
+                ? { base: LAVENDER_PAPER, start: LAVENDER_PAPER, mid: LAVENDER_LIGHT, end: LAVENDER, flash: LAVENDER_PAPER_FLASH }
+                : { base: LAVENDER_BRIGHT, start: LAVENDER_BRIGHT, mid: LAVENDER_SOFT, end: LAVENDER_PALE, flash: LAVENDER_FLASH })
+            : undefined;
+    const brandBase = brandLadder?.base ?? wordmarkRGB;
+    const bevelShade = titleFont.id === 'bevel'
+        ? {
+            from: interpolateColor(brandBase, { r: 255, g: 255, b: 255 }, 0.45),
+            to: interpolateColor(brandBase, { r: 24, g: 18, b: 12 }, 0.55),
+        }
+        : undefined;
+    // 扫光高光同族：橙字上扫过蓝光会很脏；claude 深底暖阳高光、浅底深化高光。
+    const flash = brandLadder?.flash ?? FLASH;
+    // claude 渐变是**跨两行的三档色阶**（行一 起→中、行二 中→收），整幅从左
+    // 上到右下走完色阶。起点两轮提亮（用户反馈"还是暗"）：深底直接从亮档
+    // #E68A69 起步 → #EFA97E → 奶油橙 #FBD6B0（官方正色 #D77757 明度中等、
+    // 压深底发闷，只留给浅底当起点）；浅底 #D77757 → #E68A69 → #EFA97E。
+    const titleFrom = titleFont.palette?.from
+        ?? bevelShade?.from
+        ?? brandLadder?.start
+        ?? wordmarkRGB;
+    const titleTopTo = titleFont.palette?.to
+        ?? bevelShade?.to
+        ?? brandLadder?.mid
+        ?? taglineRGB;
+    const titleBottomFrom = titleFont.palette?.from
+        ?? bevelShade?.from
+        ?? brandLadder?.mid
+        ?? taglineRGB;
+    const titleBottomTo = titleFont.palette?.to
+        ?? bevelShade?.to
+        ?? brandLadder?.end
+        ?? PALE;
+    // 品牌档两行同字距后宽度不同，对齐按形态处理（用户定调）：居中形态
+    // （落地页/启动页）窄行补半差，两行各自居中成金字塔；钉左形态（对话页
+    // 标题）两行左缘对齐。deepseek 档维持求解器的 bottomIndent（等宽契约）。
+    const uniformBrand = brand !== 'deepseek';
+    const centeredTitle = uniformBrand && align === 'center';
+    const topInk = paintedWidth(titleFont, top, topKerning);
+    const bottomInk = paintedWidth(titleFont, bottom, bottomKerning);
+    const topIndent = centeredTitle ? Math.max(0, Math.round((bottomInk - topInk) / 2)) : 0;
+    const bottomShift = centeredTitle
+        ? Math.max(0, Math.round((topInk - bottomInk) / 2))
+        : (uniformBrand ? 0 : bottomIndent);
+    const bigDeepSeek = renderBigText(titleFont, top, t, titleFrom, titleTopTo, flash, 60, topKerning, topIndent);
+    const bigHarness = renderBigText(titleFont, bottom, t, titleBottomFrom, titleBottomTo, flash, 60, bottomKerning, bottomShift);
+    // 立绘槽位的**唯一真源**：文字列的实际行数。full = 词标 1 + 两排大字 +
+    // 两排之间空 1 行 + 模型/目录/提示 3 行；minimal = 只有两排大字 + 空行
+    //（信息行整块不画，见 chrome prop）。槽位与它等高，图片既不压过文字列
     // 也不留一截在下面（实机反馈「超出去、不和谐」）；大字换字体/换词时也
-    // 自动跟着变，不写死 15。
-    const textColumnRows = bigDeepSeek.length + bigHarness.length + 5;
-    return (_jsxs(Box, { ref: ref, flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { flexDirection: "row", gap: COLUMN_GAP, width: "100%", alignItems: "center", children: [showWhale && (_jsx(Box, { flexShrink: 0, onClick: () => {
+    // 自动跟着变，不写死数字。
+    const textColumnRows = bigDeepSeek.length + bigHarness.length + (chrome === 'minimal' ? 1 : 5);
+    return (_jsxs(Box, { ref: ref, flexDirection: "column", marginTop: 1, ...(align === 'center' ? { alignItems: 'center' } : {}), children: [_jsxs(Box, { flexDirection: arrangement === 'column' ? 'column' : 'row', gap: arrangement === 'column' ? 1 : COLUMN_GAP, alignItems: "center", ...(align === 'center' || arrangement === 'column' ? {} : { width: '100%' }), children: [showWhale && (_jsx(Box, { flexDirection: "column", alignItems: "center", flexShrink: 0, onClick: () => {
                             // Frozen (first task started): the whale is a static logo —
                             // clicks do nothing. Settled: the layered planner consumes the
                             // click on its next tick — run that tick immediately so the
@@ -345,7 +462,7 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
                                 reactMaid();
                                 return;
                             }
-                            if (whaleGirl)
+                            if (portraitMode)
                                 return;
                             if (settled && whaleIdle) {
                                 pendingHeartRef.current = true;
@@ -355,9 +472,15 @@ export function LogoV2({ model, effort, cwd, skipIntro = false, intro, tip, font
                                 setHeartSeq(0);
                                 setHeartKey(k => k + 1);
                             }
-                        }, children: whaleGirl ? (_jsx(Box, { width: WHALE_BOX_WIDTH, height: textColumnRows, flexDirection: "row", justifyContent: "center", alignItems: "center", children: maidImageActive ? (_jsx(MaidPortrait, { source: maidHappy ? (portraits?.happy ?? maidSource) : maidSource, maxColumns: WHALE_BOX_WIDTH, maxRows: textColumnRows, presentation: "transcript" })) : (_jsx(WhaleGirlArt, { width: WHALE_BOX_WIDTH })) })) : (_jsx(WhaleArt, { frameIndex: frameIndex, pose: settled && whaleIdle && !whaleFrozen ? (idlePose ?? RESTING_POSE) : undefined, width: WHALE_BOX_WIDTH })) })), (showBigTitle || showPlainTitle) && (_jsxs(Box, { flexDirection: "column", flexShrink: 1, children: [_jsxs(Text, { wrap: "truncate-end", children: [sweep('✦ dsh-TUI', t, wordmarkRGB, wordmarkShimmerRGB, 60), _jsx(Text, { dimColor: true, children: '  v' + VERSION })] }), showBigTitle ? (_jsxs(_Fragment, { children: [bigDeepSeek.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row }, `ds-${index}`))), _jsx(Box, { height: 1 }), bigHarness.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row }, `h-${index}`)))] })) : (showPlainTitle && (_jsx(Text, { color: "accent", bold: true, wrap: "truncate-end", children: "DeepSeek Harness" }))), _jsxs(Text, { wrap: "truncate-end", children: [model, effort !== undefined && _jsx(Text, { dimColor: true, children: ' · ' + capitalize(effort) + ' effort' })] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: cwd }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: tr('logo-tip-prefix') }), getLang() === 'zh' ? randomTip.zh : randomTip.en, _jsx(Text, { dimColor: true, children: ' · /tips ' + tr('logo-tip-more') })] }), driftLine != null && (_jsxs(Text, { color: "warning", wrap: "wrap", children: ["\u26A0", ' ', tOr(`logo-drift-${driftLine.kind}`, `The dsh engine (${driftLine.versions.join(' / ')}) does not match the validated ${UPSTREAM_VALIDATED_VERSION}; reinstall via npm i -g @deepseek-ai/dsh@${UPSTREAM_VALIDATED_VERSION}.`, {
+                        }, children: _jsx(Box, { width: WHALE_BOX_WIDTH, flexDirection: "column", alignItems: "center", children: brand === 'deepseek' && mascotSkin !== undefined ? (_jsx(SplashMascot, { skin: mascotSkin, active: !whaleFrozen && whaleIdle })) : portraitMode ? (_jsx(Box, { width: WHALE_BOX_WIDTH, height: textColumnRows, flexDirection: "row", justifyContent: "center", alignItems: "center", children: maidImageActive ? (_jsx(MaidPortrait, { source: maidHappy ? (portraits?.happy ?? maidSource) : maidSource, maxColumns: WHALE_BOX_WIDTH, maxRows: textColumnRows, presentation: "transcript" })) : (claudeArt ? _jsx(ClaudeGirlArt, { width: WHALE_BOX_WIDTH }) : _jsx(WhaleGirlArt, { width: WHALE_BOX_WIDTH })) })) : (_jsx(WhaleArt, { frameIndex: frameIndex, pose: settled && whaleIdle && !whaleFrozen ? (idlePose ?? RESTING_POSE) : undefined, width: WHALE_BOX_WIDTH })) }) })), (showBigTitle || showPlainTitle) && (_jsxs(Box, { flexDirection: "column", flexShrink: 1, children: [chrome !== 'minimal' && (_jsxs(Text, { wrap: "truncate-end", children: [sweep('✦ dsh-TUI', t, wordmarkRGB, wordmarkShimmerRGB, 60), _jsx(Text, { dimColor: true, children: '  v' + VERSION })] })), showBigTitle ? (_jsxs(_Fragment, { children: [bigDeepSeek.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row.replace(/\s+$/u, '') }, `ds-${index}`))), _jsx(Box, { height: 1 }), bigHarness.map((row, index) => (_jsx(Text, { wrap: "truncate-end", children: row.replace(/\s+$/u, '') }, `h-${index}`)))] })) : (showPlainTitle && (_jsx(Text, { color: "accent", bold: true, wrap: "truncate-end", children: words.plain }))), chrome !== 'minimal' && (_jsxs(_Fragment, { children: [_jsxs(Text, { wrap: "truncate-end", children: [model, effort !== undefined && _jsx(Text, { dimColor: true, children: ' · ' + capitalize(effort) + ' effort' })] }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: cwd }), _jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { dimColor: true, children: tr('logo-tip-prefix') }), getLang() === 'zh' ? randomTip.zh : randomTip.en, _jsx(Text, { dimColor: true, children: ' · /tips ' + tr('logo-tip-more') })] })] })), chrome !== 'minimal' && driftLine != null && (_jsxs(Text, { color: "warning", wrap: "wrap", children: ["\u26A0", ' ', tOr(`logo-drift-${driftLine.kind}`, `The dsh engine (${driftLine.versions.join(' / ')}) does not match the validated ${UPSTREAM_VALIDATED_VERSION}; reinstall via npm i -g @deepseek-ai/dsh@${UPSTREAM_VALIDATED_VERSION}.`, {
                                         installed: driftLine.versions.join(' / '),
                                         validated: UPSTREAM_VALIDATED_VERSION,
                                         primary: UPSTREAM_VALIDATED_VERSION,
-                                    })] }))] }))] }), _jsx(Box, { flexDirection: "column", marginTop: 1, ...(starLine === null || onStarClick === undefined ? {} : { onClick: onStarClick }), children: starLine === null ? (_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { children: sweep(tagline, t, taglineRGB, FLASH, 60) }) })) : (_jsxs(_Fragment, { children: [_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { children: sweep(starLine.title, t, taglineRGB, FLASH, 60) }) }), revealed >= 1 && (_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { dimColor: true, children: starLine.stats }) })), revealed >= 2 && starred !== true && starLine.ask !== null && (_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { children: starLine.ask }) }))] })) })] }));
+                                    })] }))] }))] }), (chrome !== 'minimal' || starLine !== null) && (_jsx(Box, { flexDirection: "column", marginTop: 1, ...(starLine === null || onStarClick === undefined ? {} : { onClick: onStarClick }), children: starLine === null ? (
+                // 多行欢迎语（claude 品牌英文 slogan 是两行）：`center` 版式交给
+                // 父级逐行居中；`start` 版式在立绘中线下**块内居中**——窄行补半差，
+                // 两行的中轴对齐而不是左缘对齐。
+                taglineLines.map(line => (_jsx(Box, { paddingLeft: align === 'center'
+                        ? 0
+                        : welcomePad + Math.max(0, Math.round((welcomeWidth - stringWidth(line)) / 2)), children: _jsx(Text, { children: sweep(line, t, taglineRGB, flash, 60) }) }, line)))) : (_jsxs(_Fragment, { children: [_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { children: sweep(starLine.title, t, taglineRGB, flash, 60) }) }), revealed >= 1 && (_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { dimColor: true, children: starLine.stats }) })), revealed >= 2 && starred !== true && starLine.ask !== null && (_jsx(Box, { paddingLeft: welcomePad, children: _jsx(Text, { children: starLine.ask }) }))] })) }))] }));
 }

package/lib/types/components/Markdown.d.ts

@@ -29,7 +29,8 @@ type Props = {
  * Tokens that render as their own layout node (a width-aware component)
  * instead of joining the ANSI text run. StreamingMarkdown consults the same
  * predicate: a standalone node has a fixed one-row gap to its neighbours
- * rather than the newline-derived spacing of text blocks.
+ * rather than the newline-derived spacing of text blocks. Top-level
+ * fenced code is one too (CodeBlockFrame).
  */
 export declare function isStandaloneToken(token: Token): boolean;
 /**

package/lib/types/components/Markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAU,KAAK,KAAK,EAAe,MAAM,QAAQ,CAAA;AAYxD;;;;;;;;;;;GAWG;AAEH,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAyED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAEvD;AAuGD;;;;;;;;;;GAUG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAgB,EAAE,WAAkB,EAAE,gBAAuB,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAkCzH;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,gDAOpB,CAAA"}
+{"version":3,"file":"Markdown.d.ts","sourceRoot":"","sources":["../../../src/components/Markdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAU,KAAK,KAAK,EAAe,MAAM,QAAQ,CAAA;AAexD;;;;;;;;;;;GAWG;AAEH,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B,CAAA;AAiFD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAOvD;AAkHD;;;;;;;;;;GAUG;AACH,iBAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAgB,EAAE,WAAkB,EAAE,gBAAuB,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAwCzH;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,gDAOpB,CAAA"}

package/lib/types/components/Markdown.js

@@ -1,16 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { marked } from 'marked';
-import { Box, Text } from '../ui.js';
-import { configureMarked, formatToken, stripPromptXMLTags } from '../terminal-utils/markdown.js';
+import { Box, Text, useTheme } from '../ui.js';
+import { getTheme } from '../theme.js';
+import { appendBlockText, configureMarked, formatToken, stripPromptXMLTags } from '../terminal-utils/markdown.js';
 import { getCliHighlightPromise } from '../terminal-utils/cliHighlight.js';
 import { isMermaidLang } from '../terminal-utils/mermaid.js';
 import { isMathBlockToken, isMathToken } from '../terminal-utils/math.js';
 import { getMathRendering, subscribeMathRendering } from '../tuiDisplayPrefs.js';
 import { MarkdownTable } from './MarkdownTable.js';
+import { CodeBlockFrame } from './CodeBlockFrame.js';
 import { MermaidDiagram } from './MermaidDiagram.js';
 import { InlineMathParagraph } from './InlineMathParagraph.js';
 import { MathBlock } from './MathBlock.js';
+/**
+ * Hang decoration for the ANSI text runs: a terminal-wrapped continuation
+ * lines up under its line's quote rails, list marker or indentation
+ * instead of falling back to column 0. One shared object, because the
+ * style diff and the measure/paint caches compare it by reference.
+ */
+const HANG_DECORATION = { hang: true };
 // ---- token 缓存 ----
 //
 // marked.lexer 在组件重挂载时是最贵的开销；消息内容不可变，相同文本
@@ -80,10 +89,14 @@ function lexWithCache(content, allowCache) {
  * Tokens that render as their own layout node (a width-aware component)
  * instead of joining the ANSI text run. StreamingMarkdown consults the same
  * predicate: a standalone node has a fixed one-row gap to its neighbours
- * rather than the newline-derived spacing of text blocks.
+ * rather than the newline-derived spacing of text blocks. Top-level
+ * fenced code is one too (CodeBlockFrame).
  */
 export function isStandaloneToken(token) {
-    return token.type === 'table' || isMermaidToken(token) || isMathBlockToken(token);
+    return (token.type === 'table' ||
+        token.type === 'code' ||
+        isMermaidToken(token) ||
+        isMathBlockToken(token));
 }
 /** Whether a paragraph holds inline math anywhere in its inline tokens. */
 function hasInlineMath(token) {
@@ -109,7 +122,7 @@ function renderTokensToNodes(tokens, highlight, dimColor, inlineMathImages) {
         if (!ansiText && textParts.length === 0)
             return;
         if (textParts.length === 0) {
-            nodes.push(_jsx(Text, { dimColor: dimColor, children: ansiText.trim() }, nodes.length));
+            nodes.push(_jsx(Text, { dimColor: dimColor, decoration: HANG_DECORATION, children: ansiText.trim() }, nodes.length));
         }
         else {
             textParts.push(ansiText);
@@ -123,7 +136,7 @@ function renderTokensToNodes(tokens, highlight, dimColor, inlineMathImages) {
             textParts[last] = textParts[last].trimEnd();
             // Each internal boundary replaces exactly one source newline with a
             // column-child boundary. Only the whole text span trims outer space.
-            nodes.push(_jsx(Box, { flexDirection: "column", children: textParts.slice(first, last + 1).map((part, index) => (_jsx(Text, { dimColor: dimColor, children: index + first < last ? part.slice(0, -1) : part }, index))) }, nodes.length));
+            nodes.push(_jsx(Box, { flexDirection: "column", children: textParts.slice(first, last + 1).map((part, index) => (_jsx(Text, { dimColor: dimColor, decoration: HANG_DECORATION, children: index + first < last ? part.slice(0, -1) : part }, index))) }, nodes.length));
         }
         ansiText = '';
         textParts = [];
@@ -153,8 +166,18 @@ function renderTokensToNodes(tokens, highlight, dimColor, inlineMathImages) {
             flushAnsiText();
             nodes.push(_jsx(MermaidDiagram, { token: token, highlight: highlight, dimColor: dimColor }, nodes.length));
         }
+        else if (token.type === 'code') {
+            // Top-level fences get the CodeBlockFrame (header/rail/padding);
+            // the mermaid branch above keeps diagram fences routed to
+            // MermaidDiagram (whose fallback re-enters the frame), and code
+            // nested in lists/quotes keeps formatToken's ANSI path.
+            flushAnsiText();
+            nodes.push(_jsx(CodeBlockFrame, { token: token, highlight: highlight, dimColor: dimColor }, nodes.length));
+        }
         else {
-            ansiText += formatToken(token, 0, null, null, highlight);
+            // appendBlockText inserts the row break after the (newline-free) hr
+            // divider when the next block does not open its own line.
+            ansiText = appendBlockText(ansiText, formatToken(token, 0, null, null, highlight));
             // A top-level token boundary keeps inline formatting and code fences
             // intact while letting the painter cull finished offscreen text blocks.
             if (ansiText.length >= TEXT_BLOCK_BUDGET && ansiText.endsWith('\n')) {
@@ -182,6 +205,12 @@ function MarkdownImpl({ children, dimColor = false, cacheTokens = true, inlineMa
     // Inline math is baked into the ANSI text, so the switch must invalidate
     // the memo below (MathBlock nodes subscribe on their own).
     const mathRendering = React.useSyncExternalStore(subscribeMathRendering, getMathRendering);
+    // 渲染结果把主题色烤进 ANSI（链接 accent、行内代码 permission、列表点…）。
+    // 消费主题上下文让这个 memo 组件在换主题时也重渲染（context 更新绕过
+    // React.memo）；memo 依赖取**调色板身份**而非名字——`auto` 明暗翻转时名字
+    // 不变但色板换了，只按名字会漏。
+    const [themeName] = useTheme();
+    const palette = getTheme(themeName);
     React.useEffect(() => {
         let mounted = true;
         void getCliHighlightPromise().then((loaded) => {
@@ -198,7 +227,7 @@ function MarkdownImpl({ children, dimColor = false, cacheTokens = true, inlineMa
         return renderTokensToNodes(lexWithCache(source, cacheTokens), highlight, dimColor, 
         // Dimmed text (thinking) cannot dim an image, so it keeps Unicode.
         inlineMathImages && mathRendering === 'image' && !dimColor);
-    }, [children, dimColor, highlight, cacheTokens, mathRendering, inlineMathImages]);
+    }, [children, dimColor, highlight, cacheTokens, mathRendering, inlineMathImages, palette]);
     return (_jsx(Box, { flexDirection: "column", gap: 1, children: renderedNodes }));
 }
 /**

package/lib/types/components/MathBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MathBlock.d.ts","sourceRoot":"","sources":["../../../src/components/MathBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA+B/F,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CA+FjF;AAgCD,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7D"}
+{"version":3,"file":"MathBlock.d.ts","sourceRoot":"","sources":["../../../src/components/MathBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAA;AA+B/F,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,SAAS,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAiGjF;AAgCD,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAK7D"}

package/lib/types/components/MathBlock.js

@@ -75,7 +75,9 @@ export function MathBlock({ token, dimColor, forceWidth }) {
         // wrapped across it, so every visible row of the box carries the formula.
         const stackedFits = lines !== undefined && lines.length <= raster.rows &&
             lines.every(line => stringWidth(line) <= raster.columns);
-        const painted = (_jsx(Image, { ...(composited ? {} : { transparent: true }), presentation: "transcript", source: raster.source, width: raster.columns, height: raster.rows, alt: token.text, copyText: token.raw.trim(), children: _jsx(Box, { width: raster.columns, height: raster.rows, overflow: "hidden", children: _jsx(Text, { dimColor: true, wrap: stackedFits ? 'truncate' : 'wrap', children: stackedFits ? lines.join('\n') : renderInlineMath(token.text) ?? token.text }) }) }));
+        // A formula is line art: the transparent Sixel mask stays solid instead
+        // of dithering, so fraction bars and hairline strokes keep their ink.
+        const painted = (_jsx(Image, { ...(composited ? {} : { transparent: true }), lineArt: true, presentation: "transcript", source: raster.source, width: raster.columns, height: raster.rows, alt: token.text, copyText: token.raw.trim(), children: _jsx(Box, { width: raster.columns, height: raster.rows, overflow: "hidden", children: _jsx(Text, { dimColor: true, wrap: stackedFits ? 'truncate' : 'wrap', children: stackedFits ? lines.join('\n') : renderInlineMath(token.text) ?? token.text }) }) }));
         // A composited formula needs a real surface: the slot carries the terminal
         // background, so both the placement and its cells use that colour.
         const image = composited

package/lib/types/components/MermaidDiagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDiagram.d.ts","sourceRoot":"","sources":["../../../src/components/MermaidDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAOpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AA6BrE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC,IAAI,CAAA;IAClB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAgCjG"}
+{"version":3,"file":"MermaidDiagram.d.ts","sourceRoot":"","sources":["../../../src/components/MermaidDiagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAOpC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAA;AA6BrE,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC,IAAI,CAAA;IAClB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAA;IAC9B,QAAQ,EAAE,OAAO,CAAA;IACjB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmBD,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,GAAG,KAAK,CAAC,SAAS,CAkCjG"}

package/lib/types/components/MermaidDiagram.js

@@ -5,7 +5,7 @@ import { useTerminalSize } from '../ink/hooks/use-terminal-size.js';
 import { stringWidth } from '../ink/stringWidth.js';
 import { getTheme } from '../theme.js';
 import { useTheme } from './design-system/ThemeProvider.js';
-import { formatToken } from '../terminal-utils/markdown.js';
+import { CodeBlockFrame } from './CodeBlockFrame.js';
 import { getMermaidEnginePromise, paintMermaidArt, peekMermaidEngine, renderMermaid, } from '../terminal-utils/mermaid.js';
 import { getMermaidDiagrams, subscribeMermaidDiagrams } from '../tuiDisplayPrefs.js';
 import { t } from '../i18n.js';
@@ -16,9 +16,9 @@ import { t } from '../i18n.js';
  * ```mermaid fence line is a code-block affordance and a diagram needs none.
  * Whenever there is no art to show (setting off, engine still loading or
  * unavailable, unsupported diagram type, nothing parsed, or the layout is
- * wider than the viewport) the block falls back to the ordinary code-block
- * rendering — fence line included, because that IS a code block — and a
- * too-wide diagram adds a caption with the width it needs.
+ * wider than the viewport) the block falls back to the shared
+ * CodeBlockFrame — because that IS a code block — and a too-wide diagram
+ * adds a caption with the width it needs.
  */
 /** Same viewport slack MarkdownTable keeps for gutters and message insets. */
 const SAFETY_MARGIN = 4;
@@ -55,7 +55,9 @@ export function MermaidDiagram({ token, highlight, dimColor, forceWidth }) {
     // every frame and re-lays out — sub-millisecond for a warm engine.
     const art = React.useMemo(() => (enabled && engine !== null ? renderMermaid(engine, token.text) : null), [enabled, engine, token.text]);
     if (art === null || art.width > width - INDENT_WIDTH - SAFETY_MARGIN) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: dimColor, children: formatToken(token, 0, null, null, highlight).trimEnd() }), art !== null && (_jsx(Text, { color: "inactive", children: INDENT + t('mermaid-too-wide', { width: art.width }) }))] }));
+        // No art to show: this IS a code block, so it falls back to the
+        // ordinary CodeBlockFrame (shared with plain fences).
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(CodeBlockFrame, { token: token, highlight: highlight, dimColor: dimColor, forceWidth: forceWidth }), art !== null && (_jsx(Text, { color: "inactive", children: INDENT + t('mermaid-too-wide', { width: art.width }) }))] }));
     }
     return (_jsx(Text, { dimColor: dimColor, children: paintMermaidArt(art, theme).map(line => INDENT + line).join('\n') }));
 }