@goodandready/dsh-key-rotation 0.8.81 → 0.8.83

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 0.8.83 (2026-10-31)
+
+### TypeScript Migration & Type-Safe Core Architecture (Block 11 Release)
+- **TypeScript Server-Side Architecture (Issue #524)**: Migrated server-side codebase to TypeScript with `src/` directory structure, strict `tsconfig.json`, and `tsdown` build pipeline generating `lib/index.d.ts`.
+- **Domain Type Definitions (`src/types/`)**: Defined comprehensive TypeScript types for configuration schemas (`PoolConfig`, `ModelQuotaConfig`, `FailoverConfig`, `PluginConfig`), pool & key state machines (`KeyState`, `KeyStatus`, `PoolItem`, `ResolvedKey`, `RoutingDecision`, `QuotaWindow`), and Cordis service interaction contracts (`Context`, `LlmService`, `WebServerService`, `SettingsService`, `CredentialsService`).
+- **Static Type Safety & Tooling**: Integrated `npm run typecheck` (`tsc --noEmit`) into `npm run check`, guaranteeing compile-time type safety across all configuration fields, service bindings, and event handlers with 0 errors.
+- **Zero Runtime Dependencies**: All TypeScript build tools (`typescript`, `tsdown`, `@types/node`) maintained strictly in `devDependencies`, with `dependencies: {}` preserved.
+
+## 0.8.82 (2026-10-30)
+
+### Modernized UI Builder & JSX Pipeline (Block 10 Release)
+- **Modern JSX/TSX Build Pipeline via esbuild (Issue #523)**: Replaced mechanical text concatenation with modern compiler-based build pipeline (`scripts/build-client.mjs`) using `esbuild`. Supports native JSX syntax with `React.createElement` transpilation.
+- **Component JSX Modernization**: Migrated key client components (such as `Sparkline` and `KeyRotationHeaderChip`) to idiomatic JSX, improving clarity and maintainability while preserving strict modular scoping and zero runtime overhead.
+- **Deterministic & Compliant Bundle Assembly**: Automated atomic output writing with size verification (< 256 KiB DSH Store limit, actual: ~207 KiB), UTF-8 charset preservation for multi-language localization (en, zh, ru), inline legal comments, and syntax verification (`node --check`).
+- **CI/CD Drift Prevention**: Built-in `--check` mode in `build-client.mjs` ensuring `lib/client.js` is always strictly in sync with `lib/client-src/`.
+
 ## 0.8.81 (2026-10-30)
 
 ### Direct Extension Pipeline & Pure Key Resolution (Block 9 Release)

package/lib/client-src/40-components.js

@@ -1,7 +1,9 @@
     function Sparkline({ points = [], width = 120, height = 22, stroke = 'var(--dsw-alias-brand-primary, currentColor)' }) {
       if (!Array.isArray(points) || points.length < 2) {
-        return h('svg', { width, height, viewBox: `0 0 ${width} ${height}`, style: { opacity: 0.3 } },
-          h('line', { x1: 0, y1: height / 2, x2: width, y2: height / 2, stroke, strokeWidth: 1, strokeDasharray: '3 3' })
+        return (
+          <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ opacity: 0.3 }}>
+            <line x1={0} y1={height / 2} x2={width} y2={height / 2} stroke={stroke} strokeWidth={1} strokeDasharray="3 3" />
+          </svg>
         );
       }
       const min = Math.min(...points);
@@ -14,19 +16,23 @@
         return `${x},${y}`;
       }).join(' ');
 
-      return h('svg', {
-        width,
-        height,
-        viewBox: `0 0 ${width} ${height}`,
-        style: { display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' },
-      }, h('polyline', {
-        points: coords,
-        fill: 'none',
-        stroke,
-        strokeWidth: 2,
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      }));
+      return (
+        <svg
+          width={width}
+          height={height}
+          viewBox={`0 0 ${width} ${height}`}
+          style={{ display: 'inline-block', verticalAlign: 'middle', overflow: 'visible' }}
+        >
+          <polyline
+            points={coords}
+            fill="none"
+            stroke={stroke}
+            strokeWidth={2}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
     }
 
     function parseBulkKeys(text) {

package/lib/client-src/52-card-pool-rows.js

@@ -339,7 +339,7 @@
           );
         })();
 
-// ── per-model sub-pools: keys + token quotas, plus live usage meters ──
+/*! ── per-model sub-pools: keys + token quotas, plus live usage meters ── */
         const modelPools = (() => {
           const models = modelEntriesOf(entry);
           const statusFor = (model) => status[entry.provider + '::' + model] ?? null;

package/lib/client-src/60-header-chip.js

@@ -80,58 +80,66 @@
       const color = !poolEntries.length ? 'var(--dsw-alias-label-tertiary)' : anyExhausted ? 'var(--dsw-alias-state-error-primary)' : healthy < total ? 'var(--dsw-alias-state-warn-primary)' : 'var(--dsw-alias-state-success-primary)';
       const label = poolEntries.length ? `${healthy}/${total} rot` : 'rot';
 
-      return h('div', { ref, style: { position: 'relative', display: 'inline-flex' } },
-        h('button', {
-          type: 'button',
-          className: 'krot-header-chip',
-          title: t('title'),
-          onClick: () => setOpen((v) => !v),
-        },
-          h('span', { style: { width: '8px', height: '8px', borderRadius: '50%', background: color, flex: 'none', boxShadow: `0 0 6px ${color}` } }),
-          label,
-          h('span', { style: { fontSize: '9px', opacity: 0.6 } }, open ? '▲' : '▼')
-        ),
-        open ? h('div', { className: 'krot-popover', style: { minWidth: '220px' } },
-          h('div', { className: 'krot-pop-title' }, t('headerPoolsTitle')),
-          !poolEntries.length ? h('div', { style: { fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)' } }, t('noActivePools')) : null,
-          poolEntries.map(([name, p]) => {
-            const c = p.exhausted ? 'var(--dsw-alias-state-error-primary)' : (p.healthy < p.total ? 'var(--dsw-alias-state-warn-primary)' : 'var(--dsw-alias-state-success-primary)');
-            const provName = p.providerName || name;
-            const tail = p.lastUsedTail;
-            return h('div', { key: name, className: 'krot-pop-row', style: { display: 'flex', flexDirection: 'column', gap: '4px', padding: '6px 0', borderBottom: '1px solid var(--dsw-alias-border-subtle)' } },
-              h('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },
-                h('div', { className: 'krot-pop-name' },
-                  h('span', { style: { width: '7px', height: '7px', borderRadius: '50%', background: c, flex: 'none' } }),
-                  name,
-                  tail ? h('span', { style: { marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)', fontFeatureSettings: '"tnum"', fontFamily: 'monospace' } }, `...${tail}`) : null
-                ),
-                h('div', { className: 'krot-pop-count', style: { color: c, fontWeight: 600 } }, `${p.healthy}/${p.total}`)
-              ),
-              h('div', { style: { display: 'flex', gap: '4px', marginTop: '2px' } },
-                h('button', {
-                  type: 'button',
-                  disabled: busy,
-                  onClick: (e) => { e.stopPropagation(); runAction('skip', provName, p.lastUsed); },
-                  title: t('quickSkipTitle'),
-                  style: { padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }
-                }, `⏭️ ${t('quickSkip')}`),
-                h('button', {
-                  type: 'button',
-                  disabled: busy,
-                  onClick: (e) => { e.stopPropagation(); runAction('reset', provName, p.lastUsed); },
-                  title: t('quickResetTitle'),
-                  style: { padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }
-                }, `🔄 ${t('quickReset')}`),
-                h('button', {
-                  type: 'button',
-                  disabled: busy || !p.lastUsed,
-                  onClick: (e) => { e.stopPropagation(); runAction('pause', provName, p.lastUsed); },
-                  title: t('quickPauseTitle'),
-                  style: { padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }
-                }, `⏸️ ${t('quickPause')}`)
-              )
-            );
-          })
-        ) : null
+      return (
+        <div ref={ref} style={{ position: 'relative', display: 'inline-flex' }}>
+          <button
+            type="button"
+            className="krot-header-chip"
+            title={t('title')}
+            onClick={() => setOpen((v) => !v)}
+          >
+            <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: color, flex: 'none', boxShadow: `0 0 6px ${color}` }} />
+            {label}
+            <span style={{ fontSize: '9px', opacity: 0.6 }}>{open ? '▲' : '▼'}</span>
+          </button>
+          {open ? (
+            <div className="krot-popover" style={{ minWidth: '220px' }}>
+              <div className="krot-pop-title">{t('headerPoolsTitle')}</div>
+              {!poolEntries.length ? (
+                <div style={{ fontSize: '12px', color: 'var(--dsw-alias-label-tertiary)' }}>{t('noActivePools')}</div>
+              ) : null}
+              {poolEntries.map(([name, p]) => {
+                const c = p.exhausted ? 'var(--dsw-alias-state-error-primary)' : (p.healthy < p.total ? 'var(--dsw-alias-state-warn-primary)' : 'var(--dsw-alias-state-success-primary)');
+                const provName = p.providerName || name;
+                const tail = p.lastUsedTail;
+                return (
+                  <div key={name} className="krot-pop-row" style={{ display: 'flex', flexDirection: 'column', gap: '4px', padding: '6px 0', borderBottom: '1px solid var(--dsw-alias-border-subtle)' }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <div className="krot-pop-name">
+                        <span style={{ width: '7px', height: '7px', borderRadius: '50%', background: c, flex: 'none' }} />
+                        {name}
+                        {tail ? <span style={{ marginLeft: '6px', fontSize: '11px', color: 'var(--dsw-alias-label-tertiary)', fontFeatureSettings: '"tnum"', fontFamily: 'monospace' }}>{`...${tail}`}</span> : null}
+                      </div>
+                      <div className="krot-pop-count" style={{ color: c, fontWeight: 600 }}>{`${p.healthy}/${p.total}`}</div>
+                    </div>
+                    <div style={{ display: 'flex', gap: '4px', marginTop: '2px' }}>
+                      <button
+                        type="button"
+                        disabled={busy}
+                        onClick={(e) => { e.stopPropagation(); runAction('skip', provName, p.lastUsed); }}
+                        title={t('quickSkipTitle')}
+                        style={{ padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }}
+                      >{`⏭️ ${t('quickSkip')}`}</button>
+                      <button
+                        type="button"
+                        disabled={busy}
+                        onClick={(e) => { e.stopPropagation(); runAction('reset', provName, p.lastUsed); }}
+                        title={t('quickResetTitle')}
+                        style={{ padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }}
+                      >{`🔄 ${t('quickReset')}`}</button>
+                      <button
+                        type="button"
+                        disabled={busy || !p.lastUsed}
+                        onClick={(e) => { e.stopPropagation(); runAction('pause', provName, p.lastUsed); }}
+                        title={t('quickPauseTitle')}
+                        style={{ padding: '2px 6px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--dsw-alias-border-subtle)', background: 'transparent', cursor: 'pointer', color: 'inherit' }}
+                      >{`⏸️ ${t('quickPause')}`}</button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : null}
+        </div>
       );
     }