dsh-todo-ledger 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -4,6 +4,31 @@ All notable changes to this project are documented here. The format follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and the project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.1] - 2026-10-24
+
+A follow-up on the floating window: its surface now matches the host's own floating panels, and the
+status colours are the ones the panel has always used.
+
+### Fixed
+
+- **The window surface no longer reads as a lighter grey than everything around it.** It used
+  `--dsw-alias-bg-overlay`, which resolves to a mid grey in the dark theme. It now takes the raised
+  layer the host's own floating panels use: `--dsw-alias-bg-layer-1`, a `--dsw-alias-border-l2`
+  border, a 14px radius and the same two-layer shadow.
+
+### Changed
+
+- **Status colours are the previous palette again** — blue in progress, slate to do, violet awaiting
+  review, red blocked. Only the accept action and error text use the host state tokens.
+- Count chips and task rows stay on `--dsw-alias-bg-layer-2` with a `--dsw-alias-border-l1` border,
+  and section titles, slugs and the footer use `--dsw-alias-label-secondary`.
+
+### Added
+
+- A storefront icon (`assets/icon-180.png`, rendered from `assets/icon.svg`) and `screenshots.json`
+  declaring the sidebar and floating-window captures.
+- Install-from-npm instructions in both READMEs, plus the npm version badge.
+
 ## [0.3.0] - 2026-10-24
 
 The release that gives the ledger a window of its own, and keeps every view on the session you are

package/README.md

@@ -1,6 +1,6 @@
 # dsh-todo-ledger
 
-[![release](https://img.shields.io/github/v/release/haruri03/dsh-todo-ledger?sort=semver)](https://github.com/haruri03/dsh-todo-ledger/releases) [![license](https://img.shields.io/github/license/haruri03/dsh-todo-ledger)](LICENSE)
+[![release](https://img.shields.io/github/v/release/haruri03/dsh-todo-ledger?sort=semver)](https://github.com/haruri03/dsh-todo-ledger/releases) [![npm](https://img.shields.io/npm/v/dsh-todo-ledger)](https://www.npmjs.com/package/dsh-todo-ledger) [![license](https://img.shields.io/github/license/haruri03/dsh-todo-ledger)](LICENSE)
 
 [English](README.md) | [中文](README_zh.md)
 
@@ -116,7 +116,7 @@ Every tool accepts an optional `root`, so it can operate on repositories outside
 
 ## Sidebar panel
 
-![The ledger panel in the sidebar: in progress, to do, awaiting review with an Accept button, and blocked](assets/panel.png)
+<img src="assets/sidebar-panel.png" width="420" alt="The sidebar ledger panel: in progress, to do, awaiting review with an Accept button, and blocked">
 
 The plugin also serves a sidebar panel for the ledger of the current session working directory:
 browsing is read-only, and the panel's only action is accepting a review task. It is opt-in: nothing is injected into the layout until a user opens the panel from the
@@ -141,7 +141,10 @@ A book launcher below the composer opens a movable, resizable Todo Ledger floati
 its header to move it and drag the bottom-right grip to resize it. It is an additional way to view
 the ledger; the original right-sidebar panel remains available. The floating panel's labels follow
 the host locale, and its body starts directly with the status counts because the window header
-already names it.
+already names it. Every surface, border and state colour comes from the host theme tokens, so the
+window follows the active theme — light, dark or a custom one — instead of carrying its own palette.
+
+<img src="assets/floating-panel.png" width="360" alt="The floating ledger window: the same four sections, with the header used to drag it and the bottom-right grip used to resize it">
 
 Each status group is collapsible: click a group header to fold it. Clicking a status count expands
 that group and scrolls its header to the top of the list, which is how a long queue stays

package/README_zh.md

@@ -1,6 +1,6 @@
 # dsh-todo-ledger
 
-[![release](https://img.shields.io/github/v/release/haruri03/dsh-todo-ledger?sort=semver)](https://github.com/haruri03/dsh-todo-ledger/releases) [![license](https://img.shields.io/github/license/haruri03/dsh-todo-ledger)](LICENSE)
+[![release](https://img.shields.io/github/v/release/haruri03/dsh-todo-ledger?sort=semver)](https://github.com/haruri03/dsh-todo-ledger/releases) [![npm](https://img.shields.io/npm/v/dsh-todo-ledger)](https://www.npmjs.com/package/dsh-todo-ledger) [![license](https://img.shields.io/github/license/haruri03/dsh-todo-ledger)](LICENSE)
 
 [English](README.md) | [中文](README_zh.md)
 
@@ -106,7 +106,7 @@ _todo/
 
 ## 侧栏面板
 
-![侧栏里的账本面板：进行中、待办、待复核（带「通过」按钮）、阻塞四区](assets/panel.png)
+<img src="assets/sidebar-panel.png" width="420" alt="侧栏里的账本面板：进行中、待办、待复核（带「通过」按钮）、阻塞四区">
 
 插件还会为当前会话工作目录的账本提供一个侧栏面板：浏览是只读的，面板上唯一的动作是「通过」一个待复核任务。
 它是按需打开的：在右侧栏的引导胶囊（以插件名命名）点开之前，布局里不会多出任何东西；点开后作为一个侧栏标签页渲染。
@@ -124,7 +124,10 @@ _todo/
 
 输入框下方的书本入口可打开可移动、可缩放的 Todo Ledger 浮动面板：拖动标题栏移动窗口，拖动右下角
 握把调整大小。这是查看账本的另一种方式，原有右侧栏面板仍可使用；浮动面板的文案跟随宿主语言，
-面板正文直接从状态计数开始，因为窗口标题栏已经写了名称。
+面板正文直接从状态计数开始，因为窗口标题栏已经写了名称。所有背景、边框与状态颜色都取自宿主
+主题 token，所以窗口会跟随当前主题（亮色、暗色或自定义主题），不自带一套配色。
+
+<img src="assets/floating-panel.png" width="360" alt="浮动面板：同样四区，标题栏可拖动移动窗口，右下角握把可缩放">
 
 浏览器本地存储保存浮动面板经视口边界限制后的窗口框（位置与尺寸），并在再次打开时恢复。
 显示状态和账本内容不会保存在本地存储中：打开面板时读取当前账本，而不是恢复上次的内容。

package/assets/icon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#211f2b"/>
+      <stop offset="1" stop-color="#121118"/>
+    </linearGradient>
+  </defs>
+  <rect x="8" y="8" width="164" height="164" rx="36" fill="url(#bg)"/>
+  <rect x="8.75" y="8.75" width="162.5" height="162.5" rx="35.25" fill="none" stroke="#3a3747" stroke-width="1.5"/>
+  <g transform="translate(38,34) scale(4.3333)" fill="none" stroke="#f9fafb" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 6c-2.4-1.5-5.3-1.8-9-1v13c3.7-.8 6.6-.5 9 1 2.4-1.5 5.3-1.8 9-1V5c-3.7-.8-6.6-.5-9 1Z"/>
+    <path d="M12 6v13"/>
+  </g>
+  <g fill="#a78bfa">
+    <circle cx="70" cy="141" r="3.4"/>
+    <circle cx="90" cy="141" r="3.4"/>
+    <circle cx="110" cy="141" r="3.4"/>
+  </g>
+</svg>

package/client.js

@@ -15,18 +15,10 @@ window.__ModuleLoader__.load({
       todo: '#94a3b8',
       review: '#a855f7',
       blocked: '#ef4444',
-      accept: '#22c55e',
-      error: '#ef4444',
+      accept: 'var(--dsw-alias-state-success-primary)',
+      error: 'var(--dsw-alias-state-error-primary)',
     };
 
-    function tint(hex, alpha) {
-      const value = hex.replace('#', '');
-      const r = parseInt(value.slice(0, 2), 16);
-      const g = parseInt(value.slice(2, 4), 16);
-      const b = parseInt(value.slice(4, 6), 16);
-      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-
     const LOCALE_NAMESPACE = 'todo-ledger-panel';
     const MESSAGES = {
       zh: {
@@ -114,22 +106,22 @@ window.__ModuleLoader__.load({
       shell: { display: 'flex', flexDirection: 'column', gap: '8px', padding: '10px 12px', minHeight: 0, minWidth: 0, flex: '1 1 auto', fontSize: '12px', color: 'var(--dsw-alias-label-primary)' },
       header: { display: 'flex', alignItems: 'center', gap: '8px', flexShrink: 0 },
       counts: { display: 'flex', gap: '6px', flexWrap: 'wrap', flexShrink: 0, fontVariantNumeric: 'tabular-nums' },
-      chip: { padding: '1px 6px', borderRadius: '999px', background: 'var(--dsw-alias-bg-layer-2)' },
+      chip: { padding: '1px 6px', borderRadius: '999px', background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l1)' },
       body: { display: 'flex', flexDirection: 'column', gap: '10px', flex: '1 1 auto', minHeight: 0, overflowY: 'auto', overflowX: 'hidden', overscrollBehavior: 'contain', scrollbarGutter: 'stable', paddingRight: 4 },
-      sectionTitle: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', textTransform: 'uppercase', letterSpacing: '.04em', fontSize: '10px', fontWeight: 600 },
+      sectionTitle: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '8px', textTransform: 'uppercase', letterSpacing: '.04em', fontSize: '10px', fontWeight: 600, color: 'var(--dsw-alias-label-secondary)' },
       sectionToggle: { width: '100%', background: 'transparent', border: 0, padding: 0, font: 'inherit', cursor: 'pointer', textAlign: 'left' },
       chevron: { width: '10px', flexShrink: 0, opacity: 0.8 },
       sectionLabel: { display: 'flex', alignItems: 'center', gap: '5px', flex: '1 1 auto', minWidth: 0 },
       dot: { width: '7px', height: '7px', borderRadius: '50%', display: 'inline-block' },
-      countPill: { padding: '0 6px', borderRadius: '999px', fontSize: '10px', fontWeight: 600 },
+      countPill: { padding: '0 6px', borderRadius: '999px', fontSize: '10px', fontWeight: 600, background: 'var(--dsw-alias-bg-layer-2)' },
       list: { listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '4px' },
-      item: { display: 'flex', flexDirection: 'column', gap: '1px', padding: '3px 6px', borderRadius: '6px', background: 'var(--dsw-alias-bg-layer-2)' },
+      item: { display: 'flex', flexDirection: 'column', gap: '1px', padding: '3px 6px', borderRadius: '6px', background: 'var(--dsw-alias-bg-layer-2)', border: '1px solid var(--dsw-alias-border-l1)' },
       itemTitle: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
       itemMeta: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '6px' },
-      accept: { background: 'transparent', border: '1px solid currentColor', borderRadius: '999px', padding: '0 8px', color: 'inherit', font: 'inherit', fontSize: '10px', cursor: 'pointer', opacity: 0.85 },
-      slug: { opacity: 0.6, fontSize: '10px', fontFamily: 'var(--dsw-alias-font-mono, ui-monospace, monospace)' },
-      note: { opacity: 0.72, padding: '6px 0', flexShrink: 0 },
-      footer: { display: 'flex', justifyContent: 'space-between', gap: '8px', opacity: 0.68, fontSize: '10px', flexShrink: 0, paddingRight: 16 },
+      accept: { background: 'transparent', border: '1px solid var(--dsw-alias-border-l1)', borderRadius: '999px', padding: '0 8px', font: 'inherit', fontSize: '10px', cursor: 'pointer' },
+      slug: { color: 'var(--dsw-alias-label-secondary)', fontSize: '10px', fontFamily: 'var(--dsw-alias-font-mono, ui-monospace, monospace)' },
+      note: { color: 'var(--dsw-alias-label-secondary)', padding: '6px 0', flexShrink: 0 },
+      footer: { display: 'flex', justifyContent: 'space-between', gap: '8px', color: 'var(--dsw-alias-label-secondary)', fontSize: '10px', flexShrink: 0, paddingRight: 16 },
       path: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', direction: 'rtl', textAlign: 'left' },
       action: { background: 'transparent', border: '0', padding: 0, color: 'inherit', font: 'inherit', textDecoration: 'underline', cursor: 'pointer' },
     };
@@ -353,11 +345,11 @@ window.__ModuleLoader__.load({
             'aria-controls': `todo-ledger-list-${status}`,
             title: collapsed === true ? translate('expandSection') : translate('collapseSection'),
             onClick: () => onToggle(status),
-            style: { ...styles.sectionTitle, ...styles.sectionToggle, color: tone },
+            style: { ...styles.sectionTitle, ...styles.sectionToggle },
           },
           h('span', { style: styles.chevron }, collapsed === true ? '▸' : '▾'),
           h('span', { style: styles.sectionLabel }, h('span', { style: { ...styles.dot, background: tone } }), translate(status)),
-          h('span', { style: { ...styles.countPill, background: tint(tone, 0.16), color: tone } }, String(tasks.length)),
+          h('span', { style: { ...styles.countPill, color: tone } }, String(tasks.length)),
         ),
         collapsed === true
           ? null
@@ -369,7 +361,7 @@ window.__ModuleLoader__.load({
                   'li',
                   {
                     key: task.slug,
-                    style: { ...styles.item, borderLeft: `3px solid ${tone}`, background: tint(tone, 0.08) },
+                    style: { ...styles.item, borderLeft: `2px solid ${tone}` },
                     title: `${task.title} · ${task.slug}`,
                   },
                   h('span', { style: styles.itemTitle }, task.title),
@@ -382,12 +374,7 @@ window.__ModuleLoader__.load({
                           'button',
                           {
                             type: 'button',
-                            style: {
-                              ...styles.accept,
-                              borderColor: tint(TONE.accept, 0.55),
-                              background: tint(TONE.accept, pending === true ? 0.08 : 0.16),
-                              color: TONE.accept,
-                            },
+                            style: { ...styles.accept, color: TONE.accept, opacity: pending === true ? 0.6 : 1 },
                             disabled: pending === true,
                             onClick: () => onAccept(task.slug),
                           },
@@ -484,9 +471,7 @@ window.__ModuleLoader__.load({
                   key: status,
                   style: {
                     ...styles.chip,
-                    background: tint(TONE[status] ?? TONE.todo, 0.16),
                     color: TONE[status] ?? TONE.todo,
-                    border: `1px solid ${tint(TONE[status] ?? TONE.todo, 0.4)}`,
                     cursor: 'pointer',
                     font: 'inherit',
                     fontSize: '12px',
@@ -636,7 +621,7 @@ window.__ModuleLoader__.load({
       }, h('section', {
         role: 'region',
         'aria-label': translate('title'),
-        style: { position: 'absolute', left: layout.x, top: layout.y, width: layout.width, height: layout.height, display: 'flex', flexDirection: 'column', overflow: 'hidden', pointerEvents: 'auto', borderRadius: 10, border: '1px solid var(--dsw-alias-border-l1)', background: 'var(--dsw-alias-bg-overlay)', color: 'var(--dsw-alias-label-primary)', boxShadow: '0 12px 32px rgba(0,0,0,.24)' },
+        style: { position: 'absolute', left: layout.x, top: layout.y, width: layout.width, height: layout.height, display: 'flex', flexDirection: 'column', overflow: 'hidden', pointerEvents: 'auto', borderRadius: 14, border: '1px solid var(--dsw-alias-border-l2)', background: 'var(--dsw-alias-bg-layer-1)', color: 'var(--dsw-alias-label-primary)', boxShadow: '0 12px 40px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.12)' },
       }, h('div', {
         style: { display: 'flex', alignItems: 'center', gap: 8, padding: '8px 10px', borderBottom: '1px solid var(--dsw-alias-border-l1)' },
       }, h('div', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-todo-ledger",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "todo-ledger for DeepSeek Harness: resident prompt section plus native tools that keep authoritative task state and cross-session context in the repo's ledger directory — `_todo/` preferred, legacy `todo/` still supported (todo.md + tasks.md + tasks/*.md + archived/ + context/).",
   "type": "module",
   "license": "MIT",