@goodandready/dsh-clinebot 0.3.4 → 0.3.6

package/CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to `@goodandready/dsh-clinebot` will be documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.3.6] - 2026-09-09
+
+### Fixed
+- **Restored `handleSmoke` diagnostics handler**: Re-introduced missing `handleSmoke` click callback in `SettingsPage`, fixing `handleSmoke is not defined` runtime error during Diagnostics card interaction.
+- **Defensive ErrorBoundary child rendering**: Hardened `ErrorBoundary.render()` with `this.props?.children || null` to prevent unhandled exceptions if props are omitted.
+- **Comprehensive UI render integrity test**: Added recursive VDOM component tree evaluation test in `test/client-modules.test.js` covering all 190+ elements and verifying definition of all 18 event handlers.
+
+## [0.3.5] - 2026-09-09
+
+### Fixed
+- **Settings Card React Crash & ErrorBoundary Isolation**: Wrapped `PluginCard` and `SettingsPage` with a defensive `ErrorBoundary` preventing unhandled render exceptions from unmounting the card.
+- **useSyncExternalStore Stability**: Eliminated object allocations inside `getSnapshot` callback when `settingsScope` is detached or resolving, resolving infinite render loops (`Maximum update depth exceeded`).
+- **Resilient Context & Reset Time Formatting**: Guaranteed fallback to module `ctx` inside `PluginCard` and added safe parsing for high-precision ISO timestamps in rolling quota progress bars.
+
 ## [0.3.4] - 2026-09-08
 
 ### Fixed

package/lib/client.js

@@ -261,13 +261,70 @@ window.__ModuleLoader__.load({
       document.head.appendChild(style)
     }
 
+    function createErrorBoundary() {
+      if (!React || typeof React.Component !== 'function') {
+        return function NoopBoundary(props) { return props?.children || null }
+      }
+      return class ErrorBoundary extends React.Component {
+        constructor(props) {
+          super(props)
+          this.state = { hasError: false, error: null }
+        }
+        static getDerivedStateFromError(error) {
+          return { hasError: true, error }
+        }
+        componentDidCatch(error, errorInfo) {
+          console.error('[dsh-clinebot] React Error:', error, errorInfo)
+        }
+        render() {
+          if (this.state.hasError) {
+            return React.createElement(
+              'div',
+              {
+                className: 'cb-alert cb-alert-err',
+                style: { margin: '12px 0', padding: '14px', borderRadius: '8px' },
+              },
+              React.createElement('div', { style: { fontWeight: 600, marginBottom: '6px' } }, '⚠️ ClineBot UI Error:'),
+              React.createElement('div', { style: { fontSize: '12px', wordBreak: 'break-all' } }, String(this.state.error?.message || this.state.error)),
+              React.createElement(
+                'button',
+                {
+                  type: 'button',
+                  className: 'cb-btn',
+                  style: { marginTop: '10px', fontSize: '12px', padding: '4px 10px' },
+                  onClick: () => this.setState({ hasError: false, error: null }),
+                },
+                'Retry'
+              )
+            )
+          }
+          return this.props?.children || null
+        }
+      }
+    }
+    const ErrorBoundary = createErrorBoundary()
+
+    const SNAPSHOT_READY = Object.freeze({ status: 'ready', value: {} })
+    const SNAPSHOT_LOADING = Object.freeze({ status: 'loading', value: {} })
+
+    function formatResetTime(isoString) {
+      if (!isoString) return '—'
+      try {
+        const d = new Date(isoString)
+        if (isNaN(d.getTime())) return '—'
+        return d.toLocaleTimeString()
+      } catch {
+        return '—'
+      }
+    }
+
     function ProgressBar({ label, percentUsed, remainingPercent, resetsAt, t }) {
       const used = Math.max(0, Math.min(100, percentUsed || 0))
       let fillColor = 'var(--dsw-alias-state-success-primary)'
       if (used > 75) fillColor = 'var(--dsw-alias-state-warning-primary)'
       if (used > 90) fillColor = 'var(--dsw-alias-state-error-primary)'
 
-      const resetStr = resetsAt ? new Date(resetsAt).toLocaleString() : '—'
+      const resetStr = formatResetTime(resetsAt)
 
       return React.createElement(
         'div',
@@ -299,15 +356,39 @@ window.__ModuleLoader__.load({
       const ctx = props?.ctx
       const t = props?.t || makeT(ru, en)
 
-      const scope = React.useMemo(
-        () => (ctx && ctx.settingsScope ? ctx.settingsScope.bind({ namespace: NS }) : undefined),
-        [ctx]
-      )
+      const scope = React.useMemo(() => {
+        if (!ctx?.settingsScope?.bind) return undefined
+        try {
+          return ctx.settingsScope.bind({ namespace: NS })
+        } catch (_) {
+          return undefined
+        }
+      }, [ctx])
+
+      const subscribe = React.useMemo(() => {
+        return (cb) => {
+          if (!scope?.subscribe) return () => {}
+          try {
+            return scope.subscribe(cb) || (() => {})
+          } catch (_) {
+            return () => {}
+          }
+        }
+      }, [scope])
+
+      const getSnapshot = React.useCallback(() => {
+        if (!scope?.getSnapshot) return SNAPSHOT_READY
+        try {
+          return scope.getSnapshot() || SNAPSHOT_READY
+        } catch (_) {
+          return SNAPSHOT_READY
+        }
+      }, [scope])
 
       const snapshot = React.useSyncExternalStore(
-        React.useMemo(() => (cb) => (scope ? scope.subscribe(cb) : () => {}), [scope]),
-        React.useCallback(() => (scope ? scope.getSnapshot() : { status: 'ready' }), [scope]),
-        React.useCallback(() => ({ status: 'loading' }), [])
+        subscribe,
+        getSnapshot,
+        React.useCallback(() => SNAPSHOT_LOADING, [])
       )
       const snapshotStatus = snapshot?.status || 'ready'
 
@@ -445,6 +526,29 @@ window.__ModuleLoader__.load({
         }
       }
 
+      // Smoke chat test
+      async function handleSmoke() {
+        setBusy('smoke')
+        setErr('')
+        setMsg('')
+        setSmokeResult(null)
+        try {
+          const res = await fetch(`${ROUTE_PREFIX}/smoke`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ model: draft?.defaultModel }),
+          })
+          const data = await res.json().catch(() => ({}))
+          if (!data.ok) throw new Error(data.error || `HTTP ${res.status}`)
+          setSmokeResult(data)
+          setMsg(t('diag.smoke_ok', { latency: data.latencyMs }))
+        } catch (e) {
+          setErr(String(e.message || e))
+        } finally {
+          setBusy('')
+        }
+      }
+
       // Fast Browser Login
       async function handleFastLogin() {
         setBusy('fast-login')
@@ -1094,7 +1198,17 @@ window.__ModuleLoader__.load({
             React.createElement(Chevron)
           )
         ),
-        open ? React.createElement('div', { style: { marginTop: '16px' } }, React.createElement(SettingsPage, { ...props, ctx: props?.ctx })) : null
+        open
+          ? React.createElement(
+              'div',
+              { style: { marginTop: '16px' } },
+              React.createElement(
+                ErrorBoundary,
+                null,
+                React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx })
+              )
+            )
+          : null
       )
     }
 
@@ -1106,7 +1220,8 @@ window.__ModuleLoader__.load({
 
       let placed = false
       try {
-        placed = !!ctx.slots.inject('settings.plugin.item', () => {
+        const res = ctx.slots.inject('settings.plugin.item', () => {
+          placed = true
           return ctx.slots.register(
             {
               name: 'settings.plugin.item',
@@ -1114,9 +1229,10 @@ window.__ModuleLoader__.load({
               locale: NS,
               inject: () => ({ ctx }),
             },
-            PluginCard
+            (props) => React.createElement(ErrorBoundary, null, React.createElement(PluginCard, { ...props, ctx: (props && props.ctx) || ctx }))
           )
         })
+        if (res === null) placed = false
       } catch (_) {
         placed = false
       }
@@ -1134,7 +1250,7 @@ window.__ModuleLoader__.load({
                 label: () => t('title'),
                 inject: () => ({ ctx }),
               },
-              SettingsPage
+              (props) => React.createElement(ErrorBoundary, null, React.createElement(SettingsPage, { ...props, ctx: (props && props.ctx) || ctx }))
             )
           })
         } catch (_) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodandready/dsh-clinebot",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "DeepSeek Harness companion for ClineBot / ClinePass: dynamic subscription models sync, quota exhaustion warnings, session metrics, dedicated settings page, live usage limits, and /cline slash-command.",
   "license": "MIT",
   "type": "module",