@loomhelm/multi-task-flow 0.2.8 → 0.2.9

package/toolkit/skills/multi-task-flow/tests/check-skills-installation.test.ts

@@ -1,45 +1,19 @@
 import assert from 'node:assert/strict';
-import { spawnSync } from 'node:child_process';
-import { cpSync, existsSync, mkdtempSync, readFileSync, realpathSync, renameSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { cpSync, existsSync, mkdtempSync, realpathSync, rmSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, resolve } from 'node:path';
 import { test } from 'bun:test';
-import { checkSkillsInstallation } from '../scripts/check-skills-installation.ts';
 
-test('a source-only skills installation runs official TS entrypoints and detects missing resources', () => {
+test('the installable Skill tree excludes npm runtime resources', () => {
   const isolated = realpathSync(mkdtempSync(join(tmpdir(), 'loomhelm-skills-only-')));
-  const source = resolve(import.meta.dirname, '../..');
-  const manifest = JSON.parse(readFileSync(join(source,'source-manifest.json'),'utf8'));
-  const sources = new Set([...manifest.files,...manifest.additions].map(file => resolve(source,'..',file.path)));
+  const source = resolve(import.meta.dirname, '../../multi-task-flow');
   try {
-    cpSync(source, join(isolated,'skills'), { recursive:true, filter:path => !['node_modules','.cache','dist'].includes(path.split('/').at(-1)) && !path.endsWith('.node') && (!path.endsWith('.js') || sources.has(path)) });
-    const unprepared = checkSkillsInstallation(isolated,{probe:true});
-    assert.equal(unprepared.sourceComplete,true);
-    assert.equal(unprepared.ready,false); assert.equal(unprepared.ok,false);
-    assert.equal(unprepared.code,'SKILLS_RUNTIME_DEPENDENCY_MISSING');
-    assert.deepEqual(unprepared.dependencies.missing.sort(),['sharp','zod']);
-    assert.equal(unprepared.entrypoints.status,'blocked');
-    const install = spawnSync(process.execPath, ['install','--cwd',join(isolated,'skills'),'--frozen-lockfile','--ignore-scripts','--backend=copy'], {env:process.env,encoding:'utf8'});
-    assert.equal(install.status,0,install.stderr);
-    const report = checkSkillsInstallation(isolated,{probe:true});
-    assert.equal(report.ok,true,JSON.stringify(report)); assert.equal(report.ready,true);
-    assert.equal(report.skills,29); assert.deepEqual(report.requiredSparsePaths,['skills']);
-    assert.equal(existsSync(join(isolated,'bin')),false);
-    assert.equal(existsSync(join(isolated,'skills/bin/plan_review_view.js')),false);
-    assert.equal(existsSync(join(isolated,'skills/bin/native/posix.node')),false);
-    const plan=readFileSync(join(isolated,'skills/dev-plan/references/plan-cases/positive-fast-track.md'),'utf8');
-    const finalized=spawnSync('/bin/bash',['-p',join(isolated,'skills/bin/plan-cli.sh'),'--input','-'],{cwd:source,env:process.env,input:plan,encoding:'utf8',timeout:30000});
-    assert.equal(finalized.status,0,finalized.stderr); assert.match(finalized.stdout,/<proposed_plan>/);
-    const context=join(isolated,'skills/dot-codex-development/scripts/context.ts');
-    const original=readFileSync(context); writeFileSync(context,'// tampered');
-    assert.equal(checkSkillsInstallation(isolated).sourceComplete,false);
-    writeFileSync(context,original);
-    renameSync(context,join(isolated,'context.ts')); symlinkSync(join(isolated,'context.ts'),context);
-    assert.equal(checkSkillsInstallation(isolated).ok,false);
-    rmSync(context); renameSync(join(isolated,'context.ts'),context);
-    renameSync(join(isolated,'skills/bin'),join(isolated,'bin'));
-    const broken=checkSkillsInstallation(isolated,{probe:true});
-    assert.equal(broken.ok,false); assert.equal(broken.ready,false);
-    assert.ok(broken.missing.includes('skills/bin/plan_review_view.ts'));
-  } finally { rmSync(isolated,{recursive:true,force:true}); }
-},60000);
+    cpSync(source, join(isolated, 'multi-task-flow'), { recursive: true });
+    assert.equal(existsSync(join(isolated, 'multi-task-flow', 'SKILL.md')), true);
+    for (const name of ['data', 'dist', 'examples', 'lib', 'scripts', 'tests', 'web', 'package.json', 'bun.lock']) {
+      assert.equal(existsSync(join(isolated, 'multi-task-flow', name)), false, name);
+    }
+  } finally {
+    rmSync(isolated, { recursive: true, force: true });
+  }
+}, 60000);

package/toolkit/skills/multi-task-flow/tests/delivery-topology.test.ts

@@ -0,0 +1,33 @@
+import { expect, test } from "bun:test";
+import { deliveryTopologyForGroup, validateDeliveryTopologies } from "../lib/schema";
+
+const task = (id: string, group_id: string, policy: "shared_delivery_unit" | "child_pr") => ({
+  id,
+  group_id,
+  kind: "contribution" as const,
+  disposition: "active" as const,
+  execution_owner: policy === "shared_delivery_unit" ? "delivery_agent" as const : "task_agent" as const,
+  conversation_policy: policy === "shared_delivery_unit" ? "delivery_owned" as const : "task_agent" as const,
+  delivery_policy: policy,
+});
+
+test("derives shared topology from one contribution task", () => {
+  const tasks = [task("task-a", "du-a", "shared_delivery_unit")];
+  expect(deliveryTopologyForGroup(tasks as any, "du-a")).toBe("shared_delivery");
+  expect(() => validateDeliveryTopologies(tasks as any, true)).not.toThrow();
+});
+
+test("derives multi-task topology without allowing shared policies", () => {
+  const tasks = [task("task-a", "du-a", "child_pr"), task("task-b", "du-a", "child_pr")];
+  expect(deliveryTopologyForGroup(tasks as any, "du-a")).toBe("multi_task_integration");
+  expect(() => validateDeliveryTopologies(tasks as any, true)).not.toThrow();
+  expect(() => validateDeliveryTopologies([task("task-a", "du-a", "shared_delivery_unit"), task("task-b", "du-a", "child_pr")] as any, true)).toThrow("multi-task delivery unit");
+});
+
+test("does not count verification tasks when deriving topology", () => {
+  const tasks = [
+    task("task-a", "du-a", "shared_delivery_unit"),
+    { id: "verify-a", group_id: "du-a", kind: "verification", disposition: "active" },
+  ];
+  expect(deliveryTopologyForGroup(tasks as any, "du-a")).toBe("shared_delivery");
+});

package/toolkit/skills/multi-task-flow/tests/orchestrate.test.ts

@@ -627,7 +627,7 @@ describe("orchestrate init", () => {
   });
 
   test("documents init as an explicit mutation boundary", () => {
-    const skill = readFileSync(join(import.meta.dir, "../SKILL.md"), "utf8");
+    const skill = readFileSync(join(import.meta.dir, "../../multi-task-flow/SKILL.md"), "utf8");
     const design = readFileSync(
       join(
         import.meta.dir,
@@ -636,10 +636,8 @@ describe("orchestrate init", () => {
       "utf8",
     );
 
-    expect(skill).toContain("Initialization is a mutating runtime action");
-    expect(skill).toContain(
-      "must not call `init` or a native conversation-creation tool",
-    );
+    expect(skill).toContain("初始化是有副作用的运行时操作");
+    expect(skill).toContain("只读审查、诊断、代码探索或仅制定计划时不得调用本 Skill");
     expect(design).toContain("失败返回 `INVALID_INITIAL_STATE`");
     expect(design).toContain("不创建任务会话");
   });

package/toolkit/skills/multi-task-flow/tests/ui/details-content.test.ts

@@ -22,6 +22,15 @@ describe("dashboard details content", () => {
     expect(document.querySelector(".detail-duration")?.textContent).toBe("未知");
     expect(duration(details.groupPreview(group))).toBe("未知");
   });
+  test("group details include the full Agent output at the end", () => {
+    const group = { id: "core", title: "核心", state: "closed", agent_thread_id: "thread-group", parent_pr: { url: null }, latest_agent_output: { thread_id: "thread-group", agent_state: "idle", stale: false, state: "available", text: "交付单元已完成", turn_id: null, message_id: null, phase: null, message_status: null, observed_at: null } } as Group;
+    const view = { groups: [group], tasks: [], actual_intervals: [] } as unknown as View;
+    const details = createDetailContent({ getData: () => view, labels: {}, labelTask: () => "", time: () => "", safeExternal: () => null });
+    details.showGroup(group);
+    const labels = [...document.querySelectorAll("#details-content .detail-label")].map((node) => node.textContent);
+    expect(labels.at(-1)).toBe("Agent 输出");
+    expect(document.querySelector(".detail-agent-output")?.textContent).toContain("交付单元已完成");
+  });
   test("keeps the summary outside the scroll body and preserves only the same object's reading position", () => {
     const group = { id: "same", title: "交付单元", state: "closed", parent_pr: { url: null } } as Group;
     const view = { groups: [group], tasks: [], actual_intervals: [] } as unknown as View;

package/toolkit/skills/multi-task-flow/tests/ui/responsive-width-contract.test.ts

@@ -17,11 +17,35 @@ test("medium details stay in the static bottom layout instead of a side-by-side
   expect(medium).toContain("border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent;");
   expect(medium).toContain(".details-heading button { display: none; }");
   expect(medium).toContain(".details-slot { position: static; padding-top: 16px; }");
-  expect(medium).toContain(".details-heading { padding: 0 0 12px; display: flex; align-items: baseline;");
+  expect(medium).toContain(".details-heading { padding: 0 0 12px; display: flex; align-items: center;");
+  expect(medium).toContain("#details-summary { min-width: 0; display: flex; align-items: center; gap: 12px; }");
+  expect(medium).toContain(".detail-title { min-width: 0; margin: 0; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }");
+  expect(medium).toContain(".detail-state { flex: 0 0 auto; margin: 0; white-space: nowrap; }");
   expect(medium).toContain("#details-content { padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));");
+  expect(medium).toContain("grid-auto-rows: max-content; align-content: start; align-items: start;");
+  expect(medium).toContain("#details-content[data-detail-kind=\"task\"] { grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(0, 1fr)); }");
+  expect(medium).toContain("#details-content[data-detail-kind=\"group\"] { grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(0, 1fr)); }");
+  expect(medium).toContain("#details-content > .detail-field:has(.atom-list) { grid-column: span 1; }");
+  expect(medium).toContain("#details-content > .detail-field:has(.atom-list) { display: block; padding-block: 7px; }");
+  expect(medium).toContain("text-overflow: ellipsis; white-space: nowrap;");
+  expect(medium).toContain("#details-content > .detail-group-facts { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));");
+  expect(medium).toContain("#details-content > .detail-group-facts > .detail-field { min-width: 0; padding-block: 7px; display: block; }");
   expect(medium).toContain('.workspace[data-view-tab="tasks"] .details-slot { grid-column: 1; grid-row: 3; }');
 });
 
+test("tall medium details provide an independently scrollable content body", () => {
+  const tall = css.split("@media (min-width: 768px) and (max-width: 1444px) and (min-height: 961px) {")[1]!.split("@media (min-width: 768px) and (max-width: 1444px) and (max-height: 960px)")[0]!;
+  expect(tall).toContain("display: flex; flex-direction: column;");
+  expect(tall).toContain(".workspace:not(.has-details) { grid-template-rows: minmax(240px, 1fr); }");
+  expect(tall).toContain(".workspace[data-view-tab=\"tasks\"]:not(.has-details) { grid-template-rows: auto minmax(240px, 1fr); }");
+  expect(tall).toContain("#details-content { flex: 1 1 auto; min-height: 0; overflow: auto; }");
+  expect(tall).toContain(".workspace-view > .timeline-view { min-height: 0; display: flex; flex-direction: column; }");
+  expect(tall).toContain("height: auto !important; min-height: 0;");
+  expect(tall).toContain(".workspace-view > .canvas-view #graph { height: 100% !important; min-height: 0; }");
+  expect(tall).toContain(".workspace-view > .canvas-view #atomic-graph { height: 100% !important; min-height: 0; }");
+  expect(tall).toContain("overflow-anchor: none;");
+});
+
 test("identity actions follow the project name instead of filling the title row", () => {
   expect(css).toContain(".identity-copy { flex: 0 1 auto; min-width: 0; }");
   expect(css).toContain("text-overflow: ellipsis; white-space: nowrap;");

package/toolkit/skills/multi-task-flow/tests/ui/task-context-menu.test.ts

@@ -70,5 +70,6 @@ test("keyboard opening, navigation and Escape; blank space retains native menu",
 });
 test("authentication redirects only accept same-service run links and legal view state", () => {
   expect(parseViewerTarget('/runs/run-a/?selected=task%3Atask.v2&detail=1&plan=plan.v2&q=hidden', 'http://localhost', { allowHome: false })?.target).toBe('/runs/run-a/?selected=task%3Atask.v2&detail=1&plan=plan.v2&q=hidden');
-  for (const value of ['https://evil.test/runs/run-a/?selected=task:C2', '//evil.test/runs/run-a/?selected=task:C2', '/login?selected=task:C2', '/runs/run-a/../', '/runs/%2e%2e/', '/runs\\run-a/', '/runs/run-a/?selected=other:C2', '/runs/run-a/?selected=task:<script>', 'http://user:pass@localhost/runs/run-a/?selected=task:C2', '/runs/run-a/?ticket=secret', '/runs/run-a/?selected=task:C2&selected=task:C3', '/runs/run-a/?q=%0d%0aLocation:%20https://evil.test']) expect(parseViewerTarget(value, 'http://localhost', { allowHome: false })).toBeNull();
+  expect(parseViewerTarget('/runs/run-a/?tab=tasks&selected=group%3AG2&detail=1&future=ignored', 'http://localhost', { allowHome: false })?.target).toContain('tab=tasks');
+  for (const value of ['https://evil.test/runs/run-a/?selected=task:C2', '//evil.test/runs/run-a/?selected=task:C2', '/login?selected=task:C2', '/runs/run-a/../', '/runs/%2e%2e/', '/runs\\run-a/', 'http://user:pass@localhost/runs/run-a/?selected=task:C2', '/runs/run-a/?ticket=secret', '/runs/run-a/?q=%0d%0aLocation:%20https://evil.test']) expect(parseViewerTarget(value, 'http://localhost', { allowHome: false })).toBeNull();
 });

package/toolkit/skills/multi-task-flow/web/app.css

@@ -191,11 +191,11 @@ h1 { margin: 3px 0 0; color: var(--text); font-size: 26px; line-height: 1.14; fo
 .summary-label { align-self: end; color: var(--muted); font-size: 11px; }
 .summary-item strong { align-self: start; color: var(--text); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 21px; line-height: 1.05; font-weight: 400; font-variant-numeric: tabular-nums; /* taste-skill-ignore: changing counts align in a technical face. */ }
 
-.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--gap); min-height: 610px; margin-top: 24px; }
+.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--gap); min-height: 610px; margin-top: 24px; overflow-anchor: none; }
 .workspace:not(.has-details) { grid-template-columns: minmax(0, 1fr); }
 .workspace-main { min-width: 0; }
 .workspace-view, .workspace-tasks { min-width: 0; }
-.view-header { min-height: 44px; display: grid; grid-template-columns: 148px auto minmax(190px, 260px); align-items: stretch; gap: 18px; border-bottom: 1px solid var(--border); background: transparent; }
+.view-header { min-height: 44px; display: grid; grid-template-columns: 148px minmax(0, 1fr) minmax(190px, 260px) auto; align-items: stretch; gap: 18px; border-bottom: 1px solid var(--border); background: transparent; }
 .view-heading { min-width: 0; padding: 7px 16px 0 0; border-right: 1px solid var(--rule); }
 .view-context { display: block; margin-top: 1px; color: var(--text); font-size: 13px; font-weight: 500; }
 .view-count { display: block; margin-top: 1px; color: var(--faint); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; /* taste-skill-ignore: compact counts belong to the control plane. */ }
@@ -208,6 +208,8 @@ h1 { margin: 3px 0 0; color: var(--text); font-size: 26px; line-height: 1.14; fo
 .search svg { position: absolute; left: 11px; width: 14px; height: 14px; flex: none; pointer-events: none; }
 .search input { width: 100%; min-width: 0; min-height: 30px; padding: 0 12px 0 33px; border: 0; border-radius: inherit; outline: 0; background: transparent; color: var(--text); }
 .search input::placeholder { color: var(--faint); }
+.task-view-tools { display: none; align-items: center; justify-self: end; gap: 12px; white-space: nowrap; }
+.workspace[data-view-tab="tasks"] .task-view-tools { display: flex; }
 .filters { min-height: 56px; padding: 12px 0; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); background: transparent; }
 .filter-caption { margin-right: 3px; color: var(--faint); font-size: 11px; }
 .filters > .menu-control { position: relative; display: block; max-width: 180px; }
@@ -264,11 +266,14 @@ h1 { margin: 3px 0 0; color: var(--text); font-size: 26px; line-height: 1.14; fo
 .graph-a11y-node:hover, .graph-a11y-node[aria-pressed="true"] { background: var(--active); }
 .empty { display: grid; place-items: center; min-height: 260px; color: var(--faint); }
 .empty[hidden], [hidden] { display: none !important; }
-.timeline-view { min-height: 360px; padding: 12px; }
+.timeline-view { min-height: 360px; padding: 12px; overflow: hidden; overscroll-behavior: contain; }
 #planned-timeline, #actual-timeline { height: 284px; }
 .timeline-view .vis-timeline { height: 100% !important; border: 0; font-family: inherit; user-select: none; }
 .timeline-view .vis-loading-screen { display: none !important; }
-.timeline-view .vis-panel.vis-center { cursor: grab; touch-action: pan-y; }
+.timeline-view .vis-panel.vis-center { cursor: grab; touch-action: pan-x pan-y !important; overflow: auto !important; scrollbar-width: none; }
+.timeline-view .vis-panel.vis-center::-webkit-scrollbar { display: none; }
+.timeline-view .vis-panel.vis-left { cursor: grab; touch-action: pan-x pan-y !important; overflow: hidden !important; }
+.timeline-view .vis-panel.vis-center { overscroll-behavior: contain; }
 .timeline-view .vis-panel.vis-center:active { cursor: grabbing; }
 .timeline-view .vis-panel.vis-center.is-panning { cursor: grabbing; }
 .timeline-view .vis-panel, .timeline-view .vis-labelset .vis-label, .timeline-view .vis-foreground .vis-group { border-color: var(--rule); background: transparent; }
@@ -351,6 +356,7 @@ h1 { margin: 3px 0 0; color: var(--text); font-size: 26px; line-height: 1.14; fo
 @keyframes task-status-hourglass { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
 
 .details-slot { min-width: 0; align-self: stretch; }
+.details-resize { display: none; }
 .details { position: fixed; top: var(--details-top, 16px); left: var(--details-left); width: var(--details-width); max-height: calc(100dvh - var(--details-top, 16px) - 16px); z-index: 10; display: flex; flex-direction: column; overflow: hidden; min-width: 0; container: detail-panel / inline-size; --details-padding-inline: 20px; --details-padding-bottom: 24px; padding: 0; background: var(--raised); border: 1px solid var(--border); border-radius: var(--radius-card); }
 .details-heading { position: relative; flex: none; padding-inline: var(--details-padding-inline); }
 #details-content { padding: 0 var(--details-padding-inline) var(--details-padding-bottom); min-height: 0; overflow: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-gutter: stable; }
@@ -421,6 +427,9 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
 @media (min-width: 768px) and (max-width: 1444px) {
   html { scrollbar-gutter: stable; }
   .main { container-type: inline-size; }
+  .view-header { min-height: 86px; grid-template-rows: minmax(86px, auto); }
+  .view-heading { padding-top: 7px; padding-bottom: 7px; }
+  .tabs { min-height: 52px; }
   .workspace {
     --detail-min-width: 243px;
     --detail-max-width: 740px;
@@ -438,10 +447,23 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
   .details-slot { position: static; padding-top: 16px; }
   .details { position: static; width: auto; max-height: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent; box-shadow: none; padding: 16px 0 4px; display: block; }
   .details-heading button { display: none; }
-  .details-heading { padding: 0 0 12px; display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule); }
-  .detail-title { margin-top: 0; }
-  #details-content { padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; }
-  #details-content > .detail-field:has(.detail-agent-output), #details-content > .detail-field:has(.detail-empty-output), #details-content > .detail-field:has(.atom-list) { grid-column: 1 / -1; }
+  .details-heading { padding: 0 0 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); }
+  #details-summary { min-width: 0; display: flex; align-items: center; gap: 12px; }
+  .detail-title { min-width: 0; margin: 0; padding-right: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .detail-state { flex: 0 0 auto; margin: 0; white-space: nowrap; }
+  #details-content { padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; align-items: start; column-gap: 20px; }
+  #details-content[data-detail-kind="task"] { grid-template-columns: minmax(220px, .9fr) repeat(3, minmax(0, 1fr)); }
+  #details-content[data-detail-kind="group"] { grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(0, 1fr)); }
+  #details-content > .detail-field:has(.detail-agent-output), #details-content > .detail-field:has(.detail-empty-output) { grid-column: 1 / -1; }
+  #details-content > .detail-field:has(.atom-list) { grid-column: span 1; }
+  #details-content > .detail-field:has(.atom-list) { display: block; padding-block: 7px; }
+  #details-content > .detail-field:has(.atom-list) > .detail-value { margin-top: 6px; }
+  #details-content > .detail-field:has(.atom-list) .status-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  #details-content > .detail-group-facts { grid-column: 2 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; align-items: start; column-gap: 16px; }
+  #details-content > .detail-group-facts > .detail-field { min-width: 0; padding-block: 7px; display: block; }
+  #details-content > .detail-group-facts > .detail-field > .detail-label { display: block; margin-bottom: 4px; }
+  #details-content > .detail-group-facts > .detail-field > .detail-value { display: block; }
+  #details-content > .detail-group-facts > .detail-field:has(.detail-agent-output), #details-content > .detail-group-facts > .detail-field:has(.detail-empty-output) { grid-column: 1 / -1; }
   .details-backdrop { display: none; }
   .workspace .task-layout-grid, .workspace .group-cards {
     grid-template-columns: repeat(auto-fill, var(--stable-task-card-width)); gap: 20px;
@@ -452,6 +474,38 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
   .task-layout-board > .task-column { flex-basis: auto; min-width: 0; }
 }
 
+@media (min-width: 768px) and (max-width: 1444px) and (min-height: 961px) {
+  .workspace { height: max(610px, calc(100dvh - 190px)); max-height: none; min-height: 610px; overflow: visible; grid-template-rows: minmax(240px, 1fr) var(--details-height, 40vh); }
+  .workspace[data-view-tab="tasks"] { grid-template-rows: auto minmax(240px, 1fr) var(--details-height, 40vh); }
+  .workspace:not(.has-details) { grid-template-rows: minmax(240px, 1fr); }
+  .workspace[data-view-tab="tasks"]:not(.has-details) { grid-template-rows: auto minmax(240px, 1fr); }
+  .workspace-view, .workspace-tasks { min-height: 0; align-self: stretch; overflow: visible; }
+  .workspace-view { display: flex; flex-direction: column; }
+  .workspace-view > .canvas-view, .workspace-view > .timeline-view { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
+  .workspace-view > .canvas-view #graph { height: 100% !important; min-height: 0; }
+  .workspace-view > .canvas-view #atomic-graph { height: 100% !important; min-height: 0; }
+  .workspace-view > .timeline-view { min-height: 0; display: flex; flex-direction: column; }
+  .workspace-view > .timeline-view > #planned-timeline, .workspace-view > .timeline-view > #actual-timeline { flex: 1 1 auto; height: auto !important; min-height: 0; }
+  .workspace-view > .timeline-view > .axis-timezone, .workspace-view > .timeline-view > .unknown { flex: none; }
+  .workspace-tasks { overflow-y: auto; overflow-x: hidden; }
+  .details-slot { grid-row: 2 !important; padding-top: 0; min-height: 0; }
+  .workspace[data-view-tab="tasks"] .details-slot { grid-row: 3 !important; }
+  .details-resize { display: block; height: 12px; cursor: ns-resize; border-top: 1px solid var(--border); background: linear-gradient(var(--control), var(--control)) center / 42px 3px no-repeat; touch-action: none; overflow-anchor: none; }
+  .details-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+  .details { height: calc(var(--details-height, 40vh) - 12px); max-height: none; padding-top: 0; overflow: hidden; display: flex; flex-direction: column; }
+  .details-heading { flex: none; }
+  #details-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
+}
+
+@media (min-width: 768px) and (max-width: 1444px) and (max-height: 960px) {
+  .details { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: min(82dvh, calc(100dvh - 16px)); padding: 18px 0 0; border-width: 1px 0 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: 0 -12px 32px rgba(0, 0, 0, .24); transform: translateY(102%); }
+  .details.open { transform: translateY(0); }
+  .details::before { flex: none; width: 42px; height: 3px; margin: -7px auto 14px; display: block; border-radius: 2px; content: ""; background: var(--control); }
+  .details-resize { display: none; }
+  .details-backdrop { position: fixed; inset: 0; z-index: 15; display: block; background: #0d101488; pointer-events: auto; }
+  .details-backdrop[hidden] { display: none; }
+}
+
 @media (max-width: 767px) {
   .context-menu-mobile-trigger { display: inline-grid; }
   .topbar { min-height: 50px; padding: 12px 16px; flex-wrap: wrap; gap: 12px; }
@@ -562,7 +616,8 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
 .profile-caption { margin: 0; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; color: var(--muted); }
 .profile-error { margin: 0; font-size: 12px; color: var(--negative); overflow-wrap: anywhere; }
 .profile-error:empty { display: none; }
-.detail-field:has(.execution-profile-editor) { grid-template-columns: minmax(0, 1fr); gap: 7px; }
+.detail-field:has(.execution-profile-editor) { align-items: center; }
+.detail-field:has(.execution-profile-editor) .execution-profile-editor { width: fit-content; max-width: 100%; }
 .run-profile-control { flex: 0 0 auto; min-width: 0; margin-left: -1px; }
 .run-profile-control .profile-trigger { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; min-height: 30px; padding: 0; border: 0; border-color: transparent; border-radius: 50%; color: var(--muted); background: transparent; }
 .run-profile-control .profile-trigger svg { width: 16px; height: 16px; flex: 0 0 16px; transform: translateX(-0.5px); color: currentColor; }

package/toolkit/skills/multi-task-flow/web/app.ts

@@ -16,14 +16,14 @@ import { createHoverController } from "./hover-controller";
 import { createDetailContent } from "./details-content";
 import { deriveConnectionStatus, type Task, type View, type ViewResponse, type Theme } from "./model";
 import { defaultTabForPhase, derivePhase, type DisplayPhase } from "./phase";
-import { DETAILS_PANEL_BREAKPOINT, detailsPanelFits, isDetailInteraction, resolveDetailSurface, selectedObjectFocusSelector } from "./interaction-policy";
+import { DETAILS_PANEL_BREAKPOINT, detailsPanelFits, resolveDetailSurface, selectedObjectFocusSelector } from "./interaction-policy";
 import { applyDetailSurface, installDetailViewport } from "./detail-surface";
 import { firstVisibleElement, focusAfterRerender } from "./focus";
 import { installViewStateNavigation } from "./navigation";
 import { createHoverPreviewBridge, type HoverPreviewBridge } from "./hover-preview";
 import { formatDuration, formatLocalTime } from "./time";
 import { renderTimestamp, refreshTimestamps } from "./timestamp";
-import { planStateSeverity, renderPlanInfoContent, renderPlanState } from "./status-row";
+import { planStateSeverity, renderPlanInfoContent } from "./status-row";
 import { taskKindLabel, STATE_LABELS } from "./labels";
 import { DEFAULT_VIEW_STATE, defaultTaskLayout, hasValidLayoutParam, canonicalViewUrl, hasValidTabParam, parseViewState, replaceViewState, sanitizeViewState, type DashboardTab, type TaskLayout, type ViewState } from "./view-state";
 const ICONS = { Contrast, Network, Search, X, Plus, Minus, Maximize2, ChevronDown, CircleDashed, CircleDot, CirclePlay, LoaderCircle, Hourglass, CircleAlert, CircleHelp, CircleCheck, GitMerge, Columns3, LayoutGrid, MessageCircle, GitPullRequest, TreePalm, ArchiveX, ArchiveRestore, Archive, RefreshCw, Info, Settings2, SunMoon, Sun, Moon };
@@ -222,13 +222,6 @@ function refreshCardDurations(): void {
 function updateTaskLayoutControls(): void {
   for (const [id, layout] of [["task-layout-board", "board"], ["task-layout-grid", "grid"]] as const) $<HTMLButtonElement>(id).setAttribute("aria-pressed", String(viewState.layout === layout));
   $("group-section").hidden = viewState.layout === "board";
-  const heading = $(viewState.layout === "board" ? "task-heading" : "group-heading").parentElement!;
-  const actions = document.querySelector<HTMLElement>(".section-heading-actions")!;
-  if (actions.parentElement !== heading) {
-    const focused = actions.contains(document.activeElement) ? document.activeElement as HTMLElement : null;
-    heading.append(actions);
-    focused?.focus({ preventScroll: true });
-  }
 }
 function syncStableGridCardWidth(): void {
   const workspace = document.querySelector<HTMLElement>(".workspace");
@@ -306,6 +299,30 @@ function canUseDetailsPanel(): boolean {
   const workspace = document.querySelector<HTMLElement>(".workspace");
   return detailsPanelFits(workspace?.getBoundingClientRect().width ?? 0);
 }
+const DETAILS_MIN_HEIGHT = 120;
+const detailsHeightKey = `loomhelm:details-height:${location.pathname}`;
+function detailsHeightBounds(): { min: number; max: number } {
+  const workspace = document.querySelector<HTMLElement>(".workspace");
+  const available = Math.max(DETAILS_MIN_HEIGHT, workspace?.getBoundingClientRect().height ?? window.innerHeight);
+  return { min: DETAILS_MIN_HEIGHT, max: Math.max(DETAILS_MIN_HEIGHT, Math.min(window.innerHeight * 0.6, available - 240)) };
+}
+function setDetailsHeight(value: number, persist = true): void {
+  const bounds = detailsHeightBounds(); const height = Math.round(Math.max(bounds.min, Math.min(bounds.max, value)));
+  document.documentElement.style.setProperty("--details-height", `${height}px`);
+  const separator = document.getElementById("details-resize");
+  separator?.setAttribute("aria-valuemin", String(bounds.min)); separator?.setAttribute("aria-valuemax", String(bounds.max)); separator?.setAttribute("aria-valuenow", String(height));
+  if (persist) localStorage.setItem(detailsHeightKey, String(height));
+}
+const savedDetailsHeight = Number(localStorage.getItem(detailsHeightKey));
+setDetailsHeight(Number.isFinite(savedDetailsHeight) && savedDetailsHeight > 0 ? savedDetailsHeight : window.innerHeight * 0.4, false);
+const detailsResize = document.getElementById("details-resize");
+if (detailsResize) {
+  let startY = 0; let startHeight = 0;
+  const move = (event: PointerEvent) => { event.preventDefault(); setDetailsHeight(startHeight + startY - event.clientY); };
+  const end = () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", end); };
+  detailsResize.addEventListener("pointerdown", event => { event.preventDefault(); startY = event.clientY; startHeight = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--details-height")) || window.innerHeight * 0.4; detailsResize.setPointerCapture?.(event.pointerId); window.addEventListener("pointermove", move, { passive: false }); window.addEventListener("pointerup", end); });
+  detailsResize.addEventListener("keydown", event => { const current = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--details-height")) || window.innerHeight * 0.4; if (event.key === "ArrowUp") { event.preventDefault(); setDetailsHeight(current + 24); } else if (event.key === "ArrowDown") { event.preventDefault(); setDetailsHeight(current - 24); } else if (event.key === "Home") { event.preventDefault(); setDetailsHeight(detailsHeightBounds().min); } else if (event.key === "End") { event.preventDefault(); setDetailsHeight(detailsHeightBounds().max); } });
+}
 const hoverController = createHoverController({
   element: $,
   getData: () => data,
@@ -324,7 +341,8 @@ const hoverController = createHoverController({
 const { supportsHoverDetails, showHoverPreview, hideHoverPreview, recordPointerType, showCurrentSelectionPreview, dismiss: dismissHoverPreview, pointerTypeFromEvent } = hoverController;
 function updateDetailsSurface(open: boolean, focus = false): ReturnType<typeof resolveDetailSurface> {
   const detailPanelViewport = canUseDetailsPanel();
-  const drawerViewport = window.innerWidth < DETAILS_PANEL_BREAKPOINT;
+  const mediumShort = window.innerWidth >= DETAILS_PANEL_BREAKPOINT && window.innerWidth <= 1444 && window.innerHeight <= 960;
+  const drawerViewport = window.innerWidth < DETAILS_PANEL_BREAKPOINT || mediumShort;
   const surface = resolveDetailSurface({ selected: hasSelectedObject(), detailOpen: open, hoverCapable: supportsHoverDetails(), keyboardSelection, detailPanelViewport, drawerViewport });
   applyDetailSurface({ workspace: document.querySelector<HTMLElement>(".workspace")!, background: [document.querySelector<HTMLElement>(".topbar")!, document.querySelector<HTMLElement>(".overview")!, document.querySelector<HTMLElement>(".workspace-main")!], details: $("details"), detailsBackdrop: $("details-backdrop"), hoverPreview: $("hover-preview"), closeDetails: $("close-details") }, surface, detailPanelViewport, focus);
   return surface;
@@ -561,7 +579,6 @@ function render(): void {
   const planWarning = $("plan-warning");
   const planState = data.plan_state;
   renderPlanInfo();
-  renderPlanState($("plan-state"), planState);
   const authorizationLabel = planState?.authorization_label ??
     (planState?.approval_pending ? "Not approved" : "Schedulable");
   const runtimeBlockers = planState?.runtime_readiness?.status === "blocked"
@@ -635,7 +652,9 @@ async function refresh(): Promise<void> {
     }
     if (serial !== requestSerial || result.revision < revision) return;
     const previousPhase = phase; revision = result.revision; activePlanId = result.active_plan_id; data = result.view; applyOutputs({ output_epoch: result.output_epoch ?? "static-demo", output_revision: result.output_revision ?? 0, outputs: Object.fromEntries([...data.tasks.map(t => [t.id, t.latest_agent_output ?? initialOutput(t.thread_id)]), ...data.groups.map(g => [`group:${g.id}`, g.latest_agent_output ?? initialOutput(g.agent_thread_id)])]) }, outputEpoch); const currentPhase = derivePhase(data.tasks, data.execution_phase);
-    if (!hydrated && !userChangedTab && !hasValidTabParam(window.location.search)) viewState = { ...viewState, tab: defaultTabForPhase(currentPhase) };
+    const explicitUrlState = parseViewState(window.location.search);
+    if (hasValidTabParam(window.location.search)) viewState = { ...viewState, tab: explicitUrlState.tab };
+    else if (!hydrated && !userChangedTab) viewState = { ...viewState, tab: defaultTabForPhase(currentPhase) };
     if (!hasValidLayoutParam(window.location.search)) viewState = { ...viewState, layout: defaultTaskLayout(data.groups.length) };
     const requestedTask = viewState.selected?.kind === "task" ? viewState.selected.id : missingLinkedTask;
     const missingTask = requestedTask && !data.tasks.some(task => task.id === requestedTask);
@@ -666,7 +685,7 @@ $("version-menu").addEventListener("keydown", (event) => { if (event.key !== "En
 $("task-layout-board").addEventListener("click", () => setTaskLayout("board")); $("task-layout-grid").addEventListener("click", () => setTaskLayout("grid"));
 $("plan-info-trigger").addEventListener("click", (event) => { event.stopPropagation(); if (planInfoIsOpen()) closePlanInfo(false); else openPlanInfo(); });
 $("close-plan-info").addEventListener("click", () => closePlanInfo()); $("plan-info-backdrop").addEventListener("click", () => closePlanInfo()); $("plan-info-panel").addEventListener("click", (event) => event.stopPropagation());
-document.addEventListener("click", (event) => { const target = event.target as HTMLElement; if (!target.closest("[data-menu]")) closeMenus(); if (planInfoIsOpen() && !target.closest("#plan-info-panel, #plan-info-trigger")) closePlanInfo(); if (viewState.detail && $("details").classList.contains("open") && !isDetailInteraction(target)) closeDetails(); });
+document.addEventListener("click", (event) => { const target = event.target as HTMLElement; if (!target.closest("[data-menu]")) closeMenus(); if (planInfoIsOpen() && !target.closest("#plan-info-panel, #plan-info-trigger")) closePlanInfo(); });
 document.addEventListener("pointerdown", (event) => { keyboardSelection = false; recordPointerType(event.pointerType); }, true); document.addEventListener("pointermove", (event) => recordPointerType(event.pointerType), true);
 document.addEventListener("keydown", (event) => { if ((event.key === "Enter" || event.key === " ") && (event.target as HTMLElement).closest(".task-card-select, .task-column-select, .task-row")) keyboardSelection = true; }, true);
 document.addEventListener("keydown", (event) => { const target = event.target as HTMLElement; const trigger = target.closest<HTMLButtonElement>(".menu-trigger, .theme-trigger"); const option = target.closest<HTMLButtonElement>("[role=option]"); if (event.key === "Escape" && trigger) { event.preventDefault(); event.stopPropagation(); closeMenus(); trigger.focus(); } else if (trigger && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ")) { event.preventDefault(); const id = trigger.id.replace(/-trigger$/, "") as MenuId; openMenu(id); } else if (option && (event.key === "ArrowDown" || event.key === "ArrowUp")) { event.preventDefault(); const options = [...option.closest<HTMLElement>("[role=listbox]")!.querySelectorAll<HTMLButtonElement>("[role=option]")]; const index = options.indexOf(option); options[(index + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length]?.focus(); } else if (option && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); const menu = option.closest<HTMLElement>("[role=listbox]"); const id = menu?.id.replace(/-menu$/, "") as MenuId; chooseMenu(id, option.dataset.menuValue ?? ""); } else if (option && event.key === "Escape") { event.preventDefault(); event.stopPropagation(); closeMenus(); menuTrigger(option.closest<HTMLElement>("[role=listbox]")?.id.replace(/-menu$/, "") as MenuId).focus(); } });
@@ -675,7 +694,7 @@ $("zoom-in").addEventListener("click", () => (viewState.tab === "atomic" ? atomi
 $("timeline-zoom-in").addEventListener("click", () => timelineController.adjustWindow("in")); $("timeline-zoom-out").addEventListener("click", () => timelineController.adjustWindow("out")); $("timeline-fit").addEventListener("click", () => timelineController.fit());
 installViewStateNavigation(window, { getSearch: () => window.location.search, getValidation: (search) => { const targetPlan = search ? new URLSearchParams(search).get("plan") : null; if ((targetPlan ?? activePlanId) !== (viewState.plan ?? activePlanId)) return { plans: new Set(data?.plans.map((plan) => plan.id) ?? []) }; return data ? stateValidation() : {}; }, getPhase: () => data ? phase ?? derivePhase(data.tasks) : null, restore: (next, hasExplicitTab) => { const planChanged = next.plan !== viewState.plan; const closingDetails = viewState.detail && !next.detail; userChangedTab = hasExplicitTab; if (closingDetails) { keyboardSelection = false; hideHoverPreview(); restoreClosedDetailsOnNextRender = true; } viewState = next; selectedTask = next.selected?.kind === "task" ? next.selected.id : null; selectedGroup = next.selected?.kind === "group" ? next.selected.id : null; selectedMilestone = next.selected?.kind === "milestone" ? next.selected.id : null; activePlan = next.plan ?? ""; if (next.detail) focusDetailsOnNextRender = true; if (planChanged) void refresh(); else if (data) render(); } });
 window.addEventListener("keydown", (event) => { trapDetailsFocus(event); trapPlanInfoFocus(event); if (event.key === "Escape" && planInfoIsOpen()) { event.preventDefault(); closePlanInfo(); } else if (event.key === "Escape" && viewState.detail) closeDetails(); });
-window.addEventListener("resize", () => { refreshResponsiveDetails(); syncPlanInfoSurface(); if (data && viewState.tab === "graph" && graphController.rankDir() !== (window.innerWidth < 768 ? "TB" : "LR")) graphController.render(filteredTasks(), viewState.group ? new Set([viewState.group]) : undefined); window.requestAnimationFrame(() => timelineController.redraw()); });
+window.addEventListener("resize", () => { setDetailsHeight(Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--details-height")) || window.innerHeight * 0.4, false); refreshResponsiveDetails(); syncPlanInfoSurface(); if (data && viewState.tab === "graph" && graphController.rankDir() !== (window.innerWidth < 768 ? "TB" : "LR")) graphController.render(filteredTasks(), viewState.group ? new Set([viewState.group]) : undefined); window.requestAnimationFrame(() => timelineController.redraw()); });
 anyHoverCapability.addEventListener("change", refreshResponsiveDetails); anyFinePointerCapability.addEventListener("change", refreshResponsiveDetails);
 const stream = new EventSource("api/events"); stream.addEventListener("open", () => { connected = true; connection("live"); void refresh(); }); stream.addEventListener("revision", () => void refresh()); stream.addEventListener("stale", () => { connected = false; connection("stale"); }); stream.addEventListener("heartbeat", (event) => { try { if (JSON.parse((event as MessageEvent).data).watching && !connected) { connected = true; void refresh(); } } catch { connection("stale"); } }); stream.addEventListener("error", () => { connected = false; connection("stale"); });
 hoverBridge = createHoverPreviewBridge($("hover-preview"), dismissHoverPreview);

package/toolkit/skills/multi-task-flow/web/atomic-graph-view.tsx

@@ -149,7 +149,7 @@ export function createAtomicGraphController(context: GraphContext) {
       pending = false;
       container.style.height = `${Math.max(420, result.height + 80)}px`;
       update?.();
-      requestAnimationFrame(() => { if (serial !== generation) return; instance?.setViewport({ x: Math.max(24, (container.clientWidth - result.width) / 2), y: 24, zoom: 1 }); context.setZoom(1); highlightAccessibleSelection(projection, context); });
+      requestAnimationFrame(() => { if (serial !== generation) return; instance?.setViewport({ x: Math.max(24, (container.clientWidth - result.width) / 2), y: Math.max(24, (container.clientHeight - result.height) / 2), zoom: 1 }); context.setZoom(1); highlightAccessibleSelection(projection, context); });
     }).catch(() => { if (serial !== generation) return; pending = false; update?.(); });
   }