From 3d9cb5bdb6b9f7a5328b24b2fea4ed3ea96f92f6 Mon Sep 17 00:00:00 2001
From: yibo <bboonnee@gmail.com>
Date: Mon, 17 Aug 2026 02:24:46 +0800
Subject: [PATCH] feat(p3b): W14 下达任务入口；第二次真 CLI 冒烟验证两个硬缺陷修复

---
 web/src/components/graph-console/DispatchTaskButton.vue | 162 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/views/GraphConsole.vue                          |  33 ++++++++++++++++++++++++++++++++-
 2 files changed, 194 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/graph-console/DispatchTaskButton.vue

diff --git a/web/src/components/graph-console/DispatchTaskButton.vue b/web/src/components/graph-console/DispatchTaskButton.vue
new file mode 100644
index 0000000..fc0077c
--- /dev/null
+++ b/web/src/components/graph-console/DispatchTaskButton.vue
@@ -0,0 +1,162 @@
+<!--
+  下达任务入口（27-P3B W14）
+
+  `POST /api/company/:cid/tasks` 此前**全仓库没有任何前端调用方** —— 界面走查时确认过：
+  用户在控制台上没有任何办法给公司下达任务，只能 curl。这是「实现在、零调用方」那类问题
+  在 P3 里的第 N 次出现（W8 刚给 replan 补上调用方，tasks 还欠着）。
+
+  两处刻意的设计：
+  - **手动/自动在下达时就要选**，不是跑起来再改：`execution_mode` 是 run 的属性，
+    起 run 时定；界面上后补一个下拉会让人以为能中途换。
+  - **自动模式在这里就给成本预警**：真 CLI 一次中等任务是 $3-8 / 15-40 分钟
+    （27-P3B §五），点下去才知道就晚了。GraphRunPane 的「启动」也有一道确认，
+    但那是针对已有 run 的，下达这一步是更早的闸门。
+-->
+<template>
+  <div class="dispatch" :class="{ open }">
+    <button v-if="!open" class="btn" :class="variant" @click="open = true">
+      ✦ 下达任务
+    </button>
+
+    <div v-else class="form">
+      <label class="lbl">任务描述</label>
+      <textarea
+        ref="ta"
+        v-model="task"
+        class="ta"
+        rows="3"
+        placeholder="用一句自然语言说清要做什么，例如：实现一个最小可运行的接口，错误输入要有明确响应"
+        :disabled="busy"
+        @keydown.meta.enter="submit"
+        @keydown.ctrl.enter="submit"
+      />
+
+      <label class="lbl">执行模式</label>
+      <div class="modes">
+        <label class="mode" :class="{ on: mode === 'manual' }">
+          <input v-model="mode" type="radio" value="manual" :disabled="busy" />
+          <span class="m-t">手动</span>
+          <span class="m-d">每点一次「下一步」推进一个节点</span>
+        </label>
+        <label class="mode" :class="{ on: mode === 'auto' }">
+          <input v-model="mode" type="radio" value="auto" :disabled="busy" />
+          <span class="m-t">自动</span>
+          <span class="m-d">一次授权，从头跑到尾</span>
+        </label>
+      </div>
+
+      <p v-if="mode === 'auto'" class="warn">
+        ⚠️ 自动模式会连续调用真实 agent。一次中等任务约 <b>60-100 次调用 / $10-20 / 1-2 小时</b>；
+        跑起来后可以随时「暂停」，但已经发出的那次调用不会被打断。
+      </p>
+
+      <p v-if="err" class="err">{{ err }}<span v-if="hint" class="hint"> · {{ hint }}</span></p>
+
+      <div class="acts">
+        <button class="btn primary" :disabled="!task.trim() || busy" @click="submit">
+          {{ busy ? '下达中…' : '下达' }}
+        </button>
+        <button class="btn ghost" :disabled="busy" @click="cancel">取消</button>
+        <span class="kbd">⌘/Ctrl + Enter</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick, watch } from 'vue';
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  variant: { type: String, default: 'primary' }, // primary | inline
+});
+const emit = defineEmits(['dispatched']);
+
+const open = ref(false);
+const task = ref('');
+const mode = ref('manual');
+const busy = ref(false);
+const err = ref('');
+const hint = ref('');
+const ta = ref(null);
+
+watch(open, async (v) => {
+  if (!v) return;
+  await nextTick();
+  ta.value?.focus();
+});
+
+function cancel() {
+  open.value = false;
+  err.value = '';
+  hint.value = '';
+}
+
+async function submit() {
+  if (!task.value.trim() || busy.value) return;
+  busy.value = true;
+  err.value = '';
+  hint.value = '';
+  try {
+    const r = await fetch(`/api/company/${props.companyId}/tasks`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ task: task.value.trim(), mode: mode.value }),
+    });
+    const d = await r.json().catch(() => ({}));
+    if (!r.ok || !d.runId) {
+      // 409 = v1 并发约束「一家公司同时只有一个 active root run」，服务端会带 hint，
+      // 原样透出去比翻译成「出错了」有用得多
+      err.value = d.error || `下达失败（HTTP ${r.status}）`;
+      hint.value = d.hint || '';
+      return;
+    }
+    open.value = false;
+    task.value = '';
+    emit('dispatched', d);
+  } catch (e) {
+    err.value = `下达失败：${e.message}`;
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* 收起时按内容宽，撑满会盖住同一行的「重新规划组织」；展开时才占满整列 */
+.dispatch { min-width: 0; }
+.dispatch.open { width: 100%; }
+.btn {
+  border: 1px solid var(--border-primary); background: var(--bg-surface); color: var(--text-primary);
+  border-radius: 6px; padding: 6px 12px; font-size: 13px; cursor: pointer;
+}
+.btn:disabled { opacity: .5; cursor: not-allowed; }
+.btn.primary { background: var(--accent, #2563eb); border-color: transparent; color: #fff; font-weight: 600; }
+.btn.inline { padding: 4px 10px; font-size: 12px; }
+.btn.ghost { background: transparent; }
+.form { display: flex; flex-direction: column; gap: 6px; text-align: left; }
+.lbl { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
+.ta {
+  width: 100%; box-sizing: border-box; resize: vertical; font: inherit; font-size: 13px;
+  padding: 8px; border: 1px solid var(--border-primary); border-radius: 6px;
+  background: var(--bg-surface); color: var(--text-primary);
+}
+.modes { display: flex; gap: 6px; }
+.mode {
+  flex: 1; display: flex; flex-direction: column; gap: 2px; cursor: pointer;
+  border: 1px solid var(--border-primary); border-radius: 6px; padding: 6px 8px;
+}
+.mode.on { border-color: var(--accent, #2563eb); background: var(--bg-overlay); }
+.mode input { display: none; }
+.m-t { font-size: 12px; font-weight: 700; }
+.m-d { font-size: 11px; color: var(--text-secondary); line-height: 1.3; }
+.warn {
+  margin: 0; font-size: 11px; line-height: 1.45; color: var(--text-secondary);
+  background: var(--bg-overlay); border: 1px dashed var(--border-primary);
+  border-radius: 6px; padding: 6px 8px;
+}
+.err { margin: 0; font-size: 12px; color: #dc2626; line-height: 1.4; }
+.err .hint { color: var(--text-secondary); }
+.acts { display: flex; align-items: center; gap: 6px; }
+.kbd { margin-left: auto; font-size: 10px; color: var(--text-secondary); }
+</style>
diff --git a/web/src/views/GraphConsole.vue b/web/src/views/GraphConsole.vue
index 79cd77b..a68be0d 100644
--- a/web/src/views/GraphConsole.vue
+++ b/web/src/views/GraphConsole.vue
@@ -37,6 +37,19 @@
         <!-- 有图时「重新规划组织」是低频操作，收在标题栏上方即可；空态另有大按钮（R-18.1 / W8） -->
         <div v-if="hasOrgGraph || rootRun" class="left-actions">
           <ReplanOrgGraphButton :company-id="companyId" has-graph variant="inline" @planned="onReplanned" />
+          <!-- run 在跑时不给下达入口：v1 约束是一家公司同时只有一个 active root run，
+               端点会 409，与其让人点了吃报错，不如按钮就别出现（W14） -->
+          <DispatchTaskButton
+            v-if="!rootRunActive"
+            :company-id="companyId"
+            variant="inline"
+            @dispatched="onDispatched"
+          />
+        </div>
+
+        <!-- 有图、但从没跑过 run：这时候「下达任务」才是这个页面唯一该做的事，给主操作位 -->
+        <div v-if="hasOrgGraph && !rootRun" class="dispatch-lead">
+          <DispatchTaskButton :company-id="companyId" variant="primary" @dispatched="onDispatched" />
         </div>
 
         <GraphRunPane
@@ -126,6 +139,7 @@ import WorkGraphCanvas from '@/components/WorkGraphCanvas.vue';
 import GraphRunPane from '@/components/graph-console/GraphRunPane.vue';
 import NodeDetailPanel from '@/components/graph-console/NodeDetailPanel.vue';
 import ReplanOrgGraphButton from '@/components/graph-console/ReplanOrgGraphButton.vue';
+import DispatchTaskButton from '@/components/graph-console/DispatchTaskButton.vue';
 
 /**
  * 执行控制台（T3 + T4，§四.B）。三栏：org graph / work graph 画布 / 节点详情。
@@ -152,6 +166,9 @@ const rootState = ref({});
 const midState = ref({ loopRecords: [], events: [] });
 
 const hasOrgGraph = computed(() => defNodes.value.length > 0);
+/** run 在跑时端点会按 v1 并发约束 409，所以下达入口这时候直接不出现（W14） */
+const ACTIVE_RUN = new Set(['ready', 'running', 'paused', 'blocked']);
+const rootRunActive = computed(() => !!rootRun.value && ACTIVE_RUN.has(rootRun.value.run_status));
 const currentRunId = computed(() => (stack.value.length ? stack.value[stack.value.length - 1].runId : null));
 const budget = computed(() => rootState.value.budget || null);
 const spent = computed(() => budget.value?.spent || {});
@@ -227,6 +244,14 @@ async function onReplanned() {
   await Promise.all([loadOrgDef(), loadRuns()]);
 }
 
+/** 下达成功 → 立刻把新 run 拉进来，用户不用手动刷新（W14） */
+async function onDispatched() {
+  orgNode.value = null;
+  selectedNode.value = null;
+  stack.value = [];
+  await loadRuns();
+}
+
 function onRootState(s) {
   rootState.value = s;
   // root run 的 childRuns 就是各 org node 这次跑的 work run。allRuns 只在挂载时拉过一次，
@@ -316,7 +341,13 @@ function fmt(n) { return n == null ? '∞' : Number(n).toLocaleString(); }
 .history { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:12px; color:#666; }
 .history select { font-size:11px; padding:3px 6px; border:1px solid #ddd; border-radius:4px; background:#fff; max-width:100%; }
 
-.left-actions { display:flex; justify-content:flex-end; margin-bottom:8px; }
+.left-actions {
+  display:flex; gap:6px; flex-wrap:wrap; align-items:flex-start;
+  justify-content:flex-end; margin-bottom:8px; padding:8px 12px 0;
+}
+
+/* 有图未跑：下达任务是这时候唯一该做的事，给它主操作的位置与留白 */
+.dispatch-lead { padding: 10px 12px; border-bottom: 1px solid var(--border-primary); }
 
 /* 左栏空态：控制台在无图公司上唯一能做的事，所以按钮是主操作而不是脚注 */
 .org-empty { text-align:center; color:#888; padding:34px 10px; }
--
libgit2 0.21.4