triflux 10.9.19 → 10.9.21

package/hub/team/tui-lite.mjs

@@ -22,159 +22,30 @@ import {
   truncate,
   wcswidth,
 } from "./ansi.mjs";
+import {
+  clamp,
+  formatTokens,
+  loadVersion,
+  normalizeWorkerState as coreNormalizeWorkerState,
+  resolveViewportColumns,
+  resolveViewportRows,
+  runtimeStatus,
+  sanitizeFiles,
+  sanitizeOneLine,
+  sanitizeTextBlock,
+  wrapText as wrapTextFull,
+  VALID_TABS as VALID_TABS_ARRAY,
+} from "./tui-core.mjs";
 
-const FALLBACK_COLUMNS = 100,
-  FALLBACK_ROWS = 24;
-const VALID_TABS = new Set(["log", "detail", "files"]);
-
-let VERSION = "lite";
-try {
-  const { createRequire } = await import("node:module");
-  VERSION = createRequire(import.meta.url)("../../package.json").version;
-} catch {}
-
-const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
-
-function sanitizeBlock(text, rawMode = false) {
-  const value = String(text || "").replace(/\r/g, "");
-  const cleaned = rawMode
-    ? value
-    : value
-        .replace(/```[\s\S]*?(?:```|$)/g, "\n")
-        .replace(/^\s*```.*$/gm, "")
-        .replace(/^(?:PS\s+\S[^\n]*?>|>\s+|\$\s+)[^\n]*/gm, "");
-  return cleaned
-    .split("\n")
-    .map((line) => line.trim())
-    .filter(Boolean)
-    .filter((line) => line !== "--- HANDOFF ---")
-    .join("\n")
-    .trim();
-}
-
-function sanitizeOneLine(text, fallback = "") {
-  return sanitizeBlock(text).replace(/\s+/g, " ").trim() || fallback;
-}
-
-function sanitizeFiles(files) {
-  const list = Array.isArray(files) ? files : String(files || "").split(",");
-  return list.map((entry) => sanitizeOneLine(entry)).filter(Boolean);
-}
-
-function normalizeTokens(tokens) {
-  if (tokens === null || tokens === undefined || tokens === "") return "";
-  if (typeof tokens === "number" && Number.isFinite(tokens)) return tokens;
-  const raw = sanitizeOneLine(tokens);
-  const match = raw.match(/(\d+(?:[.,]\d+)?\s*[kKmM]?)/);
-  return match ? match[1].replace(/\s+/g, "").toLowerCase() : raw;
-}
-
-function formatTokens(tokens) {
-  if (!tokens && tokens !== 0) return "n/a";
-  if (typeof tokens === "number") {
-    if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}m`;
-    if (tokens >= 1_000) return `${(tokens / 1_000).toFixed(1)}k`;
-  }
-  return String(tokens);
-}
+const VERSION = await loadVersion("lite");
+const VALID_TABS = new Set(VALID_TABS_ARRAY);
 
 function wrap(text, width) {
-  const limit = Math.max(8, width);
-  const lines = [];
-  for (const rawLine of sanitizeBlock(text).split("\n")) {
-    const words = rawLine.split(/\s+/).filter(Boolean);
-    if (words.length === 0) continue;
-    let current = "";
-    for (const word of words) {
-      const next = current ? `${current} ${word}` : word;
-      if (wcswidth(next) <= limit) {
-        current = next;
-        continue;
-      }
-      if (current) lines.push(current);
-      current = word;
-      while (wcswidth(current) > limit) {
-        lines.push(current.slice(0, limit));
-        current = current.slice(limit);
-      }
-    }
-    if (current) lines.push(current);
-  }
-  return lines;
+  return wrapTextFull(text, width);
 }
 
-const runtimeStatus = (worker) =>
-  worker?.handoff?.status || worker?.status || "pending";
-
 function normalizeWorkerState(existing = {}, state = {}) {
-  const handoff =
-    state.handoff === undefined
-      ? existing.handoff
-      : {
-          ...(existing.handoff || {}),
-          ...(state.handoff || {}),
-          verdict:
-            state.handoff?.verdict !== undefined
-              ? sanitizeOneLine(state.handoff.verdict)
-              : existing.handoff?.verdict,
-          confidence:
-            state.handoff?.confidence !== undefined
-              ? sanitizeOneLine(state.handoff.confidence)
-              : existing.handoff?.confidence,
-          status:
-            state.handoff?.status !== undefined
-              ? sanitizeOneLine(state.handoff.status)
-              : existing.handoff?.status,
-          files_changed:
-            state.handoff?.files_changed !== undefined
-              ? sanitizeFiles(state.handoff.files_changed)
-              : existing.handoff?.files_changed,
-        };
-  return {
-    ...existing,
-    ...state,
-    cli:
-      state.cli !== undefined
-        ? sanitizeOneLine(state.cli, existing.cli || "codex")
-        : existing.cli || "codex",
-    status:
-      state.status !== undefined
-        ? sanitizeOneLine(state.status, existing.status || "pending")
-        : existing.status || "pending",
-    snapshot:
-      state.snapshot !== undefined
-        ? sanitizeBlock(state.snapshot)
-        : existing.snapshot,
-    summary:
-      state.summary !== undefined
-        ? sanitizeBlock(state.summary)
-        : existing.summary,
-    detail:
-      state.detail !== undefined
-        ? sanitizeBlock(state.detail)
-        : existing.detail,
-    findings:
-      state.findings !== undefined
-        ? sanitizeFiles(state.findings)
-        : existing.findings,
-    files_changed:
-      state.files_changed !== undefined
-        ? sanitizeFiles(state.files_changed)
-        : existing.files_changed,
-    confidence:
-      state.confidence !== undefined
-        ? sanitizeOneLine(state.confidence)
-        : existing.confidence,
-    tokens:
-      state.tokens !== undefined
-        ? normalizeTokens(state.tokens)
-        : existing.tokens,
-    progress:
-      state.progress !== undefined
-        ? clamp(Number(state.progress) || 0, 0, 1)
-        : existing.progress,
-    handoff,
-  };
+  return coreNormalizeWorkerState(existing, state);
 }
 
 function frame(lines, width, border = MOCHA.border) {
@@ -314,13 +185,8 @@ export function createLiteDashboard(opts = {}) {
     if (!closed) stream.write(text);
   };
   const workerNames = () => [...workers.keys()].sort();
-  const viewportColumns = () =>
-    Math.max(
-      48,
-      columns || stream?.columns || process.stdout?.columns || FALLBACK_COLUMNS,
-    );
-  const viewportRows = () =>
-    Math.max(10, rows || stream?.rows || process.stdout?.rows || FALLBACK_ROWS);
+  const viewportColumns = () => resolveViewportColumns({ columns, stream });
+  const viewportRows = () => resolveViewportRows({ rows, stream });
   const ensureSelection = (names) => {
     if (names.length && (!selectedWorker || !workers.has(selectedWorker)))
       selectedWorker = names[0];

package/hub/team/tui-synapse.mjs

@@ -0,0 +1,213 @@
+// hub/team/tui-synapse.mjs — Synapse 실시간 관제 (Phase 3)
+// HTTP polling 기반 이벤트 수신 + 메트릭 수집 + 스파크라인 렌더링
+
+import { color, dim, MOCHA } from "./ansi.mjs";
+import { sparkline } from "./tui-widgets.mjs";
+
+const DEFAULT_SYNAPSE_BASE_URL = "http://127.0.0.1:27888";
+const DEFAULT_POLL_INTERVAL_MS = 2000;
+const MAX_METRIC_SAMPLES = 30;
+
+// ── SynapseEventStream ────────────────────────────────────────────────────
+/**
+ * Synapse 서버로부터 이벤트를 polling으로 수신
+ * @param {object} [opts]
+ * @param {string} [opts.baseUrl] - Synapse 서버 URL
+ * @param {number} [opts.pollIntervalMs] - polling 간격
+ * @param {function} [opts.fetchImpl] - fetch 구현 (테스트용)
+ * @param {function} [opts.onEvent] - 이벤트 콜백
+ * @param {function} [opts.onError] - 에러 콜백
+ */
+export function createSynapseEventStream(opts = {}) {
+  const {
+    baseUrl = DEFAULT_SYNAPSE_BASE_URL,
+    pollIntervalMs = DEFAULT_POLL_INTERVAL_MS,
+    onEvent,
+    onError,
+  } = opts;
+
+  const fetchImpl = opts.fetchImpl || globalThis.fetch?.bind(globalThis);
+  let timer = null;
+  let lastEventId = 0;
+  let running = false;
+
+  async function poll(force = false) {
+    if (!fetchImpl || (!running && !force)) return;
+    try {
+      const url = new URL("/synapse/events", baseUrl);
+      url.searchParams.set("since", String(lastEventId));
+      const res = await fetchImpl(url.toString(), {
+        method: "GET",
+        headers: { accept: "application/json" },
+        signal: AbortSignal.timeout?.(5000),
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (Array.isArray(data.events)) {
+        for (const event of data.events) {
+          if (event.id > lastEventId) lastEventId = event.id;
+          onEvent?.(event);
+        }
+      }
+    } catch (err) {
+      onError?.(err);
+    }
+  }
+
+  return {
+    start() {
+      if (running) return;
+      running = true;
+      // 즉시 첫 poll + 주기적 반복
+      poll();
+      timer = setInterval(poll, pollIntervalMs);
+      if (timer.unref) timer.unref();
+    },
+
+    stop() {
+      running = false;
+      if (timer) {
+        clearInterval(timer);
+        timer = null;
+      }
+    },
+
+    get isRunning() {
+      return running;
+    },
+
+    /** 테스트/수동 용: 즉시 poll 실행 (running 상태 무관) */
+    async pollOnce() {
+      await poll(true);
+    },
+
+    reset() {
+      lastEventId = 0;
+    },
+  };
+}
+
+// ── MetricsCollector ──────────────────────────────────────────────────────
+/**
+ * Synapse 이벤트에서 메트릭(토큰, 지연시간, 성공률)을 수집
+ */
+export function createMetricsCollector(opts = {}) {
+  const { maxSamples = MAX_METRIC_SAMPLES } = opts;
+
+  const metrics = {
+    tokenRates: [],     // 초당 토큰 소비율
+    latencies: [],      // 요청 지연시간 (ms)
+    successRates: [],   // 성공률 (0-1)
+    eventCount: 0,
+    lastEventAt: 0,
+  };
+
+  function pushSample(arr, value) {
+    arr.push(value);
+    if (arr.length > maxSamples) arr.shift();
+  }
+
+  return {
+    /** Synapse 이벤트를 처리하여 메트릭 갱신 */
+    ingest(event) {
+      if (!event || typeof event !== "object") return;
+      metrics.eventCount++;
+      metrics.lastEventAt = Date.now();
+
+      // 토큰 소비율
+      if (typeof event.tokens === "number" && event.tokens > 0) {
+        const elapsed = event.elapsed || 1;
+        pushSample(metrics.tokenRates, event.tokens / elapsed);
+      }
+
+      // 지연시간
+      if (typeof event.latencyMs === "number") {
+        pushSample(metrics.latencies, event.latencyMs);
+      }
+
+      // 성공률 (이벤트별 ok/fail)
+      if (event.status) {
+        const ok = event.status === "ok" || event.status === "completed" ? 1 : 0;
+        pushSample(metrics.successRates, ok);
+      }
+    },
+
+    /** 현재 메트릭 스냅샷 반환 */
+    snapshot() {
+      const avgLatency =
+        metrics.latencies.length > 0
+          ? metrics.latencies.reduce((a, b) => a + b, 0) / metrics.latencies.length
+          : 0;
+      const avgSuccessRate =
+        metrics.successRates.length > 0
+          ? metrics.successRates.reduce((a, b) => a + b, 0) /
+            metrics.successRates.length
+          : 1;
+      const lastTokenRate =
+        metrics.tokenRates.length > 0
+          ? metrics.tokenRates[metrics.tokenRates.length - 1]
+          : 0;
+
+      return {
+        tokenRates: [...metrics.tokenRates],
+        latencies: [...metrics.latencies],
+        successRates: [...metrics.successRates],
+        avgLatency: Math.round(avgLatency),
+        avgSuccessRate: Math.round(avgSuccessRate * 100),
+        lastTokenRate: Math.round(lastTokenRate),
+        eventCount: metrics.eventCount,
+        lastEventAt: metrics.lastEventAt,
+      };
+    },
+
+    reset() {
+      metrics.tokenRates.length = 0;
+      metrics.latencies.length = 0;
+      metrics.successRates.length = 0;
+      metrics.eventCount = 0;
+      metrics.lastEventAt = 0;
+    },
+  };
+}
+
+// ── Tier1 메트릭 렌더러 ───────────────────────────────────────────────────
+/**
+ * Synapse 메트릭을 Tier1에 표시할 한 줄 문자열로 렌더링
+ * @param {object} snapshot - MetricsCollector.snapshot() 결과
+ * @param {number} [width=60] - 최대 표시 폭
+ * @returns {string} 렌더링된 메트릭 행
+ */
+export function renderMetricsTier1(snapshot, width = 60) {
+  if (!snapshot || snapshot.eventCount === 0) {
+    return dim("synapse: waiting for events…");
+  }
+
+  const parts = [];
+
+  // 토큰 스파크라인
+  if (snapshot.tokenRates.length > 0) {
+    const spark = sparkline(snapshot.tokenRates, 8, MOCHA.executing);
+    parts.push(`tok/s ${spark} ${color(String(snapshot.lastTokenRate), MOCHA.executing)}`);
+  }
+
+  // 지연시간
+  if (snapshot.latencies.length > 0) {
+    const latColor =
+      snapshot.avgLatency > 1000 ? MOCHA.fail :
+      snapshot.avgLatency > 500 ? MOCHA.partial : MOCHA.ok;
+    parts.push(`lat ${color(`${snapshot.avgLatency}ms`, latColor)}`);
+  }
+
+  // 성공률
+  if (snapshot.successRates.length > 0) {
+    const srColor =
+      snapshot.avgSuccessRate < 80 ? MOCHA.fail :
+      snapshot.avgSuccessRate < 95 ? MOCHA.partial : MOCHA.ok;
+    parts.push(`ok ${color(`${snapshot.avgSuccessRate}%`, srColor)}`);
+  }
+
+  // 이벤트 카운트
+  parts.push(dim(`ev:${snapshot.eventCount}`));
+
+  return parts.join(dim(" │ "));
+}

package/hub/team/tui-widgets.mjs

@@ -0,0 +1,262 @@
+// hub/team/tui-widgets.mjs — UX 리뉴얼 위젯 (ISSUE-14)
+// k9s/lazygit/btop 스타일 위젯: 스파크라인, 검색, 패널 리사이즈
+
+import { color, dim, MOCHA } from "./ansi.mjs";
+
+// ── 스파크라인 ────────────────────────────────────────────────────────────
+// Unicode block elements for sparkline rendering
+const SPARK_CHARS = "▁▂▃▄▅▆▇█";
+
+/**
+ * 토큰 소비 추이를 미니 스파크라인으로 렌더링
+ * @param {number[]} values - 시계열 값 배열
+ * @param {number} [width=8] - 표시 폭 (문자 수)
+ * @param {string} [fg] - ANSI 색상 시퀀스
+ * @returns {string} 스파크라인 문자열
+ */
+export function sparkline(values, width = 8, fg = MOCHA.executing) {
+  if (!values || values.length === 0) return dim("─".repeat(width));
+
+  // 최근 width개만 사용
+  const data = values.slice(-width);
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+
+  const chars = data.map((v) => {
+    const idx = Math.round(((v - min) / range) * (SPARK_CHARS.length - 1));
+    return SPARK_CHARS[idx];
+  });
+
+  // width보다 짧으면 왼쪽 패딩
+  const pad = width - chars.length;
+  const padStr = pad > 0 ? dim("─".repeat(pad)) : "";
+  return padStr + color(chars.join(""), fg);
+}
+
+/**
+ * 워커별 토큰 히스토리 추적기
+ * @param {number} [maxSamples=16] - 최대 샘플 수
+ */
+export function createTokenTracker(maxSamples = 16) {
+  const histories = new Map();
+
+  return {
+    /** 워커의 토큰 값을 기록 */
+    record(workerName, tokens) {
+      if (tokens === null || tokens === undefined || tokens === "") return;
+      const numValue =
+        typeof tokens === "number" ? tokens : parseFloat(String(tokens));
+      if (!Number.isFinite(numValue)) return;
+
+      let history = histories.get(workerName);
+      if (!history) {
+        history = [];
+        histories.set(workerName, history);
+      }
+      history.push(numValue);
+      if (history.length > maxSamples) history.shift();
+    },
+
+    /** 워커의 스파크라인 반환 */
+    sparkline(workerName, width = 8) {
+      const history = histories.get(workerName);
+      return sparkline(history, width);
+    },
+
+    /** 워커의 히스토리 반환 */
+    getHistory(workerName) {
+      return histories.get(workerName) || [];
+    },
+
+    clear() {
+      histories.clear();
+    },
+  };
+}
+
+// ── 검색 (/ + n/N) ───────────────────────────────────────────────────────
+/**
+ * 인라인 검색 상태 관리자
+ * vim 스타일 / 검색 + n(다음)/N(이전) 탐색
+ */
+export function createSearchState() {
+  let query = "";
+  let isActive = false;
+  let inputBuffer = "";
+
+  return {
+    /** 검색 모드 활성화 */
+    activate() {
+      isActive = true;
+      inputBuffer = "";
+      query = "";
+    },
+
+    /** 검색 모드 비활성화 */
+    deactivate() {
+      isActive = false;
+      inputBuffer = "";
+    },
+
+    /** 현재 검색 활성 여부 */
+    get active() {
+      return isActive;
+    },
+
+    /** 현재 쿼리 */
+    get query() {
+      return query;
+    },
+
+    /** 입력 버퍼 (검색 모드 중 타이핑) */
+    get buffer() {
+      return inputBuffer;
+    },
+
+    /** 키 입력 처리. true 반환 시 해당 키를 소비함 */
+    handleKey(key) {
+      if (!isActive) return false;
+
+      // Enter: 검색 확정
+      if (key === "\r" || key === "\n") {
+        query = inputBuffer;
+        isActive = false;
+        return true;
+      }
+
+      // Escape: 검색 취소
+      if (key === "\x1b") {
+        this.deactivate();
+        return true;
+      }
+
+      // Backspace
+      if (key === "\x7f" || key === "\b") {
+        inputBuffer = inputBuffer.slice(0, -1);
+        return true;
+      }
+
+      // Ctrl+C: 취소
+      if (key === "\u0003") {
+        this.deactivate();
+        return true;
+      }
+
+      // 일반 문자
+      if (key.length === 1 && key >= " ") {
+        inputBuffer += key;
+        return true;
+      }
+
+      return true; // 검색 모드 중 다른 키는 무시
+    },
+
+    /**
+     * 이름 목록에서 쿼리와 매칭되는 인덱스 찾기
+     * @param {string[]} names - 워커 이름 배열
+     * @param {number} currentIdx - 현재 선택 인덱스
+     * @param {number} direction - 1(다음) 또는 -1(이전)
+     * @returns {number} 매칭 인덱스 또는 -1
+     */
+    findMatch(names, currentIdx, direction = 1) {
+      if (!query || names.length === 0) return -1;
+      const q = query.toLowerCase();
+      const len = names.length;
+      for (let i = 1; i <= len; i++) {
+        const idx = (currentIdx + i * direction + len) % len;
+        if (names[idx].toLowerCase().includes(q)) return idx;
+      }
+      return -1;
+    },
+
+    /** 검색 프롬프트 렌더링 */
+    renderPrompt(width) {
+      if (!isActive) {
+        if (query) return dim(` /${query}`);
+        return "";
+      }
+      const prompt = `/${inputBuffer}`;
+      const cursor = "█";
+      return color(prompt + cursor, MOCHA.blue);
+    },
+  };
+}
+
+// ── 패널 리사이즈 (H/L) ──────────────────────────────────────────────────
+/**
+ * 패널 비율 관리자
+ * H: rail 축소, L: rail 확대 (k9s 스타일)
+ */
+export function createPanelResizer(opts = {}) {
+  const { minRatio = 0.15, maxRatio = 0.5, step = 0.05 } = opts;
+  let railRatio = opts.initialRatio || 0.3;
+
+  return {
+    get ratio() {
+      return railRatio;
+    },
+
+    /** rail 비율 축소 (H) — detail 패널 확대 */
+    shrinkRail() {
+      railRatio = Math.max(minRatio, railRatio - step);
+      return railRatio;
+    },
+
+    /** rail 비율 확대 (L) — detail 패널 축소 */
+    expandRail() {
+      railRatio = Math.min(maxRatio, railRatio + step);
+      return railRatio;
+    },
+
+    /** 비율 리셋 */
+    reset() {
+      railRatio = opts.initialRatio || 0.3;
+      return railRatio;
+    },
+  };
+}
+
+// ── vim 모션 헬퍼 ─────────────────────────────────────────────────────────
+/**
+ * gg/G 모션을 위한 키 시퀀스 감지
+ * 두 번 연속 'g'를 누르면 gg (첫 번째 항목으로 이동)
+ */
+export function createVimMotion() {
+  let lastKey = "";
+  let lastKeyTime = 0;
+  const DOUBLE_TAP_MS = 500;
+
+  return {
+    /**
+     * 키 입력 처리
+     * @returns {"gg"|"G"|null} 감지된 모션 또는 null
+     */
+    handleKey(key) {
+      const now = Date.now();
+
+      if (key === "g") {
+        if (lastKey === "g" && now - lastKeyTime < DOUBLE_TAP_MS) {
+          lastKey = "";
+          return "gg"; // 첫 번째 항목으로
+        }
+        lastKey = "g";
+        lastKeyTime = now;
+        return null;
+      }
+
+      if (key === "G") {
+        lastKey = "";
+        return "G"; // 마지막 항목으로
+      }
+
+      lastKey = "";
+      return null;
+    },
+
+    reset() {
+      lastKey = "";
+      lastKeyTime = 0;
+    },
+  };
+}