create-windy 0.8.2 → 0.8.3

package/template/apps/web/src/pages/system/AgentSessionPage.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { RouterLink } from "vue-router";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
 import { RefreshCwIcon } from "@lucide/vue";
 import { Button } from "@/components/ui/button";
 import AgentSessionDetail from "./components/agent-session/AgentSessionDetail.vue";
@@ -7,6 +9,12 @@ import AgentSessionList from "./components/agent-session/AgentSessionList.vue";
 import { useAgentSessions } from "./composables/useAgentSessions";
 
 const sessionState = useAgentSessions();
+const access = useAccessSnapshot();
+const canOpenWorkbench = computed(() =>
+  access.snapshot.value?.actor.permissionKeys.includes(
+    "system.agent-debug.read",
+  ),
+);
 const selectedSession = computed(() =>
   sessionState.sessions.value.find(
     ({ sessionId }) => sessionId === sessionState.selectedSessionId.value,
@@ -30,14 +38,27 @@ const refreshing = computed(
           查看长期 Session、公开事件摘要、模型 Context 来源和受控 Memory 投影。
         </p>
       </div>
-      <Button
-        variant="outline"
-        :disabled="refreshing"
-        @click="sessionState.refresh"
-      >
-        <RefreshCwIcon data-icon="inline-start" />
-        刷新
-      </Button>
+      <div class="flex gap-2">
+        <Button v-if="canOpenWorkbench" variant="outline" as-child
+          ><RouterLink
+            :to="{
+              path: '/admin/system/agent-debug',
+              query: selectedSession
+                ? { sessionId: selectedSession.sessionId }
+                : {},
+            }"
+            >统一会话回放</RouterLink
+          ></Button
+        >
+        <Button
+          variant="outline"
+          :disabled="refreshing"
+          @click="sessionState.refresh"
+        >
+          <RefreshCwIcon data-icon="inline-start" />
+          刷新
+        </Button>
+      </div>
     </header>
 
     <div

package/template/apps/web/src/pages/system/AgentToolsPage.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, shallowRef, watch } from "vue";
+import type { AgentAdminToolCatalogItem } from "@southwind-ai/shared";
+import { Button } from "@/components/ui/button";
+import { useAccessSnapshot } from "@/composables/useAccessSnapshot";
+import { listAdminTools } from "@/services/agent-admin-api";
+import ToolCatalogPanel from "./components/agent-workbench/ToolCatalogPanel.vue";
+import ToolRuleDetail from "./components/agent-workbench/ToolRuleDetail.vue";
+const tools = shallowRef<readonly AgentAdminToolCatalogItem[]>([]);
+const selected = shallowRef("");
+const loading = shallowRef(false);
+const error = shallowRef("");
+const access = useAccessSnapshot();
+const selectedTool = computed(() =>
+  tools.value.find((tool) => tool.key === selected.value),
+);
+let controller: AbortController | undefined;
+async function refresh() {
+  controller?.abort();
+  const current = new AbortController();
+  controller = current;
+  tools.value = [];
+  loading.value = true;
+  error.value = "";
+  try {
+    const result = await listAdminTools(current.signal);
+    if (current.signal.aborted || controller !== current) return;
+    tools.value = result;
+    if (!result.some((tool) => tool.key === selected.value))
+      selected.value = result[0]?.key ?? "";
+  } catch (failure) {
+    if (!current.signal.aborted)
+      error.value =
+        failure instanceof Error ? failure.message : "工具目录加载失败";
+  } finally {
+    if (controller === current) loading.value = false;
+  }
+}
+watch(access.fingerprint, () => {
+  controller?.abort();
+  tools.value = [];
+  selected.value = "";
+  error.value = "权限发生变化，请手动刷新目录。";
+});
+onMounted(refresh);
+onBeforeUnmount(() => controller?.abort());
+</script>
+<template>
+  <div class="space-y-5">
+    <header class="flex items-start justify-between gap-3">
+      <div>
+        <h1 class="text-2xl font-semibold">工具目录与规则</h1>
+        <p class="mt-2 text-sm text-muted-foreground">
+          查看已装配平台与业务工具的注册规则和当前调用条件。
+        </p>
+      </div>
+      <Button variant="outline" :disabled="loading" @click="refresh">{{
+        loading ? "加载中…" : "刷新"
+      }}</Button>
+    </header>
+    <p
+      v-if="error"
+      role="alert"
+      class="rounded-md border border-destructive/30 p-4 text-sm text-destructive"
+    >
+      {{ error }}
+    </p>
+    <div class="grid items-start gap-4 lg:grid-cols-[22rem_minmax(0,1fr)]">
+      <ToolCatalogPanel
+        :tools="tools"
+        :selected="selected"
+        @select="selected = $event"
+      /><ToolRuleDetail :tool="selectedTool" />
+    </div>
+  </div>
+</template>

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>