宜博 / lemonboss

<!--
  「+ 新目标」两步表单（27-P3C §七.2）。内联展开在目标·任务栏里，是**唯一**的下达入口：
  它承接的 DispatchTaskButton 已随本表单落地一并删除（GraphConsole 撤掉那两处引用后全仓库零调用方，
  留一个没人用的组件只会让下一个人以为还有第二个下达入口）。仓库里已不存在该组件，别再去找。

  为什么是两步：`task-planning` 拆出来的是**一次 LLM 猜测**。直接把 N 条任务塞进去跑，
  等于让一次猜错的拆分烧掉 N 份预算；而在这一步改一改的成本几乎为零（§四.9）。
  所以拆分产出一律是 draft，人确认过才「全部下达」。

  三处刻意的设计：
  - **成本预警原样保留**：真 CLI 一次中等任务 $10-20 / 1-2 小时，点下去才知道就晚了。
  - **拆分等待必须能绕过**：几十秒的 LLM 等待，一次 agent 卡死就等于这个表单不能用了。
    逃生口走 `POST /:cid/tasks`（带 goal_id）—— 那条路是「建一条同描述的 task 并立刻起 run」，
    正是「按单任务下达」。后台那次拆分不会被取消（没有取消端点），产出会作为草稿落到同一个
    goal 下，所以按钮下方**明说**这件事，而不是让人事后发现多了几条任务。
  - **拆分失败不弹错误框**：直接展示降级结果 + 一句说明。降级本身是成功路径的一部分。

  ⚠️ 已知缺口：「加行」是灰的。后端没有「在既有 goal 下建一条 **draft** task」的端点 ——
  `POST /:cid/tasks` 建完就立刻起 run（批 1 语义），拿它当加行会静默把一条草稿变成正在跑的任务。
  按钮留在这里并写明原因，比悄悄不做或者悄悄做错都好。
-->
<template>
  <div class="ngf">
    <button v-if="phase === 'closed'" class="btn primary block" @click="openForm">＋ 新目标</button>

    <div v-else class="panel">
      <!-- ── 第一步 · 写需求 ─────────────────────────────────────────── -->
      <template v-if="phase === 'step1' || phase === 'creating'">
        <div class="steps"><b>1 写需求</b><span>›</span><span>2 确认拆分</span></div>

        <label class="lbl">目标标题（可留空，自动取描述首行）</label>
        <input v-model="title" class="in" :disabled="busy" placeholder="例如：做个官网" />

        <label class="lbl">需求描述 —— 这段话就是验收边界</label>
        <textarea
          ref="ta"
          v-model="description"
          class="ta"
          rows="4"
          :disabled="busy"
          placeholder="用自然语言说清要做什么，例如：做一个能跑起来的官网，含首页与关于页，移动端不能错位"
          @keydown.meta.enter="submitStep1"
          @keydown.ctrl.enter="submitStep1"
        />

        <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>

        <label class="switch">
          <input v-model="split" type="checkbox" :disabled="busy" />
          <span class="s-t">自动拆分任务</span>
          <span class="s-d">调 <code>task-planning</code> 把需求拆成有依赖关系的多条任务（几十秒，会消耗 token）</span>
        </label>

        <p v-if="err" class="err">{{ err }}<span v-if="hint" class="hint"> · {{ hint }}</span></p>

        <div class="acts">
          <button class="btn primary" :disabled="!description.trim() || busy" @click="submitStep1">
            {{ busy ? '创建中…' : (split ? '下一步' : '创建草稿') }}
          </button>
          <button class="btn ghost" :disabled="busy" @click="close">取消</button>
          <span class="kbd">⌘/Ctrl + Enter</span>
        </div>
      </template>

      <!-- ── 拆分中 · 骨架屏 + 逃生口 ────────────────────────────────── -->
      <template v-else-if="phase === 'splitting'">
        <div class="steps"><span>1 写需求</span><span>›</span><b>2 确认拆分</b></div>
        <p class="planning">⏳ 正在拆分…<em>task-planning 通常要几十秒</em></p>
        <div class="skel"><i /><i /><i /></div>
        <p v-if="pollErr" class="err">{{ pollErr }}</p>

        <div class="acts col">
          <button class="btn ghost" :disabled="busy" @click="escapeSingle">
            {{ busy ? '下达中…' : '跳过，按单任务下达' }}
          </button>
          <span class="foot">
            注意：后台那次拆分不会被取消（没有取消端点），它的产出会作为草稿任务落到同一个目标下，可自行删除。
          </span>
          <button class="btn ghost" :disabled="busy" @click="close">先关掉，回列表看</button>
        </div>
      </template>

      <!-- ── 第二步 · 确认拆分 ───────────────────────────────────────── -->
      <template v-else>
        <div class="steps"><span>1 写需求</span><span>›</span><b>2 确认拆分</b></div>

        <p v-if="planningError" class="degraded">
          自动拆分失败，已降级为 1 条同描述的任务（草稿）。<em>{{ planningError }}</em>
        </p>
        <p v-else-if="planningTokens" class="tokens">本次拆分消耗 ~{{ planningTokens.toLocaleString() }} tokens</p>

        <ul class="rows">
          <li v-for="t in tasks" :key="t.taskId" class="row">
            <div class="r-head">
              <span class="seq">#{{ t.seq }}</span>
              <span class="r-title">{{ t.title }}</span>
              <button class="x" title="删除这条任务（归档）" :disabled="busy" @click="removeTask(t)">✕</button>
            </div>
            <textarea
              class="ta small"
              rows="2"
              :value="t.description"
              :disabled="busy"
              @change="patchDescription(t, $event.target.value)"
            />
            <div v-if="tasks.length > 1" class="deps">
              <span class="d-lbl">依赖前置：</span>
              <button
                v-for="o in tasks.filter((x) => x.taskId !== t.taskId)"
                :key="o.taskId"
                class="chip"
                :class="{ on: (t.dependsOn || []).includes(o.taskId) }"
                :disabled="busy"
                :title="`点一下切换：本条是否等 #${o.seq} 完成`"
                @click="toggleDep(t, o)"
              >#{{ o.seq }}</button>
            </div>
          </li>
        </ul>

        <button class="btn ghost block" disabled :title="ADD_ROW_DISABLED">＋ 加一条任务（暂不可用）</button>
        <p class="foot">{{ ADD_ROW_DISABLED }}</p>

        <p v-if="queueNote" class="queued-note">{{ queueNote }}</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="!tasks.length || busy" @click="dispatchAll">
            {{ busy ? '下达中…' : '全部下达' }}
          </button>
          <button class="btn ghost" :disabled="busy" @click="close">存草稿</button>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, nextTick, onBeforeUnmount } from 'vue';
import { dispatchedTaskId, queueNoteText } from './goal-task-model.js';

const props = defineProps({
  companyId: { type: String, required: true },
  /** { running, queued, blocked } —— 由父组件从整棵目标树数出来（goal-task-model.queueStat） */
  queueStat: { type: Object, default: () => ({ running: 0, queued: 0, blocked: 0 }) },
  /**
   * 执行位 `{ max, used, free }` —— **服务端原样给的**（形状逐字同
   * `server/routes/graph-run.js#slotState`，409 `run-slot-busy` 也从它取），前端一个数都不推导。
   * 服务端没给（今天就是这样）时传 null，文案自动退回批 3 原样。
   * 判据与退化分支都钉在 goal-task-model.test.js 的 readSlots / queueNoteText 两组用例里。
   */
  slots: { type: Object, default: null },
});
/**
 * changed —— 库里的 goal/task 变了，父组件重拉整棵树（建 goal / 改 task / 删 task 都发）。
 * dispatched —— 起了 run，父组件除了重拉还要把选中态挪过去。
 */
const emit = defineEmits(['changed', 'dispatched']);

const ADD_ROW_DISABLED =
  '后端暂无「在既有目标下建一条草稿任务」的端点：POST /:cid/tasks 建完会立刻入队，'
  + '拿它当加行会把还没确认的草稿静默推进队列。需要加任务时先「全部下达」再新建一个目标。';

/**
 * 「全部下达」上方那句队列提示。**主按钮不因队列而禁用**（它的 disabled 只看「有没有行」
 * 和「正在提交」）：批 3 之后下达就是入队，公司里有任务在跑不再是拒绝的理由，
 * 把按钮灰掉等于把一条现在走得通的路继续锁着。文案是纯函数，测试在 goal-task-model.test.js。
 */
const queueNote = computed(() => queueNoteText(props.queueStat, props.slots));

/** closed → step1 →（split? splitting : —）→ step2。creating 是 step1 的提交中态 */
const phase = ref('closed');
const busy = ref(false);
const err = ref('');
const hint = ref('');
const pollErr = ref('');

const title = ref('');
const description = ref('');
const mode = ref('manual');
const split = ref(true);
const ta = ref(null);

const goalId = ref('');
const tasks = ref([]);
const planningTokens = ref(0);
const planningError = ref('');

let poller = null;
onBeforeUnmount(stopPoll);

function stopPoll() {
  if (poller) { clearTimeout(poller); poller = null; }
}

async function openForm() {
  phase.value = 'step1';
  err.value = '';
  hint.value = '';
  await nextTick();
  ta.value?.focus();
}

function close() {
  stopPoll();
  phase.value = 'closed';
  title.value = '';
  description.value = '';
  goalId.value = '';
  tasks.value = [];
  planningTokens.value = 0;
  planningError.value = '';
  err.value = '';
  hint.value = '';
  pollErr.value = '';
  emit('changed');
}

/** 统一的 fetch：把后端的 error / hint 原样透出去，不翻译成「出错了」（本目录的既有惯例） */
async function call(method, url, body) {
  const r = await fetch(url, {
    method,
    headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
    body: body === undefined ? undefined : JSON.stringify(body),
  });
  const d = await r.json().catch(() => ({}));
  if (!r.ok) {
    const e = new Error(d.error || `${method} ${url} 失败（HTTP ${r.status}）`);
    e.hint = d.hint || '';
    throw e;
  }
  return d;
}

function fail(e) {
  err.value = e.message;
  hint.value = e.hint || '';
}

// ── 第一步 ────────────────────────────────────────────────────────────────
async function submitStep1() {
  if (!description.value.trim() || busy.value) return;
  busy.value = true;
  err.value = '';
  hint.value = '';
  try {
    const d = await call('POST', `/api/company/${props.companyId}/goals`, {
      title: title.value.trim() || undefined,
      description: description.value.trim(),
      mode: mode.value,
      split: split.value,
    });
    goalId.value = d.goalId;
    emit('changed'); // goal 已经落库了，左栏立刻看得到（哪怕还在 planning）
    if (d.split) {
      phase.value = 'splitting';
      schedulePoll();
    } else {
      adopt(d);
      phase.value = 'step2';
    }
  } catch (e) {
    fail(e);
  } finally {
    busy.value = false;
  }
}

/** GET /goals/:id 的响应 → 本地状态 */
function adopt(d) {
  tasks.value = d.tasks || [];
  planningTokens.value = d.planningTokens || 0;
  planningError.value = d.planningError || '';
}

/**
 * 轮询等拆分（没有 goal 级 SSE 通道）。2s 一次、最多 3 分钟。
 * 超时不是错误：runGoalSplit 的三条出口都会把 goal 推离 planning，超时只说明这次特别慢 ——
 * 提示一句并留着逃生口，别把表单锁死。
 */
const POLL_MS = 2000;
const POLL_MAX = 90; // 90 × 2s = 3min
let polled = 0;
function schedulePoll() {
  polled = 0;
  pollErr.value = '';
  tick();
}
function tick() {
  stopPoll();
  poller = setTimeout(async () => {
    if (phase.value !== 'splitting') return;
    try {
      const d = await call('GET', `/api/company/${props.companyId}/goals/${goalId.value}`);
      if (d.status !== 'planning') {
        adopt(d);
        phase.value = 'step2';
        emit('changed');
        return;
      }
    } catch (e) {
      // 单次拉取失败不终止：网络抖一下不该把用户踢出等待
      pollErr.value = `拉取拆分结果失败：${e.message}（仍在重试）`;
    }
    polled += 1;
    if (polled >= POLL_MAX) {
      pollErr.value = '拆分已经跑了 3 分钟还没出结果。可以点下面「跳过，按单任务下达」，或先关掉回列表等它自己收敛。';
      return;
    }
    tick();
  }, POLL_MS);
}

/** 逃生口：建一条同描述的 task 并立刻起 run（POST /:cid/tasks 就是这个语义） */
async function escapeSingle() {
  if (busy.value) return;
  busy.value = true;
  err.value = '';
  hint.value = '';
  try {
    const d = await call('POST', `/api/company/${props.companyId}/tasks`, {
      goal_id: goalId.value,
      task: description.value.trim(),
      mode: mode.value,
    });
    stopPoll();
    phase.value = 'closed';
    emit('dispatched', { goalId: goalId.value, taskId: d.taskId, runId: d.runId });
    close();
  } catch (e) {
    fail(e);
  } finally {
    busy.value = false;
  }
}

// ── 第二步的编辑：每一笔立刻落库 ──────────────────────────────────────────
// 为什么不攒着到「全部下达」再一起提交：攒起来的编辑一旦中途关窗就全丢了，而这些行**已经在库里**
// （拆分产出就是 draft 行）。立刻落库之后「存草稿」按钮才名副其实 —— 它就是「关掉，什么都不做」。
async function patchDescription(t, value) {
  const next = String(value || '').trim();
  if (!next || next === t.description) return;
  await write(() => call('PATCH', `/api/company/${props.companyId}/tasks/${t.taskId}`, { description: next }));
}

async function toggleDep(t, other) {
  const cur = (t.dependsOn || []).slice();
  const i = cur.indexOf(other.taskId);
  if (i >= 0) cur.splice(i, 1); else cur.push(other.taskId);
  // 环由数据层判（validateDependsOn 是唯一持有者），400 时原样透出来，不在前端复述一遍规则
  await write(() => call('PATCH', `/api/company/${props.companyId}/tasks/${t.taskId}`, { depends_on: cur }));
}

async function removeTask(t) {
  await write(() => call('DELETE', `/api/company/${props.companyId}/tasks/${t.taskId}`));
}

/** 一笔写 → 成功就重新拉整份 goal（seq / dependsOn 的翻译结果只有后端算得准），失败就透出错误 */
async function write(fn) {
  if (busy.value) return;
  busy.value = true;
  err.value = '';
  hint.value = '';
  try {
    await fn();
    adopt(await call('GET', `/api/company/${props.companyId}/goals/${goalId.value}`));
    emit('changed');
  } catch (e) {
    fail(e);
    // 失败后同样重拉：否则界面上留着一个其实没生效的编辑结果
    try { adopt(await call('GET', `/api/company/${props.companyId}/goals/${goalId.value}`)); } catch { /* 忽略 */ }
  } finally {
    busy.value = false;
  }
}

async function dispatchAll() {
  if (busy.value) return;
  busy.value = true;
  err.value = '';
  hint.value = '';
  try {
    const d = await call('POST', `/api/company/${props.companyId}/goals/${goalId.value}/dispatch`);
    const gid = goalId.value;
    phase.value = 'closed';
    // 响应形状（起了 run 还是入了队）只由 dispatchedTaskId 一处解析：这里再写一份 `d.started?.taskId`，
    // 服务端一改形状就会静默拿到 undefined —— 选中态不跳转、界面上什么都不报
    emit('dispatched', { goalId: gid, taskId: dispatchedTaskId(d), runId: d.started?.runId });
    close();
  } catch (e) {
    // 409（上游没就绪 / 服务端仍拒绝下达）在这里是**正常结局**：任务已经是草稿了，稍后再下达即可。
    // 服务端的 hint 里写着确切的自救路径，原样透出比翻译成「下达失败」有用得多。
    fail(e);
  } finally {
    busy.value = false;
  }
}
</script>

<style scoped>
/* 本页（GraphConsole）通篇硬编码浅色，这里跟着来，免得暗色主题下四栏里只有这一栏是变量色 */
.ngf { margin-bottom: 10px; }
.btn {
  border: 1px solid #ddd; background: #fff; color: #1a1a1a;
  border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: #2b6cb0; border-color: transparent; color: #fff; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.block { width: 100%; }

.panel { border: 1px solid #e4e4e8; border-radius: 8px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.steps { display: flex; gap: 6px; align-items: center; font-size: 11px; color: #aaa; margin-bottom: 2px; }
.steps b { color: #1a1a1a; }

.lbl { font-size: 11px; color: #777; font-weight: 600; }
.in, .ta {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 12px;
  padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; color: #1a1a1a;
}
.ta { resize: vertical; }
.ta.small { font-size: 11px; line-height: 1.5; }

.modes { display: flex; gap: 6px; }
.mode { flex: 1; display: flex; flex-direction: column; gap: 2px; cursor: pointer; border: 1px solid #ddd; border-radius: 6px; padding: 5px 7px; }
.mode.on { border-color: #2b6cb0; background: #f2f7fd; }
.mode input { display: none; }
.m-t { font-size: 12px; font-weight: 700; }
.m-d { font-size: 10px; color: #888; line-height: 1.3; }

.warn { margin: 0; font-size: 11px; line-height: 1.45; color: #7a5b00; background: #fffaf0; border: 1px dashed #e6d5a8; border-radius: 6px; padding: 6px 8px; }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 2px 6px; align-items: center; cursor: pointer; border: 1px solid #ddd; border-radius: 6px; padding: 6px 8px; }
.switch input { grid-row: span 2; }
.s-t { font-size: 12px; font-weight: 700; }
.s-d { grid-column: 2; font-size: 10px; color: #888; line-height: 1.4; }
.switch code { background: #f2f2f4; padding: 0 3px; border-radius: 3px; }

.planning { margin: 4px 0 0; font-size: 12px; color: #2b6cb0; }
.planning em { font-style: normal; color: #999; margin-left: 6px; font-size: 11px; }
.skel { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.skel i { display: block; height: 30px; border-radius: 6px; background: linear-gradient(90deg, #f2f2f4 25%, #e9e9ed 37%, #f2f2f4 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.degraded { margin: 0; font-size: 11px; line-height: 1.5; color: #a35b00; background: #fff7ed; border: 1px solid #f0d9b8; border-radius: 6px; padding: 6px 8px; }
.degraded em { display: block; font-style: normal; color: #8a6a3a; margin-top: 3px; }
.tokens { margin: 0; font-size: 11px; color: #888; }

.rows { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.row { border: 1px solid #eee; border-radius: 6px; padding: 6px; background: #fcfcfd; display: flex; flex-direction: column; gap: 4px; }
.r-head { display: flex; align-items: center; gap: 6px; }
.seq { font-size: 10px; color: #fff; background: #b9bec7; border-radius: 8px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.r-title { font-size: 12px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.x { border: none; background: none; color: #bbb; cursor: pointer; font-size: 12px; padding: 0 2px; }
.x:hover:not(:disabled) { color: #d33; }

.deps { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.d-lbl { font-size: 10px; color: #999; }
.chip { border: 1px solid #ddd; background: #fff; color: #888; border-radius: 9px; padding: 1px 7px; font-size: 10px; cursor: pointer; }
.chip.on { border-color: #2b6cb0; background: #eef4fb; color: #2b6cb0; font-weight: 700; }
.chip:disabled { opacity: .5; cursor: not-allowed; }

/* 队列提示是「情况说明」，不是警告：用 queued 那个灰蓝（goal-task-model 的 #7aa7dd 一族），
   免得跟上面橙色的成本预警、下面红色的错误抢注意力 */
.queued-note {
  margin: 0; font-size: 11px; line-height: 1.5; color: #3c5f87;
  background: #f2f6fc; border: 1px solid #d8e4f2; border-radius: 6px; padding: 6px 8px;
}
.err { margin: 0; font-size: 11px; color: #dc2626; line-height: 1.5; }
.err .hint { color: #888; }
.foot { margin: 0; font-size: 10px; color: #999; line-height: 1.5; }
.acts { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.acts.col { flex-direction: column; align-items: stretch; }
.kbd { margin-left: auto; font-size: 10px; color: #bbb; }
</style>