dsh-claude-style 0.10.3 → 0.10.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,88 @@
2
2
 
3
3
  All notable changes to `dsh-claude-style` are documented here, newest first.
4
4
 
5
+ ## [0.10.5] - 2026-10-04
6
+
7
+ [中文](#cn-0.10.5) | [English](#en-0.10.5)
8
+
9
+ <h3 id="cn-0.10.5">新增功能</h3>
10
+
11
+ - **配色与字体可以交给宿主,与壁纸等主题插件一起使用**:插件以前总是改写宿主的颜色与字体,并在侧栏、对话区刷上实色底,和 dsh-wallpaper-engine 这类同样改写宿主颜色的主题插件同时启用时,壁纸被盖住,谁的颜色生效还取决于加载先后。设置页新增「配色」与「字体」两项,各有「Claude」与「跟随宿主」两档,默认仍是 Claude。选「跟随宿主」后,插件不再改写宿主的颜色或字体,也不再给侧栏、对话区刷底色,只保留布局和控件;插件自己画的弹层、卡片与选择器改用宿主的颜色,同时启用壁纸插件时随它的玻璃效果变成半透明,弹层还会模糊背后的画面以保证文字清楚。选 Claude 时外观与以前完全一致。
12
+ - **接管宿主界面的功能都能单独关闭**:权限分段控件、侧栏搜索、进行中 / 已归档视图、轮次状态行与对话 / 轨迹标签条以前没有开关,不想要其中一项就只能停用整个插件。现在每一项都有自己的开关,关闭后宿主原来的界面立刻回来,再打开立刻生效,都不需要刷新页面。
13
+ - **设置页分为五个分页**:设置项以前排成一整列。现在顶部的分页条把它们分进「通用」「外观」「输入区」「侧栏」「对话」五页;「快捷供应商」紧跟在「重绘模型选择器」下面、两项之间不画分隔线,模型选择器关闭时变灰不可操作,「出现位置」在吉祥物关闭时同样变灰。
14
+ - **吉祥物可以单独选择,像素螃蟹也随智能体的工作换动画**:吉祥物以前由品牌决定,螃蟹只站在工作台首页,只会偶尔掏出电脑敲一阵代码。现在设置页的「吉祥物」可选「跟随品牌」(默认,Claude 品牌下是螃蟹、DeepSeek 品牌下是 Deepy)、「螃蟹」「Deepy」或「关闭」,「出现位置」可选只在首页,或首页与对话页都出现(默认)。螃蟹和 Deepy 一样站在两种首页版面与对话页的输入区上沿,随工作状态换动画:思考时头顶冒出思考泡泡,写回答与调用工具时敲电脑,三个会话同时工作时戴上安全帽,子代理运行时戴耳机或挥手指挥,等你操作时头顶亮起感叹号,压缩上下文时被压扁,完成时蹦跳,失败时双眼打叉、发抖,闲置一分钟后睡着,有动作时惊醒;闲着时偶尔东张西望、挥挥钳子,或者掏出电脑敲一阵代码。点它的左半边或右半边会被戳得往一侧躲,连点四下会被挠痒,按住拖动会被拎起来。螃蟹的帧图随插件内联,约 20 KB。
15
+
16
+ ### 体验优化
17
+
18
+ - **设置项说明改为只说行为**:设置页十项的说明以前夹带设计缘由(进度圈为什么不停、彩蛋页为什么不跟随界面语言),动辄两三行。现在每条说明只说这一项改什么、各档分别是什么效果;「修改品牌标识」「重绘设置弹层」等动宾式或与其他条目不一致的标题一并统一为名词短语。
19
+ - **Windows 桌面端的顶栏不再是一条单独的色带**:顶栏以前刷着侧栏的颜色,横贯整个窗口,右上角最小化、最大化、关闭三个按钮还托在一块同色的矩形上,打开设置时周围都被遮罩盖暗,只有这块矩形不变。现在顶栏透明,侧栏和主界面各自通到窗口顶端,两者之间的分隔线从顶到底连成一条,主界面左上角的圆角去掉;三个按钮直接落在页面上,打开设置时随页面一起变暗,悬停高亮照常。macOS 与 Web 端不变。
20
+
21
+ ### 问题修复
22
+
23
+ - **小鲸鱼不再把阴影画在目标、待办与排队卡片上**:DeepSeek 品牌下,小鲸鱼被叠在输入卡片上方的目标、待办与排队卡片顶起时,它身下阴影的末端落在那张卡片的最上缘。现在小鲸鱼抬高 3 像素,阴影落在卡片上,卡片上不再压着一道暗色。
24
+ - **侧栏搜索框与它下面的按钮等高、间距一致,桌面端也不再被顶栏盖住**:搜索框以前比「新会话」「插件」这些行高出 4 像素,与它们相隔也只有 4 像素,排在这一列里比其余各行都松。现在搜索框与各按钮同为 28 像素高,与「新会话」的间隔为 6 像素,与各按钮之间的间隔相同;Windows 桌面端那一行为此少抬高 4 像素,搜索框整块落在顶栏下方,不再被截去上缘。
25
+ - **模型选择器右端不再被上下文计量环压住**:在「轨迹」或「上下文」标签页停留后切换对话,模型选择器最右端的档位文字会落在计量环上,并一直保持到上下文数字再次变化;现在回到对话页就恢复两者的间距。
26
+
27
+ ### 其他变更
28
+
29
+ - **设置的保存字段新增九项**:插件的设置表单新增 `palette`、`typeface`、`mascot`、`mascotScope`、`permissionsControl`、`workspaceView`、`sidebarSearch`、`turnStatus`、`viewTabs`。宿主半边是旧版本时(更新插件后没有重启宿主),这几项改动保存不下来,重启宿主后恢复正常。
30
+
31
+ <h3 id="en-0.10.5">New Features</h3>
32
+
33
+ - **Colours and typefaces can be left to the host, so the skin works alongside wallpaper and other theme plugins**: the plugin always rewrote the host's colours and fonts and painted solid canvases under the sidebar and the conversation, so next to a theme plugin that rewrites the same colours, such as dsh-wallpaper-engine, the wallpaper was covered and whose colours won depended on load order. The settings page adds Colours and Typefaces, each with Claude and Follow the host; Claude stays the default. Under Follow the host the plugin rewrites neither the host's colours nor its fonts and paints no canvas under the sidebar or the conversation, keeping only its layout and controls; its own popovers, cards and pickers take the host's colours, turn translucent with a wallpaper plugin's glass, and blur what lies behind them so their text stays readable. Under Claude the look is exactly as before.
34
+ - **Every feature that takes over the host's interface can be switched off on its own**: the permission control, the sidebar search, the In progress / Archived view, the turn status line and the Chat / Trajectory tabs had no switch, so dropping one meant disabling the whole plugin. Each now has its own switch; off brings the host's original back at once, on brings the feature back at once, with no reload either way.
35
+ - **The settings page is split into five tabs**: the settings used to run down one column. A tab strip at the top now sorts them into General, Appearance, Composer, Sidebar and Conversation; Quick providers sits right under Redraw the model picker with no divider between the two, and greys out while the picker is off, as Where it appears does while the mascot is off.
36
+ - **The mascot is chosen on its own, and the pixel crab follows the agent's work too**: the brand used to decide the mascot, and the crab stood on the Studio home page alone, now and then pulling out its laptop to type. The settings page's Mascot now offers Follow the brand (the default: the crab under Claude, Deepy under DeepSeek), Crab, Deepy or Off, and Where it appears offers the home page alone or the home page and conversations (the default). Like Deepy, the crab stands on the composer of both home layouts and of the conversation, and changes its animation with the work: a thought bubble while the model thinks, typing on its laptop while it writes and calls tools, a hard hat with three sessions at work, headphones or conducting while subagents run, an exclamation mark while it waits on you, squashed while the context is compacted, hopping when a turn finishes, crossed eyes and a shake when something fails, asleep after a quiet minute and startled awake at the next move; between jobs it now and then looks around, waves a claw, or pulls out its laptop to type for a while. A click on its left or right half pokes it aside, four quick clicks tickle it, and pressing it and pulling lifts it. The crab's sheets ride the bundle, about 20 KB.
37
+
38
+ ### Improvements
39
+
40
+ - **Settings descriptions now state behavior only**: the ten settings rows used to mix design rationale into their descriptions (why the progress ring never stops, why the easter egg ignores the interface language) and ran two to three lines each. Every description now says only what the setting changes and what each option does; verb-form or inconsistent titles such as the brand and sidebar-footer rows are unified to noun phrases.
41
+ - **The Windows titlebar is no longer a band of its own**: the caption row was painted in the sidebar colour across the whole window, and the minimize, maximize and close buttons sat on a block of that colour, which stayed bright while the settings mask darkened everything around it. The row is transparent now: the sidebar and the main area each run to the top of the window, the divider between them runs top to bottom in one line, and the main area loses its rounded top-left corner; the three buttons sit on the page itself, dim with it under the settings mask, and keep their hover highlight. macOS and the web build are unchanged.
42
+
43
+ ### Bug Fixes
44
+
45
+ - **Deepy no longer paints its shadow across the goal, todo and queue cards**: under the DeepSeek brand, when the goal, todo or queue cards pushed the whale up off the composer card, the tail of the shadow under it landed on the top edge of that card. The whale now sits 3px higher: the shadow rests on the card instead of a dark band being stamped across it.
46
+ - **The sidebar search box matches the height and the rhythm of the rows under it, and no longer hides under the desktop titlebar**: the box stood 4px taller than New session, Plugins and the rows below them, and sat 4px from New session, which left the top of the list looser than the rest of it. The box is 28px like those rows now, 6px above New session, the same step the rows take among themselves; on the Windows Desktop that row rises 4px less, which keeps the whole box below the titlebar instead of cutting its top edge.
47
+ - **The right end of the model trigger no longer sits under the context meter**: after a spell on the Trajectory or Context tab, switching conversations brought the right end of the model trigger under the occupancy ring, and it stayed there until the reading moved again; coming back to the conversation now restores the clearance between the two.
48
+
49
+ ### Chores
50
+
51
+ - **Nine new stored settings**: the plugin's settings form gains `palette`, `typeface`, `mascot`, `mascotScope`, `permissionsControl`, `workspaceView`, `sidebarSearch`, `turnStatus` and `viewTabs`. With an older host half still running (the plugin updated without restarting the host), changes to these do not save until the host restarts.
52
+
53
+ **Full Changelog**: [v0.10.4...v0.10.5](https://github.com/Nwflower/dsh-claude-style/compare/v0.10.4...v0.10.5)
54
+
55
+ ## [0.10.4] - 2026-10-03
56
+
57
+ [中文](#cn-0.10.4) | [English](#en-0.10.4)
58
+
59
+ <h3 id="cn-0.10.4">体验优化</h3>
60
+
61
+ - **没有 Anthropic 字体时,界面与正文换成外观相近的字体**:没有把 Anthropic Sans / Serif 装进系统或放进插件 `fonts/` 目录时,界面以前落到 Segoe UI、苹方这类系统字体,对话正文落到 Georgia,字形和排版都和原样差得远。现在插件自带 Inter 与 Noto Serif(SIL OFL 1.1)代替两款 Anthropic 字体,它们的字高、字宽与原字体相差不到百分之二,换字体时文字不会重新换行,粗体用的是字体本身的字重。两款字体只含 Anthropic 字体覆盖的拉丁字符,中文照旧使用系统中文字体;npm 包因此大约增加 214 KB。已经启用 Anthropic 字体的环境不受影响。
62
+ - **品牌标识改为大卡片选择**:设置页的品牌选项由分段小按钮改为一排大卡片,每张卡片放对应的品牌标识(Claude 的陶土星芒、DeepSeek 的蓝鲸),当前品牌的卡片带品牌色描边;后续新增品牌只需添一张卡片。
63
+ - **设置页同时出现在设置对话框与插件页**:0.1.7 起这页只显示在插件页内。现在设置对话框恢复「Claude Style」标签页,两处渲染同一份页面、共用同一份偏好存储,一边改动另一边即时跟上;旧版宿主不受影响,仍只有设置对话框一处。
64
+
65
+ ### 问题修复
66
+
67
+ - **简洁用量模式下的统计弹层不再出现空置半行与多余分组**:宿主「性能与用量」设置选为简洁时,上下文弹层以前把四个数字拆在「会话统计」和「Token 用量」两个小标题下,三项指标占两行、一项指标占一行,各自留下一处空白格。现在简洁模式下移除分组小标题,总用时、首 token 平均、输出速度与缓存命中四个指标合并为整齐的 2×2 排版。
68
+ - **其他插件放进输入框的模型菜单恢复上下排列**:同时启用 `dsh-thinking-effort` 这类自带模型菜单的插件时,菜单里的各个供应商分组以前被挤成一行横排。现在分组按原样上下排列。
69
+ - **macOS 桌面端的封号彩蛋页不再重复出现窗口按钮**:macOS 桌面壳的窗口左上角是系统画的三个红黄绿按钮,彩蛋页以前又画了一套最小化 / 还原 / 关闭,页面上于是出现两排按钮。现在这页不画自己那套,星芒标与字标、「退出登录」直接排进系统标题栏那一行,并让开左侧的三个按钮;按住这一行的空白处仍然可以拖动窗口。
70
+ - **其他插件的弹层与标签保持原有的形状**:其他插件的元素只要类名里带 `badge` 或 `tag`,以前都会被改成胶囊圆角。额度插件的弹层因此变成四角极圆的方圆形,标题和底部按钮被切掉一角,弹层里各段的分隔线也弯成弧形。现在胶囊圆角只用在宿主自己的徽标与标签上(轨迹标签、自定义模型行的标签、提问里的「推荐」、快捷键按键等),而且两端是正圆弧,不再略方。
71
+
72
+ <h3 id="en-0.10.4">Improvements</h3>
73
+
74
+ - **Without the Anthropic fonts, the interface and conversation text use close look-alikes**: when Anthropic Sans and Serif were neither installed on the system nor dropped into the plugin's `fonts/` directory, the interface used to fall back to system fonts such as Segoe UI or PingFang and the conversation body to Georgia, far from the intended letterforms and layout. The plugin now ships Inter and Noto Serif (SIL OFL 1.1) in their place; their letter heights and widths are within two percent of the Anthropic fonts, so text does not rewrap when one replaces the other, and bold text uses the fonts' own weights. Both carry only the Latin characters the Anthropic fonts cover, so Chinese text keeps using the system's Chinese fonts; the npm package grows by about 214 KB. Setups that already have the Anthropic fonts are unaffected.
75
+ - **The brand choice is now a row of large cards**: the settings page's brand option changes from small segments to large cards, each carrying the brand's own mark (Claude's clay starburst, DeepSeek's blue whale) with the active card outlined in the brand accent; a new brand is one more card.
76
+ - **The settings page now shows in both the settings dialog and the plugin page**: since 0.1.7 it lived only on the plugin page. The settings dialog keeps its "Claude Style" tab again — both render the same page against the same preference store, so a change in one appears in the other at once. Older hosts are unaffected and keep the dialog tab as the only seat.
77
+
78
+ ### Bug Fixes
79
+
80
+ - **The stats popover under compact usage no longer shows half-empty rows and redundant groups**: when the host's performance and usage setting was set to compact, the context popover previously split the four figures under "Session statistics" and "Token usage" headings, leaving awkward empty slots in two separate grids. The compact mode now removes the section headings and places total time, average TTFT, output speed, and cache hit share together into a clean 2x2 layout.
81
+ - **A model menu another plugin puts in the composer stacks its groups again**: with a plugin that brings its own model menu, such as `dsh-thinking-effort`, the menu's provider groups used to be squeezed into one horizontal row. They stack top to bottom as the plugin draws them now.
82
+ - **The account-hold page on the macOS Desktop no longer draws a second set of window buttons**: the top-left of a macOS Desktop window belongs to the system, which paints the three red-yellow-green buttons; the page used to draw its own minimize, maximize and close as well, so the window showed two rows of buttons. It draws none of its own now — the starburst and wordmark and the Sign out button take their place in the titlebar row, clear of the three buttons on the left, and the window is still dragged by the empty part of that row.
83
+ - **Other plugins' popovers and tags keep their own shape**: any element of another plugin whose class name contained `badge` or `tag` used to be turned into a pill. A quota plugin's popover became a squarish blob with very round corners, its title and bottom buttons clipped at the corners and the dividers between its sections bent into arcs. The pill radius now applies only to the host's own badges and tags (trajectory tags, the custom model row tag, the Recommended mark in a question, shortcut key caps and the like), and their ends are true round arcs instead of slightly squared ones.
84
+
85
+ **Full Changelog**: [v0.10.3...v0.10.4](https://github.com/Nwflower/dsh-claude-style/compare/v0.10.3...v0.10.4)
86
+
5
87
  ## [0.10.3] - 2026-10-01
6
88
 
7
89
  [中文](#cn-0.10.3) | [English](#en-0.10.3)
@@ -167,7 +249,7 @@ All notable changes to `dsh-claude-style` are documented here, newest first.
167
249
 
168
250
  ### 体验优化
169
251
 
170
- - **像素螃蟹改用 Claude Code 的原版动画**:工作台首页输入卡片上的螃蟹原来是按 Claude Code 的样子手绘的十一个姿势;现在换成 Claude Code 自己的钓鱼动画,逐帧照搬(43 帧、每帧 80 毫秒,约 3.4 秒):眨眼、举竿甩过卡片边沿、跳一下侧过身钓鱼、收竿转回正面,像素边缘清晰。鱼竿仍用随主题变化的灰色,触发方式(点击、指针移开、闲置时隔二三十秒自己来一次,减少动态效果时只认点击)不变。
252
+ - **像素螃蟹改用 Claude Code 的原版动画**:工作台首页输入卡片上的螃蟹原来是按 Claude Code 的样子手绘的十一个姿势;现在换成 Claude Code 自己的敲代码动画,逐帧照搬(43 帧、每帧 80 毫秒,约 3.4 秒):眨眼、掏出笔记本电脑放到卡片边沿、跳一下侧过身敲一阵键盘、收起电脑转回正面,像素边缘清晰。电脑仍用随主题变化的灰色,触发方式(点击、指针移开、闲置时隔二三十秒自己来一次,减少动态效果时只认点击)不变。
171
253
  - **对话中输入框的发送键改成 Claude Code 的回车图标**:原来是等宽字体里的「↵」字符,有内容时变成陶土橙;现在是按 Claude Code 画的回车箭头(上沿一小段、沿右侧向下、再沿底边向左到箭头),线条清晰,输入框有内容时用正文墨色,空着时仍是浅灰。
172
254
  - **桌面端侧栏的品牌行上移 10px**:桌面端的侧栏从 40px 高的标题栏下方开始,品牌标志因此比 Web 端低出一截;现在品牌行(连同其下的新会话、插件与会话列表)上移 10px,悬停时换上的搜索框仍整个露在标题栏下方,与标题栏里的收起按钮也不重叠。Web 端不变。
173
255
  - **用量面板的倍数趣味行从二十九本书扩到六十五本**:书单补入《黄色壁纸》《变形记》《化身博士》《野性的呼唤》《时间机器》《绿野仙踪》《黑暗之心》《浮士德》《螺丝在拧紧》《伊索寓言》《彼得·潘》《君主论》《隐形人》《安徒生童话》《世界大战》《善恶的彼岸》《白牙》《沉思录》《格林童话》《格列佛游记》《瓦尔登湖》《鲁滨逊漂流记》《神曲》《包法利夫人》《查拉图斯特拉如是说》《奥德赛》《双城记》《远大前程》《理想国》《罪与罚》《利维坦》《安娜·卡列尼娜》《卡拉马佐夫兄弟》《堂吉诃德》《基督山伯爵》《悲惨世界》,长度都是全文以 o200k_base 分词器实测的值(英文原著或通行英译本,《浮士德》为德文原文)。书单仍从《道德经》排到《追忆似水年华》,用量越过的书更密,趣味行落到的那本书离实际用量更近。
@@ -184,7 +266,7 @@ All notable changes to `dsh-claude-style` are documented here, newest first.
184
266
 
185
267
  ### Improvements
186
268
 
187
- - **The pixel crab plays Claude Code's own animation**: the crab on the Studio home page's composer card used to be eleven hand-drawn poses after Claude Code's; it now plays Claude Code's own fishing animation frame for frame (43 frames of 80 ms, about 3.4 s) — a blink, the rod raised and cast past the card's edge, a hop into a side-on stance to fish, the rod reeled in as it turns back — with crisp pixel edges. The rod keeps its theme-following grey, and what sets it off (a click, the pointer leaving it, on its own every half minute or so, only a click under reduced motion) is unchanged.
269
+ - **The pixel crab plays Claude Code's own animation**: the crab on the Studio home page's composer card used to be eleven hand-drawn poses after Claude Code's; it now plays Claude Code's own laptop animation frame for frame (43 frames of 80 ms, about 3.4 s) — a blink, a laptop pulled out onto the card's edge, a hop into a side-on stance to type away, the laptop put away as it turns back — with crisp pixel edges. The laptop keeps its theme-following grey, and what sets it off (a click, the pointer leaving it, on its own every half minute or so, only a click under reduced motion) is unchanged.
188
270
  - **The in-conversation composer's send button uses Claude Code's return glyph**: it used to be the "↵" character from the monospace font, turning clay once there was text; it is now Claude Code's drawn return arrow (a short stub along the top, down the right side, back along the bottom to the arrowhead) in crisp strokes, in the body ink once the box holds text and still pale grey while it is empty.
189
271
  - **The desktop sidebar's brand row sits 10px higher**: the desktop sidebar starts below the 40px titlebar, which left the brand mark lower than on the web; the brand row (and the New session, Plugins and session list below it) now rises 10px, with the search box that takes its place on hover still wholly below the titlebar and clear of the collapse button there. The web build is unchanged.
190
272
  - **The usage panel's yardstick line grows from twenty-nine to sixty-five books**: the list adds The Yellow Wallpaper, Metamorphosis, The Strange Case of Dr Jekyll and Mr Hyde, The Call of the Wild, The Time Machine, The Wonderful Wizard of Oz, Heart of Darkness, Faust, The Turn of the Screw, Aesop's Fables, Peter Pan, The Prince, The Invisible Man, Andersen's Fairy Tales, The War of the Worlds, Beyond Good and Evil, White Fang, Meditations, Grimms' Fairy Tales, Gulliver's Travels, Walden, Robinson Crusoe, The Divine Comedy, Madame Bovary, Thus Spoke Zarathustra, The Odyssey, A Tale of Two Cities, Great Expectations, The Republic, Crime and Punishment, Leviathan, Anna Karenina, The Brothers Karamazov, Don Quixote, The Count of Monte Cristo and Les Misérables, each sized by feeding its full text to the o200k_base tokenizer (the English original or the standard English translation; Faust in the German original). The list still runs from Tao Te Ching to In Search of Lost Time; with the books set closer together, the one the line lands on sits nearer the real usage.
@@ -299,7 +381,7 @@ All notable changes to `dsh-claude-style` are documented here, newest first.
299
381
  - **两套首页版面,设置页随时切换**:新增「首页版面」设置项。**经典**沿用居中大标题加输入卡片;**工作台**把标题移到左上角并固定为一句「What's up next, 用户名?」(无衬线小字,与品牌标记同一行),输入框改用对话内的单行样式贴住窗口底部、上方一行细边框上下文胶囊,标题与一块 480px 窄栏用量面板贴着输入框左缘排布——概览页签是六个数字格(会话数、消息数、Token 总量、活跃天数、高峰时段、最常用模型)与 26 周按天热力图(等分列方格、蓝色数据色阶);模型页签是每天一根按模型颜色自下而上堆叠的柱子,下面跟一份模型排行(色块、模型名、输入与输出、占比,超过六行折成「再显示 N 个」,展开后末尾是「收起」),柱与色块共用同一套按名次取色的蓝色色阶;右上角的「全部 / 30 天 / 7 天」范围切换过滤数字格(含高峰时段)、趣味行与模型排行,热力图与柱状图保持自身窗口;所选范围内的用量超过一本书时,热力图下方出现倍数趣味行:书从《动物农场》到《追忆似水年华》共十一本,每次回到新会话页随机换一本,范围内用量还不到这本书时退到已经超过的最长那本。面板只在新会话页出现,进入对话后自动消失。
300
382
  - **用量数据在本机汇总**:新增只读路由 `GET /dsh-claude-style/usage`(与用户名路由同一同源护栏)。装了 `dsh-cost-meter` 时直接读它的账本缓存(只读),否则读本机会话日志自行汇总,并按日志文件增量缓存——冷启动首次约两秒,之后每次启动约 3 毫秒。两种来源都给出每个模型的四类 token 与每天按模型拆分的 token(`models` 与 `days[].models`),模型页签的柱状图与排行读它们;账本按「提供方:模型」记账,同一模型经不同提供方的用量合成一行。账本不记小时,读账本时其余数字先出,高峰时段随后由本机会话日志按天算出补上。汇总不可用(旧宿主半边或汇总失败)时,面板改用宿主会话列表自带的投影值出数。
301
383
  - **面板先画骨架再填数**:数字到达前先画好外框、占位数字、空热力格与模型行的占位条,到达后只替换文字、格子颜色与条长,整个版面不跳动;取不到数据的格子画破折号,不画零。
302
- - **输入卡片上的像素螃蟹**:工作台版面的新会话页上(经典版面没有),输入卡片上沿靠右站着 Claude Code 的像素螃蟹。点它一下、指针从它身上移开时、以及页面开着时每隔 25–45 秒,它照 Claude Code 的样子钓一次鱼:半转身眨眼,举竿甩到卡片边上,侧身钓一会儿,收竿转回正面,约三秒;系统要求减少动态效果时(例如 Windows 关掉了「在 Windows 中显示动画」),只有点它才播放。只有螃蟹本身接收指针,鱼竿挥动的空白处不挡点击。
384
+ - **输入卡片上的像素螃蟹**:工作台版面的新会话页上(经典版面没有),输入卡片上沿靠右站着 Claude Code 的像素螃蟹。点它一下、指针从它身上移开时、以及页面开着时每隔 25–45 秒,它照 Claude Code 的样子敲一次代码:半转身眨眼,掏出笔记本电脑放到卡片边上,侧身敲一会儿键盘,收起电脑转回正面,约三秒;系统要求减少动态效果时(例如 Windows 关掉了「在 Windows 中显示动画」),只有点它才播放。只有螃蟹本身接收指针,电脑挥动的空白处不挡点击。
303
385
  - **热力图的日期提示**:指针停在热力图的某一天上,立刻浮出 Claude Code 样式的深色提示,写着日期和当天的消息数(如「9月9日 — 15,955」);靠两端的几列提示贴着格子外沿,不会伸出面板。会话列表兜底来源没有按天的消息数,此时提示写当天的 Token。概览的数字格同时改用 Claude Code 的叫法:消息数、Token 总量、最常用模型(模型名不加粗)。
304
386
  - **经典首页的问候更多了**:经典版面的大标题不再每个时段只有一句,早上、午间、下午、晚上、深夜各有一组问候,另有几句不分时段;每次回到新会话页随机换一句,同一次停留里不会跳动。
305
387
  - **接入 HDSL 启动器的账号信息**:由 HDSL 启动的实例,昵称与头像会优先取启动器里的账号。昵称按「自定义昵称 → 官方账号昵称 → HDSL 昵称 → 上次探测到的系统用户名 → 系统用户名 → `User`」回退,头像按「官方账号头像 → HDSL 头像 → Claude 徽标」回退。宿主半边新增两条只读私有路由,与用户名路由同级过宿主请求栅栏:`GET /dsh-claude-style/hdsl` 回账号元数据(不含头像文件的绝对路径),`GET /dsh-claude-style/hdsl-skin.png` 回头像图片。契约版本读不到或不认识时整组忽略;头像文件被删除时回落到徽标。
@@ -309,7 +391,7 @@ All notable changes to `dsh-claude-style` are documented here, newest first.
309
391
  - **Two home layouts, switchable in the settings page**: a new Home layout preference. **Classic** keeps the centered headline over the composer card; **Studio** pins the greeting to the top left as one fixed line ("What's up next, <user>?", in the sans UI face on the brand mark's line), docks the composer in the conversation's single-line form at the window's bottom edge with a row of hairline context chips above it, and sets the greeting and a 480px usage panel against the composer's left edge — an Overview tab with six stat cells (sessions, messages, total tokens, active days, peak hour, favorite model) and a twenty-six-week per-day heat grid of square cells in equal columns, and a Models tab stacking each day's per-model tokens into one bar over a ranked model list (swatch, model name, input and output, share; past six rows it folds behind a "show more" row, and the open list ends in a "show less" row), both reading the same rank-ordered blue ramp. The All / 30d / 7d range pills filter the tiles (the peak hour included), the multiplier line and the model list while the grid and the chart keep their own windows, and once the picked range's total passes one book a multiplier line appears under the grid — eleven books from Animal Farm to In Search of Lost Time, a fresh one drawn each time the new-conversation page comes back, stepping down to the longest book the range has passed when it has not reached the drawn one. The panel appears on the new-conversation page only and steps away once a session is open.
310
392
  - **The usage numbers are folded locally**: a new read-only route, `GET /dsh-claude-style/usage`, behind the same same-origin fence as the username route. With `dsh-cost-meter` installed it reads that plugin's ledger cache (read-only); otherwise the host half folds the local session logs itself and caches the result incrementally per log file — about two seconds on the first cold pass, about 3 ms per start afterwards. Both sources answer each model's four token buckets and each day's per-model tokens (`models` and `days[].models`), which the Models tab's chart and ranking read; the ledger books usage per provider and model, and one model served by several providers is one row. The ledger keeps no hours, so with it the other figures land first and the peak hour follows a moment later, folded per day from the local session logs. When the fold cannot answer (an older host half or a failed pass), the panel falls back to the projection block each host session row carries.
311
393
  - **The panel draws its skeleton before its numbers**: the frame, number placeholders, an empty heat grid and stand-in share bars come first; arriving values replace only the text, the cell colours and the bar lengths, so nothing shifts. A figure no source can answer is a dash, never a zero.
312
- - **A pixel crab on the composer card**: on the new-conversation page of the Studio layout (the Classic layout has none), Claude Code's pixel crab stands on the composer card's top edge near its right end. When it is clicked, when the pointer leaves it, and every 25–45 seconds while the page is in view, it plays Claude Code's fishing routine — a half turn and a wink, the rod cast down onto the card's edge, a spell of fishing side-on, and the rod put away as it turns back, about three seconds; with reduced motion requested (Windows' "Show animations in Windows" turned off, for one) only a click plays it. Only the crab itself takes the pointer, so the room the rod swings through never blocks a click.
394
+ - **A pixel crab on the composer card**: on the new-conversation page of the Studio layout (the Classic layout has none), Claude Code's pixel crab stands on the composer card's top edge near its right end. When it is clicked, when the pointer leaves it, and every 25–45 seconds while the page is in view, it plays Claude Code's laptop routine — a half turn and a wink, a laptop brought out onto the card's edge, a spell of typing side-on, and the laptop put away as it turns back, about three seconds; with reduced motion requested (Windows' "Show animations in Windows" turned off, for one) only a click plays it. Only the crab itself takes the pointer, so the room the laptop swings through never blocks a click.
313
395
  - **Day tips on the heat grid**: resting the pointer on a day of the heat grid shows Claude Code's dark tip at once, with the date and that day's messages ("Sep 9 — 15,955"); over the columns at either end the tip lines up with the cell's outer edge and stays inside the panel. The session list's fallback has no per-day message count, and its tips name the day's tokens instead. The Overview tiles take Claude Code's names as well: Messages, Total tokens and Favorite model (the model name at regular weight).
314
396
  - **More greetings on the classic home page**: the classic headline no longer has one line per time of day — morning, midday, afternoon, evening and night each have a pool, plus a few lines for any hour; a fresh line is drawn each time the new-conversation page comes back and holds still while you stay.
315
397
  - **HDSL launcher accounts are picked up**: an instance started by HDSL prefers the launcher's account for both the nickname and the picture. The nickname falls back through the custom nickname → the signed-in account's name → the HDSL account name → the last probed system user → the system user → `User`; the picture through the account's avatar → the HDSL avatar → the Claude mark. The host half gains two read-only private routes behind the same request fence as the username route: `GET /dsh-claude-style/hdsl` answers the account metadata (never the avatar file's absolute path) and `GET /dsh-claude-style/hdsl-skin.png` answers the image. A contract version that is missing or unknown voids the whole group, and a deleted avatar file falls back to the mark.
package/LICENSE CHANGED
@@ -39,4 +39,13 @@ owners.
39
39
  are JetBrains Mono, distributed under the SIL Open Font License
40
40
  (`fonts/OFL.txt`). They may be redistributed with this plugin.
41
41
 
42
+ Crab artwork notice: the pixel crab (Clawd) is a character of Anthropic, and
43
+ all rights in it remain with Anthropic. `src/assets/mascot/crab-laptop-body.png`
44
+ and `src/assets/mascot/crab-laptop-ink.png` are frames of Claude Code's own
45
+ animation; the sheets under `src/assets/mascot/crab/` are drawn by this project
46
+ after that character (by `scripts/draw-crab.py`, which carries the drawings).
47
+ These files, and their copies inlined into `lib/client.js`, are **not** covered
48
+ by the MIT license above. This plugin is an unofficial fan work, not affiliated
49
+ with or endorsed by Anthropic.
50
+
42
51
 
package/README.en.md CHANGED
@@ -33,7 +33,7 @@ The settings page's Brand mark row switches between the Claude and DeepSeek pale
33
33
  </tr>
34
34
  </table>
35
35
 
36
- > Light mode pairs an ivory canvas `#FCFCFB` with a pale sidebar `#FBFBF9`; dark mode uses warm black `#141413`. Ember orange `#D97757` is the single action accent across both canvases, and Claude Code's pixel crab stands on the Studio home page's composer.
36
+ > Light mode pairs an ivory canvas `#FCFCFB` with a pale sidebar `#FBFBF9`; dark mode uses warm black `#141413`. Ember orange `#D97757` is the single action accent across both canvases, and Claude Code's pixel crab stands on the composer on the home page and in conversations alike.
37
37
 
38
38
  ### DeepSeek
39
39
 
@@ -67,6 +67,24 @@ The settings page's Brand mark row switches between the Claude and DeepSeek pale
67
67
 
68
68
  > The workspaces, sessions, usage figures and nickname in the screenshots are sample data.
69
69
 
70
+ ## Settings
71
+
72
+ The settings page appears both in the settings dialog (the "Claude Style" tab) and on the plugin page, in five tabs:
73
+
74
+ | Tab | Settings |
75
+ |---|---|
76
+ | General | Username, Animation, Open popovers on hover, Account-hold easter egg language |
77
+ | Appearance | Brand mark, Colours, Typefaces, Mascot, Where it appears |
78
+ | Composer | Composer restyle, Home layout, Redraw the model picker (with Quick providers under it), Redraw the permission control |
79
+ | Sidebar | Collapse the sidebar settings area, Sidebar search, In progress / Archived view |
80
+ | Conversation | Turn status line, Chat / Trajectory tabs |
81
+
82
+ Every feature that takes over part of the host's interface has its own switch; turning it off brings the host's original back at once, without a reload.
83
+
84
+ **Alongside other theme plugins**: with Colours and Typefaces set to Follow the host, the skin no longer rewrites the host's colours and fonts and keeps only its layout and controls; the colours are left to DSH itself, or to another theme plugin enabled at the same time. With [dsh-wallpaper-engine](https://github.com/elysia395/dsh-wallpaper-engine), for example, the wallpaper shows through the sidebar and the conversation, and the skin's own popovers take that plugin's glass, translucent and blurring the picture behind them.
85
+
86
+ **Mascot**: a pixel companion stands on the composer's top edge and changes its animation with what the agent is doing (thinking, writing and calling tools, several sessions at work, subagents, waiting on you, compacting the context, finished, failed, asleep). Follow the brand shows the pixel crab under Claude and Deepy the whale under DeepSeek; either can be picked for good, or none. Where it appears keeps it to the new-conversation page, or puts it in conversations as well.
87
+
70
88
  ## Fonts
71
89
 
72
90
  > **Important: the Anthropic fonts are not bundled with the npm package.** They are available for download in this repository under [`fonts/`](fonts/). You can either install them on your system, or skip the install entirely — drop the two `.ttf` files into the plugin package's `fonts/` directory and the host will serve them as webfonts (the files are identical, so the result is the same). Either way, refresh or restart the web UI for the fonts to take effect.
@@ -76,6 +94,10 @@ The settings page's Brand mark row switches between the Claude and DeepSeek pale
76
94
  | Anthropic Sans Web Text | Interface / UI | [`fonts/AnthropicSansWebText.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/AnthropicSansWebText.ttf) |
77
95
  | Anthropic Serif Web Text | Conversation body / Markdown | [`fonts/AnthropicSerifWebText.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/AnthropicSerifWebText.ttf) |
78
96
  | JetBrains Mono Variable | Code / code blocks | [`fonts/JetBrainsMonoVariable.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/JetBrainsMonoVariable.ttf), [`fonts/JetBrainsMonoItalicVariable.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/JetBrainsMonoItalicVariable.ttf) |
97
+ | Inter | Interface when Anthropic Sans is absent | [`fonts/InterVariable.woff2`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/InterVariable.woff2) |
98
+ | Noto Serif | Conversation body when Anthropic Serif is absent | [`fonts/NotoSerifVariable.woff2`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/NotoSerifVariable.woff2) |
99
+
100
+ JetBrains Mono, Inter and Noto Serif are licensed under the SIL Open Font License 1.1 and ship with the npm package; nothing to set up. Inter and Noto Serif nearly match the two Anthropic fonts in letter height and width, so without the Anthropic fonts they stand in and the interface and conversation text keep their layout. Both carry only the Latin characters the Anthropic fonts cover; Chinese text keeps using the system's Chinese fonts.
79
101
 
80
102
  To enable the Anthropic fonts, choose one of the following:
81
103
 
@@ -117,6 +139,8 @@ Keep only one theme enabled at a time. dsh ≥ 0.1.7 is required, and a restart
117
139
 
118
140
  The animation frames of Deepy the pixel whale come from the Deepy whale theme pack drawn by calmly-eating-bugs ([@wp3171216237](https://github.com/wp3171216237)), and ship with the plugin by the author's permission. Many thanks to the author! GIFs of all 20 animations, contributed by the author, are in [showcase/gifs/](showcase/gifs/).
119
141
 
142
+ The pixel crab (Clawd) is a character of Anthropic, and all rights in it remain with Anthropic. Its laptop animation is taken from Claude Code; the animations of its other states are drawn by this project after that character. The crab's frames are not covered by the MIT license (see [LICENSE](LICENSE)). This plugin is an unofficial fan work, not affiliated with or endorsed by Anthropic.
143
+
120
144
  ## Related projects
121
145
 
122
146
  > Running several themes at once? Try [dsh-skin-manager](https://github.com/xiaoyangcheng84-svg/dsh-skin-manager) — it switches between all installed themes from a single settings page.
package/README.md CHANGED
@@ -65,6 +65,24 @@
65
65
  > </tr>
66
66
  > </table>
67
67
 
68
+ ## 设置
69
+
70
+ 设置页同时出现在设置对话框(「Claude Style」标签页)与插件页,分为五个分页:
71
+
72
+ | 分页 | 设置项 |
73
+ |---|---|
74
+ | 通用 | 用户名、动画效果、悬停展开弹层、封号彩蛋语言 |
75
+ | 外观 | 品牌标识、配色、字体、吉祥物、出现位置 |
76
+ | 输入区 | 输入区重绘范围、首页版面、重绘模型选择器(及其下的快捷供应商)、重绘权限控件 |
77
+ | 侧栏 | 折叠侧栏设置区、侧栏搜索、进行中 / 已归档视图 |
78
+ | 对话 | 轮次状态行、对话 / 轨迹标签条 |
79
+
80
+ 每一项接管宿主界面的功能都有自己的开关,关闭后宿主原来的界面原样回来,不需要刷新页面。
81
+
82
+ **与其他主题插件同时使用**:「配色」与「字体」选「跟随宿主」后,本插件不再改写宿主的颜色与字体,只保留布局和控件;颜色交给 DSH 自己,或者交给同时启用的其他主题插件。例如与 [dsh-wallpaper-engine](https://github.com/elysia395/dsh-wallpaper-engine) 一起用时,壁纸透过侧栏与对话区显示出来,插件自己的弹层随壁纸插件的玻璃效果变成半透明并模糊背后的画面。
83
+
84
+ **吉祥物**:输入框上沿站着一只像素小伙伴,随智能体的工作状态换动画(思考、写回答与调用工具、多个会话同时工作、子代理、等你操作、压缩上下文、完成、失败、睡着)。「跟随品牌」在 Claude 品牌下是像素螃蟹,在 DeepSeek 品牌下是小鲸鱼 Deepy,也可以固定选一个或者关闭;「出现位置」决定它只在新会话页出现,还是新会话页和对话页都出现。
85
+
68
86
  ## 字体
69
87
 
70
88
  > 本插件使用的字体如下。
@@ -78,6 +96,10 @@
78
96
  | Anthropic Sans Web Text | 界面 / UI | [`fonts/AnthropicSansWebText.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/AnthropicSansWebText.ttf) |
79
97
  | Anthropic Serif Web Text | 对话正文 / Markdown | [`fonts/AnthropicSerifWebText.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/AnthropicSerifWebText.ttf) |
80
98
  | JetBrains Mono Variable | 代码 / 代码块 | [`fonts/JetBrainsMonoVariable.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/JetBrainsMonoVariable.ttf)、[`fonts/JetBrainsMonoItalicVariable.ttf`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/JetBrainsMonoItalicVariable.ttf) |
99
+ | Inter | 没有 Anthropic Sans 时的界面字体 | [`fonts/InterVariable.woff2`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/InterVariable.woff2) |
100
+ | Noto Serif | 没有 Anthropic Serif 时的正文字体 | [`fonts/NotoSerifVariable.woff2`](https://github.com/Nwflower/dsh-claude-style/raw/main/fonts/NotoSerifVariable.woff2) |
101
+
102
+ JetBrains Mono、Inter 与 Noto Serif 采用 SIL Open Font License 1.1,随 npm 包分发,无需任何操作。Inter 与 Noto Serif 的字高、字宽与两款 Anthropic 字体几乎一致,没有启用 Anthropic 字体时由它们代替,界面与正文的排版不会因此变样;两者只含 Anthropic 字体覆盖的拉丁字符,中文照旧使用系统中文字体。
81
103
 
82
104
  Anthropic 字体启用(二选一):
83
105
 
@@ -116,6 +138,8 @@ dsh plugin --profile web add dsh-claude-style # npm 包(推
116
138
 
117
139
  像素小鲸鱼 Deepy 的动画帧图来自 calmly-eating-bugs([@wp3171216237](https://github.com/wp3171216237))绘制的 Deepy 小鲸鱼主题包。
118
140
 
141
+ 像素螃蟹(Clawd)是 Anthropic 的角色形象,相关权利归 Anthropic 所有。螃蟹掏出电脑敲代码的动画取自 Claude Code,其余各个状态的动画由本项目按这一形象绘制。螃蟹的帧图不适用 MIT 许可(见 [LICENSE](LICENSE))。本插件是非官方的爱好者作品,与 Anthropic 没有关联,也未获其认可。
142
+
119
143
  ## 友链
120
144
 
121
145
  > 想把 Claude Code / Codex 等外部代理的会话历史导入 DSH 接着聊?推荐作者的另一个插件 [dsh-chat-import](https://github.com/Nwflower/dsh-chat-import)。
package/docs/STYLE.md CHANGED
@@ -65,11 +65,68 @@ Two fills are palette-specific rather than carried over from the dark base:
65
65
  in light) and `--dsw-alias-button-elevated-fill` (a surface above the canvas in
66
66
  light, a raised gray in dark).
67
67
 
68
+ ## Two palettes · 两套配色归属
69
+
70
+ The Colours and Typefaces rows each choose who paints: **Claude** (the default)
71
+ or **Follow the host**. Every rule that writes a host token carries the Claude
72
+ gate in its selector — `%%PALETTE_CLAUDE%%` for colours, `%%TYPEFACE_CLAUDE%%`
73
+ for `--dsw-font-*` — and so does every rule that paints the skin's canvas onto
74
+ the host's frame (`<html>`, `<body>`, `#root`, the sidebar and conversation
75
+ columns); the build refuses an ungated one. Under "follow the host" those rules
76
+ drop out: the host's own tokens stand, or another theme plugin's, such as a
77
+ wallpaper plugin that clears the canvas and turns the overlays to glass.
78
+
79
+ The skin's own surfaces read only its private tokens and host tokens. Under the
80
+ host palette each private token is an alias of a host token, so those surfaces
81
+ follow whoever paints the host's. A new private colour token is written into
82
+ both the Claude blocks and the host block (the build checks the host block
83
+ covers every one). Cards take the host's overlay layer rather than its canvas:
84
+ a plugin that clears the canvas still gives its overlays a readable fill, and the
85
+ shared popover card blurs what lies behind it (`blur(16px) saturate(1.4)`).
86
+
87
+ | Private token | Host alias | Use |
88
+ |---|---|---|
89
+ | `--dsh-claude-canvas` | `--dsw-alias-bg-base` | the page canvas, the search box |
90
+ | `--dsh-claude-sidebar-canvas` | `--dsw-specific-sidebar-fill` | the sidebar |
91
+ | `--dsh-claude-raised` | `--dsw-alias-bg-overlay` | popovers, menus (dark) |
92
+ | `--dsh-claude-card` | `--dsw-alias-bg-overlay` | cards on the canvas in light and raised in dark: the account popover, the search palette |
93
+ | `--dsh-claude-chip` | `--dsw-specific-selector` | segmented control and switch at rest |
94
+ | `--dsh-claude-hover-bg` | `--dsw-alias-interactive-bg-hover` | hover wash |
95
+ | `--dsh-claude-inline-code-bg` / `-fg` | `--dsw-alias-markdown-inline-code` / `--dsw-alias-label-primary` | inline code |
96
+ | `--dsh-claude-link` / `-underline` / `-hover` | `--dsw-alias-link` (underline at 60%) | markdown links |
97
+ | `--dsh-claude-ink-strong` / `--dsh-claude-session-ink` | `--dsw-alias-label-primary` / `--dsw-alias-label-secondary` | active row ink, session title at rest |
98
+ | `--dsh-claude-table-head` | `--dsw-alias-bg-layer-2` | table header row |
99
+ | `--dsh-claude-scrollbar` / `-hover` | `--dsw-alias-border-l2` / `--dsw-alias-label-caption` | scrollbar thumb |
100
+ | `--dsh-claude-inverse-fill` / `-ink` | `--dsw-alias-interactive-bg-hover` / `--dsw-alias-label-primary` | the model picker's group label (an inverted chip under Claude, a hover-plate chip under the host) |
101
+ | `--dsh-claude-logo-ink` | `--dsw-alias-label-primary` | sidebar brand art |
102
+
103
+ Under the host typeface the skin's own faces fall back to the host's:
104
+ `--dsh-claude-font-serif`, `-prose` and `-brand` to `--dsw-font-family` (the host
105
+ carries no serif), `--dsh-claude-font-code` to `--ds-font-family-code`.
106
+
107
+ Two colours stay whoever paints: the reasoning slider's violet top rung
108
+ (`--dsh-claude-apex*`) and the account-hold page, which reproduces a Claude
109
+ screen. Translucent neutral hover tints and the usage panel's data colours stay
110
+ literal; they read on any canvas. Every other colour that paints a surface, a
111
+ text, a border or an accent reads a token.
112
+
113
+ ## Windows titlebar · 桌面顶栏
114
+
115
+ On the Windows desktop the 40px caption row has no colour of its own: the
116
+ sidebar and the conversation run to the window's top edge, each in its own
117
+ fill (`--dsh-claude-sidebar-canvas`, `--dsh-claude-canvas`), and the sidebar's
118
+ 1px `--dsw-alias-border-l1` hairline runs with them from the top edge to the
119
+ bottom. The conversation column and the fullscreen file panel lose the host's
120
+ 16px top-left corner, so the hairline meets them straight. The three window
121
+ buttons sit on the page itself: no block of their own behind them, and they dim
122
+ with a modal's mask like everything else. Their hover plate is the system's, a
123
+ tint of the button glyph's colour.
124
+
68
125
  ## Typography
69
126
 
70
- - **Serif display** — headings / editorial statements (`--dsw-font-serif`).
127
+ - **Serif display** — headings / editorial statements (`--dsh-claude-font-serif`).
71
128
  - **Sans UI** — chrome, body (`--dsw-font-family`).
72
- - **Mono** — code, technical labels (`--dsw-font-code`).
129
+ - **Mono** — code, technical labels (`--dsh-claude-font-code`).
73
130
 
74
131
 
75
132
  ## Shapes
@@ -466,41 +523,59 @@ placeholder, a zero day draws the grid's own base tone.
466
523
 
467
524
  ## The composer crab · 输入卡片上的螃蟹
468
525
 
469
- On the studio layout's new-conversation page, Claude Code's pixel crab stands on
470
- the composer card's top edge. Its frames are Claude Code's own animation, cut to
471
- 34×23 cells and drawn at 2px a cell, crisp (68×46px); the resting crab is 48×32px
472
- with its feet on the card's edge and the right arm 8px inside the single-line
473
- card's right edge, so the feet stand where its 18px corner starts to round. The
474
- classic layout keeps its centred hero without the crab. The shell is the clay
475
- accent `#d97757` in both themes, the side-on back is `#b9603f`, the eyes
476
- `#141413`, and the rod takes the tertiary label ink. When the crab is clicked,
477
- when the pointer leaves it, and on its own every 25–45 seconds while the page is
478
- in view, it plays Claude Code's fishing routine, 43 frames of 80ms (3.44s): a
479
- blink, the rod raised overhead and cast down past the card's edge, a hop into a
480
- side-on stance, a spell of fishing, and the rod reeled in as it turns back to
481
- face front. With the animation choice resolved to "reduced" (the settings page's
482
- Animation row, or the system's own setting under "follow the system"), only a
483
- click plays it: the pointer passing by and the idle timer leave it still. Only
484
- the crab takes the pointer; the room the rod swings through does not.
526
+ Claude Code's pixel crab is the mascot under the Claude brand (or when picked in
527
+ the Mascot row). It stands where Deepy does — the composer card's top edge on
528
+ both home layouts, the input area or the panel that replaces its card in a
529
+ conversation (unless Where it appears keeps it to the home page) — and follows
530
+ the same states with the same keys. It is drawn on a 52×36 grid of cells at 2px
531
+ a cell, crisp (`pixelated`, 104×72px): feet on the bottom row, on the edge of
532
+ what it stands on; the right claw four cells in from the grid's right edge, so
533
+ it stands 8px inside the card's right edge, where the 18px corner starts to
534
+ round, and the four spare cells take a lean, a note or a sparkle. The resting
535
+ crab — shell 16×12 cells, claws 4×4, eyes 2×2, four legs 2×4 — is 48×32px
536
+ (columns 24–47, rows 20–35) and only it takes the pointer. The shell is the clay
537
+ accent `#d97757` in both themes, the side-on back `#b9603f`, the eyes `#141413`;
538
+ the props (the laptop, the thought bubble, letters, notes, the hard hat) are an
539
+ ink mask filled with the tertiary label ink. Every frame lasts 80ms, Claude
540
+ Code's pace. Its laptop frames are Claude Code's own routine; the rest are drawn
541
+ by `scripts/draw-crab.py` after the same character. With the animation choice
542
+ resolved to "reduced" each state holds its still frame; a click or a pull still
543
+ plays its reaction.
544
+
545
+ | State | Animation | Still frame |
546
+ |---|---|---|
547
+ | idle, every 20–40 s a look around, a claw wave or Claude Code's whole laptop routine | `idle`, `idle-look`, `idle-wave`, `idle-laptop` | 0 |
548
+ | the model reasons or has not answered: eyes up to a thought bubble | `thinking` | 18 |
549
+ | the model writes or tools run: 1 / 2 / 3+ sessions at work (typing / headphones / typing in a hard hat) | `typing` / `music` / `building` | 0 / 0 / 0 |
550
+ | subagents running: 1 / 2+ (headphones / conducting) | `music` / `conducting` | 0 / 0 |
551
+ | a compaction runs: squashed | `compacting` | 3 |
552
+ | an approval, a question or a plan review waits: an exclamation mark | `notification` | 0 |
553
+ | a tool call or a turn failed (4.8 s): crossed eyes, a shake | `error` | 4 |
554
+ | a turn or a compaction finished (5.2 s): hops, claws up | `happy` | 3 |
555
+ | a quiet minute / the next pointer move or key | `sleeping` / `waking` | 0 / 11 |
556
+ | a click on the left / right half, four quick clicks, a pull | `poke-left` / `poke-right`, `tickle`, `drag` | 0 |
485
557
 
486
558
  ## Deepy · 小鲸鱼
487
559
 
488
- Under the DeepSeek brand the crab gives way to Deepy, the pixel whale of the
489
- Deepy theme pack: a 52×52 grid of logical pixels drawn at 2px a pixel (a 104px
560
+ Under the DeepSeek brand (or when picked in the Mascot row) the mascot is
561
+ Deepy, the pixel whale of the Deepy theme pack: a 52×52 grid of logical pixels drawn at 2px a pixel (a 104px
490
562
  square), its ground line — row 48.5, the middle of its shadow — on the top edge
491
- of what it stands on, its box 8px in from the right end of the card it stands
492
- over. On the home page that is the composer card (both layouts); in a
493
- conversation it is the whole input area, and the panel that replaces the card
494
- while the reader is asked for something (those panels start 6–8px above their
495
- card). Every frame lasts 50ms. The sheets carry five device pixels to a logical
496
- pixel and are scaled down smoothly, so the whale stays crisp from 1× to 2×
497
- screens without `image-rendering: pixelated`, which would drop rows on a
498
- downscale. The body is Deepy's blue `#4E6FFF` with a navy `#142660` outline and
499
- a white belly in both themes; on the dark canvas the outline and the soft shadow
500
- recede and the blue body carries the shape. Only the resting body (columns
501
- 12–44, rows 30–48) takes the pointer. With the animation choice resolved to
502
- "reduced" each state holds its still frame; a click or a pull still plays its
503
- reaction.
563
+ of what it stands on. Every sheet's crop box reaches 3px past that ground line,
564
+ and the whale paints over the host's cards, so its box is lifted by those 3px:
565
+ the sprite's last row lands on the card's top edge, and the shadow's tail stays
566
+ off the card instead of being stamped across it. Its box is 8px in from the
567
+ right end of the card it stands over. On the home page that is the composer card
568
+ (both layouts); in a conversation it is the whole input area, and the panel that
569
+ replaces the card while the reader is asked for something (those panels start
570
+ 6–8px above their card). Every frame lasts 50ms. The sheets carry five device
571
+ pixels to a logical pixel and are scaled down smoothly, so the whale stays crisp
572
+ from 1× to 2× screens without `image-rendering: pixelated`, which would drop
573
+ rows on a downscale. The body is Deepy's blue `#4E6FFF` with a navy `#142660`
574
+ outline and a white belly in both themes; on the dark canvas the outline and the
575
+ soft shadow recede and the blue body carries the shape. Only the resting body
576
+ (columns 12–44, rows 30–48) takes the pointer. With the animation choice
577
+ resolved to "reduced" each state holds its still frame; a click or a pull still
578
+ plays its reaction.
504
579
 
505
580
  | State | Animation | Still frame |
506
581
  |---|---|---|