create-windy 0.6.12 → 0.6.15

package/template/apps/web/src/pages/system/components/agent-workflow/WorkflowRunDetail.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import { computed, shallowRef, watch } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Skeleton } from "@/components/ui/skeleton";
+import type { AgentWorkflowRunDetailResponse } from "@/services/agent-workflow-api";
+import {
+  workflowNodeTypeLabel,
+  workflowStatusLabel,
+  workflowStatusVariant,
+} from "./agent-workflow-presenter";
+import { latestWorkflowNodes } from "./workflow-graph-layout";
+import WorkflowNodeDetail from "./WorkflowNodeDetail.vue";
+import WorkflowRunGraph from "./WorkflowRunGraph.vue";
+import WorkflowRunSummary from "./WorkflowRunSummary.vue";
+
+const props = defineProps<{
+  detail?: AgentWorkflowRunDetailResponse;
+  loading: boolean;
+  error: string;
+}>();
+
+const selectedNodeRunId = shallowRef("");
+const visibleNodes = computed(() =>
+  latestWorkflowNodes(props.detail?.nodes ?? []),
+);
+const selectedNode = computed(() =>
+  props.detail?.nodes.find(
+    ({ nodeRunId }) => nodeRunId === selectedNodeRunId.value,
+  ),
+);
+
+watch(
+  () => props.detail?.run.runId,
+  () => {
+    selectedNodeRunId.value = preferredNodeRunId();
+  },
+  { immediate: true },
+);
+
+function preferredNodeRunId() {
+  const nodes = latestWorkflowNodes(props.detail?.nodes ?? []);
+  return (
+    nodes.find(({ status }) =>
+      ["running", "waiting", "ready", "retry-scheduled"].includes(status),
+    )?.nodeRunId ??
+    nodes.at(-1)?.nodeRunId ??
+    ""
+  );
+}
+
+function selectNode(nodeRunId: string) {
+  selectedNodeRunId.value = nodeRunId;
+}
+</script>
+
+<template>
+  <section class="min-w-0 space-y-4">
+    <div
+      v-if="error"
+      role="alert"
+      class="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
+    >
+      {{ error }}
+    </div>
+
+    <Card v-if="loading && !detail">
+      <CardContent class="space-y-5 p-5">
+        <Skeleton class="h-6 w-2/5" />
+        <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+          <Skeleton v-for="item in 4" :key="item" class="h-28" />
+        </div>
+        <Skeleton class="h-[28rem]" />
+      </CardContent>
+    </Card>
+
+    <Card v-else-if="!detail && !error">
+      <CardContent
+        class="flex min-h-52 items-center justify-center p-6 text-center text-sm text-muted-foreground"
+      >
+        请从左侧选择一个 Workflow Run。
+      </CardContent>
+    </Card>
+
+    <template v-else-if="detail">
+      <WorkflowRunSummary :detail="detail" />
+      <WorkflowRunGraph
+        :nodes="detail.nodes"
+        :edges="detail.edges"
+        :selected-node-run-id="selectedNodeRunId"
+        @select="selectNode"
+      />
+
+      <div class="grid min-w-0 gap-4 xl:grid-cols-[20rem_minmax(0,1fr)]">
+        <section
+          class="min-w-0 space-y-3"
+          aria-labelledby="workflow-node-list-title"
+        >
+          <div>
+            <h3 id="workflow-node-list-title" class="text-sm font-medium">
+              节点状态列表
+            </h3>
+            <p class="mt-1 text-xs text-muted-foreground">
+              图的语义化替代视图；可使用键盘逐项选择节点。
+            </p>
+          </div>
+          <ul role="list" class="max-h-[32rem] space-y-2 overflow-y-auto pr-1">
+            <li v-for="node in visibleNodes" :key="node.nodeRunId">
+              <Button
+                class="h-auto w-full justify-start whitespace-normal p-3 text-left"
+                :variant="
+                  node.nodeRunId === selectedNodeRunId ? 'secondary' : 'outline'
+                "
+                :aria-pressed="node.nodeRunId === selectedNodeRunId"
+                @click="selectNode(node.nodeRunId)"
+              >
+                <span class="min-w-0 flex-1 space-y-2">
+                  <span class="flex items-start justify-between gap-2">
+                    <span class="min-w-0">
+                      <span class="block truncate text-sm font-medium">
+                        {{ node.label }}
+                      </span>
+                      <span
+                        class="block truncate font-mono text-xs text-muted-foreground"
+                      >
+                        {{ node.nodeId }}
+                      </span>
+                    </span>
+                    <Badge :variant="workflowStatusVariant(node.status)">
+                      {{ workflowStatusLabel(node.status) }}
+                    </Badge>
+                  </span>
+                  <span
+                    class="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground"
+                  >
+                    <span>{{ workflowNodeTypeLabel(node.type) }}</span>
+                    <span
+                      >Attempt {{ node.attempt }}/{{ node.maxAttempts }}</span
+                    >
+                  </span>
+                </span>
+              </Button>
+            </li>
+          </ul>
+        </section>
+        <WorkflowNodeDetail class="min-w-0" :node="selectedNode" />
+      </div>
+    </template>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/agent-workflow/WorkflowRunGraph.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Handle, Position, VueFlow, type NodeMouseEvent } from "@vue-flow/core";
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import type {
+  AgentWorkflowEdgeProjection,
+  AgentWorkflowNodeProjection,
+} from "@/services/agent-workflow-api";
+import WorkflowNodeCard from "./WorkflowNodeCard.vue";
+import {
+  layoutWorkflowGraph,
+  type WorkflowGraphNodeData,
+} from "./workflow-graph-layout";
+
+const props = defineProps<{
+  nodes: readonly AgentWorkflowNodeProjection[];
+  edges: readonly AgentWorkflowEdgeProjection[];
+  selectedNodeRunId: string;
+}>();
+
+const emit = defineEmits<{
+  select: [nodeRunId: string];
+}>();
+
+const graph = computed(() =>
+  layoutWorkflowGraph(props.nodes, props.edges, props.selectedNodeRunId),
+);
+
+function selectGraphNode(event: NodeMouseEvent) {
+  const data = event.node.data as WorkflowGraphNodeData;
+  emit("select", data.projection.nodeRunId);
+}
+</script>
+
+<template>
+  <section class="space-y-3" aria-labelledby="workflow-graph-title">
+    <div>
+      <h3 id="workflow-graph-title" class="text-sm font-medium">Workflow 图</h3>
+      <p
+        id="workflow-graph-description"
+        class="mt-1 text-xs text-muted-foreground"
+      >
+        布局仅在浏览器中临时计算；可平移、缩放和选择节点，不支持编辑或保存布局。
+      </p>
+    </div>
+
+    <div
+      v-if="!graph.nodes.length"
+      class="flex min-h-72 items-center justify-center rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground"
+    >
+      该 Run 暂无可展示的节点状态。
+    </div>
+
+    <div v-else class="h-[28rem] overflow-hidden rounded-lg border bg-muted/20">
+      <VueFlow
+        :nodes="graph.nodes"
+        :edges="graph.edges"
+        :apply-default="false"
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+        :edges-updatable="false"
+        :elements-selectable="true"
+        :nodes-focusable="true"
+        :edges-focusable="false"
+        :delete-key-code="null"
+        :connect-on-click="false"
+        :zoom-on-double-click="false"
+        :pan-on-drag="true"
+        :pan-on-scroll="false"
+        :zoom-on-scroll="true"
+        :fit-view-on-init="true"
+        :min-zoom="0.35"
+        :max-zoom="1.5"
+        aria-describedby="workflow-graph-description"
+        @node-click="selectGraphNode"
+      >
+        <template #node-workflow="{ data }">
+          <Handle
+            type="target"
+            :position="Position.Left"
+            :connectable="false"
+            aria-hidden="true"
+          />
+          <WorkflowNodeCard :node="data.projection" :selected="data.selected" />
+          <Handle
+            type="source"
+            :position="Position.Right"
+            :connectable="false"
+            aria-hidden="true"
+          />
+        </template>
+      </VueFlow>
+    </div>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/agent-workflow/WorkflowRunList.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { formatDateTime } from "@/lib/date-time";
+import type { AgentWorkflowRunSummary } from "@/services/agent-workflow-api";
+import {
+  workflowStatusLabel,
+  workflowStatusVariant,
+} from "./agent-workflow-presenter";
+
+defineProps<{
+  runs: readonly AgentWorkflowRunSummary[];
+  selectedRunId: string;
+  loading: boolean;
+  error: string;
+}>();
+
+const emit = defineEmits<{
+  select: [runId: string];
+  refresh: [];
+}>();
+</script>
+
+<template>
+  <aside
+    class="flex min-h-0 flex-col rounded-lg border bg-card"
+    aria-labelledby="workflow-run-list-title"
+  >
+    <header class="border-b px-4 py-3">
+      <h2 id="workflow-run-list-title" class="font-semibold">Workflow Run</h2>
+      <p class="mt-1 text-xs leading-5 text-muted-foreground">
+        只读查看当前授权范围内的持久运行事实。
+      </p>
+    </header>
+
+    <div
+      v-if="error"
+      role="alert"
+      class="m-3 rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive"
+    >
+      <p>{{ error }}</p>
+      <Button class="mt-2" size="sm" variant="outline" @click="emit('refresh')">
+        重试
+      </Button>
+    </div>
+
+    <div v-if="loading && !runs.length" class="space-y-3 p-3">
+      <div v-for="row in 4" :key="row" class="space-y-2 rounded-md border p-3">
+        <Skeleton class="h-4 w-4/5" />
+        <Skeleton class="h-3 w-2/3" />
+      </div>
+    </div>
+
+    <p
+      v-else-if="!runs.length && !error"
+      class="flex min-h-52 items-center justify-center p-6 text-center text-sm text-muted-foreground"
+    >
+      当前没有可访问的 Workflow Run。
+    </p>
+
+    <ul v-else role="list" class="min-h-0 space-y-2 overflow-y-auto p-3">
+      <li v-for="run in runs" :key="run.runId">
+        <Button
+          class="h-auto w-full justify-start whitespace-normal p-3 text-left"
+          :variant="run.runId === selectedRunId ? 'secondary' : 'ghost'"
+          :aria-pressed="run.runId === selectedRunId"
+          @click="emit('select', run.runId)"
+        >
+          <span class="min-w-0 flex-1 space-y-2">
+            <span class="flex items-start justify-between gap-2">
+              <span class="min-w-0">
+                <span class="block truncate text-sm font-medium">
+                  {{ run.workflowLabel }}
+                </span>
+                <span
+                  class="block truncate font-mono text-xs text-muted-foreground"
+                >
+                  {{ run.runId }}
+                </span>
+              </span>
+              <Badge :variant="workflowStatusVariant(run.status)">
+                {{ workflowStatusLabel(run.status) }}
+              </Badge>
+            </span>
+            <span
+              class="flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted-foreground"
+            >
+              <span>v{{ run.workflowVersion }}</span>
+              <span
+                >{{ run.currentNodeCount }}/{{ run.totalNodeCount }} 节点</span
+              >
+              <span>{{ formatDateTime(run.updatedAt) }}</span>
+            </span>
+          </span>
+        </Button>
+      </li>
+    </ul>
+  </aside>
+</template>

package/template/apps/web/src/pages/system/components/agent-workflow/WorkflowRunSummary.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { formatDateTime } from "@/lib/date-time";
+import type {
+  AgentWorkflowMeasuredCost,
+  AgentWorkflowMeasuredCount,
+  AgentWorkflowRunDetailResponse,
+} from "@/services/agent-workflow-api";
+import {
+  formatCostMicros,
+  formatDuration,
+  formatInteger,
+  workflowStatusLabel,
+  workflowStatusVariant,
+} from "./agent-workflow-presenter";
+
+const props = defineProps<{
+  detail: AgentWorkflowRunDetailResponse;
+}>();
+
+const inputTokenLabel = computed(() =>
+  measuredCountLabel(props.detail.run.usage.inputTokens),
+);
+const outputTokenLabel = computed(() =>
+  measuredCountLabel(props.detail.run.usage.outputTokens),
+);
+const costLabel = computed(() =>
+  measuredCostLabel(props.detail.run.usage.cost),
+);
+
+function measuredCountLabel(value: AgentWorkflowMeasuredCount) {
+  return value.status === "measured"
+    ? `${formatInteger(value.value)}（${measurementSourceLabel(value.source)}）`
+    : `未知（${value.reasonCode}）`;
+}
+
+function measuredCostLabel(value: AgentWorkflowMeasuredCost) {
+  return value.status === "measured"
+    ? `${formatCostMicros(value.amountMicros, value.currency)}（${measurementSourceLabel(value.source)}）`
+    : `未知（${value.reasonCode}）`;
+}
+
+function measurementSourceLabel(
+  source: "provider-reported" | "host-measured" | "catalog-estimated",
+) {
+  if (source === "provider-reported") return "Provider 上报";
+  if (source === "host-measured") return "Host 实测";
+  return "目录估算";
+}
+</script>
+
+<template>
+  <section class="space-y-3" aria-labelledby="workflow-summary-title">
+    <div class="flex flex-wrap items-start justify-between gap-3">
+      <div class="min-w-0">
+        <h2 id="workflow-summary-title" class="text-lg font-semibold">
+          {{ detail.run.workflowLabel }}
+        </h2>
+        <p class="mt-1 break-all font-mono text-xs text-muted-foreground">
+          {{ detail.run.runId }}
+        </p>
+      </div>
+      <Badge :variant="workflowStatusVariant(detail.run.status)">
+        {{ workflowStatusLabel(detail.run.status) }}
+      </Badge>
+    </div>
+
+    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>节点进度</CardDescription>
+          <CardTitle class="text-xl">
+            {{ detail.run.currentNodeCount }}/{{ detail.run.totalNodeCount }}
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="text-xs text-muted-foreground">
+          更新于 {{ formatDateTime(detail.run.updatedAt) }}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>运行时长</CardDescription>
+          <CardTitle class="text-xl">
+            {{ formatDuration(detail.run.usage.durationMs) }}
+          </CardTitle>
+        </CardHeader>
+        <CardContent class="text-xs text-muted-foreground">
+          上限 {{ formatInteger(detail.run.budget.maxDurationSeconds) }} 秒
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>Token</CardDescription>
+          <CardTitle class="text-base">输入 {{ inputTokenLabel }}</CardTitle>
+        </CardHeader>
+        <CardContent class="text-xs text-muted-foreground">
+          输出 {{ outputTokenLabel }}；未知不会按 0 展示
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="pb-2">
+          <CardDescription>成本</CardDescription>
+          <CardTitle class="break-all text-base">{{ costLabel }}</CardTitle>
+        </CardHeader>
+        <CardContent class="text-xs text-muted-foreground">
+          预算 {{ formatInteger(detail.run.budget.maxCostMicros) }} 微单位
+        </CardContent>
+      </Card>
+    </div>
+
+    <dl
+      class="grid gap-3 rounded-lg border bg-card p-4 text-xs sm:grid-cols-2 xl:grid-cols-4"
+    >
+      <div>
+        <dt class="text-muted-foreground">Release</dt>
+        <dd class="mt-1 break-all font-mono">{{ detail.release.releaseId }}</dd>
+      </div>
+      <div>
+        <dt class="text-muted-foreground">Release Digest</dt>
+        <dd class="mt-1 break-all font-mono">
+          {{ detail.release.releaseDigest }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-muted-foreground">Runtime / Route</dt>
+        <dd class="mt-1">
+          {{ detail.release.runtimeVersion }} /
+          {{ detail.release.routeVersion }}
+        </dd>
+      </div>
+      <div>
+        <dt class="text-muted-foreground">截止时间</dt>
+        <dd class="mt-1">{{ formatDateTime(detail.run.deadlineAt) }}</dd>
+      </div>
+    </dl>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/agent-workflow/agent-workflow-presenter.ts

@@ -0,0 +1,74 @@
+import type {
+  AgentWorkflowNodeRunStatus,
+  AgentWorkflowNodeType,
+  AgentWorkflowRunStatus,
+} from "@/services/agent-workflow-api";
+
+type Status = AgentWorkflowRunStatus | AgentWorkflowNodeRunStatus;
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline";
+
+const STATUS_LABELS: Record<Status, string> = {
+  accepted: "已接受",
+  pending: "待调度",
+  ready: "就绪",
+  running: "运行中",
+  waiting: "等待中",
+  "retry-scheduled": "等待重试",
+  completed: "已完成",
+  failed: "失败",
+  cancelled: "已取消",
+  skipped: "已跳过",
+  "timed-out": "已超时",
+};
+
+const NODE_TYPE_LABELS: Record<AgentWorkflowNodeType, string> = {
+  model: "模型",
+  tool: "工具",
+  subagent: "子 Agent",
+  condition: "条件",
+  parallel: "并行",
+  join: "汇合",
+  approval: "审批",
+  job: "后台作业",
+  wait: "等待",
+  artifact: "Artifact",
+  final: "最终输出",
+};
+
+export function workflowStatusLabel(status: Status) {
+  return STATUS_LABELS[status];
+}
+
+export function workflowStatusVariant(status: Status): BadgeVariant {
+  if (status === "failed" || status === "timed-out") return "destructive";
+  if (status === "completed") return "default";
+  if (status === "running" || status === "ready") return "secondary";
+  return "outline";
+}
+
+export function workflowNodeTypeLabel(type: AgentWorkflowNodeType) {
+  return NODE_TYPE_LABELS[type];
+}
+
+export function formatDuration(durationMs: number) {
+  if (durationMs < 1_000) return `${durationMs} ms`;
+  const seconds = durationMs / 1_000;
+  if (seconds < 60) return `${seconds.toFixed(seconds < 10 ? 1 : 0)} 秒`;
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes} 分 ${remainingSeconds} 秒`;
+}
+
+export function formatInteger(value: number) {
+  return new Intl.NumberFormat("zh-CN").format(value);
+}
+
+export function formatByteSize(value: number) {
+  if (value < 1_024) return `${value} B`;
+  if (value < 1_048_576) return `${(value / 1_024).toFixed(1)} KiB`;
+  return `${(value / 1_048_576).toFixed(1)} MiB`;
+}
+
+export function formatCostMicros(value: number, currency: string) {
+  return `${currency} ${(value / 1_000_000).toFixed(6)}`;
+}

package/template/apps/web/src/pages/system/components/agent-workflow/workflow-graph-layout.ts

@@ -0,0 +1,108 @@
+import { MarkerType, Position } from "@vue-flow/core";
+import type { Edge, Node } from "@vue-flow/core";
+import type {
+  AgentWorkflowEdgeProjection,
+  AgentWorkflowNodeProjection,
+} from "@/services/agent-workflow-api";
+
+export interface WorkflowGraphNodeData {
+  readonly projection: AgentWorkflowNodeProjection;
+  readonly selected: boolean;
+}
+
+export function latestWorkflowNodes(
+  nodes: readonly AgentWorkflowNodeProjection[],
+) {
+  const latest = new Map<string, AgentWorkflowNodeProjection>();
+  for (const node of nodes) {
+    const current = latest.get(node.nodeId);
+    if (!current || node.attempt > current.attempt)
+      latest.set(node.nodeId, node);
+  }
+  return [...latest.values()];
+}
+
+export function layoutWorkflowGraph(
+  nodes: readonly AgentWorkflowNodeProjection[],
+  edges: readonly AgentWorkflowEdgeProjection[],
+  selectedNodeRunId: string,
+): { nodes: Node<WorkflowGraphNodeData>[]; edges: Edge[] } {
+  const latestNodes = latestWorkflowNodes(nodes);
+  const nodeIds = new Set(latestNodes.map(({ nodeId }) => nodeId));
+  const knownEdges = edges.filter(
+    ({ from, to }) => nodeIds.has(from) && nodeIds.has(to),
+  );
+  const depths = calculateDepths(latestNodes, knownEdges);
+  const rowByDepth = new Map<number, number>();
+
+  return {
+    nodes: latestNodes.map((node) => {
+      const depth = depths.get(node.nodeId) ?? 0;
+      const row = rowByDepth.get(depth) ?? 0;
+      rowByDepth.set(depth, row + 1);
+      return {
+        id: node.nodeId,
+        type: "workflow",
+        position: { x: depth * 300, y: row * 150 },
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        data: {
+          projection: node,
+          selected: node.nodeRunId === selectedNodeRunId,
+        },
+        draggable: false,
+        connectable: false,
+        deletable: false,
+        selectable: true,
+        focusable: true,
+        ariaLabel: `${node.label}，${node.type}，${node.status}`,
+      };
+    }),
+    edges: knownEdges.map((edge, index) => ({
+      id: `${edge.from}-${edge.to}-${edge.branch ?? index}`,
+      source: edge.from,
+      target: edge.to,
+      label: edge.branch,
+      selectable: false,
+      focusable: false,
+      animated: false,
+      markerEnd: MarkerType.ArrowClosed,
+    })),
+  };
+}
+
+function calculateDepths(
+  nodes: readonly AgentWorkflowNodeProjection[],
+  edges: readonly AgentWorkflowEdgeProjection[],
+) {
+  const order = new Map(nodes.map((node, index) => [node.nodeId, index]));
+  const indegree = new Map(nodes.map((node) => [node.nodeId, 0]));
+  const outgoing = new Map<string, string[]>();
+  const depths = new Map(nodes.map((node) => [node.nodeId, 0]));
+
+  for (const edge of edges) {
+    indegree.set(edge.to, (indegree.get(edge.to) ?? 0) + 1);
+    outgoing.set(edge.from, [...(outgoing.get(edge.from) ?? []), edge.to]);
+  }
+
+  const queue = nodes
+    .filter(({ nodeId }) => indegree.get(nodeId) === 0)
+    .map(({ nodeId }) => nodeId);
+  while (queue.length) {
+    const nodeId = queue.shift();
+    if (!nodeId) continue;
+    const nextNodeIds = [...(outgoing.get(nodeId) ?? [])].sort(
+      (left, right) => (order.get(left) ?? 0) - (order.get(right) ?? 0),
+    );
+    for (const nextNodeId of nextNodeIds) {
+      depths.set(
+        nextNodeId,
+        Math.max(depths.get(nextNodeId) ?? 0, (depths.get(nodeId) ?? 0) + 1),
+      );
+      const remaining = (indegree.get(nextNodeId) ?? 1) - 1;
+      indegree.set(nextNodeId, remaining);
+      if (remaining === 0) queue.push(nextNodeId);
+    }
+  }
+  return depths;
+}