@rk0429/agentic-relay 19.9.0 → 19.9.2

package/dist/interfaces/vscode/view-model.js

@@ -90,7 +90,7 @@ export function taskTooltip(node) {
     return lines.join("\n");
 }
 export function activeAgentLabel(agent) {
-    return agent.agent_id;
+    return agent.task_title ?? agent.role ?? agent.agent_id;
 }
 export function describeActiveAgent(agent) {
     return [
@@ -115,50 +115,465 @@ export function activeAgentTooltip(agent) {
         `started_at: ${agent.started_at}`,
     ].join("\n");
 }
-export function buildAgentDetailMarkdown(agent) {
-    const lines = [
-        `# Agent: ${agent.agent_id}`,
-        "",
-        "| Field | Value |",
-        "|---|---|",
-        markdownRow("Agent", code(agent.agent_id)),
-        markdownRow("Session", code(agent.relay_session_id)),
-        markdownRow("Status", agent.status),
-        markdownRow("Backend", agent.backend ?? "-"),
-        markdownRow("Role", agent.role ?? "-"),
-        markdownRow("Task", formatTaskReference(agent.task_title, agent.task_id)),
-        markdownRow("Started", code(agent.started_at)),
-        markdownRow("Running", formatDuration(agent.running_for_seconds)),
-        markdownRow("Parent", agent.parent_relay_session_id
-            ? code(agent.parent_relay_session_id)
-            : "-"),
-    ];
-    return `${lines.join("\n")}\n`;
+export function buildAgentDetailHtml(agent) {
+    const label = activeAgentLabel(agent);
+    return buildDetailHtml({
+        kind: "Agent",
+        title: label,
+        subtitle: label === agent.agent_id ? undefined : agent.agent_id,
+        status: agent.status,
+        sections: [
+            {
+                title: "Metadata",
+                rows: [
+                    detailRow("Agent ID", renderCode(agent.agent_id)),
+                    detailRow("Session ID", renderCode(agent.relay_session_id)),
+                    detailRow("Backend", renderText(agent.backend ?? "-")),
+                    detailRow("Role", renderText(agent.role ?? "-")),
+                    detailRow("Task", formatTaskReference(agent.task_title, agent.task_id)),
+                    detailRow("Started", renderCode(agent.started_at)),
+                    detailRow("Duration", renderText(formatDuration(agent.running_for_seconds))),
+                    detailRow("Parent", agent.parent_relay_session_id
+                        ? renderCode(agent.parent_relay_session_id)
+                        : renderMuted("-")),
+                ],
+            },
+        ],
+    });
 }
-export function buildTaskDetailMarkdown(node) {
-    const lines = [
-        `# Task: ${node.title}`,
-        "",
-        "| Field | Value |",
-        "|---|---|",
-        markdownRow("Task ID", code(node.task_id)),
-        markdownRow("Status", node.status),
-        markdownRow("Agent", node.agent_id ? code(node.agent_id) : "-"),
-        markdownRow("Current Session", node.current_relay_session_id ? code(node.current_relay_session_id) : "-"),
-        markdownRow("Dependencies", node.depends_on.length > 0
-            ? node.depends_on.map((dependency) => code(dependency)).join(", ")
-            : "-"),
-        markdownRow("Blocked", node.blocked_reason
-            ? `${node.blocked_kind ?? "unknown"}: ${escapeMarkdownCell(node.blocked_reason)}`
-            : "-"),
-        markdownRow("Warnings", node.warnings.length > 0
-            ? node.warnings.map((warning) => escapeMarkdownCell(warning)).join("<br/>")
-            : "-"),
-    ];
-    if (node.children.length > 0) {
-        lines.push("", "## Children", "", ...node.children.map((child) => `- ${escapeMarkdownCell(child.title)} (${code(child.task_id)})`));
+export function buildTaskDetailHtml(node) {
+    return buildDetailHtml({
+        kind: "Task",
+        title: node.title,
+        status: node.status,
+        sections: [
+            {
+                title: "Metadata",
+                rows: [
+                    detailRow("Task ID", renderCode(node.task_id)),
+                    detailRow("Status", renderText(node.status)),
+                    detailRow("Agent", node.agent_id ? renderCode(node.agent_id) : renderMuted("-")),
+                    detailRow("Session", node.current_relay_session_id
+                        ? renderCode(node.current_relay_session_id)
+                        : renderMuted("-")),
+                    detailRow("Dependencies", renderCodeList(node.depends_on)),
+                    detailRow("Blocked", node.blocked_reason
+                        ? renderText(`${node.blocked_kind ?? "unknown"}: ${node.blocked_reason}`)
+                        : renderMuted("-")),
+                    detailRow("Warnings", renderTextList(node.warnings)),
+                ],
+            },
+            ...(node.children.length > 0
+                ? [
+                    {
+                        title: "Children",
+                        rows: node.children.map((child) => detailRow(child.title, `${renderStatusBadge(child.status)} ${renderCode(child.task_id)}`)),
+                    },
+                ]
+                : []),
+        ],
+    });
+}
+export function buildRelayWebviewHtml(data) {
+    const nodeWidth = 220;
+    const nodeHeight = 76;
+    const layerGap = 140;
+    const columnGap = 260;
+    const paddingX = 48;
+    const paddingY = 40;
+    const graphNodes = data.selectedKind === "agent"
+        ? [...data.snapshot.active_agents]
+            .sort((left, right) => left.started_at.localeCompare(right.started_at))
+            .map((agent) => ({
+            id: agent.relay_session_id,
+            label: activeAgentLabel(agent),
+            status: agent.status,
+            detailHtml: extractBodyContent(buildAgentDetailHtml(agent)),
+            sortKey: `${agent.started_at}:${activeAgentLabel(agent)}`,
+        }))
+        : flattenTaskTree(data.snapshot.task_tree).map((node) => ({
+            id: node.task_id,
+            label: node.title,
+            status: node.status,
+            detailHtml: extractBodyContent(buildTaskDetailHtml(node)),
+            sortKey: node.title,
+        }));
+    const nodeIds = new Set(graphNodes.map((node) => node.id));
+    const graphEdges = data.selectedKind === "agent"
+        ? data.snapshot.active_agents
+            .filter((agent) => agent.parent_relay_session_id &&
+            nodeIds.has(agent.parent_relay_session_id))
+            .map((agent) => ({
+            from: agent.parent_relay_session_id,
+            to: agent.relay_session_id,
+            kind: "hierarchy",
+        }))
+        : flattenTaskTree(data.snapshot.task_tree).flatMap((node) => {
+            const edges = [];
+            if (node.parent_id && nodeIds.has(node.parent_id)) {
+                edges.push({
+                    from: node.parent_id,
+                    to: node.task_id,
+                    kind: "hierarchy",
+                });
+            }
+            for (const dependencyId of node.depends_on) {
+                if (!nodeIds.has(dependencyId)) {
+                    continue;
+                }
+                edges.push({
+                    from: dependencyId,
+                    to: node.task_id,
+                    kind: "dependency",
+                });
+            }
+            return edges;
+        });
+    const incomingCounts = new Map(graphNodes.map((node) => [node.id, 0]));
+    const outgoing = new Map();
+    for (const edge of graphEdges) {
+        incomingCounts.set(edge.to, (incomingCounts.get(edge.to) ?? 0) + 1);
+        const siblings = outgoing.get(edge.from) ?? [];
+        siblings.push(edge.to);
+        outgoing.set(edge.from, siblings);
+    }
+    const layerById = new Map(graphNodes.map((node) => [node.id, 0]));
+    const queue = graphNodes
+        .filter((node) => (incomingCounts.get(node.id) ?? 0) === 0)
+        .sort((left, right) => left.sortKey.localeCompare(right.sortKey))
+        .map((node) => node.id);
+    const processed = new Set();
+    const remainingIncoming = new Map(incomingCounts);
+    while (queue.length > 0) {
+        const currentId = queue.shift();
+        if (!currentId || processed.has(currentId)) {
+            continue;
+        }
+        processed.add(currentId);
+        const nextLayer = (layerById.get(currentId) ?? 0) + 1;
+        for (const targetId of outgoing.get(currentId) ?? []) {
+            layerById.set(targetId, Math.max(layerById.get(targetId) ?? 0, nextLayer));
+            remainingIncoming.set(targetId, (remainingIncoming.get(targetId) ?? 1) - 1);
+            if ((remainingIncoming.get(targetId) ?? 0) <= 0) {
+                queue.push(targetId);
+            }
+        }
+    }
+    for (const node of graphNodes) {
+        if (processed.has(node.id)) {
+            continue;
+        }
+        layerById.set(node.id, layerById.get(node.id) ?? 0);
     }
-    return `${lines.join("\n")}\n`;
+    const layers = new Map();
+    for (const node of graphNodes) {
+        const layer = layerById.get(node.id) ?? 0;
+        const siblings = layers.get(layer) ?? [];
+        siblings.push(node);
+        layers.set(layer, siblings);
+    }
+    const sortedLayers = [...layers.entries()]
+        .sort(([left], [right]) => left - right)
+        .map(([layer, nodes]) => [
+        layer,
+        [...nodes].sort((left, right) => left.sortKey.localeCompare(right.sortKey)),
+    ]);
+    const maxLayerNodeCount = Math.max(1, ...sortedLayers.map(([, nodes]) => nodes.length));
+    const svgWidth = paddingX * 2 + nodeWidth + columnGap * (maxLayerNodeCount - 1);
+    const svgHeight = paddingY * 2 +
+        nodeHeight +
+        layerGap * Math.max(sortedLayers.length - 1, 0);
+    const positionedNodes = sortedLayers.flatMap(([layer, nodes]) => {
+        const layerWidth = nodeWidth + columnGap * Math.max(nodes.length - 1, 0);
+        const layerOffsetX = (svgWidth - layerWidth) / 2;
+        return nodes.map((node, index) => ({
+            ...node,
+            layer,
+            x: layerOffsetX + columnGap * index,
+            y: paddingY + layerGap * layer,
+        }));
+    });
+    const nodePositions = new Map(positionedNodes.map((node) => [node.id, node]));
+    const selectedNode = graphNodes.find((node) => node.id === data.selectedId);
+    const initialDetailHtml = selectedNode?.detailHtml ?? extractBodyContent(data.selectedDetailHtml);
+    const edgeMarkup = graphEdges
+        .map((edge) => {
+        const source = nodePositions.get(edge.from);
+        const target = nodePositions.get(edge.to);
+        if (!source || !target) {
+            return "";
+        }
+        const startX = source.x + nodeWidth / 2;
+        const startY = source.y + nodeHeight;
+        const endX = target.x + nodeWidth / 2;
+        const endY = target.y;
+        const midY = startY + (endY - startY) / 2;
+        return `
+        <path
+          class="graph-edge ${edge.kind === "dependency" ? "graph-edge-dependency" : "graph-edge-hierarchy"}"
+          d="M ${startX} ${startY} C ${startX} ${midY}, ${endX} ${midY}, ${endX} ${endY}"
+          marker-end="url(#relay-arrowhead)"
+        />`;
+    })
+        .join("");
+    const nodeMarkup = positionedNodes
+        .map((node) => {
+        const palette = graphNodePalette(node.status);
+        const lines = wrapGraphLabel(node.label, 22, 3);
+        return `
+        <g
+          class="graph-node${node.id === data.selectedId ? " is-selected" : ""}"
+          data-node-id="${escapeHtml(node.id)}"
+          data-status="${escapeHtml(node.status)}"
+          data-detail-html="${escapeHtml(node.detailHtml)}"
+          transform="translate(${node.x}, ${node.y})"
+          tabindex="0"
+          role="button"
+          aria-label="${escapeHtml(node.label)}"
+        >
+          <rect
+            width="${nodeWidth}"
+            height="${nodeHeight}"
+            rx="8"
+            fill="${palette.fill}"
+            fill-opacity="0.18"
+            stroke="${palette.stroke}"
+          />
+          <text x="${nodeWidth / 2}" y="28" text-anchor="middle" fill="${palette.text}">
+            ${lines
+            .map((line, index) => `<tspan x="${nodeWidth / 2}" dy="${index === 0 ? 0 : 18}">${escapeHtml(line)}</tspan>`)
+            .join("")}
+          </text>
+        </g>`;
+    })
+        .join("");
+    const emptyStateMarkup = graphNodes.length === 0
+        ? `<div class="graph-empty">${data.selectedKind === "agent"
+            ? "No active agents available."
+            : "No tasks available."}</div>`
+        : `<svg
+          id="relay-graph"
+          viewBox="0 0 ${svgWidth} ${svgHeight}"
+          role="img"
+          aria-label="${data.selectedKind === "agent" ? "Active agent graph" : "Task DAG graph"}"
+          preserveAspectRatio="xMidYMin meet"
+        >
+          <defs>
+            <marker
+              id="relay-arrowhead"
+              markerWidth="12"
+              markerHeight="12"
+              refX="10"
+              refY="6"
+              orient="auto"
+              markerUnits="strokeWidth"
+            >
+              <path d="M 0 0 L 12 6 L 0 12 z" fill="var(--vscode-panel-border)" />
+            </marker>
+          </defs>
+          ${edgeMarkup}
+          ${nodeMarkup}
+        </svg>`;
+    return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; style-src 'unsafe-inline'; script-src 'unsafe-inline';"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      :root {
+        color-scheme: light dark;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        height: 100%;
+      }
+
+      body {
+        margin: 0;
+        background: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+        font-family: var(--vscode-font-family);
+      }
+
+      .relay-layout {
+        display: grid;
+        grid-template-rows: minmax(280px, 1fr) minmax(260px, 1fr);
+        height: 100vh;
+      }
+
+      .graph-pane,
+      .detail-pane {
+        min-height: 0;
+      }
+
+      .graph-pane {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        padding: 18px 20px 12px;
+        border-bottom: 1px solid var(--vscode-panel-border);
+        background:
+          linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--vscode-editor-background) 82%, var(--vscode-sideBar-background)),
+            var(--vscode-editor-background)
+          );
+      }
+
+      .graph-header {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 12px;
+      }
+
+      .graph-title {
+        margin: 0;
+        font-size: 1em;
+        font-weight: 700;
+      }
+
+      .graph-subtitle {
+        color: var(--vscode-descriptionForeground);
+        font-size: 0.9em;
+      }
+
+      .graph-surface {
+        min-height: 0;
+        flex: 1;
+        overflow: auto;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 16px;
+        background:
+          radial-gradient(circle at top, rgba(127, 127, 127, 0.1), transparent 55%),
+          var(--vscode-sideBar-background);
+      }
+
+      #relay-graph {
+        display: block;
+        min-width: 100%;
+        height: auto;
+      }
+
+      .graph-edge {
+        fill: none;
+        stroke: var(--vscode-panel-border);
+        stroke-width: 1.7;
+        opacity: 0.92;
+      }
+
+      .graph-edge-dependency {
+        stroke-dasharray: 6 6;
+      }
+
+      .graph-node {
+        cursor: pointer;
+        outline: none;
+      }
+
+      .graph-node rect {
+        stroke-width: 1.8;
+        transition: stroke-width 120ms ease, fill-opacity 120ms ease;
+      }
+
+      .graph-node text {
+        font-size: 13px;
+        font-weight: 600;
+        pointer-events: none;
+      }
+
+      .graph-node:hover rect,
+      .graph-node:focus rect {
+        fill-opacity: 0.24;
+      }
+
+      .graph-node.is-selected rect {
+        stroke-width: 3.5;
+        fill-opacity: 0.28;
+      }
+
+      .graph-empty {
+        display: grid;
+        place-items: center;
+        height: 100%;
+        color: var(--vscode-descriptionForeground);
+      }
+
+      .detail-pane {
+        overflow: auto;
+        background: var(--vscode-editor-background);
+      }
+
+      @media (max-width: 720px) {
+        .relay-layout {
+          grid-template-rows: minmax(240px, 320px) minmax(320px, 1fr);
+        }
+
+        .graph-pane {
+          padding: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="relay-layout">
+      <section class="graph-pane">
+        <div class="graph-header">
+          <h1 class="graph-title">${data.selectedKind === "agent" ? "Active Agent Graph" : "Task DAG"}</h1>
+          <div class="graph-subtitle">Click a node to update the detail panel.</div>
+        </div>
+        <div class="graph-surface">${emptyStateMarkup}</div>
+      </section>
+      <section class="detail-pane">
+        <div id="relay-detail-host"></div>
+      </section>
+    </div>
+    <script>
+      const detailHost = document.getElementById("relay-detail-host");
+      const detailStyles = ${JSON.stringify(detailDocumentStyles(":host"))};
+      const initialDetailHtml = ${JSON.stringify(initialDetailHtml)};
+      const graphNodes = Array.from(document.querySelectorAll(".graph-node"));
+      const detailRoot = detailHost ? detailHost.attachShadow({ mode: "open" }) : undefined;
+
+      function renderDetail(detailHtml) {
+        if (!detailRoot) {
+          return;
+        }
+
+        detailRoot.innerHTML = "<style>" + detailStyles + "</style>" + detailHtml;
+      }
+
+      function selectNode(node) {
+        for (const candidate of graphNodes) {
+          candidate.classList.toggle("is-selected", candidate === node);
+        }
+
+        renderDetail(node.dataset.detailHtml || initialDetailHtml);
+      }
+
+      for (const node of graphNodes) {
+        node.addEventListener("click", () => selectNode(node));
+        node.addEventListener("keydown", (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            selectNode(node);
+          }
+        });
+      }
+
+      renderDetail(initialDetailHtml);
+    </script>
+  </body>
+</html>`;
 }
 export function formatDuration(totalSeconds) {
     const hours = Math.floor(totalSeconds / 3600);
@@ -194,25 +609,348 @@ function truncate(value, maxLength) {
     }
     return `${value.slice(0, maxLength - 1)}…`;
 }
-function markdownRow(label, value) {
-    return `| ${escapeMarkdownCell(label)} | ${value} |`;
-}
 function formatTaskReference(taskTitle, taskId) {
     if (taskTitle && taskId) {
-        return `${escapeMarkdownCell(taskTitle)} (${code(taskId)})`;
+        return `${escapeHtml(taskTitle)} (${renderCode(taskId)})`;
     }
     if (taskTitle) {
-        return escapeMarkdownCell(taskTitle);
+        return escapeHtml(taskTitle);
     }
     if (taskId) {
-        return code(taskId);
+        return renderCode(taskId);
+    }
+    return renderMuted("-");
+}
+function buildDetailHtml({ kind, title, subtitle, status, sections, }) {
+    const escapedTitle = escapeHtml(title);
+    const escapedSubtitle = subtitle ? escapeHtml(subtitle) : "";
+    const statusClass = statusToClass(status);
+    const cards = sections
+        .map((section) => `
+        <section class="card">
+          <h2>${escapeHtml(section.title)}</h2>
+          <div class="rows">
+            ${section.rows
+        .map((row) => `
+                  <div class="row">
+                    <span class="label">${escapeHtml(row.label)}</span>
+                    <span class="value">${row.value}</span>
+                  </div>`)
+        .join("")}
+          </div>
+        </section>`)
+        .join("");
+    return `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'none'; style-src 'unsafe-inline';"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <style>
+      ${detailDocumentStyles()}
+    </style>
+  </head>
+  <body>
+    <div class="page">
+      <header class="header">
+        <div>
+          <div class="eyebrow">${kind}</div>
+          <h1>${escapedTitle}</h1>
+          ${subtitle ? `<div class="subtitle">${escapedSubtitle}</div>` : ""}
+        </div>
+        ${renderStatusBadge(status, statusClass)}
+      </header>
+      ${cards}
+    </div>
+  </body>
+</html>`;
+}
+function detailRow(label, value) {
+    return { label, value };
+}
+function renderStatusBadge(status, className = statusToClass(status)) {
+    return `<span class="badge badge-${className}">${escapeHtml(status)}</span>`;
+}
+function renderCode(value) {
+    return `<code>${escapeHtml(value)}</code>`;
+}
+function renderText(value) {
+    return escapeHtml(value);
+}
+function renderMuted(value) {
+    return `<span class="muted">${escapeHtml(value)}</span>`;
+}
+function renderCodeList(values) {
+    if (values.length === 0) {
+        return renderMuted("-");
     }
-    return "-";
+    return `<span class="inline-list">${values.map((value) => renderCode(value)).join("")}</span>`;
 }
-function code(value) {
-    return `\`${value.replace(/`/g, "\\`")}\``;
+function renderTextList(values) {
+    if (values.length === 0) {
+        return renderMuted("-");
+    }
+    return `<span class="inline-list">${values
+        .map((value) => `<span>${escapeHtml(value)}</span>`)
+        .join("")}</span>`;
+}
+function statusToClass(status) {
+    return status.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+}
+function detailDocumentStyles(bodySelector = "body") {
+    return `
+      :root {
+        color-scheme: light dark;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      ${bodySelector} {
+        margin: 0;
+        padding: 24px;
+        background: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+        font-family: var(--vscode-font-family);
+        font-size: var(--vscode-font-size);
+        line-height: 1.5;
+      }
+
+      .page {
+        max-width: 920px;
+        margin: 0 auto;
+      }
+
+      .header {
+        display: flex;
+        align-items: flex-start;
+        justify-content: space-between;
+        gap: 16px;
+        margin-bottom: 20px;
+      }
+
+      .eyebrow {
+        margin-bottom: 6px;
+        color: var(--vscode-descriptionForeground);
+        font-size: 0.85em;
+        font-weight: 600;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: 1.8em;
+        line-height: 1.2;
+      }
+
+      .subtitle {
+        margin-top: 6px;
+        color: var(--vscode-descriptionForeground);
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 96px;
+        padding: 6px 12px;
+        border-radius: 999px;
+        color: var(--vscode-editor-background);
+        font-size: 0.85em;
+        font-weight: 700;
+        text-transform: lowercase;
+      }
+
+      .badge-running {
+        background: var(--vscode-terminal-ansiGreen);
+      }
+
+      .badge-stale {
+        background: var(--vscode-terminal-ansiYellow);
+      }
+
+      .badge-backlog {
+        background: var(--vscode-terminal-ansiMagenta);
+      }
+
+      .badge-ready {
+        background: var(--vscode-terminal-ansiCyan);
+      }
+
+      .badge-in-progress,
+      .badge-review {
+        background: var(--vscode-terminal-ansiBlue);
+      }
+
+      .badge-blocked {
+        background: var(--vscode-terminal-ansiRed);
+      }
+
+      .badge-done,
+      .badge-superseded,
+      .badge-archived {
+        background: var(--vscode-terminal-ansiBrightBlack);
+      }
+
+      .card {
+        margin-top: 16px;
+        padding: 18px;
+        border: 1px solid var(--vscode-panel-border);
+        border-radius: 14px;
+        background: var(--vscode-sideBar-background);
+      }
+
+      h2 {
+        margin: 0 0 12px;
+        font-size: 1.05em;
+      }
+
+      .rows {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+      }
+
+      .row {
+        display: grid;
+        grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
+        gap: 12px;
+        align-items: start;
+      }
+
+      .label {
+        color: var(--vscode-descriptionForeground);
+        font-weight: 600;
+      }
+
+      .value {
+        min-width: 0;
+        white-space: pre-wrap;
+        word-break: break-word;
+      }
+
+      .muted {
+        color: var(--vscode-descriptionForeground);
+      }
+
+      code {
+        padding: 0.1em 0.35em;
+        border-radius: 6px;
+        background: var(--vscode-textCodeBlock-background);
+        font-family: var(--vscode-editor-font-family, var(--vscode-font-family));
+        font-size: 0.95em;
+      }
+
+      .inline-list {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .child-entry {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        align-items: center;
+      }
+
+      @media (max-width: 640px) {
+        ${bodySelector} {
+          padding: 16px;
+        }
+
+        .header {
+          flex-direction: column;
+        }
+
+        .row {
+          grid-template-columns: 1fr;
+          gap: 4px;
+        }
+      }`;
+}
+function graphNodePalette(status) {
+    switch (status) {
+        case "running":
+            return palette("var(--vscode-terminal-ansiGreen)");
+        case "stale":
+            return palette("var(--vscode-terminal-ansiYellow)");
+        case "blocked":
+            return palette("var(--vscode-terminal-ansiRed)");
+        case "in_progress":
+        case "review":
+            return palette("var(--vscode-terminal-ansiBlue)");
+        case "ready":
+            return palette("var(--vscode-terminal-ansiCyan)");
+        case "backlog":
+            return palette("var(--vscode-terminal-ansiMagenta)");
+        case "done":
+        case "superseded":
+        case "archived":
+            return palette("var(--vscode-terminal-ansiBrightBlack)");
+        default:
+            return palette("var(--vscode-panel-border)");
+    }
+}
+function palette(color) {
+    return {
+        fill: color,
+        stroke: color,
+        text: "var(--vscode-editor-foreground)",
+    };
+}
+function flattenTaskTree(nodes) {
+    return nodes.flatMap((node) => [node, ...flattenTaskTree(node.children)]);
+}
+function extractBodyContent(html) {
+    const match = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    return match?.[1]?.trim() ?? html.trim();
+}
+function wrapGraphLabel(label, maxLineLength, maxLines) {
+    const normalized = label.trim().replace(/\s+/g, " ");
+    if (normalized.length === 0) {
+        return [label];
+    }
+    const words = normalized.split(" ");
+    const lines = [];
+    let index = 0;
+    while (index < words.length && lines.length < maxLines) {
+        let line = "";
+        while (index < words.length) {
+            const word = words[index];
+            if (!word) {
+                break;
+            }
+            const candidate = line ? `${line} ${word}` : word;
+            if (candidate.length > maxLineLength && line) {
+                break;
+            }
+            line = candidate;
+            index += 1;
+            if (line.length >= maxLineLength) {
+                break;
+            }
+        }
+        lines.push(line);
+    }
+    if (index < words.length && lines.length > 0) {
+        const remaining = words.slice(index).join(" ");
+        lines[lines.length - 1] = `${lines[lines.length - 1]} ${remaining}`.trim();
+    }
+    return lines.map((line) => truncate(line, maxLineLength));
 }
-function escapeMarkdownCell(value) {
-    return value.replace(/\|/g, "\\|").replace(/\n/g, "<br/>");
+function escapeHtml(value) {
+    return value
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
 }
 //# sourceMappingURL=view-model.js.map