create-windy 0.6.11 → 0.6.14

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

@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { formatDateTime } from "@/lib/date-time";
+import type {
+  AgentWorkflowArtifactProjection,
+  AgentWorkflowNodeProjection,
+} from "@/services/agent-workflow-api";
+import {
+  formatByteSize,
+  workflowNodeTypeLabel,
+  workflowStatusLabel,
+  workflowStatusVariant,
+} from "./agent-workflow-presenter";
+
+const props = defineProps<{
+  node?: AgentWorkflowNodeProjection;
+}>();
+
+const artifacts = computed(() => {
+  if (!props.node) return [];
+  return [
+    ...props.node.inputArtifacts.map((artifact) => ({
+      direction: "输入",
+      artifact,
+    })),
+    ...props.node.outputArtifacts.map((artifact) => ({
+      direction: "输出",
+      artifact,
+    })),
+  ];
+});
+
+function artifactSource(artifact: AgentWorkflowArtifactProjection) {
+  return `${artifact.source.moduleKey}/${artifact.source.kind}/${artifact.source.id}@${artifact.source.version}`;
+}
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle class="text-base">节点事实</CardTitle>
+    </CardHeader>
+    <CardContent v-if="!node" class="text-sm text-muted-foreground">
+      从图或下方节点列表选择一个节点，查看持久状态与受控交付坐标。
+    </CardContent>
+    <CardContent v-else class="space-y-5">
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0">
+          <h3 class="font-medium">{{ node.label }}</h3>
+          <p class="mt-1 break-all font-mono text-xs text-muted-foreground">
+            {{ node.nodeId }} · {{ node.nodeRunId }}
+          </p>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <Badge variant="outline">{{
+            workflowNodeTypeLabel(node.type)
+          }}</Badge>
+          <Badge :variant="workflowStatusVariant(node.status)">
+            {{ workflowStatusLabel(node.status) }}
+          </Badge>
+        </div>
+      </div>
+
+      <dl class="grid gap-3 text-xs sm:grid-cols-2 xl:grid-cols-4">
+        <div>
+          <dt class="text-muted-foreground">Attempt</dt>
+          <dd class="mt-1">{{ node.attempt }}/{{ node.maxAttempts }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted-foreground">开始时间</dt>
+          <dd class="mt-1">{{ formatDateTime(node.startedAt) }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted-foreground">终态时间</dt>
+          <dd class="mt-1">{{ formatDateTime(node.finishedAt) }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted-foreground">安全错误码</dt>
+          <dd class="mt-1 break-all font-mono">
+            {{ node.safeErrorCode ?? "-" }}
+          </dd>
+        </div>
+      </dl>
+
+      <section v-if="node.resultReceipt" class="space-y-2">
+        <h4 class="text-sm font-medium">结果 Receipt</h4>
+        <dl class="grid gap-3 rounded-md border p-3 text-xs sm:grid-cols-2">
+          <div>
+            <dt class="text-muted-foreground">Receipt ID</dt>
+            <dd class="mt-1 break-all font-mono">
+              {{ node.resultReceipt.receiptId }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">Result Digest</dt>
+            <dd class="mt-1 break-all font-mono">
+              {{ node.resultReceipt.resultDigest }}
+            </dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">条件分支</dt>
+            <dd class="mt-1">{{ node.resultReceipt.selectedBranch ?? "-" }}</dd>
+          </div>
+          <div>
+            <dt class="text-muted-foreground">记录时间</dt>
+            <dd class="mt-1">
+              {{ formatDateTime(node.resultReceipt.recordedAt) }}
+            </dd>
+          </div>
+        </dl>
+      </section>
+
+      <section class="space-y-2">
+        <div>
+          <h4 class="text-sm font-medium">ArtifactRef</h4>
+          <p class="mt-1 text-xs text-muted-foreground">
+            仅展示稳定坐标；打开 Artifact 时仍须重新授权并签发短期访问凭证。
+          </p>
+        </div>
+        <p
+          v-if="!artifacts.length"
+          class="rounded-md border border-dashed p-4 text-center text-xs text-muted-foreground"
+        >
+          该节点没有持久 ArtifactRef。
+        </p>
+        <ul v-else role="list" class="space-y-2">
+          <li
+            v-for="item in artifacts"
+            :key="`${item.direction}-${item.artifact.artifactId}`"
+            class="rounded-md border p-3 text-xs"
+          >
+            <div class="flex flex-wrap items-center justify-between gap-2">
+              <span class="font-medium">
+                {{ item.direction }} · {{ item.artifact.kind }}
+              </span>
+              <span class="text-muted-foreground">
+                {{ item.artifact.mediaType }} ·
+                {{ formatByteSize(item.artifact.byteSize) }}
+              </span>
+            </div>
+            <dl class="mt-2 grid gap-2 sm:grid-cols-2">
+              <div>
+                <dt class="text-muted-foreground">Artifact ID</dt>
+                <dd class="break-all font-mono">
+                  {{ item.artifact.artifactId }}
+                </dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground">SHA-256</dt>
+                <dd class="break-all font-mono">{{ item.artifact.sha256 }}</dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground">Source</dt>
+                <dd class="break-all font-mono">
+                  {{ artifactSource(item.artifact) }}
+                </dd>
+              </div>
+              <div>
+                <dt class="text-muted-foreground">Retention</dt>
+                <dd class="break-all font-mono">
+                  {{ item.artifact.retentionPolicyKey }}
+                </dd>
+              </div>
+            </dl>
+          </li>
+        </ul>
+      </section>
+    </CardContent>
+  </Card>
+</template>

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>