dsh-tiddlywiki 0.1.0

package/src/client/note-widget.ts

@@ -0,0 +1,210 @@
+/**
+ * Floating quick-note widget (design doc §12, D6/D7) — bottom-right, fixed,
+ * collapsible, independent of any shell DOM. Lets the human jot drafts /
+ * scratch notes while waiting for the AI or drafting the next prompt.
+ *
+ * Save posts to /dsh-tiddlywiki/note → an independent tiddler (title & tag
+ * editable; defaults: timestamp title + config tag, usually "inbox").
+ *
+ * @module dsh-tiddlywiki/client/note-widget
+ */
+import { toast } from './toast.ts'
+import { openEditorPopup } from './editor-popup.ts'
+
+const NOTE_ENDPOINT = '/dsh-tiddlywiki/note'
+const EDIT_ENDPOINT = '/dsh-tiddlywiki/edit'
+const STATUS_ENDPOINT = '/dsh-tiddlywiki/status'
+
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n)
+}
+
+/** Default note title: `YYYY-MM-DD HH:mm`. */
+function timestampTitle(date = new Date()): string {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}`
+}
+
+async function fetchDefaultTag(): Promise<string> {
+  try {
+    const res = await fetch(STATUS_ENDPOINT, { signal: AbortSignal.timeout(5_000) })
+    if (!res.ok) return 'inbox'
+    const payload = (await res.json()) as { note?: { tag?: string } }
+    return payload.note?.tag ?? 'inbox'
+  } catch {
+    return 'inbox'
+  }
+}
+
+export function mountNoteWidget(): () => void {
+  const root = document.createElement('div')
+  root.className = 'dsh-tw-note'
+
+  const card = document.createElement('div')
+  card.className = 'dsh-tw-note-card'
+  card.hidden = true
+
+  const head = document.createElement('div')
+  head.className = 'dsh-tw-note-head'
+  const label = document.createElement('span')
+  label.className = 'dsh-tw-note-label'
+  label.textContent = '📝 快速笔记'
+  const closeBtn = document.createElement('button')
+  closeBtn.type = 'button'
+  closeBtn.className = 'dsh-tw-note-close'
+  closeBtn.title = '收起'
+  closeBtn.textContent = '✕'
+  head.append(label, closeBtn)
+
+  const fields = document.createElement('div')
+  fields.className = 'dsh-tw-note-fields'
+  const titleInput = document.createElement('input')
+  titleInput.className = 'dsh-tw-note-title'
+  titleInput.placeholder = '标题（默认时间戳）'
+  const tagInput = document.createElement('input')
+  tagInput.className = 'dsh-tw-note-tag'
+  tagInput.placeholder = 'tag（默认 inbox）'
+  fields.append(titleInput, tagInput)
+
+  const textarea = document.createElement('textarea')
+  textarea.className = 'dsh-tw-note-text'
+  textarea.placeholder = '写点东西…（Ctrl+Enter 保存）'
+
+  const foot = document.createElement('div')
+  foot.className = 'dsh-tw-note-foot'
+  const hint = document.createElement('span')
+  hint.className = 'dsh-tw-note-hint'
+  hint.textContent = 'Ctrl+Enter'
+  const edit = document.createElement('button')
+  edit.type = 'button'
+  edit.className = 'dsh-tw-note-edit'
+  edit.title = '保存并在 TiddlyWiki 原生编辑器中打开'
+  edit.textContent = '✏️ 在 TW 中编辑'
+  const save = document.createElement('button')
+  save.type = 'button'
+  save.className = 'dsh-tw-note-save'
+  save.textContent = '保存'
+  foot.append(hint, edit, save)
+
+  card.append(head, fields, textarea, foot)
+
+  const toggle = document.createElement('button')
+  toggle.type = 'button'
+  toggle.className = 'dsh-tw-note-toggle'
+  toggle.textContent = '📝 快速笔记'
+
+  root.append(card, toggle)
+  document.body.append(root)
+
+  let defaultTag = 'inbox'
+  let opened = false
+
+  const resetTitle = (): void => {
+    titleInput.value = timestampTitle()
+  }
+
+  const open = async (): Promise<void> => {
+    card.hidden = false
+    opened = true
+    resetTitle()
+    if (tagInput.value.length === 0) tagInput.value = defaultTag
+    textarea.focus()
+    // Refresh the configured default tag on each open (cheap, best effort).
+    defaultTag = await fetchDefaultTag()
+    if (tagInput.value.length === 0) tagInput.value = defaultTag
+  }
+
+  const close = (): void => {
+    card.hidden = true
+    opened = false
+  }
+
+  toggle.addEventListener('click', () => { void (opened ? close() : open()) })
+  closeBtn.addEventListener('click', close)
+
+  const doSave = async (): Promise<void> => {
+    const text = textarea.value.trim()
+    if (text.length === 0) {
+      toast('内容为空，未保存')
+      return
+    }
+    save.disabled = true
+    save.textContent = '保存中…'
+    try {
+      const res = await fetch(NOTE_ENDPOINT, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({
+          title: titleInput.value.trim(),
+          tag: tagInput.value.trim(),
+          text,
+        }),
+        signal: AbortSignal.timeout(10_000),
+      })
+      const payload = (await res.json().catch(() => null)) as { ok?: boolean; title?: string; error?: string } | null
+      if (!res.ok || payload?.ok !== true) {
+        toast(`保存失败：${payload?.error ?? `HTTP ${res.status}`}`)
+        return
+      }
+      textarea.value = ''
+      resetTitle()
+      toast(`已保存「${payload.title ?? titleInput.value}」`)
+      close()
+    } catch (err) {
+      toast(`保存失败：${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      save.disabled = false
+      save.textContent = '保存'
+    }
+  }
+
+  save.addEventListener('click', () => { void doSave() })
+  textarea.addEventListener('keydown', (event) => {
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      event.preventDefault()
+      void doSave()
+    }
+  })
+
+  /** Save (if non-empty) and open the tiddler in TW's native editor. */
+  const doEdit = async (): Promise<void> => {
+    const title = titleInput.value.trim().length > 0 ? titleInput.value.trim() : timestampTitle()
+    const text = textarea.value
+    const tag = tagInput.value.trim()
+    edit.disabled = true
+    edit.textContent = '打开中…'
+    try {
+      const res = await fetch(EDIT_ENDPOINT, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ title, tag, text }),
+        signal: AbortSignal.timeout(10_000),
+      })
+      const payload = (await res.json().catch(() => null)) as
+        | { ok?: boolean; title?: string; draftTitle?: string; twUrl?: string; error?: string }
+        | null
+      if (!res.ok || payload?.ok !== true) {
+        toast(`打开失败：${payload?.error ?? `HTTP ${res.status}`}`)
+        return
+      }
+      if (typeof payload.twUrl !== 'string' || typeof payload.draftTitle !== 'string') {
+        toast('打开失败：服务未返回编辑器地址')
+        return
+      }
+      openEditorPopup(`${payload.twUrl}#${encodeURIComponent(payload.draftTitle)}`, payload.title ?? title)
+      toast(`已在弹出窗口打开「${payload.title ?? title}」编辑器`)
+    } catch (err) {
+      toast(`打开失败：${err instanceof Error ? err.message : String(err)}`)
+    } finally {
+      edit.disabled = false
+      edit.textContent = '✏️ 在 TW 中编辑'
+    }
+  }
+
+  edit.addEventListener('click', () => { void doEdit() })
+
+  return () => {
+    root.remove()
+    const toastEl = document.querySelector<HTMLElement>('.dsh-tw-toast')
+    toastEl?.remove()
+  }
+}

package/src/client/panel.ts

@@ -0,0 +1,304 @@
+/**
+ * Center-column TiddlyWiki editor panel (design doc §12).
+ *
+ * A fixed-position overlay sized to the CENTER column's bounding rect and
+ * appended to document.body, so it never depends on the shell's flex/grid
+ * height model or on the column being a positioning ancestor (both caused the
+ * earlier "half-height, scrollable" symptom). The rect is re-measured on
+ * resize, on layout mutations, and on a light interval. While active it hides
+ * the conversation content via a stylesheet rule keyed on `data-dsh-tw-active`.
+ * Toggling rides the shared PanelState; cross-plugin exclusivity rides the
+ * `dsh-panel-activate` event (same protocol as dsh-taskboard).
+ *
+ * The iframe points DIRECTLY at the TW service (http://127.0.0.1:<port>),
+ * bypassing reverse-proxy sensitivity (design doc R1 — proxy is only a
+ * fallback). The panel reads /status first and only sets iframe.src when the
+ * service is actually running.
+ *
+ * @module dsh-tiddlywiki/client/panel
+ */
+import type { PanelState } from './state.ts'
+import { ENTRY_SELECTOR } from './sidebar-entry.ts'
+
+export const PANEL_VIEW_SELECTOR = '[data-dsh-tw-view]'
+
+/**
+ * Center-column targets, most-specific shell generation first. The official
+ * layout shell (dsh-client-ui-layout) drops data-pane and uses a CSS-Module
+ * hashed `centerCol`; older shells put `data-pane="conversation"` on the same
+ * full-height grid item; DSH Desktop exposes the non-compat
+ * `.dshDesktopConversationSurface`.
+ */
+const COLUMN_SELECTORS = ['[class*="centerCol"]', '[data-pane="conversation"]', '.dshDesktopConversationSurface']
+
+const ACTIVE_ATTR = 'data-dsh-tw-active'
+/** Sibling panels' activation attributes, evicted when this panel opens. */
+const OTHER_ACTIVE_ATTRS = ['data-dsh-atb-active', 'data-dsh-taskboard-active', 'data-dsh-ssh-active']
+/** Cross-plugin activation event; detail is the activating panel name. */
+const ACTIVATE_EVENT = 'dsh-panel-activate'
+const PANEL_NAME = 'dsh-tiddlywiki'
+
+/** Overlay z-index: above the shell content, below the note widget (950). */
+const PANEL_Z_INDEX = 40
+/** Safety re-measure cadence for shell layout changes CSS can't see. */
+const SYNC_INTERVAL_MS = 2_000
+
+const STATUS_ENDPOINT = '/dsh-tiddlywiki/status'
+const RESTART_ENDPOINT = '/dsh-tiddlywiki/restart'
+
+interface StatusPayload {
+  ok?: boolean
+  status: string
+  url?: string
+  wikiPath?: string
+  error?: string
+  note?: { tag?: string }
+}
+
+function conversationColumn(): HTMLElement | undefined {
+  for (const selector of COLUMN_SELECTORS) {
+    const el = document.querySelector<HTMLElement>(selector)
+    if (el !== null) return el
+  }
+  return undefined
+}
+
+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
+  }
+}
+
+export function mountPanel(state: PanelState): () => void {
+  let container: HTMLDivElement | undefined
+  let columnEl: HTMLElement | undefined
+  let iframe: HTMLIFrameElement | undefined
+  let frameArea: HTMLDivElement | undefined
+  let errorArea: HTMLDivElement | undefined
+  let chip: HTMLSpanElement | undefined
+  let refreshTimer: number | undefined
+  let refreshAttempts = 0
+
+  const build = (): HTMLDivElement => {
+    const view = document.createElement('div')
+    view.dataset.dshTwView = ''
+    view.className = 'dsh-tw-view'
+
+    const bar = document.createElement('div')
+    bar.className = 'dsh-tw-panel-bar'
+    const title = document.createElement('span')
+    title.className = 'dsh-tw-panel-title'
+    title.textContent = 'TiddlyWiki 知识库'
+    chip = document.createElement('span')
+    chip.className = 'dsh-tw-status-chip'
+    chip.dataset.state = 'unknown'
+    chip.textContent = '—'
+    const reload = document.createElement('button')
+    reload.type = 'button'
+    reload.textContent = '重载'
+    reload.addEventListener('click', () => {
+      if (iframe !== undefined && !iframe.hidden) iframe.src = iframe.src
+    })
+    const refresh = document.createElement('button')
+    refresh.type = 'button'
+    refresh.textContent = '状态'
+    refresh.addEventListener('click', () => { void doRefresh() })
+    bar.append(title, chip, refresh, reload)
+
+    frameArea = document.createElement('div')
+    frameArea.className = 'dsh-tw-panel-frame-wrap'
+    frameArea.style.cssText = 'flex:1;min-height:0;display:flex;flex-direction:column'
+    iframe = document.createElement('iframe')
+    iframe.className = 'dsh-tw-panel-frame'
+    iframe.title = 'TiddlyWiki'
+    iframe.hidden = true
+    frameArea.append(iframe)
+
+    errorArea = document.createElement('div')
+    errorArea.className = 'dsh-tw-panel-error'
+    errorArea.hidden = true
+
+    view.append(bar, frameArea, errorArea)
+    return view
+  }
+
+  const setChip = (stateName: string, text: string): void => {
+    if (chip === undefined) return
+    chip.dataset.state = stateName
+    chip.textContent = text
+  }
+
+  /** Pin the overlay to the center column's current viewport rect. */
+  const syncRect = (): void => {
+    if (container === undefined || columnEl === undefined) return
+    const rect = columnEl.getBoundingClientRect()
+    if (rect.width === 0 && rect.height === 0) return
+    const left = `${rect.left}px`
+    const top = `${rect.top}px`
+    const width = `${rect.width}px`
+    const height = `${rect.height}px`
+    if (container.style.left !== left) container.style.left = left
+    if (container.style.top !== top) container.style.top = top
+    if (container.style.width !== width) container.style.width = width
+    if (container.style.height !== height) container.style.height = height
+  }
+
+  const ensure = (): void => {
+    if (container !== undefined) return
+    columnEl = conversationColumn()
+    if (columnEl === undefined) return
+    container = build()
+    container.style.position = 'fixed'
+    container.style.zIndex = String(PANEL_Z_INDEX)
+    document.body.append(container)
+    syncRect()
+  }
+
+  const showError = (message: string): void => {
+    if (iframe === undefined || errorArea === undefined || frameArea === undefined) return
+    iframe.hidden = true
+    errorArea.hidden = false
+    errorArea.textContent = ''
+    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 => {
+    if (iframe === undefined || errorArea === undefined || frameArea === undefined) return
+    iframe.hidden = true
+    errorArea.hidden = false
+    errorArea.textContent = ''
+    const p = document.createElement('div')
+    p.textContent = 'TiddlyWiki 服务正在启动…'
+    errorArea.append(p)
+  }
+
+  const showFrame = (url: string): void => {
+    if (iframe === undefined || errorArea === undefined) return
+    errorArea.hidden = true
+    iframe.hidden = false
+    // Set the src only when the url actually changed, so an editor in the
+    // iframe never loses unsaved state on a status refresh.
+    if (iframe.dataset.loaded !== url) {
+      iframe.dataset.loaded = url
+      iframe.src = url
+    }
+  }
+
+  const doRefresh = async (): Promise<void> => {
+    if (refreshTimer !== undefined) {
+      window.clearTimeout(refreshTimer)
+      refreshTimer = undefined
+    }
+    const payload = await fetchStatus()
+    if (payload === null) {
+      setChip('failed', '状态不可达')
+      showError('无法访问 /dsh-tiddlywiki/status')
+      return
+    }
+    if (payload.status === 'running' && typeof payload.url === 'string') {
+      setChip('running', '在线')
+      refreshAttempts = 0
+      showFrame(payload.url)
+      return
+    }
+    if (payload.status === 'starting') {
+      setChip('starting', '启动中')
+      showStarting()
+      // Auto-poll while starting (bounded).
+      if (refreshAttempts < 30) {
+        refreshAttempts++
+        refreshTimer = window.setTimeout(() => { void doRefresh() }, 1_500)
+      }
+      return
+    }
+    setChip('failed', '离线')
+    refreshAttempts = 0
+    showError(payload.error ?? `服务状态：${payload.status}`)
+  }
+
+  const applyActive = (): void => {
+    if (state.isOpen()) {
+      for (const attr of OTHER_ACTIVE_ATTRS) document.documentElement.removeAttribute(attr)
+      document.documentElement.setAttribute(ACTIVE_ATTR, '')
+      document.dispatchEvent(new CustomEvent(ACTIVATE_EVENT, { detail: PANEL_NAME }))
+      void doRefresh()
+    } else {
+      document.documentElement.removeAttribute(ACTIVE_ATTR)
+      if (refreshTimer !== undefined) {
+        window.clearTimeout(refreshTimer)
+        refreshTimer = undefined
+      }
+      refreshAttempts = 0
+    }
+  }
+  const onOtherActivate = (event: Event): void => {
+    const detail = (event as CustomEvent).detail
+    if (detail !== PANEL_NAME && state.isOpen()) state.closePanel()
+  }
+  const onClickSidebarRow = (event: MouseEvent): void => {
+    if (!state.isOpen()) return
+    const target = event.target as HTMLElement | null
+    if (target === null) return
+    if (target.closest(ENTRY_SELECTOR) !== null) return
+    const SIDEBAR_ROW_SELECTOR = '[class*="sessionRow"], [class*="projectRow"], [class*="searchResultRow"], [class*="searchResultWorkspace"], [class*="newSession"]'
+    if (target.closest(SIDEBAR_ROW_SELECTOR) !== null) state.closePanel()
+  }
+
+  // Mount the container once the column exists; self-heal on re-renders.
+  const waitObserver = new MutationObserver(() => { ensure() })
+  waitObserver.observe(document.body, { childList: true, subtree: true })
+
+  // Keep the overlay pinned to the column: resize, layout mutations, scroll.
+  const resizeObserver = new ResizeObserver(() => syncRect())
+  resizeObserver.observe(document.body)
+  const syncInterval = window.setInterval(syncRect, SYNC_INTERVAL_MS)
+  const onWindowResize = (): void => syncRect()
+  window.addEventListener('resize', onWindowResize)
+  const onAnyScroll = (): void => syncRect()
+  window.addEventListener('scroll', onAnyScroll, true)
+
+  document.addEventListener('click', onClickSidebarRow, true)
+  document.addEventListener(ACTIVATE_EVENT, onOtherActivate)
+  const unsubscribe = state.subscribe(applyActive)
+  ensure()
+  applyActive()
+
+  return () => {
+    if (refreshTimer !== undefined) window.clearTimeout(refreshTimer)
+    window.clearInterval(syncInterval)
+    window.removeEventListener('resize', onWindowResize)
+    window.removeEventListener('scroll', onAnyScroll, true)
+    resizeObserver.disconnect()
+    document.removeEventListener('click', onClickSidebarRow, true)
+    document.removeEventListener(ACTIVATE_EVENT, onOtherActivate)
+    waitObserver.disconnect()
+    unsubscribe()
+    document.documentElement.removeAttribute(ACTIVE_ATTR)
+    container?.remove()
+  }
+}