dsh-tiddlywiki 0.16.21 → 0.16.23

package/src/client/rightbar-tab.ts

@@ -1,5 +1,5 @@
 /**
- * Right-Sidebar TiddlyWiki tab type (v0.17.0).
+ * Right-Sidebar TiddlyWiki tab type (v0.17.0; shared TW frame v0.16.23).
  *
  * DSH's new right column (dsh-client-ui-sidebar-right) lets plugins register
  * "tab types": stage 1 registers the type into `ctx.sidebarRightTabs` — a
@@ -9,11 +9,12 @@
  * the whole integration is optional (older DSH / rightbar absent → no-op).
  *
  * The body embeds the SAME-ORIGIN TW proxy (`/dsh-tiddlywiki/tw/`) in an
- * iframe, exactly like the center-column panel. One TW client at a time is
- * enforced: when this tab becomes visible the center overlay (and any sibling
- * overlay panel) closes via the existing `dsh-panel-activate` protocol, and
- * when another panel activates this tab closes itself. Wiki links in the reply
- * stream route here while the tab is visible (see panel.ts openTiddler).
+ * iframe via the shared frame machinery (tw-frame.ts), exactly like the
+ * center-column panel. One TW client at a time is enforced: when this tab
+ * becomes visible the center overlay (and any sibling overlay panel) closes
+ * via the existing `dsh-panel-activate` protocol, and when another panel
+ * activates this tab closes itself. Wiki links in the reply stream route here
+ * while the tab is visible (tw-frame.ts' live-frame registry, see panel.ts).
  *
  * The tab body is React only because the slot runtime renders React: the frame
  * is plain DOM built inside a ref host, mirroring the plugin's DOM style.
@@ -21,8 +22,14 @@
  * @module dsh-tiddlywiki/client/rightbar-tab
  */
 import * as React from 'react'
-import { STATUS_ENDPOINT } from './endpoints.ts'
-import { attachThemeSync, setThemeSyncConfig } from './theme-sync.ts'
+import {
+  ACTIVATE_EVENT,
+  createTwFrameController,
+  getTabLabel,
+  TwTabIcon,
+  type TwFrameController,
+  warmTabLabel,
+} from './tw-frame.ts'
 
 /** The tab kind this package owns; what `openTab` names and the guide entry opens. */
 export const TW_RIGHTBAR_KIND = 'dsh-tiddlywiki'
@@ -30,21 +37,6 @@ export const TW_RIGHTBAR_KIND = 'dsh-tiddlywiki'
 export const TW_RIGHTBAR_ID = 'dsh-tiddlywiki'
 /** Activation-event name for THIS tab (distinct from the center panel's 'dsh-tiddlywiki'). */
 const RIGHTBAR_PANEL_NAME = 'dsh-tiddlywiki/rightbar'
-/** Cross-plugin activation event; detail is the activating panel name. */
-const ACTIVATE_EVENT = 'dsh-panel-activate'
-/** The "知识库" FAB's reload event; the rightbar frame reloads with the center one. */
-const PANEL_RELOAD_EVENT = 'dsh-tw-panel-reload'
-
-const RESTART_ENDPOINT = '/dsh-tiddlywiki/restart'
-
-/** Tab chip / guide copy default (label refreshed from `/status` ui.tabLabel). */
-let rightbarLabel = '知识库'
-
-/** Update the tab chip label from the live config (ui.tabLabel). */
-function setLabel(label: string): void {
-  const trimmed = typeof label === 'string' ? label.trim() : ''
-  if (trimmed.length > 0) rightbarLabel = trimmed
-}
 
 /* ── structural faces over the rightbar contract (no @deepseek-ai imports) ── */
 
@@ -77,274 +69,6 @@ export interface RightbarSlotsFace {
   ): () => void
 }
 
-interface StatusPayload {
-  ok?: boolean
-  status: string
-  url?: string
-  /** Same-origin TW proxy path (e.g. /dsh-tiddlywiki/tw/); the iframe base. */
-  twProxy?: string
-  wikiPath?: string
-  error?: string
-  ui?: { followDshTheme?: boolean; darkPalette?: string; tabLabel?: string }
-}
-
-async function fetchStatus(): Promise<StatusPayload | null> {
-  try {
-    const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(8_000) })
-    if (!res.ok) return null
-    return (await res.json()) as StatusPayload
-  } catch {
-    return null
-  }
-}
-
-async function requestRestart(): Promise<boolean> {
-  try {
-    const res = await fetch(RESTART_ENDPOINT, { method: 'POST', signal: AbortSignal.timeout(8_000) })
-    return res.ok
-  } catch {
-    return false
-  }
-}
-
-/** Guide entry glyph: a wiki page with a TiddlyWiki-style "T" (same as the entry). */
-function GuideIcon({ size = 16, className }: { size?: number; className?: string }): React.ReactElement {
-  return React.createElement(
-    'svg',
-    { width: size, height: size, className, viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: 1.3, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true },
-    React.createElement('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' }),
-    React.createElement('path', { d: 'M6 6h4M6 8.5h2.5' }),
-  )
-}
-
-/** The plain-DOM TW frame controller owned by the React body. */
-interface FrameController {
-  /** Reflect the tab's visibility; loads lazily on the first show. */
-  setVisible(visible: boolean): void
-  isVisible(): boolean
-  /** Open a tiddler by title; false when this controller cannot serve it. */
-  openTiddler(title: string): boolean
-  dispose(): void
-}
-
-/** Live controller handle for center-panel link routing (openTiddlerInRightbar). */
-let liveFrame: FrameController | undefined
-
-/**
- * Ask the live rightbar TW tab to open a tiddler. False when no visible tab
- * is there, so the center panel handles the request as before.
- */
-export function openTiddlerInRightbar(title: string): boolean {
-  if (liveFrame === undefined) return false
-  return liveFrame.openTiddler(title)
-}
-
-function createFrameController(host: HTMLElement, signal: AbortSignal): FrameController {
-  let visible = false
-  let started = false
-  let disposed = false
-  let refreshTimer: number | undefined
-  let refreshAttempts = 0
-  let frameLoaded = false
-  let pendingHash: string | null = null
-  let themeSyncDispose: (() => void) | undefined
-
-  const view = document.createElement('div')
-  view.className = 'dsh-tw-rightbar-view'
-
-  const frameArea = document.createElement('div')
-  frameArea.className = 'dsh-tw-rightbar-frame-wrap'
-  const frame = document.createElement('iframe')
-  frame.className = 'dsh-tw-rightbar-frame'
-  frame.title = 'TiddlyWiki'
-  frame.hidden = true
-  frameArea.append(frame)
-
-  const errorArea = document.createElement('div')
-  errorArea.className = 'dsh-tw-rightbar-error'
-  errorArea.hidden = true
-
-  view.append(frameArea, errorArea)
-  host.append(view)
-
-  frame.addEventListener('load', () => {
-    frameLoaded = true
-    applyPendingHash()
-  })
-  themeSyncDispose = attachThemeSync(frame)
-
-  const showError = (message: string): void => {
-    frame.hidden = true
-    errorArea.hidden = false
-    errorArea.replaceChildren()
-    const p = document.createElement('div')
-    p.textContent = 'TiddlyWiki 服务不可用'
-    const code = document.createElement('code')
-    code.textContent = message
-    const retry = document.createElement('button')
-    retry.type = 'button'
-    retry.textContent = '重试'
-    retry.addEventListener('click', () => {
-      retry.disabled = true
-      retry.textContent = '重启中…'
-      void requestRestart().finally(() => { void doRefresh() })
-    })
-    errorArea.append(p, code, retry)
-  }
-
-  const showStarting = (): void => {
-    frame.hidden = true
-    errorArea.hidden = false
-    errorArea.replaceChildren()
-    const p = document.createElement('div')
-    p.textContent = 'TiddlyWiki 服务正在启动…'
-    errorArea.append(p)
-  }
-
-  const showFrame = (url: string): void => {
-    errorArea.hidden = true
-    // Only reveal the frame while the tab is on screen.
-    frame.hidden = !visible
-    // Set the src only when the url changed, so an editor never loses unsaved
-    // state on a status refresh.
-    if (frame.dataset.loaded !== url) {
-      frame.dataset.loaded = url
-      frameLoaded = false
-      frame.src = url
-    }
-  }
-
-  /** Apply a pending tiddler-hash once the frame is ready (see panel.ts). */
-  const applyPendingHash = (): void => {
-    if (pendingHash === null || !frameLoaded) return
-    const hash = pendingHash
-    const win = frame.contentWindow
-    if (win === null) {
-      fallbackLoad(hash)
-      return
-    }
-    const tryOnce = (attempt: number): void => {
-      if (disposed) return
-      if (pendingHash !== hash) return
-      const frameTw = win as { $tw?: unknown }
-      if (typeof frameTw.$tw !== 'object' || frameTw.$tw === null) {
-        if (attempt < 40) {
-          window.setTimeout(() => tryOnce(attempt + 1), 150)
-          return
-        }
-        fallbackLoad(hash)
-        return
-      }
-      pendingHash = null
-      try {
-        if (win.location.hash !== hash) win.location.hash = hash
-      } catch {
-        fallbackLoad(hash)
-      }
-    }
-    tryOnce(0)
-  }
-
-  const fallbackLoad = (hash: string): void => {
-    if (disposed) return
-    if (pendingHash === hash) pendingHash = null
-    const base = frame.src.split('#')[0]
-    if (frame.src !== `${base}${hash}`) frame.src = `${base}${hash}`
-  }
-
-  const doRefresh = async (): Promise<void> => {
-    if (refreshTimer !== undefined) {
-      window.clearTimeout(refreshTimer)
-      refreshTimer = undefined
-    }
-    const payload = await fetchStatus()
-    if (disposed) return
-    if (payload === null) {
-      showError('无法访问 /dsh-tiddlywiki/status')
-      return
-    }
-    if (payload.ui !== undefined) {
-      setLabel(payload.ui.tabLabel ?? rightbarLabel)
-      setThemeSyncConfig({
-        enabled: payload.ui.followDshTheme !== false,
-        darkPalette: payload.ui.darkPalette,
-      })
-    }
-    if (payload.status === 'running') {
-      refreshAttempts = 0
-      if (typeof payload.twProxy === 'string') {
-        showFrame(new URL(payload.twProxy, window.location.origin).href)
-      } else if (typeof payload.url === 'string') {
-        showFrame(payload.url)
-      } else {
-        showError('服务未返回编辑器地址')
-      }
-      return
-    }
-    if (payload.status === 'starting') {
-      showStarting()
-      if (refreshAttempts < 30) {
-        refreshAttempts++
-        refreshTimer = window.setTimeout(() => { void doRefresh() }, 1_500)
-      }
-      return
-    }
-    refreshAttempts = 0
-    showError(payload.error ?? `服务状态：${payload.status}`)
-  }
-
-  const onReloadRequest = (): void => {
-    if (!frame.hidden) frame.src = frame.src
-  }
-  document.addEventListener(PANEL_RELOAD_EVENT, onReloadRequest)
-
-  const onAbort = (): void => controller.dispose()
-  signal.addEventListener('abort', onAbort, { once: true })
-
-  const controller: FrameController = {
-    setVisible(next: boolean): void {
-      visible = next
-      if (!started) {
-        // Nothing loaded yet: stay hidden until the first show kicks the load.
-        frame.hidden = true
-        view.dataset.visible = next ? '1' : '0'
-        if (next) {
-          started = true
-          void doRefresh()
-        }
-        return
-      }
-      frame.hidden = !next
-      view.dataset.visible = next ? '1' : '0'
-    },
-    isVisible(): boolean {
-      return visible
-    },
-    openTiddler(title: string): boolean {
-      if (disposed || !visible) return false
-      pendingHash = `#${encodeURIComponent(title)}`
-      if (!started) {
-        started = true
-        void doRefresh()
-      } else {
-        applyPendingHash()
-      }
-      return true
-    },
-    dispose(): void {
-      if (disposed) return
-      disposed = true
-      if (liveFrame === controller) liveFrame = undefined
-      document.removeEventListener(PANEL_RELOAD_EVENT, onReloadRequest)
-      signal.removeEventListener('abort', onAbort)
-      if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
-      themeSyncDispose?.()
-      view.remove()
-    },
-  }
-  return controller
-}
-
 /**
  * The tab body (stage 2): a thin React wrapper that mounts the TW iframe into
  * a plain-DOM host. One mount per tab record; mutual exclusion rides the
@@ -355,14 +79,13 @@ export function TwRightbarTabBody(props: RightbarTabBodyProps): React.ReactEleme
   const info = useTabInfo()
   const tab = info.tab
   const hostRef = React.useRef<HTMLDivElement | null>(null)
-  const controllerRef = React.useRef<FrameController | null>(null)
+  const controllerRef = React.useRef<TwFrameController | null>(null)
 
   React.useEffect(() => {
     const host = hostRef.current
     if (host === null) return
-    const controller = createFrameController(host, tab.signal)
+    const controller = createTwFrameController(host, tab.signal)
     controllerRef.current = controller
-    liveFrame = controller
     return () => {
       controller.dispose()
       controllerRef.current = null
@@ -397,13 +120,13 @@ export function rightbarDefinition(): Record<string, unknown> {
   return {
     id: TW_RIGHTBAR_ID,
     kind: TW_RIGHTBAR_KIND,
-    title: (): string => rightbarLabel,
+    title: (): string => getTabLabel(),
     guide: [
       {
         order: 10,
         title: (): string => 'TiddlyWiki 知识库',
         description: (): string => '在右侧边栏打开 TiddlyWiki 编辑器（与聊天并排）',
-        icon: GuideIcon,
+        icon: TwTabIcon,
       },
     ],
   }
@@ -431,9 +154,7 @@ export function mountRightbarTab(
   }
   // Warm the chip label from the live config (ui.tabLabel) so the first open
   // already shows the right name; the frame refreshes it on every status call.
-  void fetchStatus().then((payload) => {
-    if (payload?.ui !== undefined) setLabel(payload.ui.tabLabel ?? rightbarLabel)
-  })
+  warmTabLabel()
   return () => {
     for (const dispose of disposers.splice(0)) dispose()
   }

package/src/client/settings-page.ts

@@ -255,6 +255,7 @@ function renderConfigSection(body: HTMLElement, config: Record<string, unknown>,
   textField('ui.tabLabel', '会话顶部「知识库」Tab 名称', typeof ui.tabLabel === 'string' && ui.tabLabel.trim().length > 0 ? ui.tabLabel.trim() : '知识库')
   checkField('ui.showSessionTab', '显示会话顶部「知识库」Tab（本会话相关 wiki 笔记汇总）', ui.showSessionTab !== false)
   checkField('ui.showRightbarTab', '在 DSH 右侧边栏提供 TiddlyWiki 入口/Tab（与聊天并排）', ui.showRightbarTab !== false)
+  checkField('ui.showBetterSidebarTab', '在 DSH Better Sidebar 侧边栏提供 TiddlyWiki Tab（与聊天并排）', ui.showBetterSidebarTab !== false)
   const sendToAgent = (ui.sendToAgent ?? {}) as Record<string, unknown>
   checkField('ui.sendToAgent.enabled', '启用「发送给 Agent」（TW 笔记 → DSH 会话注入）', sendToAgent.enabled !== false)
   textField('ui.sendToAgent.endpoint', 'TW 端请求基址（空=自动取当前 DSH origin）', typeof sendToAgent.endpoint === 'string' ? sendToAgent.endpoint : '')