triflux 3.2.0-dev.1 → 3.2.0-dev.10

package/hub/team/dashboard.mjs

@@ -1,46 +1,52 @@
 #!/usr/bin/env node
-// hub/team/dashboard.mjs — 실시간 팀 상태 표시
-// 실행: watch -n 1 -c 'node hub/team/dashboard.mjs --session tfx-team-xxx'
-// 또는: node hub/team/dashboard.mjs --session tfx-team-xxx (단일 출력)
+// hub/team/dashboard.mjs — 실시간 팀 상태 표시 (v2.2)
+// tmux 의존 제거 — Hub task-list + native-supervisor 기반
+//
+// 실행:
+//   node hub/team/dashboard.mjs --session <세션이름> [--interval 2]
+//   node hub/team/dashboard.mjs --team <팀이름> [--interval 2]
 import { get } from "node:http";
-import { capturePaneOutput } from "./session.mjs";
-
-// ── 색상 ──
-const AMBER = "\x1b[38;5;214m";
-const GREEN = "\x1b[38;5;82m";
-const RED = "\x1b[38;5;196m";
-const GRAY = "\x1b[38;5;245m";
-const DIM = "\x1b[2m";
-const BOLD = "\x1b[1m";
-const RESET = "\x1b[0m";
+import { AMBER, GREEN, RED, GRAY, DIM, BOLD, RESET } from "./shared.mjs";
 
 /**
- * Hub /status 엔드포인트 조회
- * @param {string} hubUrl — 예: http://127.0.0.1:27888
+ * HTTP GET JSON
+ * @param {string} url
  * @returns {Promise<object|null>}
  */
-function fetchStatus(hubUrl) {
+function fetchJson(url) {
   return new Promise((resolve) => {
-    const url = `${hubUrl}/status`;
     const req = get(url, { timeout: 2000 }, (res) => {
       let data = "";
       res.on("data", (chunk) => (data += chunk));
       res.on("end", () => {
-        try {
-          resolve(JSON.parse(data));
-        } catch {
-          resolve(null);
-        }
+        try { resolve(JSON.parse(data)); } catch { resolve(null); }
       });
     });
     req.on("error", () => resolve(null));
-    req.on("timeout", () => {
-      req.destroy();
-      resolve(null);
-    });
+    req.on("timeout", () => { req.destroy(); resolve(null); });
   });
 }
 
+/**
+ * HTTP POST JSON (Hub bridge 용)
+ * @param {string} url
+ * @param {object} body
+ * @returns {Promise<object|null>}
+ */
+async function fetchPost(url, body = {}) {
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+      signal: AbortSignal.timeout(2000),
+    });
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
 /**
  * 진행률 바 생성
  * @param {number} pct — 0~100
@@ -65,56 +71,141 @@ function formatUptime(ms) {
 }
 
 /**
- * 대시보드 렌더링
- * @param {string} sessionName — tmux 세션 이름
+ * task 상태 아이콘
+ * @param {string} status
+ * @returns {string}
+ */
+function statusIcon(status) {
+  switch (status) {
+    case "completed": return `${GREEN}✓${RESET}`;
+    case "in_progress": return `${AMBER}●${RESET}`;
+    case "failed": return `${RED}✗${RESET}`;
+    default: return `${GRAY}○${RESET}`;
+  }
+}
+
+/**
+ * 멤버 목록 구성: Hub tasks + supervisor + teamState 통합
+ * @param {Array} hubTasks — Hub bridge task-list 결과
+ * @param {Array} supervisorMembers — native-supervisor 멤버 상태
+ * @param {object} teamState — team-state.json 내용
+ * @returns {Array<{name: string, cli: string, status: string, subject: string, preview: string}>}
+ */
+function buildMemberList(hubTasks, supervisorMembers, teamState) {
+  const members = [];
+  const supervisorByName = new Map(supervisorMembers.map((m) => [m.name, m]));
+
+  // Hub tasks가 있으면 주 데이터 소스
+  if (hubTasks.length > 0) {
+    for (const task of hubTasks) {
+      const owner = task.owner || task.subject || "";
+      const sup = supervisorByName.get(owner);
+      members.push({
+        name: owner,
+        cli: task.metadata?.cli || sup?.cli || "",
+        status: task.status || "pending",
+        subject: task.subject || "",
+        preview: sup?.lastPreview || task.description?.slice(0, 80) || "",
+      });
+    }
+    return members;
+  }
+
+  // Supervisor 데이터 폴백
+  if (supervisorMembers.length > 0) {
+    for (const m of supervisorMembers) {
+      if (m.role === "lead") continue;
+      members.push({
+        name: m.name,
+        cli: m.cli || "",
+        status: m.status === "running" ? "in_progress" : m.status === "exited" ? "completed" : m.status,
+        subject: "",
+        preview: m.lastPreview || "",
+      });
+    }
+    return members;
+  }
+
+  // teamState 폴백 (하위 호환)
+  const panes = teamState?.panes || {};
+  for (const [, paneInfo] of Object.entries(panes).filter(([, v]) => v.role !== "dashboard" && v.role !== "lead")) {
+    members.push({
+      name: paneInfo.agentId || paneInfo.name || "?",
+      cli: paneInfo.cli || "",
+      status: "unknown",
+      subject: paneInfo.subtask || "",
+      preview: "",
+    });
+  }
+  return members;
+}
+
+/**
+ * 대시보드 렌더링 (v2.2: Hub/supervisor 기반)
+ * @param {string} sessionName — 세션 또는 팀 이름
  * @param {object} opts
  * @param {string} opts.hubUrl — Hub URL (기본 http://127.0.0.1:27888)
- * @param {object} opts.teamState — team-state.json 내용
+ * @param {string} [opts.teamName] — Hub task-list 조회용 팀 이름
+ * @param {string} [opts.supervisorUrl] — native-supervisor 제어 URL
+ * @param {object} [opts.teamState] — team-state.json 내용 (하위 호환)
  */
 export async function renderDashboard(sessionName, opts = {}) {
-  const { hubUrl = "http://127.0.0.1:27888", teamState = {} } = opts;
+  const {
+    hubUrl = "http://127.0.0.1:27888",
+    teamName,
+    supervisorUrl,
+    teamState = {},
+  } = opts;
   const W = 50;
   const border = "─".repeat(W);
 
-  // Hub 상태 조회
-  const status = await fetchStatus(hubUrl);
-  const hubOnline = !!status;
+  // 데이터 수집 (병렬)
+  const [hubStatus, taskListRes, supervisorRes] = await Promise.all([
+    fetchJson(`${hubUrl}/status`),
+    teamName ? fetchPost(`${hubUrl}/bridge/team/task-list`, { team_name: teamName }) : null,
+    supervisorUrl ? fetchJson(`${supervisorUrl}/status`) : null,
+  ]);
+
+  const hubOnline = !!hubStatus;
   const hubState = hubOnline ? `${GREEN}● online${RESET}` : `${RED}● offline${RESET}`;
-  const uptime = status?.hub?.uptime ? formatUptime(status.hub.uptime) : "-";
-  const queueSize = status?.hub?.queue_depth ?? 0;
+  const uptime = hubStatus?.hub?.uptime ? formatUptime(hubStatus.hub.uptime) : "-";
+  const queueSize = hubStatus?.hub?.queue_depth ?? 0;
+
+  // Hub task 데이터
+  const hubTasks = taskListRes?.ok ? (taskListRes.data?.tasks || []) : [];
+  const completedCount = hubTasks.filter((t) => t.status === "completed").length;
+  const totalCount = hubTasks.length;
+
+  // Supervisor 멤버 데이터
+  const supervisorMembers = supervisorRes?.ok ? (supervisorRes.data?.members || []) : [];
 
   // 헤더
-  console.log(`${AMBER}┌─ ${sessionName} ${GRAY}${"─".repeat(Math.max(0, W - sessionName.length - 3))}${AMBER}┐${RESET}`);
+  const progress = totalCount > 0 ? ` ${completedCount}/${totalCount}` : "";
+  console.log(`${AMBER}┌─ ${sessionName}${progress} ${GRAY}${"─".repeat(Math.max(0, W - sessionName.length - progress.length - 3))}${AMBER}┐${RESET}`);
   console.log(`${AMBER}│${RESET} Hub: ${hubState}  Uptime: ${DIM}${uptime}${RESET}  Queue: ${DIM}${queueSize}${RESET}`);
   console.log(`${AMBER}│${RESET}`);
 
-  // 에이전트 상태
-  const panes = teamState?.panes || {};
-  const paneEntries = Object.entries(panes).filter(([, v]) => v.role !== "dashboard");
+  // 멤버/워커 렌더링
+  const members = buildMemberList(hubTasks, supervisorMembers, teamState);
 
-  if (paneEntries.length === 0) {
+  if (members.length === 0) {
     console.log(`${AMBER}│${RESET}  ${DIM}에이전트 정보 없음${RESET}`);
   } else {
-    for (const [paneTarget, paneInfo] of paneEntries) {
-      const { cli = "?", agentId = "?", subtask = "" } = paneInfo;
-      const label = `[${agentId}]`;
-      const cliTag = cli.charAt(0).toUpperCase() + cli.slice(1);
-
-      // Hub에서 에이전트 상태 확인
-      const agentStatus = status?.agents?.find?.((a) => a.agent_id === agentId);
-      const online = agentStatus ? `${GREEN}● online${RESET}` : `${GRAY}○ -${RESET}`;
-
-      // 진행률 추정 (메시지 기반, 단순 휴리스틱)
-      const msgCount = agentStatus?.message_count ?? 0;
-      const pct = msgCount === 0 ? 0 : Math.min(100, msgCount * 25);
-
-      console.log(`${AMBER}│${RESET}  ${BOLD}${label}${RESET} ${cliTag}  ${online}  ${progressBar(pct)} ${DIM}${pct}%${RESET}`);
-
-      // pane 미리보기 (마지막 2줄)
-      const preview = capturePaneOutput(paneTarget, 2)
-        .split("\n")
-        .filter(Boolean)
-        .slice(-1)[0] || "";
+    for (const m of members) {
+      const icon = statusIcon(m.status);
+      const label = `[${m.name}]`;
+      const cliTag = m.cli ? m.cli.charAt(0).toUpperCase() + m.cli.slice(1) : "";
+
+      // 진행률 추정
+      const pct = m.status === "completed" ? 100
+        : m.status === "in_progress" ? 50
+        : m.status === "failed" ? 100
+        : 0;
+
+      console.log(`${AMBER}│${RESET}  ${BOLD}${label}${RESET} ${cliTag}  ${icon} ${m.status || "pending"}  ${progressBar(pct)}`);
+
+      // 미리보기: supervisor lastPreview > task subject
+      const preview = m.preview || m.subject || "";
       if (preview) {
         const truncated = preview.length > W - 8 ? preview.slice(0, W - 11) + "..." : preview;
         console.log(`${AMBER}│${RESET}    ${DIM}> ${truncated}${RESET}`);
@@ -140,14 +231,17 @@ async function loadTeamState() {
   }
 }
 
-// ── CLI 실행 (자체 갱신 루프 — watch 불필요) ──
+// ── CLI 실행 ──
 if (process.argv[1]?.includes("dashboard.mjs")) {
   const sessionIdx = process.argv.indexOf("--session");
+  const teamIdx = process.argv.indexOf("--team");
   const sessionName = sessionIdx !== -1 ? process.argv[sessionIdx + 1] : null;
+  const teamName = teamIdx !== -1 ? process.argv[teamIdx + 1] : null;
   const intervalSec = parseInt(process.argv[process.argv.indexOf("--interval") + 1] || "2", 10);
 
-  if (!sessionName) {
-    console.error("사용법: node dashboard.mjs --session <세션이름> [--interval 2]");
+  const displayName = sessionName || teamName;
+  if (!displayName) {
+    console.error("사용법: node dashboard.mjs --session <세션이름> [--team <팀이름>] [--interval 2]");
     process.exit(1);
   }
 
@@ -157,9 +251,16 @@ if (process.argv[1]?.includes("dashboard.mjs")) {
   // 갱신 루프
   while (true) {
     const teamState = await loadTeamState();
+    const effectiveTeamName = teamName || null;
+    const supervisorUrl = teamState?.native?.controlUrl || null;
+
     // 화면 클리어 (ANSI)
     process.stdout.write("\x1b[2J\x1b[H");
-    await renderDashboard(sessionName, { teamState });
+    await renderDashboard(displayName, {
+      teamName: effectiveTeamName,
+      supervisorUrl,
+      teamState,
+    });
     console.log(`${DIM}  ${intervalSec}초 간격 갱신 | Ctrl+C로 종료${RESET}`);
     await new Promise((r) => setTimeout(r, intervalSec * 1000));
   }

package/hub/team/native-supervisor.mjs

@@ -0,0 +1,300 @@
+// hub/team/native-supervisor.mjs — tmux 없이 멀티 CLI를 직접 띄우는 네이티브 팀 런타임
+import { createServer } from "node:http";
+import { spawn } from "node:child_process";
+import { mkdirSync, readFileSync, writeFileSync, createWriteStream } from "node:fs";
+import { dirname, join } from "node:path";
+
+function parseArgs(argv) {
+  const out = {};
+  for (let i = 0; i < argv.length; i++) {
+    const cur = argv[i];
+    if (cur === "--config" && argv[i + 1]) {
+      out.config = argv[++i];
+    }
+  }
+  return out;
+}
+
+async function readJson(path) {
+  return JSON.parse(readFileSync(path, "utf8"));
+}
+
+function safeText(v, fallback = "") {
+  if (v == null) return fallback;
+  return String(v);
+}
+
+function nowMs() {
+  return Date.now();
+}
+
+const args = parseArgs(process.argv.slice(2));
+if (!args.config) {
+  console.error("사용법: node native-supervisor.mjs --config <path>");
+  process.exit(1);
+}
+
+const config = await readJson(args.config);
+const {
+  sessionName,
+  runtimeFile,
+  logsDir,
+  startupDelayMs = 3000,
+  members = [],
+} = config;
+
+mkdirSync(logsDir, { recursive: true });
+mkdirSync(dirname(runtimeFile), { recursive: true });
+
+const startedAt = nowMs();
+const processMap = new Map();
+
+function memberStateSnapshot() {
+  const states = [];
+  for (const m of members) {
+    const state = processMap.get(m.name);
+    states.push({
+      name: m.name,
+      role: m.role,
+      cli: m.cli,
+      agentId: m.agentId,
+      command: m.command,
+      pid: state?.child?.pid || null,
+      status: state?.status || "unknown",
+      exitCode: state?.exitCode ?? null,
+      lastPreview: state?.lastPreview || "",
+      logFile: state?.logFile || null,
+      errFile: state?.errFile || null,
+    });
+  }
+  return states;
+}
+
+function writeRuntime(controlPort) {
+  const runtime = {
+    sessionName,
+    supervisorPid: process.pid,
+    controlUrl: `http://127.0.0.1:${controlPort}`,
+    startedAt,
+    members: memberStateSnapshot(),
+  };
+  writeFileSync(runtimeFile, JSON.stringify(runtime, null, 2) + "\n");
+}
+
+function spawnMember(member) {
+  const outPath = join(logsDir, `${member.name}.out.log`);
+  const errPath = join(logsDir, `${member.name}.err.log`);
+
+  const outWs = createWriteStream(outPath, { flags: "a" });
+  const errWs = createWriteStream(errPath, { flags: "a" });
+
+  const child = spawn(member.command, {
+    shell: true,
+    env: {
+      ...process.env,
+      TERM: process.env.TERM && process.env.TERM !== "dumb" ? process.env.TERM : "xterm-256color",
+    },
+    stdio: ["pipe", "pipe", "pipe"],
+    windowsHide: true,
+  });
+
+  const state = {
+    member,
+    child,
+    outWs,
+    errWs,
+    logFile: outPath,
+    errFile: errPath,
+    status: "running",
+    exitCode: null,
+    lastPreview: "",
+  };
+
+  child.stdout.on("data", (buf) => {
+    outWs.write(buf);
+    const txt = safeText(buf).trim();
+    if (txt) {
+      const lines = txt.split(/\r?\n/).filter(Boolean);
+      if (lines.length) state.lastPreview = lines[lines.length - 1].slice(0, 280);
+    }
+  });
+
+  child.stderr.on("data", (buf) => {
+    errWs.write(buf);
+    const txt = safeText(buf).trim();
+    if (txt) {
+      const lines = txt.split(/\r?\n/).filter(Boolean);
+      if (lines.length) state.lastPreview = `[err] ${lines[lines.length - 1].slice(0, 260)}`;
+    }
+  });
+
+  child.on("exit", (code) => {
+    state.status = "exited";
+    state.exitCode = code;
+    try { outWs.end(); } catch {}
+    try { errWs.end(); } catch {}
+    maybeAutoShutdown();
+  });
+
+  processMap.set(member.name, state);
+}
+
+function sendInput(memberName, text) {
+  const state = processMap.get(memberName);
+  if (!state) return { ok: false, error: "member_not_found" };
+  if (state.status !== "running") return { ok: false, error: "member_not_running" };
+  try {
+    state.child.stdin.write(`${safeText(text)}\n`);
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: e.message };
+  }
+}
+
+function interruptMember(memberName) {
+  const state = processMap.get(memberName);
+  if (!state) return { ok: false, error: "member_not_found" };
+  if (state.status !== "running") return { ok: false, error: "member_not_running" };
+
+  let signaled = false;
+  try {
+    signaled = state.child.kill("SIGINT");
+  } catch {
+    signaled = false;
+  }
+
+  if (!signaled) {
+    try {
+      state.child.stdin.write("\u0003");
+      signaled = true;
+    } catch {
+      signaled = false;
+    }
+  }
+
+  return signaled ? { ok: true } : { ok: false, error: "interrupt_failed" };
+}
+
+let isShuttingDown = false;
+
+function maybeAutoShutdown() {
+  if (isShuttingDown) return;
+  const allExited = [...processMap.values()].every((s) => s.status === "exited");
+  if (!allExited) return;
+  shutdown();
+}
+
+function shutdown() {
+  if (isShuttingDown) return;
+  isShuttingDown = true;
+
+  for (const state of processMap.values()) {
+    if (state.status === "running") {
+      try { state.child.stdin.write("exit\n"); } catch {}
+      try { state.child.kill("SIGTERM"); } catch {}
+    }
+    try { state.outWs.end(); } catch {}
+    try { state.errWs.end(); } catch {}
+  }
+
+  setTimeout(() => {
+    for (const state of processMap.values()) {
+      if (state.status === "running") {
+        try { state.child.kill("SIGKILL"); } catch {}
+      }
+    }
+    process.exit(0);
+  }, 1200).unref();
+}
+
+for (const member of members) {
+  spawnMember(member);
+}
+
+const server = createServer(async (req, res) => {
+  const send = (code, obj) => {
+    res.writeHead(code, { "Content-Type": "application/json" });
+    res.end(JSON.stringify(obj));
+  };
+
+  if (req.method === "GET" && (req.url === "/" || req.url === "/status")) {
+    return send(200, {
+      ok: true,
+      data: {
+        sessionName,
+        supervisorPid: process.pid,
+        uptimeMs: nowMs() - startedAt,
+        members: memberStateSnapshot(),
+      },
+    });
+  }
+
+  if (req.method !== "POST") {
+    return send(405, { ok: false, error: "method_not_allowed" });
+  }
+
+  let body = {};
+  try {
+    const chunks = [];
+    for await (const c of req) chunks.push(c);
+    const raw = Buffer.concat(chunks).toString("utf8") || "{}";
+    body = JSON.parse(raw);
+  } catch {
+    return send(400, { ok: false, error: "invalid_json" });
+  }
+
+  if (req.url === "/send") {
+    const { member, text } = body;
+    const r = sendInput(member, text);
+    return send(r.ok ? 200 : 400, r);
+  }
+
+  if (req.url === "/interrupt") {
+    const { member } = body;
+    const r = interruptMember(member);
+    return send(r.ok ? 200 : 400, r);
+  }
+
+  if (req.url === "/control") {
+    const { member, command = "", reason = "" } = body;
+    const controlMsg = `[LEAD CONTROL] command=${command}${reason ? ` reason=${reason}` : ""}`;
+    const a = sendInput(member, controlMsg);
+    if (!a.ok) return send(400, a);
+    if (String(command).toLowerCase() === "interrupt") {
+      const b = interruptMember(member);
+      if (!b.ok) return send(400, b);
+    }
+    return send(200, { ok: true });
+  }
+
+  if (req.url === "/stop") {
+    send(200, { ok: true });
+    shutdown();
+    return;
+  }
+
+  return send(404, { ok: false, error: "not_found" });
+});
+
+server.listen(0, "127.0.0.1", () => {
+  const address = server.address();
+  const port = typeof address === "object" && address ? address.port : null;
+  if (!port) {
+    console.error("native supervisor 포트 바인딩 실패");
+    process.exit(1);
+  }
+
+  writeRuntime(port);
+
+  // CLI 초기화 후 프롬프트 주입
+  setTimeout(() => {
+    for (const m of members) {
+      if (m.prompt) {
+        sendInput(m.name, m.prompt);
+      }
+    }
+  }, startupDelayMs).unref();
+});
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);

package/hub/team/native.mjs

@@ -0,0 +1,62 @@
+// hub/team/native.mjs — Claude Native Teams 래퍼
+// teammate 프롬프트 템플릿 + 팀 설정 빌더
+//
+// Claude Code 네이티브 Agent Teams (CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1)
+// 환경에서 teammate를 Codex/Gemini CLI 래퍼로 구성하는 유틸리티.
+// SKILL.md가 인라인 프롬프트를 사용하므로, 이 모듈은 CLI(tfx multi --native)에서
+// 팀 설정을 프로그래밍적으로 생성할 때 사용한다.
+
+const ROUTE_SCRIPT = "~/.claude/scripts/tfx-route.sh";
+
+/**
+ * v2.2 슬림 래퍼 프롬프트 생성
+ * Agent spawn으로 네비게이션에 등록하되, 실제 작업은 tfx-route.sh가 수행.
+ * 프롬프트 ~100 토큰 목표 (v2의 ~500 대비 80% 감소).
+ *
+ * @param {'codex'|'gemini'} cli — CLI 타입
+ * @param {object} opts
+ * @param {string} opts.subtask — 서브태스크 설명
+ * @param {string} [opts.role] — 역할 (executor, designer, reviewer 등)
+ * @param {string} [opts.teamName] — 팀 이름
+ * @param {string} [opts.taskId] — Hub task ID
+ * @param {string} [opts.agentName] — 워커 표시 이름
+ * @param {string} [opts.leadName] — 리드 수신자 이름
+ * @param {string} [opts.mcp_profile] — MCP 프로필
+ * @returns {string} 슬림 래퍼 프롬프트
+ */
+export function buildSlimWrapperPrompt(cli, opts = {}) {
+  const {
+    subtask,
+    role = "executor",
+    teamName = "tfx-multi",
+    taskId = "",
+    agentName = "",
+    leadName = "team-lead",
+    mcp_profile = "auto",
+  } = opts;
+
+  // 셸 이스케이프
+  const escaped = subtask.replace(/'/g, "'\\''");
+
+  return `Bash 1회 실행 후 반드시 종료하라. 어떤 경우에도 hang하지 마라.
+gemini/codex를 직접 호출하지 마라. 반드시 tfx-route.sh를 거쳐야 한다.
+프롬프트를 파일로 저장하지 마라. tfx-route.sh가 인자로 받는다.
+
+TFX_TEAM_NAME="${teamName}" TFX_TEAM_TASK_ID="${taskId}" TFX_TEAM_AGENT_NAME="${agentName}" TFX_TEAM_LEAD_NAME="${leadName}" bash ${ROUTE_SCRIPT} "${role}" '${escaped}' ${mcp_profile}
+
+성공 → TaskUpdate(status: completed, metadata: {result: "success"}) + SendMessage(to: ${leadName}).
+실패 → TaskUpdate(status: completed, metadata: {result: "failed", error: "에러 요약"}) + SendMessage(to: ${leadName}).
+
+중요: TaskUpdate의 status는 "completed"만 사용. "failed"는 API 미지원.
+실패 여부는 metadata.result로 구분. Bash 실패 시에도 반드시 TaskUpdate + SendMessage 후 종료.`;
+}
+
+/**
+ * 팀 이름 생성 (타임스탬프 기반)
+ * @returns {string}
+ */
+export function generateTeamName() {
+  const ts = Date.now().toString(36).slice(-4);
+  const rand = Math.random().toString(36).slice(2, 6);
+  return `tfx-${ts}${rand}`;
+}