@patwoodman/dsh-sdlc-flow-ui 0.0.0-stage → 0.4.0-beta.14

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SDLC Orchestrator contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,39 @@
-# Temporary Holding Version
+# @patwoodman/dsh-sdlc-flow-ui — the SDLC web panel
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The browser half of the orchestrator: an **SDLC** tab in the web app's right
+sidebar, plus the host routes that feed it.
+
+| Panel | What it shows |
+|---|---|
+| Status | live project, task and spend summary from `sdlc.db` |
+| Board | tasks grouped by state-machine state |
+| Config | a validated editor for `.sdlc/config.yml` (writes are rejected when validation fails) |
+| Review | side-by-side time/tokens/tracepaths for two runs of one task |
+
+Host routes: `/api/sdlc.status`, `/api/sdlc.board`, `/api/sdlc.task`,
+`/api/sdlc.compare`, `/api/sdlc.config` (GET + validated POST),
+`/api/sdlc.metrics`.
+
+`lib/client.js` is a prebuilt closure-factory bundle that registers into the
+right-sidebar slot system; it needs no build step on the consumer's machine.
+
+## Install
+
+Installed into the interactive lead only — a `web`-platform profile. It is a
+member of [`@patwoodman/dsh-sdlc-flow`](https://www.npmjs.com/package/@patwoodman/dsh-sdlc-flow):
+
+```sh
+dsh plugin --profile sdlc-web add @patwoodman/dsh-sdlc-flow
+```
+
+It must never be mounted in the headless worker profile (E6).
+
+## Requirements
+
+- `@deepseek-ai/dsh` `>=0.2.0-rc.2 <0.3.0-0`
+- Node.js ≥ 22.5
+- a profile whose client platform is `web`
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,11 @@
+# sdlc-client-ui — SDLC orchestrator web UI (spec v3 C.1, optional).
+#
+# Installed into the sdlc-web profile ONLY (interactive lead). It registers
+# `sdlc.*` host routes (read-only status/board/review + validated config writes)
+# and contributes the browser `sdlc` sidebar tab (config editor, task board,
+# side-by-side review). Never installed into sdlc-worker (E6: no core there,
+# and no UI in a headless profile).
+- insert:
+    - id: sdlc-ui
+      name: '@patwoodman/dsh-sdlc-flow-ui'
+      config: {}

package/icon.svg

@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Universal SDLC Orchestrator">
+  <defs>
+    <linearGradient id="sdlc-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#1e3a8a"/>
+      <stop offset="1" stop-color="#0e7490"/>
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="14" fill="url(#sdlc-bg)"/>
+  <g fill="none" stroke="#e0f2fe" stroke-width="2.4" stroke-linecap="round">
+    <path d="M32 17v9"/>
+    <path d="M32 34v4"/>
+    <path d="M24 44l-8 6"/>
+    <path d="M40 44l8 6"/>
+  </g>
+  <g fill="#e0f2fe">
+    <circle cx="32" cy="13" r="4.6"/>
+    <circle cx="32" cy="29" r="4.6"/>
+    <circle cx="19" cy="47" r="4.6"/>
+    <circle cx="45" cy="47" r="4.6"/>
+  </g>
+  <g fill="#0e7490">
+    <circle cx="32" cy="13" r="1.7"/>
+    <circle cx="32" cy="29" r="1.7"/>
+    <circle cx="19" cy="47" r="1.7"/>
+    <circle cx="45" cy="47" r="1.7"/>
+  </g>
+  <path d="M27.5 39.5l4.5 4.5 4.5-4.5" fill="none" stroke="#67e8f9" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/lib/client/SdlcTab.css

@@ -0,0 +1,38 @@
+/* SDLC tab body: panel switcher + four panels. Plain CSS (no modules — the
+   zero-dependency build inlines this file's sibling CSS as text). */
+.sdlc-root {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  overflow: auto;
+  padding: 8px 12px;
+}
+.sdlc-tabs {
+  display: flex;
+  gap: 4px;
+  margin-bottom: 8px;
+}
+.sdlc-tabs button[aria-selected="true"] {
+  font-weight: 600;
+  text-decoration: underline;
+}
+.sdlc-root table {
+  border-collapse: collapse;
+  margin: 8px 0;
+}
+.sdlc-root th,
+.sdlc-root td {
+  border: 1px solid #8886;
+  padding: 2px 8px;
+  text-align: left;
+}
+.sdlc-root code {
+  font-size: 12px;
+}
+.sdlc-root ul {
+  padding-left: 20px;
+}

package/lib/client/SdlcTab.jsx

@@ -0,0 +1,73 @@
+/**
+ * packages/sdlc-client-ui/src/client/SdlcTab.jsx — the SDLC sidebar tab body.
+ *
+ * Panel switcher (Status | Board | Config | Review) over the four stores.
+ * Uses `useSyncExternalStore` against the framework-free stores so the tab
+ * works under any React 18 the host provides.
+ *
+ * NOTE (subset rule): prop callbacks are single expressions — the offline
+ * JSX compiler supports balanced braces but not statement blocks or bare
+ * arrow parameters inside `{…}` props. Multi-statement handlers live as
+ * named functions above; panel switching loads lazily via the tab buttons'
+ * onClick below (single-expression arrows are fine).
+ */
+
+import { useState, useSyncExternalStore } from 'react';
+import { StatusPanel, BoardPanel, ConfigPanel, ReviewPanel } from './panels.jsx';
+
+const PANELS = ['status', 'board', 'config', 'review'];
+
+export function SdlcTab({ stores, t }) {
+  const [panel, setPanel] = useState('status');
+  const status = useSyncExternalStore(stores.status.subscribe, stores.status.getSnapshot);
+  const board = useSyncExternalStore(stores.board.subscribe, stores.board.getSnapshot);
+  const config = useSyncExternalStore(stores.config.subscribe, stores.config.getSnapshot);
+  const review = useSyncExternalStore(stores.review.subscribe, stores.review.getSnapshot);
+
+  const selectPanel = (p) => setPanel(p);
+  const openTaskReview = (taskId) => {
+    void taskId;
+    setPanel('review');
+  };
+  const reloadStatus = () => stores.loadStatus();
+  const reloadBoard = () => stores.loadBoard();
+  const reloadConfig = () => stores.loadConfig();
+  const saveConfig = (path, value) => stores.saveConfig(path, value);
+  const loadCompare = (task, a, b) => stores.loadCompare(task, a, b);
+
+  return (
+    <div className="sdlc-root">
+      <div className="sdlc-tabs" role="tablist" aria-label="SDLC panels">
+        {PANELS.map((p) => (
+          <button
+            key={p}
+            role="tab"
+            type="button"
+            aria-selected={panel === p}
+            onClick={selectPanel}
+          >
+            {t(`panel.${p}`)}
+          </button>
+        ))}
+      </div>
+      {panel === 'status' && <StatusPanel snapshot={status} onReload={reloadStatus} />}
+      {panel === 'board' && (
+        <BoardPanel
+          snapshot={board}
+          onReload={reloadBoard}
+          onOpenTask={openTaskReview}
+        />
+      )}
+      {panel === 'config' && (
+        <ConfigPanel snapshot={config} onReload={reloadConfig} onSave={saveConfig} />
+      )}
+      {panel === 'review' && <ReviewPanel snapshot={review} onCompare={loadCompare} />}
+    </div>
+  );
+}
+
+export function SdlcTitle({ t }) {
+  return <span>{t('tab.label')}</span>;
+}
+
+export default { SdlcTab, SdlcTitle };

package/lib/client/api.js

@@ -0,0 +1,106 @@
+/**
+ * packages/sdlc-client-ui/src/client/api.js — browser fetch face over the `sdlc.*` routes.
+ *
+ * Zero dependencies, no framework: thin JSON helpers with the same
+ * never-fabricate rule as the eval collectors — an unmeasurable endpoint
+ * resolves to `{ available: false, reason }`, never to a zero.
+ */
+
+import {
+  SDLC_STATUS_ROUTE, SDLC_BOARD_ROUTE, SDLC_TASK_ROUTE, SDLC_COMPARE_ROUTE,
+  SDLC_CONFIG_ROUTE, SDLC_METRICS_ROUTE,
+  isStatusPayload, isBoardPayload, isConfigPayload,
+} from '../routes.js';
+
+async function getJson(path) {
+  let res;
+  try {
+    res = await fetch(`/${path}`, { headers: { accept: 'application/json' } });
+  } catch (err) {
+    return { available: false, reason: `network: ${err?.message ?? err}` };
+  }
+  if (!res.ok) {
+    let detail = '';
+    try { detail = JSON.stringify(await res.json()); } catch { detail = res.statusText; }
+    return { available: false, reason: `http ${res.status}: ${detail.slice(0, 200)}` };
+  }
+  try {
+    return { available: true, data: await res.json() };
+  } catch {
+    return { available: false, reason: 'invalid JSON from host' };
+  }
+}
+
+async function postJson(path, body) {
+  let res;
+  try {
+    res = await fetch(`/${path}`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json', accept: 'application/json' },
+      body: JSON.stringify(body),
+    });
+  } catch (err) {
+    return { available: false, reason: `network: ${err?.message ?? err}` };
+  }
+  let data = null;
+  try { data = await res.json(); } catch { data = null; }
+  if (!res.ok || !data) {
+    return { available: false, reason: `http ${res.status}: ${JSON.stringify(data)?.slice(0, 200) ?? res.statusText}` };
+  }
+  return { available: true, data };
+}
+
+export async function fetchStatus() {
+  const res = await getJson(SDLC_STATUS_ROUTE);
+  if (!res.available) return res;
+  if (!isStatusPayload(res.data)) return { available: false, reason: 'host returned a malformed status payload' };
+  return res;
+}
+
+export async function fetchBoard() {
+  const res = await getJson(SDLC_BOARD_ROUTE);
+  if (!res.available) return res;
+  if (!isBoardPayload(res.data)) return { available: false, reason: 'host returned a malformed board payload' };
+  return res;
+}
+
+export async function fetchTask(id) {
+  return getJson(`${SDLC_TASK_ROUTE}?id=${encodeURIComponent(id)}`);
+}
+
+export async function fetchCompare(task, a, b) {
+  const q = `task=${encodeURIComponent(task)}&a=${encodeURIComponent(a)}&b=${encodeURIComponent(b)}`;
+  return getJson(`${SDLC_COMPARE_ROUTE}?${q}`);
+}
+
+export async function fetchConfig() {
+  const res = await getJson(SDLC_CONFIG_ROUTE);
+  if (!res.available) return res;
+  if (!isConfigPayload(res.data)) return { available: false, reason: 'host returned a malformed config payload' };
+  return res;
+}
+
+export async function writeConfig(path, value) {
+  return postJson(SDLC_CONFIG_ROUTE, { path, value });
+}
+
+export async function fetchMetrics() {
+  try {
+    const res = await fetch(`/${SDLC_METRICS_ROUTE}`, { headers: { accept: 'text/plain' } });
+    if (!res.ok) return { available: false, reason: `http ${res.status}` };
+    return { available: true, data: await res.text() };
+  } catch (err) {
+    return { available: false, reason: `network: ${err?.message ?? err}` };
+  }
+}
+
+/**
+ * The single api face the client consumes. NAMED on purpose: the closure-factory
+ * bundle concatenates the client sources into one scope, where a default import
+ * of this module would be stripped UNBOUND (`api is not defined` at client
+ * apply — shipped broken until the entry contract test called apply). The
+ * default export stays for source-level ergonomics; the bundler strips it.
+ */
+export const api = { fetchStatus, fetchBoard, fetchTask, fetchCompare, fetchConfig, writeConfig, fetchMetrics };
+
+export default api;

package/lib/client/definition.js

@@ -0,0 +1,23 @@
+/**
+ * packages/sdlc-client-ui/src/client/definition.js — what the `sdlc` tab type IS.
+ *
+ * A right-sidebar page (the files-tab pattern): it claims the
+ * `dsh-resource://sdlc-review/task/…` addresses the board mints for per-task
+ * review, and offers the SDLC entry as a guide box otherwise.
+ */
+
+export const SDLC_KIND = 'sdlc';
+
+/** This implementation's identity in the tab system, and the key its body registers under. */
+export const SDLC_ID = '@patwoodman/dsh-sdlc-flow-ui';
+
+export function sdlcDefinition(t) {
+  return {
+    id: SDLC_ID,
+    kind: SDLC_KIND,
+    priority: 'builtin',
+    title: () => t('tab.title'),
+  };
+}
+
+export default { SDLC_KIND, SDLC_ID, sdlcDefinition };

package/lib/client/index.js

@@ -0,0 +1,49 @@
+/**
+ * packages/sdlc-client-ui/src/client/index.js — browser half of the SDLC web UI.
+ *
+ * Registers the `sdlc` right-sidebar tab type + body + title (the files-tab
+ * pattern): the type into `ctx.sidebarRightTabs`, the body into the keyed
+ * `sidebar.right.pane.tab` seat and the title into
+ * `sidebar.right.pane.tab.title`, both under the type's id.
+ */
+
+import { api } from './api.js';
+import { createSdlcStores } from './store.js';
+import { NS, en, zh } from './locales.js';
+import { SDLC_ID, sdlcDefinition } from './definition.js';
+import { SdlcTab, SdlcTitle } from './SdlcTab.jsx';
+
+/** Required browser services: tab registry, keyed seats, Remote, copy. */
+export const inject = ['slots', 'locale', 'sidebarRightTabs', 'sidebarRight', 'remote'];
+
+/**
+ * Client plugin body: register dictionaries, the tab type, and the tab body.
+ * @param ctx - client root context.
+ */
+export function apply(ctx) {
+  const t = ctx.locale.bind(NS);
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'sdlc-ui: dictionaries');
+  ctx.effect(() => ctx.sidebarRightTabs.register(sdlcDefinition(t)), 'sdlc-ui: sdlc tab type');
+
+  const stores = createSdlcStores(api);
+  ctx.effect(() => () => stores.dispose(), 'sdlc-ui: dispose');
+  ctx.on('connection/reset', () => stores.reset());
+
+  ctx.effect(() => ctx.slots.inject('sidebar.right.pane.tab', () => ctx.slots.register(
+    {
+      name: 'sidebar.right.pane.tab', key: SDLC_ID, locale: NS, store: stores,
+      inject: () => ({ stores, t }),
+    },
+    SdlcTab,
+  )), 'sdlc-ui: sdlc tab body');
+  ctx.effect(() => ctx.slots.inject('sidebar.right.pane.tab.title', () => ctx.slots.register(
+    { name: 'sidebar.right.pane.tab.title', key: SDLC_ID },
+    (props) => SdlcTitle({ ...props, t }),
+  )), 'sdlc-ui: sdlc tab title');
+}
+
+// The closure bundle strips this line and re-attaches the same object as
+// `exports.default` (see scripts/build-ui.mjs). The web loader's unwrapExports
+// prefers `.default`; the object — not the bare apply function — is what keeps
+// `inject` visible, so the sidebar tab actually receives slots/locale/remote.
+export default { apply, inject };

package/lib/client/locales.js

@@ -0,0 +1,68 @@
+/**
+ * packages/sdlc-client-ui/src/client/locales.js — `sdlc` namespace dictionaries.
+ */
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'sdlc';
+
+/** English dictionary (the key-set source of truth). */
+export const en = {
+  'tab.label': 'SDLC',
+  'tab.title': 'DSH SDLC Flow',
+  'status.loading': 'Loading flow status…',
+  'status.missing': 'Status unavailable: {reason}',
+  'status.empty': 'No project initialised — run `sdlc init` first.',
+  'status.tasks': '{count} tasks',
+  'status.spend': '${cost} (estimate) · {tokens} tokens',
+  'board.loading': 'Loading task board…',
+  'board.missing': 'Board unavailable: {reason}',
+  'board.empty': 'No tasks yet.',
+  'config.loading': 'Loading configuration…',
+  'config.missing': 'Configuration unavailable: {reason}',
+  'config.save': 'Save',
+  'config.saving': 'Saving…',
+  'config.saved': 'Saved.',
+  'config.invalid': 'Rejected: {reason}',
+  'config.validationErrors': '{count} error(s)',
+  'review.pickRuns': 'Pick two runs of a task to compare.',
+  'review.loading': 'Loading comparison…',
+  'review.missing': 'Comparison unavailable: {reason}',
+  'review.compare': 'Compare',
+  'review.traceTitle': 'Trace path',
+  'panel.status': 'Status',
+  'panel.board': 'Board',
+  'panel.config': 'Config',
+  'panel.review': 'Review',
+};
+
+/** Simplified Chinese dictionary. */
+export const zh = {
+  'tab.label': 'SDLC',
+  'tab.title': 'SDLC 编排器',
+  'status.loading': '正在加载编排器状态…',
+  'status.missing': '状态不可用：{reason}',
+  'status.empty': '尚未初始化项目 — 请先运行 `sdlc init`。',
+  'status.tasks': '{count} 个任务',
+  'status.spend': '${cost}（估算）· {tokens} tokens',
+  'board.loading': '正在加载任务看板…',
+  'board.missing': '看板不可用：{reason}',
+  'board.empty': '暂无任务。',
+  'config.loading': '正在加载配置…',
+  'config.missing': '配置不可用：{reason}',
+  'config.save': '保存',
+  'config.saving': '保存中…',
+  'config.saved': '已保存。',
+  'config.invalid': '已拒绝：{reason}',
+  'config.validationErrors': '{count} 个错误',
+  'review.pickRuns': '选择同一任务的两次运行进行对比。',
+  'review.loading': '正在加载对比…',
+  'review.missing': '对比不可用：{reason}',
+  'review.compare': '对比',
+  'review.traceTitle': '追踪路径',
+  'panel.status': '状态',
+  'panel.board': '看板',
+  'panel.config': '配置',
+  'panel.review': '复核',
+};
+
+export default { NS, en, zh };