dsh-better-workspace 0.10.0 → 0.10.2

package/README.md

@@ -42,7 +42,7 @@ web/                 ← 虚拟分组(不是真实目录,纯命名层级)
 <table>
 <tr>
 <td align="center" width="58%"><img src="docs/screenshots/3-appearance-dialog.png" alt="外观自定义弹窗(实时预览)"/></td>
-<td valign="top"><b>外观自定义</b><br/>右键任意一层(工作区分组 / 工作区 / 会话 / 会话分组)→「自定义外观」:颜色(预设色板 + 取色器 + RGB)、发光强度(0..14 拖动条,只作用于文字)、字体粗细、字体阴影开关、**字体描边**(开关 + 0.5–4px 粗细,**默认开启**;描边颜色自动取该行字体颜色的反差色——浅色字配黑边、深色字配白边,跟随主题与背景插件的界面明暗,不用手选)、图标(与 dsh 图标库同族的 69 个,工作区与工作区分组专属),底部带实时预览。清除自定义一键复原。</td>
+<td valign="top"><b>外观自定义</b><br/>右键任意一层(工作区分组 / 工作区 / 会话 / 会话分组)→「自定义外观」:颜色(预设色板 + 取色器 + RGB)、发光强度(0..14 拖动条,只作用于文字)、字体粗细、字体阴影开关、**字体描边**(开关 + 0.5–4px 粗细,**默认开启**;描边颜色默认**灰**,可改黑 / 白 / 任意取色,或选「自动」按字体颜色取反差色——浅色字配黑边、深色字配白边,并跟随主题与背景插件的界面明暗)、图标(与 dsh 图标库同族的 69 个,工作区与工作区分组专属),底部带实时预览。清除自定义一键复原。</td>
 </tr>
 <tr>
 <td align="center" width="58%"><img src="docs/screenshots/2-customized-tree.png" alt="外观自定义效果"/></td>
@@ -106,6 +106,11 @@ DSH 的侧边栏浏览区是一个公开插槽 `sidebar.workspaces`(single),官
 
 同属 `dsh-better-*` 家族,但互不重叠:[dsh-better-sidebar](https://github.com/omdsh-dev/DSH-better-sidebar) 是**右侧**的 VSCode 式面板(资源管理器/终端/Git);本插件只接管**左侧**工作区列表。两者可同装。
 
+## 版本兼容
+
+- **dsh 0.1.6-alpha.1**:图标集与浏览器注入面都变了,本插件 **0.10.2 起自动适配**——图标网格只列本宿主真正导出的字形(退役的 `IconSendOutline16` 自动落到等价的 `IconSendOutline14`,已保存的旧选择不会变成空图标位),会话拖拽排序在宿主不再注入 `insertSessionBefore` 时改用浏览器本地顺序,**功能不丢**。升级 dsh 与升级插件谁先谁后都收敛。
+- **跨端**:web 与桌面共用同一套客户端资产;外观 / 分组 / 开关可经设置卡片手动跨端同步,**折叠状态与会话本地序每端本地**(设计如此)。
+
 ## 限制与路线图
 
 - 会话拖到**另一分组内的会话行**仅做扁平重排(标题分组归属不变);要改分组请拖到分组行或走重命名。

package/README_EN.md

@@ -40,7 +40,7 @@ Session titles nest on `/` too (e.g. `test1/plugin maintenance`). Session groups
 <table>
 <tr>
 <td align="center" width="58%"><img src="docs/screenshots/3-appearance-dialog.png" alt="Appearance dialog with live preview"/></td>
-<td valign="top"><b>Appearance customization</b><br/>Right-click any row (workspace folder / workspace / session / session group) → Customize: color (swatches + picker + RGB), glow strength (0–14 slider, text only), font weight, font shadow, a <b>text outline</b> (toggle + 0.5–4px width, <b>on by default</b>; its color is derived from the row's own font color — light text gets a black rim, dark text a white one — and follows the theme or a background plugin's light/dark switch, never picked by hand), an icon grid (69 icons from the dsh primitives family, workspace &amp; folder rows only), with a live preview at the bottom. Reset returns to default in one click.</td>
+<td valign="top"><b>Appearance customization</b><br/>Right-click any row (workspace folder / workspace / session / session group) → Customize: color (swatches + picker + RGB), glow strength (0–14 slider, text only), font weight, font shadow, a <b>text outline</b> (toggle + 0.5–4px width, <b>on by default</b>; its color is gray by default, with black / white / any-color picker and an Auto mode that derives the contrasting pole from the row's font color — light text gets a black rim, dark text a white one — following the theme or a background plugin's light/dark switch), an icon grid (69 icons from the dsh primitives family, workspace &amp; folder rows only), with a live preview at the bottom. Reset returns to default in one click.</td>
 </tr>
 <tr>
 <td align="center" width="58%"><img src="docs/screenshots/2-customized-tree.png" alt="Custom appearance result"/></td>
@@ -90,6 +90,11 @@ View state (folder collapse, session expansion, explicit empty folders), custom
 
 Same `dsh-better-*` family, zero overlap: [dsh-better-sidebar](https://github.com/omdsh-dev/DSH-better-sidebar) is the VSCode-like panel on the right; this plugin only takes over the left workspace list. They can be installed together.
 
+## Version compatibility
+
+- **dsh 0.1.6-alpha.1**: both the primitives icon set and the browser injection face changed; this plugin **adapts automatically since 0.10.2**. The icon grid only lists glyphs this host actually exports (the retired `IconSendOutline16` resolves to the equivalent `IconSendOutline14`, so a previously saved choice never turns into an empty icon slot), and session drag-to-reorder falls back to a browser-local order when the host no longer injects `insertSessionBefore` — **no feature is lost**. Either upgrade order (plugin first or dsh first) converges.
+- **Across surfaces**: web and desktop share one set of client assets; appearance / groups / switches sync manually through the settings card, while **collapse state and the local session order stay per-browser** by design.
+
 ## Limitations / roadmap
 
 - A session dragged onto a session row **inside another group** only gets reordered in the flat list (its title group stays); drag onto the group row or rename to move it.

package/dsh.plugin.json

@@ -1,6 +1,6 @@
 {
   "id": "dsh-external/dsh-better-workspace",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "main": "./src/index.js",
   "description": "侧边栏工作区层级树:名称中的 / 即虚拟分组(web/前端 · web/后端),添加工作区的目录流附所属分组弹窗,重命名即时重排层级,可新建空分组。Hierarchy tree for the DSH sidebar workspace list.",
   "engines": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-better-workspace",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "DSH web plugin: a hierarchical workspace tree for the sidebar. Workspace titles containing \"/\" group into virtual folders (web/前端 · web/后端); the add-workspace directory flow gains a parent-group popup; renames re-derive the tree; a new-folder button creates empty levels.",
   "type": "module",
   "repository": {

package/src/client.js

@@ -84,8 +84,10 @@ window.__ModuleLoader__.load({
       'custom.weight.bold': '粗',
       'custom.shadow': '字体阴影',
       'custom.stroke': '字体描边',
-      'custom.stroke.hint': '描边颜色自动取字体颜色的反差色(浅色字配黑描边、深色字配白描边),跟随主题明暗与背景插件的界面明暗,无需手动指定。',
+      'custom.stroke.hint': '描边颜色默认灰色,可改黑 / 白 / 任意取色,或选「自动」按字体颜色取反差色(浅色字配黑边、深色字配白边);自动模式跟随主题明暗与背景插件的界面明暗。',
       'custom.strokeWidth': '描边粗细',
+      'custom.strokeColor': '描边颜色',
+      'custom.strokeColor.auto': '自动',
       'custom.weak': '弱',
       'custom.medium': '中',
       'custom.strong': '强',
@@ -190,8 +192,10 @@ window.__ModuleLoader__.load({
       'custom.weight.bold': 'Bold',
       'custom.shadow': 'Font shadow',
       'custom.stroke': 'Font outline',
-      'custom.stroke.hint': 'The outline color is derived from the font color (light text gets a black outline, dark text a white one) and follows the theme or a background plugin\'s light/dark switch — no manual color to pick.',
+      'custom.stroke.hint': 'The outline is gray by default — pick black, white, any color, or Auto to derive the contrasting pole from the font color (light text gets a black rim, dark text a white one); Auto follows the theme and a background plugin\'s light/dark switch.',
       'custom.strokeWidth': 'Outline width',
+      'custom.strokeColor': 'Outline color',
+      'custom.strokeColor.auto': 'Auto',
       'custom.weak': 'Subtle',
       'custom.medium': 'Medium',
       'custom.strong': 'Strong',
@@ -313,6 +317,28 @@ window.__ModuleLoader__.load({
     }
     const normPath = (p) => splitTitleSegs(p).join('/')
 
+    /**
+     * Glyphs a host may have RETIRED, mapped to the surviving equivalents in
+     * preference order. dsh 0.1.6-alpha.1 replaced IconSendOutline16 with
+     * IconPaperPlaneOutline14 and deleted the old export, so a saved custom
+     * icon naming it must land on something real rather than an empty cell.
+     */
+    const ICON_ALIASES = { IconSendOutline16: ['IconSendOutline14'] }
+
+    /**
+     * Resolve one configured icon value to a glyph the LOADED primitives
+     * actually export (pure). Retired names follow their alias chain, unknown
+     * names degrade to '' — so both the picker grid and a choice persisted
+     * before an upgrade survive a host that renamed its icon set.
+     */
+    const resolveIconName = (name) => {
+      if (typeof name !== 'string' || name === '') return ''
+      if (ui[name]) return name
+      const aliases = ICON_ALIASES[name]
+      if (aliases) for (const alias of aliases) if (ui[alias]) return alias
+      return ''
+    }
+
     /** Render a primitives icon by name; unknown names degrade to null, never crash. */
     const icon = (name, size) => {
       const C = ui[name]
@@ -452,6 +478,20 @@ window.__ModuleLoader__.load({
       return root
     }
 
+    /**
+     * Move one id inside a flat list: before `anchor`, or to the end when the
+     * anchor is missing (pure). Mirrors the host action's insertSessionBefore
+     * semantics, so the browser-local fallback orders rows exactly the way the
+     * host would have.
+     */
+    function reorderIds(ids, id, anchor) {
+      const next = (ids || []).filter((x) => x !== id)
+      const at = anchor === undefined ? -1 : next.indexOf(anchor)
+      if (at === -1) next.push(id)
+      else next.splice(at, 0, id)
+      return next
+    }
+
     const countSessionTree = (node) => node.sessions.length + node.groups.reduce((sum, group) => sum + countSessionTree(group), 0)
 
     const collectSessionRows = (node) => {
@@ -598,9 +638,13 @@ window.__ModuleLoader__.load({
       '.bw-row-icon{flex:none;display:grid;place-items:center;color:var(--dsw-alias-label-tertiary,#9a9a9a)}',
       '.bw-chevron{flex:none;display:grid;place-items:center;color:var(--dsw-alias-label-tertiary,#9a9a9a);transition:transform .15s ease}',
       '.bw-chevron-open{transform:rotate(90deg)}',
-      '.bw-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}',
+      '.bw-row-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px;margin:-1px}',
       '.bw-row-count{flex:none;font-size:11px;color:var(--dsw-alias-label-quaternary,#8a8a8a)}',
       '.bw-row-time{flex:none;font-size:11px;color:var(--dsw-alias-label-quaternary,#8a8a8a)}',
+      // The outline is inherited from the row: the 11px meta column (session
+      // count / relative time) opts out — stroked meta text outshines the title
+      // it is supposed to support.
+      '.bw-row-count,.bw-row-time{-webkit-text-stroke-width:0}',
       '.bw-schedule-badge{flex:none;display:inline-flex;align-items:center;color:var(--dsw-alias-label-tertiary,#9a9a9a);margin:0 6px}',
       '.bw-row-actions{flex:none;display:none;align-items:center;gap:2px}',
       '.bw-row:hover .bw-row-actions{display:flex}',
@@ -612,6 +656,7 @@ window.__ModuleLoader__.load({
       '.bw-session-row:hover{color:var(--dsw-alias-label-primary,#e6e6e6)}',
       '.bw-empty{padding:28px 12px;text-align:center;font-size:12px;color:var(--dsw-alias-label-dimmed,#7a7a7a)}',
       '.bw-swatch{width:20px;height:20px;border-radius:6px;border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.25));cursor:pointer;flex:none;background:transparent;padding:0}',
+      '.bw-swatch-wide{width:auto;min-width:38px;padding:0 8px;font-size:11px;color:var(--dsw-alias-label-secondary,#b8b8b8)}',
       '.bw-swatch-active{outline:2px solid var(--dsw-alias-brand-primary,#5b8def);outline-offset:1px}',
       '.bw-color-input{width:36px;height:26px;border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,.25));border-radius:6px;background:transparent;cursor:pointer;padding:0}',
       '.bw-seg{display:flex;gap:6px;flex-wrap:wrap}',
@@ -696,7 +741,7 @@ window.__ModuleLoader__.load({
     /* ========================== view store =========================== */
 
     const createViewStore = () => storeKit.defineStore({
-      init: () => ({ folders: [], expanded: {}, sessionsExpanded: {}, sessionGroups: {}, prefs: { compactChains: true }, styling: {} }),
+      init: () => ({ folders: [], expanded: {}, sessionsExpanded: {}, sessionGroups: {}, sessionOrder: {}, prefs: { compactChains: true }, styling: {} }),
       // NOTE: hydration REPLACES the state with the persisted whole value —
       // init defaults never merge. Every action must tolerate a missing key
       // (states persisted by older plugin versions lack sessionGroups), and
@@ -734,6 +779,16 @@ window.__ModuleLoader__.load({
         setSessionGroupExpanded: (d, key, value) => { if (!d.sessionGroups) d.sessionGroups = {}; d.sessionGroups[key] = value },
         setPref: (d, key, value) => { if (!d.prefs) d.prefs = {}; d.prefs[key] = value },
         setStyling: (d, key, value) => { if (!d.styling) d.styling = {}; if (value === null) delete d.styling[key]; else d.styling[key] = value },
+        // Browser-local session order (v0.10.2): the fallback channel for
+        // drag-to-reorder on hosts that no longer inject insertSessionBefore
+        // (dsh 0.1.6-alpha.1). Per-workspace and per-browser on purpose — the
+        // host order stays authoritative wherever the action exists, and this
+        // never rides the cross-device sync.
+        setSessionOrder: (d, workspaceId, order) => {
+          if (!d.sessionOrder || typeof d.sessionOrder !== 'object') d.sessionOrder = {}
+          if (!Array.isArray(order) || order.length === 0) delete d.sessionOrder[workspaceId]
+          else d.sessionOrder[workspaceId] = order.slice()
+        },
         addFolder: (d, path) => {
           if (!Array.isArray(d.folders)) d.folders = []
           const p = normPath(path)
@@ -1105,12 +1160,16 @@ window.__ModuleLoader__.load({
     /* ============================== rows ============================== */
 
     /** Folder glyph variants from the primitives family (solid / outline / hidden). */
-    /** Custom icon value → glyph: legacy slots (solid/outline/none) or any primitives icon name. */
+    /**
+     * Custom icon value → glyph: legacy slots (solid/outline/none) or any
+     * primitives icon name, resolved through ICON_ALIASES so a value persisted
+     * before a host renamed its icon set still renders something.
+     */
     const iconOf = (mode, expanded) => {
       if (!mode || mode === 'none') return null
       if (mode === 'solid') return icon(expanded ? 'IconFolderOpen16' : 'IconFolderClose16')
       if (mode === 'outline') return icon('IconFolderOpenOutline16')
-      return icon(mode)
+      return icon(resolveIconName(mode))
     }
 
     const colorToRgb = (hex) => {
@@ -1134,8 +1193,11 @@ window.__ModuleLoader__.load({
     // --bw-stroke-color, sampled from the live computed style (see the sampler
     // in BetterBrowser) so a palette flip needs no React render.
     const STROKE_MAX = 4
-    const DEFAULT_APPEARANCE = { color: '', glow: 0, weight: 0, shadow: false, stroke: true, strokeWidth: 1 }
-    const APPEARANCE_FIELDS = ['color', 'glow', 'weight', 'shadow', 'stroke', 'strokeWidth']
+    // The outline color defaults to a plain gray: it reads on light and dark
+    // backgrounds alike without shouting like pure black/white. "auto" derives
+    // the contrasting pole from the font color instead.
+    const DEFAULT_APPEARANCE = { color: '', glow: 0, weight: 0, shadow: false, stroke: true, strokeWidth: 1, strokeColor: '#808080' }
+    const APPEARANCE_FIELDS = ['color', 'glow', 'weight', 'shadow', 'stroke', 'strokeWidth', 'strokeColor']
     const clampStrokeWidth = (raw) => {
       const n = Number(raw)
       if (!isFinite(n) || n <= 0) return DEFAULT_APPEARANCE.strokeWidth
@@ -1153,6 +1215,7 @@ window.__ModuleLoader__.load({
         shadow: src.shadow === true,
         stroke: src.stroke !== false,
         strokeWidth: src.strokeWidth === undefined ? DEFAULT_APPEARANCE.strokeWidth : clampStrokeWidth(src.strokeWidth),
+        strokeColor: typeof src.strokeColor === 'string' && src.strokeColor !== '' ? src.strokeColor : DEFAULT_APPEARANCE.strokeColor,
       }
     }
     // A row's own entry overrides the default appearance FIELD BY FIELD, so a
@@ -1189,14 +1252,28 @@ window.__ModuleLoader__.load({
       return (luminance + 0.05) / 0.05 >= 1.05 / (luminance + 0.05) ? '#000000' : '#ffffff'
     }
     const STROKE_FALLBACK = 'var(--bw-stroke-color, rgba(0,0,0,.75))'
+    const STROKE_AUTO = 'auto'
+    // A picked color wins; "auto" derives the contrasting pole from the row's
+    // font color — computed in JS when the row carries one, read from the
+    // sampled --bw-stroke-color variable otherwise (so a theme or background
+    // plugin flip needs no render).
+    const strokeColorOf = (appearance) => {
+      const picked = appearance && typeof appearance.strokeColor === 'string' && appearance.strokeColor !== ''
+        ? appearance.strokeColor
+        : DEFAULT_APPEARANCE.strokeColor
+      if (picked === STROKE_AUTO) {
+        const rgb = appearance.color ? colorToRgb(appearance.color) : null
+        return rgb ? contrastStrokeColor(rgb) : STROKE_FALLBACK
+      }
+      return colorToRgb(picked) ? picked : DEFAULT_APPEARANCE.strokeColor
+    }
     // paint-order keeps the stroke UNDER the fill, so the glyph does not thin
     // out — the whole point of an outer outline.
     const strokeStyleOf = (appearance) => {
       if (!appearance || appearance.stroke === false) return null
-      const rgb = appearance.color ? colorToRgb(appearance.color) : null
       return {
         WebkitTextStrokeWidth: clampStrokeWidth(appearance.strokeWidth) + 'px',
-        WebkitTextStrokeColor: rgb ? contrastStrokeColor(rgb) : STROKE_FALLBACK,
+        WebkitTextStrokeColor: strokeColorOf(appearance),
         paintOrder: 'stroke fill',
       }
     }
@@ -1350,6 +1427,10 @@ window.__ModuleLoader__.load({
     /* --------------------- customization dialog ----------------------- */
 
     const SWATCHES = ['', '#5b8def', '#3fb950', '#d29922', '#f85149', '#a371f7', '#39c5cf', '#ec6cb9', '#ff9f45', '#6e7681']
+    // Outline-color presets: gray (the default), black, white, brand blue — the
+    // native picker next to them covers everything else, and "auto" derives the
+    // contrasting pole from the font color.
+    const STROKE_PRESETS = ['#808080', '#000000', '#ffffff', '#5b8def']
     const GLOW_MAX = 14
     const ICON_CHOICES = [
       'solid', 'outline', 'none',
@@ -1366,20 +1447,42 @@ window.__ModuleLoader__.load({
       'IconLoadingOutline16', 'IconPanelLeftOutline16', 'IconPaperclipOutline16', 'IconPersonalizationOutline16',
       'IconPlayOutline16', 'IconPauseOutline16', 'IconPlusOutline16', 'IconQuestionOutline14',
       'IconQueueOutline14', 'IconRefreshOutline14', 'IconRefreshOutline16', 'IconRightUpOutline14',
-      'IconSearchOutline16', 'IconSendOutline14', 'IconSendOutline16', 'IconSettingsOutline14',
+      'IconSearchOutline16', 'IconSendOutline14', 'IconSettingsOutline14',
       'IconSettingsOutline16', 'IconShareOutline16', 'IconStopFill16', 'IconThinkOutline14',
       'IconThinkOutline16', 'IconTrashOutline16', 'IconUserOutline16', 'IconWarningOutline16',
       'IconLikeOutline16', 'IconDislikeOutline16', 'IconFollowsystemOutline16',
       'IconAlarmClockOutline16', 'IconClockOutline16', 'IconDatabaseOutline16',
+      // Added with dsh 0.1.6-alpha.1 — absent on older hosts, where the picker
+      // filters them out (see ICON_PICKER_CHOICES).
+      'IconPaperPlaneOutline14', 'IconShieldOutline16', 'IconPlanOutline14',
+      'IconWrapLinesOutline16', 'IconCompactOutline16',
     ]
 
+    /**
+     * What the picker actually offers on THIS host: every legacy slot, plus the
+     * primitives this page's icon module really exports, deduped by resolved
+     * name so a retired alias can never double a cell. Computed once — the icon
+     * module is fixed for the lifetime of the page.
+     */
+    const ICON_PICKER_CHOICES = (() => {
+      const seen = new Set()
+      return ICON_CHOICES.filter((mode) => {
+        if (mode === 'solid' || mode === 'outline' || mode === 'none') return true
+        const name = resolveIconName(mode)
+        if (name === '' || seen.has(name)) return false
+        seen.add(name)
+        return true
+      })
+    })()
+
     /**
      * Appearance controls shared by the per-row dialog and the settings card's
      * "default appearance" section: color, glow, weight, shadow, the text
-     * outline (on/off + width) and — where the row actually renders one — the
-     * folder glyph. The outline color is never picked by hand (see the
-     * appearance block above): it is derived from the effective font color, so
-     * it keeps working when the palette flips.
+     * outline (on/off + width + color) and — where the row actually renders
+     * one — the folder glyph. Since v0.10.1 the outline color is a normal
+     * choice (presets + picker, gray by default); "auto" is the mode that
+     * derives the contrasting pole from the effective font color, so a palette
+     * flip keeps working without a re-render.
      */
     function AppearanceControls({ value, onChange, allowIcon, t }) {
       const appearance = readAppearance(value)
@@ -1389,7 +1492,11 @@ window.__ModuleLoader__.load({
       const shadow = appearance.shadow
       const stroke = appearance.stroke
       const strokeWidth = appearance.strokeWidth
+      const strokeColor = appearance.strokeColor
       const iconMode = value && value.icon ? value.icon : 'solid'
+      // The glyph this choice actually resolves to on THIS host: a value saved
+      // before the host renamed its icon set still highlights a real cell.
+      const activeGlyph = resolveIconName(iconMode)
       const patch = (next) => { if (typeof onChange === 'function') onChange(next) }
       const channels = colorToRgb(color)
       const setChannel = (index, raw) => {
@@ -1507,15 +1614,44 @@ window.__ModuleLoader__.load({
             }),
             E('span', { className: 'bw-glow-value' }, strokeWidth + 'px'),
           ),
+        ),
+        E('div', { className: 'bw-field' },
+          t('custom.strokeColor'),
+          E('div', { className: 'bw-dialog-input-row' },
+            E('button', {
+              type: 'button',
+              className: cls('bw-swatch', 'bw-swatch-wide', strokeColor === STROKE_AUTO && 'bw-swatch-active'),
+              title: t('custom.strokeColor.auto'),
+              onClick: () => patch({ strokeColor: STROKE_AUTO }),
+            }, t('custom.strokeColor.auto')),
+            STROKE_PRESETS.map((value) => E('button', {
+              key: value,
+              type: 'button',
+              className: cls('bw-swatch', strokeColor === value && 'bw-swatch-active'),
+              style: { background: value },
+              'aria-label': value,
+              title: value,
+              onClick: () => patch({ strokeColor: value }),
+            })),
+            E('input', {
+              type: 'color',
+              className: 'bw-color-input',
+              value: colorToRgb(strokeColor) ? strokeColor : DEFAULT_APPEARANCE.strokeColor,
+              onChange: (e) => patch({ strokeColor: e.target.value }),
+            }),
+          ),
           E('div', { className: 'bw-hint' }, t('custom.stroke.hint')),
         ),
         allowIcon ? E('div', { className: 'bw-field' },
           t('custom.icon'),
           E('div', { className: 'bw-icon-grid' },
-            ICON_CHOICES.map((mode) => E('button', {
+            ICON_PICKER_CHOICES.map((mode) => E('button', {
               key: mode,
               type: 'button',
-              className: cls('bw-icon-cell', iconMode === mode && 'bw-icon-cell-active'),
+              // A value saved before an alias flip still highlights the cell it
+              // now resolves to, instead of leaving the grid with no selection.
+              className: cls('bw-icon-cell',
+                (iconMode === mode || (activeGlyph !== '' && resolveIconName(mode) === activeGlyph)) && 'bw-icon-cell-active'),
               title: mode === 'solid' ? t('custom.icon.solid') : (mode === 'outline' ? t('custom.icon.outline') : mode),
               'aria-label': mode === 'solid' ? t('custom.icon.solid') : (mode === 'outline' ? t('custom.icon.outline') : mode),
               onClick: () => patch({ icon: mode }),
@@ -1761,6 +1897,7 @@ window.__ModuleLoader__.load({
       const sessionGroupsMap = useStore ? (useStore(s => s.sessionGroups) || {}) : {}
       const prefsMap = useStore ? (useStore(s => s.prefs) || {}) : {}
       const stylingMap = useStore ? (useStore(s => s.styling) || {}) : {}
+      const sessionOrderMap = useStore ? (useStore(s => s.sessionOrder) || {}) : {}
       // Dual-write wrappers: every preference mutation lands in the local
       // store (immediate echo + scope-less fallback) AND the host settings
       // store (durable cross-device copy for the manual pull on the other
@@ -2013,6 +2150,13 @@ window.__ModuleLoader__.load({
         return { ...built, folders: built.folders.map((f) => materializeChain(compressTree(f))), workspaces: built.workspaces }
       }, [items, storeFolders, compactChains, draggingWorkspace])
 
+      /** Browser-local flat session order for one workspace (fallback channel). */
+      const sessionOrderOf = (workspaceId) => {
+        const map = sessionOrderMap && typeof sessionOrderMap === 'object' ? sessionOrderMap : {}
+        const list = map[workspaceId]
+        return Array.isArray(list) ? list : []
+      }
+
       const sessionsOf = (workspace) => {
         const rows = []
         for (const id of workspace.sessionIds || []) {
@@ -2031,7 +2175,21 @@ window.__ModuleLoader__.load({
             pending: pendingKindOf(pending, id),
           })
         }
-        return rows
+        // Browser-local reorder fallback (dsh 0.1.6-alpha.1 stopped injecting
+        // insertSessionBefore): the local flat order wins for the workspaces the
+        // user dragged in, and is empty everywhere else — so a host that still
+        // exposes the action keeps its authoritative order untouched.
+        // Host order stays authoritative wherever the action exists.
+        const local = typeof insertSessionBefore === 'function' ? [] : sessionOrderOf(workspace.workspaceId)
+        if (local.length === 0) return rows
+        const remaining = new Map(rows.map((row) => [row.id, row]))
+        const out = []
+        for (const id of local) {
+          const row = remaining.get(id)
+          if (row) { out.push(row); remaining.delete(id) }
+        }
+        for (const row of rows) if (remaining.has(row.id)) out.push(row)
+        return out
       }
 
       const searchAgent = (agent) => {
@@ -2137,7 +2295,11 @@ window.__ModuleLoader__.load({
       const canDragWorkspace = typeof insertWorkspaceBefore === 'function'
       // Session REORDER needs the host insertSessionBefore action; dragging a
       // session onto a sub-group row (a pure rename) stays available without it.
-      const canReorderSessions = typeof insertSessionBefore === 'function'
+      // Session reorder keeps working either way: the host action is preferred
+      // (authoritative, visible to every surface), while hosts that no longer
+      // inject it — dsh 0.1.6-alpha.1 dropped insertSessionBefore from the
+      // browser contract — fall back to the browser-local flat order.
+      const canReorderSessions = true
 
       /* --------------------- workspace drag & drop -------------------- */
 
@@ -2315,9 +2477,16 @@ window.__ModuleLoader__.load({
         const anchor = half === 'after'
           ? (index === -1 ? undefined : (flat[index + 1] ? flat[index + 1].id : undefined))
           : targetSessionId
-        Promise.resolve()
-          .then(() => (anchor !== undefined ? insertSessionBefore(workspaceId, source.sessionId, anchor) : insertSessionBefore(workspaceId, source.sessionId)))
-          .catch(fail)
+        if (typeof insertSessionBefore === 'function') {
+          Promise.resolve()
+            .then(() => (anchor !== undefined ? insertSessionBefore(workspaceId, source.sessionId, anchor) : insertSessionBefore(workspaceId, source.sessionId)))
+            .catch(fail)
+          return
+        }
+        // Host channel gone: commit the same move into the browser-local order.
+        if (actions && typeof actions.setSessionOrder === 'function') {
+          actions.setSessionOrder(workspaceId, reorderIds(flat.map((s) => s.id), source.sessionId, anchor))
+        }
       }
       const commitSessionMoveInto = (workspaceId, groupPath) => {
         const source = drag.source