dsh-tiddlywiki 0.2.1 → 0.3.1

package/src/client/settings-page.ts

@@ -23,6 +23,7 @@ const STATE_ENDPOINT = '/dsh-tiddlywiki/admin/state'
 const INFO_ENDPOINT = '/dsh-tiddlywiki/admin/info'
 const CONFIG_ENDPOINT = '/dsh-tiddlywiki/admin/config'
 const RESTART_ENDPOINT = '/dsh-tiddlywiki/admin/restart'
+const SYNC_ENDPOINT = '/dsh-tiddlywiki/sync'
 
 interface CatalogEntry {
   name: string
@@ -119,6 +120,34 @@ function renderStatus(row: HTMLElement, state: AdminState, refresh: () => Promis
     state.git?.dirty === true ? '有未提交改动' : '',
   ].filter(Boolean).join(' · ')
   const label = make('span', 'dsh-tw-settings-muted', info)
+  const sync = make('button', 'dsh-tw-settings-btn', '同步')
+  sync.type = 'button'
+  sync.title = 'git 同步（pull → commit → push）'
+  sync.addEventListener('click', () => {
+    sync.disabled = true
+    sync.textContent = '同步中…'
+    void (async () => {
+      try {
+        const res = await fetch(SYNC_ENDPOINT, { method: 'POST', signal: AbortSignal.timeout(120_000) })
+        const payload = (await res.json().catch(() => null)) as { ok?: boolean; message?: string; error?: string; changed?: boolean; restarted?: boolean; restartError?: string } | null
+        if (!res.ok || payload?.ok !== true) toast(`同步失败：${payload?.error ?? payload?.message ?? `HTTP ${res.status}`}`)
+        else {
+          let detail = ''
+          if (payload.changed === true) {
+            detail += payload.restarted === true ? '，TW 已重启' : '，TW 未自动重启'
+            if (payload.restartError) detail += `（${payload.restartError}）`
+          }
+          toast(`同步完成：${payload.message ?? 'OK'}${detail}`)
+        }
+      } catch (err) {
+        toast(`同步失败：${err instanceof Error ? err.message : String(err)}`)
+      } finally {
+        sync.disabled = false
+        sync.textContent = '同步'
+        void refresh()
+      }
+    })()
+  })
   const restart = make('button', 'dsh-tw-settings-btn', '重启 TW')
   restart.type = 'button'
   restart.addEventListener('click', () => {
@@ -137,7 +166,7 @@ function renderStatus(row: HTMLElement, state: AdminState, refresh: () => Promis
       }
     })()
   })
-  row.append(chip, label, restart)
+  row.append(chip, label, sync, restart)
 }
 
 /** Config section: fields bound to effective config, changed-only save. */
@@ -183,6 +212,7 @@ function renderConfigSection(body: HTMLElement, config: Record<string, unknown>,
   textField('git.branch', 'git 分支', typeof git.branch === 'string' ? git.branch : 'main')
   checkField('ui.showQuickNote', '显示「快速笔记」悬浮按钮', ui.showQuickNote !== false)
   checkField('ui.showPanelStatus', '显示 TW 面板右下角「状态/重载」悬浮按钮', ui.showPanelStatus !== false)
+  checkField('ui.showSyncButton', '显示右下角「同步」悬浮按钮', ui.showSyncButton !== false)
   // 界面语言在下方「语言管理」区块设置（config 的 uiLanguage 仅供启动时自动应用）。
 
   const save = make('button', 'dsh-tw-settings-btn dsh-tw-settings-primary', '保存配置')

package/src/client/sidebar-entry.ts

@@ -1,148 +1,148 @@
-/**
- * Sidebar entry injection — structure ported from dsh-taskboard's
- * sidebar-entry.ts (verified live in this shell): scope to the sidebar root,
- * find the New Session button, and insert the entry as a direct child of that
- * root next to the family block. A body-level MutationObserver self-heals
- * React re-renders; a slow timer covers shells that mount late without
- * further mutations. The row is plain DOM so it never disturbs the shell's
- * reconciliation.
- *
- * @module dsh-tiddlywiki/client/sidebar-entry
- */
-import type { PanelState } from './state.ts'
-
-/** Stable data attribute identifying this entry row. */
-export const ENTRY_SELECTOR = '[data-dsh-tw-entry]'
-
-/** Inline icon: a wiki page with a TiddlyWiki-style "T" (nav-icon look). */
-const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 2.5h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/><path d="M6 6h4M6 8.5h2.5"/></svg>'
-
-/** Family entries from sibling plugins, kept in a stable relative order. */
-const FAMILY_SELECTOR = '[data-dsh-tw-entry], [data-dsh-atb-entry], [data-dsh-taskboard-entry], [data-dsh-ssh-entry]'
-
-/** Find the sidebar shell root element, or undefined while not yet mounted. */
-function sidebarRoot(): HTMLElement | undefined {
-  const column = document.querySelector<HTMLElement>(
-    '[data-pane="sidebar"], [class*="sidebarCol"], .dshDesktopUpstreamSidebar, .dshDesktopSidebarSurface',
-  )
-  if (column === null) return undefined
-  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
-  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
-}
-
-/** The New Session button inside the sidebar root. */
-function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
-  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
-  if (nested !== null) return nested
-  for (const child of root.children) {
-    if (child instanceof HTMLButtonElement && !child.matches(ENTRY_SELECTOR)) return child
-  }
-  const byAria = root.querySelector<HTMLButtonElement>(
-    'button[aria-label="新建会话"], button[aria-label="New Session"], button[aria-label*="新会话"], button[aria-label*="new session" i]',
-  )
-  if (byAria !== null) return byAria
-  const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>('button'))
-  return buttons.find(button => !button.matches(ENTRY_SELECTOR) && /新会话|新建会话|new session/i.test(button.textContent ?? ''))
-}
-
-/** Build the entry row (a detached button; insert once the shell is up). */
-function createEntry(state: PanelState): HTMLButtonElement {
-  const entry = document.createElement('button')
-  entry.type = 'button'
-  entry.dataset.dshTwEntry = ''
-  entry.className = 'dsh-tw-entry'
-  entry.setAttribute('aria-label', 'TiddlyWiki 知识库')
-  entry.innerHTML = `<span class="dsh-tw-entry-icon">${ICON}</span><span class="dsh-tw-entry-label">TiddlyWiki</span>`
-  entry.addEventListener('click', () => { state.toggle() })
-  return entry
-}
-
-/** Re-insert the entry before the whole family block (stable ordering). */
-function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
-  const button = newSessionButton(root)
-  if (button === undefined) return false
-  if (entry.parentElement !== root) {
-    const row = button.closest('[class*="logoRow"]')
-    const base = (row !== null && row.parentElement === root) ? row : button
-    const family = Array.from(root.children).filter(
-      (el): el is HTMLElement => el instanceof HTMLElement && el.matches(FAMILY_SELECTOR),
-    )
-    const anchor = family.length > 0 ? (family[0] ?? null) : (base.nextElementSibling ?? null)
-    root.insertBefore(entry, anchor)
-  }
-  return true
-}
-
-/** Debug counters (window.__twDebug) — evidence if the entry fails to appear. */
-interface TwDebug { attempts: number; found: boolean; placed: boolean }
-
-/**
- * Mount the sidebar entry, waiting for the shell and self-healing on later
- * re-renders.
- * @param state - the shared panel state the entry toggles.
- * @returns disposer removing the entry and its observers.
- */
-export function mountSidebarEntry(state: PanelState): () => void {
-  const entry = createEntry(state)
-  const debug: TwDebug = { attempts: 0, found: false, placed: false }
-  const host = globalThis.location?.hostname
-  if (host === 'localhost' || host === '127.0.0.1') {
-    ;(window as unknown as { __twDebug?: TwDebug }).__twDebug = debug
-  }
-  let root: HTMLElement | undefined
-  let placed = false
-
-  const tryPlace = (): void => {
-    debug.attempts++
-    if (root !== undefined && !root.isConnected) {
-      rootObserver.disconnect()
-      root = undefined
-      placed = false
-    }
-    if (placed) {
-      if (document.body.contains(entry)) return
-      rootObserver.disconnect()
-      root = undefined
-      placed = false
-    }
-    root ??= sidebarRoot()
-    if (root === undefined) return
-    debug.found = newSessionButton(root) !== undefined
-    placed = placeEntry(root, entry)
-    debug.placed = placed
-    if (placed) rootObserver.observe(root, { childList: true, subtree: true })
-  }
-
-  // Body-level watcher as the whole-rebuild fallback.
-  const waitObserver = new MutationObserver(() => { tryPlace() })
-  waitObserver.observe(document.body, { childList: true, subtree: true })
-
-  // Self-heal: re-insert in the same frame when a re-render displaces the row.
-  const rootObserver = new MutationObserver(() => {
-    if (root === undefined || !root.isConnected) {
-      placed = false
-      tryPlace()
-      return
-    }
-    if (!root.contains(entry)) placed = placeEntry(root, entry)
-  })
-
-  // Belt-and-braces: a late shell mount with no further mutations still heals.
-  const retry = setInterval(() => { tryPlace() }, 2_000)
-
-  const syncActive = (): void => {
-    if (state.isOpen()) entry.dataset.active = 'true'
-    else delete entry.dataset.active
-  }
-  const unsubscribe = state.subscribe(syncActive)
-  syncActive()
-  tryPlace()
-
-  return () => {
-    clearInterval(retry)
-    waitObserver.disconnect()
-    rootObserver.disconnect()
-    unsubscribe()
-    entry.remove()
-  }
-}
+/**
+ * Sidebar entry injection — structure ported from dsh-taskboard's
+ * sidebar-entry.ts (verified live in this shell): scope to the sidebar root,
+ * find the New Session button, and insert the entry as a direct child of that
+ * root next to the family block. A body-level MutationObserver self-heals
+ * React re-renders; a slow timer covers shells that mount late without
+ * further mutations. The row is plain DOM so it never disturbs the shell's
+ * reconciliation.
+ *
+ * @module dsh-tiddlywiki/client/sidebar-entry
+ */
+import type { PanelState } from './state.ts'
+
+/** Stable data attribute identifying this entry row. */
+export const ENTRY_SELECTOR = '[data-dsh-tw-entry]'
+
+/** Inline icon: a wiki page with a TiddlyWiki-style "T" (nav-icon look). */
+const ICON = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 2.5h8a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1z"/><path d="M6 6h4M6 8.5h2.5"/></svg>'
+
+/** Family entries from sibling plugins, kept in a stable relative order. */
+const FAMILY_SELECTOR = '[data-dsh-tw-entry], [data-dsh-atb-entry], [data-dsh-taskboard-entry], [data-dsh-ssh-entry]'
+
+/** Find the sidebar shell root element, or undefined while not yet mounted. */
+function sidebarRoot(): HTMLElement | undefined {
+  const column = document.querySelector<HTMLElement>(
+    '[data-pane="sidebar"], [class*="sidebarCol"], .dshDesktopUpstreamSidebar, .dshDesktopSidebarSurface',
+  )
+  if (column === null) return undefined
+  const logoOwner = column.querySelector<HTMLElement>('[class*="logoRow"]')?.parentElement
+  return logoOwner ?? (column.firstElementChild as HTMLElement | undefined)
+}
+
+/** The New Session button inside the sidebar root. */
+function newSessionButton(root: HTMLElement): HTMLButtonElement | undefined {
+  const nested = root.querySelector<HTMLButtonElement>('button[class*="newSession"]')
+  if (nested !== null) return nested
+  for (const child of root.children) {
+    if (child instanceof HTMLButtonElement && !child.matches(ENTRY_SELECTOR)) return child
+  }
+  const byAria = root.querySelector<HTMLButtonElement>(
+    'button[aria-label="新建会话"], button[aria-label="New Session"], button[aria-label*="新会话"], button[aria-label*="new session" i]',
+  )
+  if (byAria !== null) return byAria
+  const buttons = Array.from(root.querySelectorAll<HTMLButtonElement>('button'))
+  return buttons.find(button => !button.matches(ENTRY_SELECTOR) && /新会话|新建会话|new session/i.test(button.textContent ?? ''))
+}
+
+/** Build the entry row (a detached button; insert once the shell is up). */
+function createEntry(state: PanelState): HTMLButtonElement {
+  const entry = document.createElement('button')
+  entry.type = 'button'
+  entry.dataset.dshTwEntry = ''
+  entry.className = 'dsh-tw-entry'
+  entry.setAttribute('aria-label', 'TiddlyWiki 知识库')
+  entry.innerHTML = `<span class="dsh-tw-entry-icon">${ICON}</span><span class="dsh-tw-entry-label">TiddlyWiki</span>`
+  entry.addEventListener('click', () => { state.toggle() })
+  return entry
+}
+
+/** Re-insert the entry before the whole family block (stable ordering). */
+function placeEntry(root: HTMLElement, entry: HTMLButtonElement): boolean {
+  const button = newSessionButton(root)
+  if (button === undefined) return false
+  if (entry.parentElement !== root) {
+    const row = button.closest('[class*="logoRow"]')
+    const base = (row !== null && row.parentElement === root) ? row : button
+    const family = Array.from(root.children).filter(
+      (el): el is HTMLElement => el instanceof HTMLElement && el.matches(FAMILY_SELECTOR),
+    )
+    const anchor = family.length > 0 ? (family[0] ?? null) : (base.nextElementSibling ?? null)
+    root.insertBefore(entry, anchor)
+  }
+  return true
+}
+
+/** Debug counters (window.__twDebug) — evidence if the entry fails to appear. */
+interface TwDebug { attempts: number; found: boolean; placed: boolean }
+
+/**
+ * Mount the sidebar entry, waiting for the shell and self-healing on later
+ * re-renders.
+ * @param state - the shared panel state the entry toggles.
+ * @returns disposer removing the entry and its observers.
+ */
+export function mountSidebarEntry(state: PanelState): () => void {
+  const entry = createEntry(state)
+  const debug: TwDebug = { attempts: 0, found: false, placed: false }
+  const host = globalThis.location?.hostname
+  if (host === 'localhost' || host === '127.0.0.1') {
+    ;(window as unknown as { __twDebug?: TwDebug }).__twDebug = debug
+  }
+  let root: HTMLElement | undefined
+  let placed = false
+
+  const tryPlace = (): void => {
+    debug.attempts++
+    if (root !== undefined && !root.isConnected) {
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    if (placed) {
+      if (document.body.contains(entry)) return
+      rootObserver.disconnect()
+      root = undefined
+      placed = false
+    }
+    root ??= sidebarRoot()
+    if (root === undefined) return
+    debug.found = newSessionButton(root) !== undefined
+    placed = placeEntry(root, entry)
+    debug.placed = placed
+    if (placed) rootObserver.observe(root, { childList: true, subtree: true })
+  }
+
+  // Body-level watcher as the whole-rebuild fallback.
+  const waitObserver = new MutationObserver(() => { tryPlace() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Self-heal: re-insert in the same frame when a re-render displaces the row.
+  const rootObserver = new MutationObserver(() => {
+    if (root === undefined || !root.isConnected) {
+      placed = false
+      tryPlace()
+      return
+    }
+    if (!root.contains(entry)) placed = placeEntry(root, entry)
+  })
+
+  // Belt-and-braces: a late shell mount with no further mutations still heals.
+  const retry = setInterval(() => { tryPlace() }, 2_000)
+
+  const syncActive = (): void => {
+    if (state.isOpen()) entry.dataset.active = 'true'
+    else delete entry.dataset.active
+  }
+  const unsubscribe = state.subscribe(syncActive)
+  syncActive()
+  tryPlace()
+
+  return () => {
+    clearInterval(retry)
+    waitObserver.disconnect()
+    rootObserver.disconnect()
+    unsubscribe()
+    entry.remove()
+  }
+}

package/src/client/state.ts

@@ -1,39 +1,39 @@
-/**
- * Tiny pub/sub panel state shared by the sidebar entry and the center panel.
- *
- * @module dsh-tiddlywiki/client/state
- */
-
-export type PanelListener = (open: boolean) => void
-
-export class PanelState {
-  private open = false
-  private readonly listeners = new Set<PanelListener>()
-
-  isOpen(): boolean {
-    return this.open
-  }
-
-  toggle(): void {
-    this.set(!this.open)
-  }
-
-  openPanel(): void {
-    this.set(true)
-  }
-
-  closePanel(): void {
-    this.set(false)
-  }
-
-  set(value: boolean): void {
-    if (this.open === value) return
-    this.open = value
-    for (const listener of [...this.listeners]) listener(value)
-  }
-
-  subscribe(listener: PanelListener): () => void {
-    this.listeners.add(listener)
-    return () => { this.listeners.delete(listener) }
-  }
-}
+/**
+ * Tiny pub/sub panel state shared by the sidebar entry and the center panel.
+ *
+ * @module dsh-tiddlywiki/client/state
+ */
+
+export type PanelListener = (open: boolean) => void
+
+export class PanelState {
+  private open = false
+  private readonly listeners = new Set<PanelListener>()
+
+  isOpen(): boolean {
+    return this.open
+  }
+
+  toggle(): void {
+    this.set(!this.open)
+  }
+
+  openPanel(): void {
+    this.set(true)
+  }
+
+  closePanel(): void {
+    this.set(false)
+  }
+
+  set(value: boolean): void {
+    if (this.open === value) return
+    this.open = value
+    for (const listener of [...this.listeners]) listener(value)
+  }
+
+  subscribe(listener: PanelListener): () => void {
+    this.listeners.add(listener)
+    return () => { this.listeners.delete(listener) }
+  }
+}

package/src/client/styles.ts

@@ -58,9 +58,9 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
    setting controls whether they mount at all. */
 .dsh-tw-panel-status {
   /* 状态/重载悬浮按钮：右对齐到与快速笔记按钮同一条竖线（right:24），
-     垂直排在快速笔记按钮（bottom:88，高约 38px）上方；
+     垂直排在「同步」按钮（bottom:140）上方；
      两个按钮竖直依次排列（状态在上、重载在下），与其他插件按钮列对齐、不堆叠。 */
-  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  position: fixed; right: 24px; bottom: 192px; z-index: 950;
   display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
 }
 .dsh-tw-panel-status-btn {
@@ -95,9 +95,12 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 
 /* ── floating quick-note widget ────────────────────────────────
    Positioned ABOVE the shutdown launcher FAB (fixed right:24 bottom:24,
-   z-index 900, 46px) and BELOW its confirm overlay (z-index 1000). */
+   z-index 900, 46px) and BELOW its confirm overlay (z-index 1000).
+   Interactive overlays (the open card, the native-editor popup) sit ABOVE the
+   passive FAB column (sync/status, z-index 950) so those FABs never cover the
+   card's own bottom-right buttons. */
 .dsh-tw-note {
-  position: fixed; right: 24px; bottom: 88px; z-index: 950;
+  position: fixed; right: 24px; bottom: 88px; z-index: 980;
   display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
   font-family: inherit;
 }
@@ -108,11 +111,18 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   border-radius: 14px; box-shadow: var(--dsw-shadow-lv3, 0 8px 30px rgba(0,0,0,.22));
   padding: 12px; display: flex; flex-direction: column; gap: 10px;
   font-size: 13px;
+  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
+  animation: dsh-tw-note-in 180ms ease;
 }
 .dsh-tw-note-card[hidden] { display: none; }
+@keyframes dsh-tw-note-in {
+  from { opacity: 0; transform: translateY(8px) scale(.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
 .dsh-tw-note-head {
   display: flex; align-items: center; gap: 8px;
-  font-size: 12px; font-weight: 600; color: var(--dsw-alias-label-primary, #222);
+  font-size: 12px; font-weight: 600; letter-spacing: .2px;
+  color: var(--dsw-alias-label-primary, #222);
 }
 .dsh-tw-note-head .dsh-tw-note-label { margin-right: auto; display: flex; align-items: center; gap: 6px; }
 .dsh-tw-note-close {
@@ -131,28 +141,91 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   outline: none; border-color: var(--dsw-alias-brand-primary, #3e63dd);
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
 }
-.dsh-tw-note-text {
+.dsh-tw-note-text::placeholder { color: var(--dsw-alias-label-dimmed, #999); }
+/* ── Markdown editor (highlighted-textarea overlay) ────────────────
+   The <pre> highlight layer and the transparent <textarea> share identical
+   metrics (border/padding/font/line-height/white-space) so lines align 1:1. */
+.dsh-tw-note-editor { position: relative; min-width: 0; }
+.dsh-tw-note-editor pre,
+.dsh-tw-note-editor textarea {
+  margin: 0; box-sizing: border-box; width: 100%;
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18)); border-radius: 8px;
-  padding: 8px 9px; font: inherit; font-size: 13px; min-height: 120px; resize: vertical;
-  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, inherit);
+  padding: 8px 9px; font: inherit; font-size: 13px; line-height: 1.5; min-height: 120px;
+  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; tab-size: 4;
   transition: border-color 120ms ease, box-shadow 120ms ease;
 }
+.dsh-tw-note-editor .dsh-tw-note-hl {
+  position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0;
+  background: var(--dsw-alias-bg-layer-1, #fff); color: var(--dsw-alias-label-primary, #222);
+  pointer-events: none; overflow: hidden;
+}
+.dsh-tw-note-editor .dsh-tw-note-text {
+  position: relative; z-index: 1; resize: vertical;
+  background: transparent; color: transparent; caret-color: var(--dsw-alias-label-primary, #222);
+  overflow: auto;
+}
+.dsh-tw-note-editor .dsh-tw-note-text:focus { outline: none; }
+.dsh-tw-note-drop .dsh-tw-note-text,
+.dsh-tw-note-drop .dsh-tw-note-hl {
+  border-color: var(--dsw-alias-brand-primary, #3e63dd);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 25%, transparent);
+}
+/* ── markdown highlight tokens (colors only — never size/height, so the
+      overlay keeps line-for-line alignment with the invisible textarea) ── */
+.dsh-tw-note-hl .md-heading { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-note-hl .md-hash { font-weight: 700; color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 55%, transparent); }
+.dsh-tw-note-hl .md-code,
+.dsh-tw-note-hl .md-code-block,
+.dsh-tw-note-hl .md-fence {
+  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
+}
+.dsh-tw-note-hl .md-code {
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 14%, transparent);
+  border-radius: 4px; padding: 0 3px;
+}
+.dsh-tw-note-hl .md-code-block,
+.dsh-tw-note-hl .md-fence {
+  display: block; background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 8%, transparent);
+}
+.dsh-tw-note-hl .md-bold { font-weight: 700; }
+.dsh-tw-note-hl .md-italic { font-style: italic; }
+.dsh-tw-note-hl .md-strike { text-decoration: line-through; opacity: .75; }
+.dsh-tw-note-hl .md-link { color: var(--dsw-alias-brand-primary, #3e63dd); text-decoration: underline; }
+.dsh-tw-note-hl .md-url { color: color-mix(in srgb, var(--dsw-alias-brand-primary, #3e63dd) 70%, #999); text-decoration: underline dotted; }
+.dsh-tw-note-hl .md-image { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
+.dsh-tw-note-hl .md-bullet { font-weight: 700; color: var(--dsw-alias-brand-primary, #3e63dd); }
+.dsh-tw-note-hl .md-number { font-weight: 700; color: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-note-hl .md-quote { font-style: italic; color: var(--dsw-alias-label-secondary, #888); }
+.dsh-tw-note-hl .md-hr { color: var(--dsw-alias-label-dimmed, #999); text-decoration: line-through; }
+.dsh-tw-note-hl .md-task { color: var(--dsw-alias-label-secondary, #888); }
+.dsh-tw-note-hl .md-task-checked { color: var(--dsw-alias-state-success-primary, #3eaa5f); font-weight: 600; }
 .dsh-tw-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.dsh-tw-note-foot-left, .dsh-tw-note-foot-right { display: flex; align-items: center; gap: 8px; }
 .dsh-tw-note-hint { font-size: 11px; color: var(--dsw-alias-label-dimmed, #999); }
+.dsh-tw-note-upload {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
+  transition: filter 120ms ease, transform 80ms ease;
+}
+.dsh-tw-note-upload:hover { filter: brightness(.96); }
+.dsh-tw-note-upload:active { transform: scale(.96); }
 .dsh-tw-note-save {
   border: 1px solid transparent; background: var(--dsw-alias-brand-primary, #3e63dd); color: #fff;
   font: inherit; font-size: 12px; padding: 6px 16px; border-radius: 8px; cursor: pointer;
-  transition: filter 120ms ease;
+  transition: filter 120ms ease, transform 80ms ease;
 }
 .dsh-tw-note-save:hover:not(:disabled) { filter: brightness(1.08); }
+.dsh-tw-note-save:active:not(:disabled) { transform: scale(.96); }
 .dsh-tw-note-save:disabled { opacity: .55; cursor: default; }
 .dsh-tw-note-edit {
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
   font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
-  transition: filter 120ms ease;
+  transition: filter 120ms ease, transform 80ms ease;
 }
 .dsh-tw-note-edit:hover:not(:disabled) { filter: brightness(.96); }
+.dsh-tw-note-edit:active:not(:disabled) { transform: scale(.96); }
 .dsh-tw-note-edit:disabled { opacity: .55; cursor: default; }
 /* ── Multi-tag chip editor (quick-note tags) ─────────────────────────────── */
 .dsh-tw-note-tags { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
@@ -190,7 +263,7 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
   background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
   border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.2));
   border-radius: 12px; box-shadow: 0 14px 44px rgba(0,0,0,.3);
-  z-index: 980; font-family: inherit; font-size: 13px;
+  z-index: 990; font-family: inherit; font-size: 13px;
 }
 .dsh-tw-editor-bar {
   display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
@@ -216,6 +289,29 @@ html[data-dsh-tw-active] .dshDesktopConversationSurface > :not([data-dsh-tw-view
 }
 .dsh-tw-note-toggle:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
 
+/* ── floating sync button (bottom-right) ───────────────────────
+   Pill FAB between the quick-note toggle (bottom:88) and the TW panel
+   status/reload floaters (bottom:192); dot reflects git state. */
+.dsh-tw-sync {
+  position: fixed; right: 24px; bottom: 140px; z-index: 950;
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 9px 14px; border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(0,0,0,.18));
+  background: var(--dsw-alias-bg-layer-2, #fff); color: var(--dsw-alias-label-primary, #222);
+  font: inherit; font-size: 13px; box-shadow: var(--dsw-shadow-lv3, 0 4px 16px rgba(0,0,0,.16));
+  cursor: pointer; transition: background-color 120ms ease;
+}
+.dsh-tw-sync:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.1)); }
+.dsh-tw-sync:disabled { opacity: .65; cursor: default; }
+.dsh-tw-sync-icon { display: inline-flex; flex: none; }
+.dsh-tw-sync-spin .dsh-tw-sync-icon svg { animation: dsh-tw-spin 1s linear infinite; transform-origin: center; }
+@keyframes dsh-tw-spin { to { transform: rotate(360deg); } }
+.dsh-tw-sync-dot { width: 8px; height: 8px; border-radius: 50%; background: #999; flex: none; }
+.dsh-tw-sync-dot[data-state="clean"] { background: var(--dsw-alias-state-success-primary, #3eaa5f); }
+.dsh-tw-sync-dot[data-state="dirty"] { background: var(--dsw-alias-state-warning-primary, #d9822b); }
+.dsh-tw-sync-dot[data-state="behind"] { background: var(--dsw-alias-state-error-primary, #d13b3b); }
+.dsh-tw-sync-dot[data-state="syncing"] { background: var(--dsw-alias-brand-primary, #3e63dd); }
+
 /* ── toast ──────────────────────────────────────────────────── */
 .dsh-tw-toast {
   position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);