create-windy 0.8.2 → 0.9.1

package/template/apps/web/src/pages/system/components/agent-workbench/AgentWorkbench.vue

@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { onBeforeRouteLeave, useRoute } from "vue-router";
+import type {
+  AgentWorkbenchRecordingSummaryV1,
+  JsonValue,
+} from "@southwind-ai/shared";
+import { Button } from "@/components/ui/button";
+import { useUnsavedChangesConfirmation } from "@/composables/useUnsavedChangesConfirmation";
+import { useAgentWorkbench } from "../../composables/useAgentWorkbench";
+import TestRunComposer from "./TestRunComposer.vue";
+import WorkbenchSessionList from "./WorkbenchSessionList.vue";
+import SessionReplayTimeline from "./SessionReplayTimeline.vue";
+import DraftLeaveDialog from "./DraftLeaveDialog.vue";
+import { formatJson } from "./catalog-presenter";
+const state = useAgentWorkbench();
+const confirmation = useUnsavedChangesConfirmation();
+const route = useRoute();
+const operationKey = shallowRef("");
+const input = shallowRef("{}");
+const baseline = shallowRef("{}");
+const inputError = shallowRef("");
+const mode = shallowRef<"history" | "test">("history");
+const dirty = computed(() => input.value !== baseline.value);
+function confirmChanges() {
+  return dirty.value
+    ? confirmation.request(async () => {
+        input.value = baseline.value;
+        return true;
+      })
+    : Promise.resolve(true);
+}
+async function select(session: AgentWorkbenchRecordingSummaryV1) {
+  if (!(await confirmChanges())) return;
+  mode.value = "history";
+  await state.select(session);
+}
+async function changeOperation(key: string) {
+  if (!(await confirmChanges())) return;
+  operationKey.value = key;
+  input.value = "{}";
+  baseline.value = "{}";
+  inputError.value = "";
+}
+async function switchMode(next: "history" | "test") {
+  if (!(await confirmChanges())) return;
+  mode.value = next;
+}
+async function newSession() {
+  if (!(await confirmChanges())) return;
+  await state.select();
+  mode.value = "test";
+}
+async function refresh() {
+  if (!(await confirmChanges())) return;
+  await state.refresh();
+}
+async function start() {
+  inputError.value = "";
+  let parsed: JsonValue;
+  try {
+    parsed = JSON.parse(input.value) as JsonValue;
+  } catch {
+    inputError.value = "输入必须是有效 JSON，请按 Operation Schema 填写。";
+    return;
+  }
+  const operation = state.operations.value.find(
+    (operation) => operation.key === operationKey.value,
+  );
+  if (!operation?.selectable) {
+    inputError.value = "当前操作不可调用，请刷新授权状态。";
+    return;
+  }
+  if (
+    new TextEncoder().encode(input.value).length >
+    operation.limits.maxInputBytes
+  ) {
+    inputError.value = "测试输入超出此操作大小限制。";
+    return;
+  }
+  if (await state.start(operationKey.value, parsed))
+    baseline.value = input.value;
+}
+function beforeUnload(event: BeforeUnloadEvent) {
+  if (dirty.value) {
+    event.preventDefault();
+    event.returnValue = "";
+  }
+}
+onBeforeRouteLeave(confirmChanges);
+onMounted(() => window.addEventListener("beforeunload", beforeUnload));
+onBeforeUnmount(() => window.removeEventListener("beforeunload", beforeUnload));
+// Deep links select a recording only after the user explicitly refreshes / the initial list loads.
+const linkedSession = computed(() =>
+  typeof route.query.sessionId === "string" ? route.query.sessionId : "",
+);
+</script>
+<template>
+  <section class="space-y-4">
+    <div class="flex flex-wrap items-center gap-2">
+      <Button
+        variant="outline"
+        :disabled="state.loading.value"
+        @click="refresh"
+        >{{ state.loading.value ? "加载中…" : "刷新会话与规则" }}</Button
+      ><Button
+        v-if="state.canManage.value"
+        variant="outline"
+        :disabled="state.starting.value"
+        @click="newSession"
+        >新建测试会话</Button
+      ><span v-if="state.running.value" class="text-xs text-muted-foreground"
+        >离开只断开查看，不会自动取消运行。</span
+      >
+    </div>
+    <p
+      v-if="state.error.value"
+      role="alert"
+      class="rounded-md border border-destructive/30 p-4 text-sm text-destructive"
+    >
+      {{ state.error.value }}
+    </p>
+    <Button
+      v-if="
+        linkedSession &&
+        !state.selected.value &&
+        state.sessions.value.find(
+          (session) => session.sessionId === linkedSession,
+        )
+      "
+      variant="outline"
+      @click="
+        select(
+          state.sessions.value.find(
+            (session) => session.sessionId === linkedSession,
+          )!,
+        )
+      "
+      >打开链接中的会话 {{ linkedSession }}</Button
+    >
+    <div class="grid items-start gap-4 lg:grid-cols-[20rem_minmax(0,1fr)]">
+      <WorkbenchSessionList
+        :sessions="state.sessions.value"
+        :selected="state.selected.value"
+        @select="select"
+      />
+      <div class="min-w-0 space-y-4">
+        <header class="space-y-2">
+          <h2 class="text-lg font-medium">
+            {{
+              state.selected.value?.title || "选择业务会话，或新建受治理测试"
+            }}
+          </h2>
+          <div class="flex gap-2" role="group" aria-label="工作台模式">
+            <Button
+              :variant="mode === 'history' ? 'default' : 'outline'"
+              :aria-pressed="mode === 'history'"
+              @click="switchMode('history')"
+              >历史只读回放</Button
+            ><Button
+              v-if="state.canManage.value"
+              :variant="mode === 'test' ? 'default' : 'outline'"
+              :aria-pressed="mode === 'test'"
+              @click="switchMode('test')"
+              >另起真实运行</Button
+            >
+          </div>
+        </header>
+        <template v-if="mode === 'test'">
+          <p
+            v-if="state.selected.value?.source === 'business'"
+            class="text-sm text-muted-foreground"
+          >
+            业务历史只读。开始测试会创建独立 Session，并重新计算当前授权。
+          </p>
+          <TestRunComposer
+            :operations="state.operations.value"
+            :operation-key="operationKey"
+            :input="input"
+            :starting="state.starting.value"
+            :running="state.running.value"
+            :can-manage="state.canManage.value"
+            @operation="changeOperation"
+            @update:input="input = $event"
+            @start="start"
+          />
+          <p v-if="inputError" role="alert" class="text-sm text-destructive">
+            {{ inputError }}
+          </p>
+        </template>
+        <section
+          v-if="state.liveRun.value"
+          class="space-y-3 rounded-lg border bg-card p-4"
+          aria-label="实时测试运行"
+        >
+          <div class="flex flex-wrap items-center justify-between gap-2">
+            <p class="break-all text-sm">
+              {{ state.liveRun.value.runId }} · {{ state.liveRun.value.status }}
+            </p>
+            <Button
+              v-if="state.running.value"
+              variant="destructive"
+              :disabled="state.cancelling.value"
+              @click="state.cancel"
+              >{{ state.cancelling.value ? "请求取消中…" : "取消运行" }}</Button
+            >
+          </div>
+          <ol class="space-y-2">
+            <li
+              v-for="event in state.liveEvents.value"
+              :key="event.sequence"
+              class="rounded-md bg-muted p-2 text-xs"
+            >
+              #{{ event.sequence }} · {{ event.type }} · {{ event.summary }}
+            </li>
+          </ol>
+          <div v-if="state.output.value !== undefined">
+            <h3 class="mb-2 text-sm font-medium">受控最终结果</h3>
+            <pre
+              class="max-h-80 overflow-auto rounded-md bg-muted p-3 text-xs"
+              >{{ formatJson(state.output.value) }}</pre>
+          </div>
+        </section>
+        <SessionReplayTimeline
+          :key="`${state.selected.value?.source}:${state.selected.value?.sessionId}`"
+          :recording="state.recording.value"
+        />
+      </div>
+    </div>
+    <DraftLeaveDialog
+      :open="confirmation.open.value"
+      @cancel="confirmation.cancel"
+      @discard="confirmation.save"
+    />
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/agent-workbench/DraftLeaveDialog.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+defineProps<{ open: boolean }>();
+defineEmits<{ cancel: []; discard: [] }>();
+</script>
+<template>
+  <Dialog :open="open"
+    ><DialogContent
+      :show-close-button="false"
+      @escape-key-down="(event) => event.preventDefault()"
+      @interact-outside="(event) => event.preventDefault()"
+      ><DialogHeader
+        ><DialogTitle>测试输入尚未提交</DialogTitle
+        ><DialogDescription
+          >切换会话或离开将丢弃当前输入。取消可继续编辑；放弃输入不会创建任何运行。</DialogDescription
+        ></DialogHeader
+      ><DialogFooter
+        ><Button variant="outline" @click="$emit('cancel')"
+          >取消并继续编辑</Button
+        ><Button variant="destructive" @click="$emit('discard')"
+          >放弃输入并继续</Button
+        ></DialogFooter
+      ></DialogContent
+    ></Dialog
+  >
+</template>

package/template/apps/web/src/pages/system/components/agent-workbench/ReplayEventDetail.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type {
+  AgentWorkbenchEventV1,
+  AgentWorkbenchRecordingV1,
+} from "@southwind-ai/shared";
+import { computed } from "vue";
+import { formatJson } from "./catalog-presenter";
+const props = defineProps<{
+  event?: AgentWorkbenchEventV1;
+  recording?: AgentWorkbenchRecordingV1;
+  events?: readonly AgentWorkbenchEventV1[];
+  sessionId?: string;
+}>();
+defineEmits<{ seek: [index: number] }>();
+const run = computed(() =>
+  props.recording?.runs.find((run) => run.runId === props.event?.runId),
+);
+const workflow = computed(() =>
+  props.recording?.workflows.find(
+    (workflow) =>
+      workflow.workflowRunId === props.event?.workflowRunId ||
+      Boolean(
+        props.event?.runId &&
+        workflow.nodes.some((node) => node.agentRunId === props.event?.runId),
+      ),
+  ),
+);
+function target(runId?: string, nodeRunId?: string) {
+  const events = props.events ?? props.recording?.timeline ?? [];
+  if (nodeRunId) {
+    const nodeIndex = events.findIndex(
+      (event) => event.nodeRunId === nodeRunId,
+    );
+    if (nodeIndex >= 0) return nodeIndex;
+  }
+  return runId ? events.findIndex((event) => event.runId === runId) : -1;
+}
+function approvalTarget(workItemId: string) {
+  return (props.events ?? []).findIndex(
+    (event) => event.workItemId === workItemId,
+  );
+}
+function toolTarget(type: string) {
+  if (!props.event?.toolCallId) return -1;
+  return (props.events ?? []).findIndex(
+    (event) =>
+      event.toolCallId === props.event?.toolCallId && event.type === type,
+  );
+}
+</script>
+<template>
+  <section
+    class="min-w-0 space-y-3 rounded-lg border bg-card p-4"
+    aria-label="调用关联详情"
+  >
+    <h3 class="font-medium">调用与关联结果</h3>
+    <p v-if="!event" class="text-sm text-muted-foreground">
+      选择事件查看模型、工具、工作流与结果关联。
+    </p>
+    <template v-else>
+      <p class="text-sm">{{ event.summary }}</p>
+      <dl class="grid grid-cols-[6rem_minmax(0,1fr)] gap-2 text-xs">
+        <dt>所属 Session</dt>
+        <dd class="break-all">{{ run?.sessionId || sessionId || "未记录" }}</dd>
+        <dt>事件</dt>
+        <dd>{{ event.sequence }} · {{ event.type }}</dd>
+        <dt>Turn / Step</dt>
+        <dd class="break-all">
+          {{ event.turnId || "未记录" }} / {{ event.stepId || "未记录" }}
+        </dd>
+        <dt>Run</dt>
+        <dd class="break-all">{{ event.runId || "未关联" }}</dd>
+        <dt>模型 Attempt</dt>
+        <dd class="break-all">
+          {{ event.modelAttemptId || "未记录"
+          }}<span v-if="event.attemptSequence">
+            · 第 {{ event.attemptSequence }} 次</span
+          >
+        </dd>
+        <dt>Tool</dt>
+        <dd class="break-all">
+          {{ event.toolKey || "未关联" }} · {{ event.toolCallId || "—" }}
+        </dd>
+        <dt>审批 / 产物</dt>
+        <dd class="break-all">
+          {{ event.workItemId || "—" }} / {{ event.artifactId || "—" }}
+        </dd>
+        <dt>结果状态</dt>
+        <dd>{{ event.outcome || run?.status || "未记录" }}</dd>
+        <template v-if="event.usage"
+          ><dt>Usage</dt>
+          <dd>
+            输入 {{ event.usage.inputTokens ?? "未记录" }} / 输出
+            {{ event.usage.outputTokens ?? "未记录" }} tokens；费用
+            {{ event.usage.costMicros ?? "未记录" }} micros
+          </dd></template
+        >
+      </dl>
+      <div v-if="event.toolCallId" class="flex gap-3 text-xs">
+        <button
+          v-if="toolTarget('tool.requested') >= 0"
+          type="button"
+          class="text-primary underline"
+          @click="$emit('seek', toolTarget('tool.requested'))"
+        >
+          定位工具请求
+        </button>
+        <button
+          v-if="toolTarget('tool.completed') >= 0"
+          type="button"
+          class="text-primary underline"
+          @click="$emit('seek', toolTarget('tool.completed'))"
+        >
+          定位工具结果
+        </button>
+      </div>
+      <div v-if="run">
+        <p class="text-sm">{{ run.operationKey }} · {{ run.status }}</p>
+        <p
+          v-if="run.correlationStatus !== 'complete'"
+          class="text-xs text-muted-foreground"
+        >
+          部分运行关联：{{ run.missing.join("、") }}
+        </p>
+        <pre
+          v-if="run.result?.output !== undefined"
+          class="max-h-72 overflow-auto rounded-md bg-muted p-3 text-xs"
+          >{{ formatJson(run.result.output) }}</pre>
+      </div>
+      <div v-if="workflow" class="space-y-2 border-t pt-3">
+        <h4 class="text-sm font-medium">
+          工作流 {{ workflow.title }} · {{ workflow.status }}
+        </h4>
+        <div class="space-y-2">
+          <div
+            v-for="node in workflow.nodes"
+            :key="node.nodeRunId"
+            class="rounded-md border p-2 text-xs"
+          >
+            <p>
+              {{ node.nodeId }} · {{ node.type }} · {{ node.status }} · 尝试
+              {{ node.attempt }}
+            </p>
+            <p v-if="node.workItemId" class="break-all">
+              审批任务：{{ node.workItemId }}
+            </p>
+            <button
+              v-if="node.workItemId && approvalTarget(node.workItemId) >= 0"
+              type="button"
+              class="mt-1 mr-3 text-primary underline"
+              @click="$emit('seek', approvalTarget(node.workItemId))"
+            >
+              定位审批记录
+            </button>
+            <p v-if="node.selectedBranch">分支：{{ node.selectedBranch }}</p>
+            <p v-if="node.artifactIds.length">
+              产物：{{ node.artifactIds.join("、") }}
+            </p>
+            <button
+              v-if="target(node.agentRunId, node.nodeRunId) >= 0"
+              type="button"
+              class="mt-1 text-primary underline"
+              @click="$emit('seek', target(node.agentRunId, node.nodeRunId))"
+            >
+              定位节点 / Run 的记录
+            </button>
+            <p v-else class="mt-1 text-muted-foreground">
+              缺少此节点的可回放事件
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+  </section>
+</template>

package/template/apps/web/src/pages/system/components/agent-workbench/SessionReplayTimeline.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { AgentWorkbenchRecordingV1 } from "@southwind-ai/shared";
+import { Button } from "@/components/ui/button";
+import { useSessionReplay } from "../../composables/useSessionReplay";
+import { replayEntries } from "./replay-presenter";
+import ReplayEventDetail from "./ReplayEventDetail.vue";
+const props = defineProps<{ recording?: AgentWorkbenchRecordingV1 }>();
+const entries = computed(() => replayEntries(props.recording));
+const events = computed(() => entries.value.map((entry) => entry.event));
+const replay = useSessionReplay(events);
+</script>
+<template>
+  <section class="space-y-4" aria-label="只读会话回放">
+    <header class="rounded-lg border bg-card p-4">
+      <h2 class="font-medium">只读历史回放</h2>
+      <p class="mt-1 text-xs text-muted-foreground">
+        播放只移动本地查看位置，不重新调用模型或工具，不产生新的使用计量。每个日志按原始序号播放，关联子日志展开不代表全局时间排序。
+      </p>
+      <p v-if="recording" class="mt-2 text-xs">
+        来源：{{ recording.source }} · {{ recording.sessionId }} · 关联{{
+          recording.correlationStatus === "complete"
+            ? "完整"
+            : recording.correlationStatus === "partial"
+              ? "部分缺失"
+              : "缺失"
+        }}
+      </p>
+      <ol
+        v-if="recording?.segments?.length"
+        class="mt-3 space-y-1 text-xs"
+        aria-label="父子 Session 回放范围"
+      >
+        <li
+          v-for="(segment, index) in recording.segments"
+          :key="segment.sessionId"
+          class="break-all"
+        >
+          {{ index + 1 }}. Session {{ segment.sessionId }} · 原始序号截至 #{{
+            segment.throughSequence
+          }}{{
+            segment.sessionId === recording.sessionId
+              ? "（当前分支）"
+              : "（父分支）"
+          }}
+        </li>
+      </ol>
+      <p
+        v-if="recording?.missing.length"
+        class="mt-2 text-sm text-muted-foreground"
+      >
+        缺失记录：{{ recording.missing.join("、") }}
+      </p>
+    </header>
+    <div class="flex flex-wrap items-center gap-2">
+      <Button
+        variant="outline"
+        :disabled="!entries.length"
+        @click="replay.playing.value ? replay.pause() : replay.play()"
+        >{{ replay.playing.value ? "暂停" : "播放" }}</Button
+      ><Button
+        variant="outline"
+        :disabled="replay.cursor.value <= 0"
+        @click="replay.seek(replay.cursor.value - 1)"
+        >上一事件</Button
+      ><Button
+        variant="outline"
+        :disabled="replay.cursor.value >= entries.length - 1"
+        @click="replay.seek(replay.cursor.value + 1)"
+        >下一事件</Button
+      ><select
+        v-model.number="replay.speed.value"
+        aria-label="回放速度"
+        class="h-9 rounded-md border bg-background px-2 text-sm"
+      >
+        <option :value="0.5">0.5 倍速</option>
+        <option :value="1">1 倍速</option>
+        <option :value="2">2 倍速</option>
+        <option :value="4">4 倍速</option></select
+      ><span class="text-xs text-muted-foreground"
+        >{{ replay.cursor.value + 1 }} / {{ entries.length }}</span
+      >
+    </div>
+    <div
+      v-if="recording?.messages.length"
+      class="space-y-2 rounded-lg border bg-card p-4"
+    >
+      <h3 class="text-sm font-medium">受控会话内容</h3>
+      <article
+        v-for="item in recording.messages"
+        :key="item.sequence"
+        class="rounded-md bg-muted p-3 text-sm"
+      >
+        <p class="mb-1 text-xs text-muted-foreground">
+          {{ item.sequence }} · {{ item.role === "user" ? "用户输入" : "回答" }}
+        </p>
+        <p class="whitespace-pre-wrap break-words">{{ item.content }}</p>
+      </article>
+    </div>
+    <div
+      class="grid items-start gap-4 xl:grid-cols-[minmax(0,1fr)_minmax(18rem,1fr)]"
+    >
+      <div
+        class="max-h-[36rem] space-y-2 overflow-auto rounded-lg border bg-card p-3"
+      >
+        <button
+          v-for="(entry, index) in entries"
+          :key="`${entry.ledger}:${index}`"
+          type="button"
+          :aria-current="index === replay.cursor.value ? 'step' : undefined"
+          class="w-full rounded-md border p-3 text-left hover:bg-muted aria-[current=step]:border-primary aria-[current=step]:bg-primary/5"
+          @click="replay.seek(index)"
+        >
+          <span class="block break-all text-xs text-muted-foreground"
+            >{{ entry.ledger
+            }}<span
+              v-if="entry.sessionId && !entry.ledger.startsWith('Session ')"
+            >
+              · Session {{ entry.sessionId }}</span
+            >
+            · #{{ entry.event.sequence }} · {{ entry.event.type }}</span
+          ><span class="block text-sm">{{ entry.event.summary }}</span
+          ><span
+            v-if="index > replay.cursor.value"
+            class="text-xs text-muted-foreground"
+            >尚未播放</span
+          >
+        </button>
+        <p v-if="!entries.length" class="p-4 text-sm text-muted-foreground">
+          暂无可回放的历史事件；缺失关联不会补造。
+        </p>
+      </div>
+      <ReplayEventDetail
+        :event="replay.current.value"
+        :session-id="entries[replay.cursor.value]?.sessionId"
+        :recording="recording"
+        :events="events"
+        @seek="replay.seek"
+      />
+    </div>
+  </section>
+</template>