@loomhelm/multi-task-flow 0.2.7 → 0.2.9

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/tests/view.test.ts

@@ -59,6 +59,33 @@ function withRuntimeEvidence<T extends ReturnType<typeof createPlanningDemoLedge
   return ledger;
 }
 
+function addDefinitiveAbsentParentPrFact(ledger: ReturnType<typeof createPlanningDemoLedger>, groupId: string) {
+  const group = ledger.groups.find((item) => item.id === groupId)!;
+  ledger.facts.push({
+    id: `${groupId}-parent-pr-absent`,
+    kind: "pr_published",
+    subject_id: groupId,
+    status: "failed",
+    source: ledger.repository.provider,
+    observed_at: ledger.updated_at,
+    sha: null,
+    evidence_ref: `${groupId}:parent-pr-absent`,
+    receipt: {
+      provider: ledger.repository.provider,
+      repository: `${ledger.repository.owner}/${ledger.repository.name}`,
+      resource_type: "pr",
+      resource_id: `${groupId}-parent-pr`,
+      branch: group.parent_branch,
+      target_branch: "main",
+      base_sha: null,
+      head_sha: null,
+      pr: null,
+      state: "absent",
+      evidence_ref: `${groupId}:parent-pr-absent`,
+    },
+  });
+}
+
 describe("timeline projections", () => {
   test("rejects incomplete plans before formal scheduling", () => {
     expect(() => validateSchedulablePlan(fixture([taskNode("a", null)], []))).toThrow("缺少原子任务");
@@ -169,6 +196,46 @@ describe("timeline projections", () => {
     });
   });
 
+  test("aligns bootstrap main-owned task readiness with the execution exception", () => {
+    const ledger = structuredClone(createPlanningDemoLedger(1_767_200_000_000));
+    ledger.contract_version = 2;
+    ledger.source_schema_version = null;
+    const group = ledger.groups.find((item) => item.id === "core")!;
+    const task = ledger.tasks.find((item) => item.group_id === group.id && item.kind === "contribution")!;
+    group.delivery_unit_kind = "bootstrap";
+    group.owner_kind = "main";
+    group.agent_thread_id = null;
+    group.state = "active";
+    group.lifecycle.workspace_ready = "passed";
+    group.atoms.find((atom) => atom.lifecycle_stage === "workspace_ready")!.status = "completed";
+    ledger.events.push({
+      id: "bootstrap-workspace-ready",
+      type: "lifecycle_recorded",
+      subject_id: group.id,
+      actor_id: ledger.control.owner_thread_id!,
+      occurred_at: ledger.updated_at,
+      recorded_at: ledger.updated_at,
+      data: { target_type: "group", stage: "workspace_ready", evidence_ref: "bootstrap-workspace" },
+    });
+    addDefinitiveAbsentParentPrFact(ledger, group.id);
+    task.execution_owner = "main";
+    task.conversation_policy = "main_owned";
+    task.delivery_policy = "parent_pr";
+    const view = buildView(ledger) as any;
+    const projected = view.tasks.find((item: any) => item.id === task.id);
+
+    expect(projected.dispatch_readiness).toBe("ready");
+    expect(projected.dispatch_diagnostics).not.toContainEqual(expect.objectContaining({ code: "DELIVERY_PARENT_PR_GATE_PENDING" }));
+
+    task.execution_owner = "task_agent";
+    task.conversation_policy = "task_agent";
+    task.delivery_policy = "child_pr";
+    const blockedView = buildView(ledger) as any;
+    const blocked = blockedView.tasks.find((item: any) => item.id === task.id);
+    expect(blocked.dispatch_readiness).toBe("blocked");
+    expect(blocked.dispatch_diagnostics).toContainEqual(expect.objectContaining({ code: "DELIVERY_PARENT_PR_GATE_PENDING" }));
+  });
+
   test("does not project a closed delivery unit as schedulable", () => {
     const ledger = withRuntimeEvidence(structuredClone(createPlanningDemoLedger(1_767_200_000_000)));
     ledger.contract_version = 2;
@@ -189,6 +256,88 @@ describe("timeline projections", () => {
     }));
   });
 
+  test("keeps bootstrap delivery-unit readiness behind active workspace state", () => {
+    const ledger = structuredClone(createPlanningDemoLedger(1_767_200_000_000));
+    const group = ledger.groups.find((item) => item.id === "core")!;
+    group.delivery_unit_kind = "bootstrap";
+    group.owner_kind = "main";
+    group.agent_thread_id = null;
+    group.state = "planned";
+    const planned = buildView(ledger) as any;
+    const plannedGroup = planned.groups.find((item: any) => item.id === group.id);
+    expect(plannedGroup.dispatch_readiness).toBe("blocked");
+    expect(planned.plan_state.dispatch_readiness).toBe("blocked");
+    expect(plannedGroup.dispatch_diagnostics).toContainEqual(expect.objectContaining({ code: "DELIVERY_UNIT_NOT_ACTIVE" }));
+
+    group.state = "active";
+    const activeWithoutWorkspace = buildView(ledger) as any;
+    const blockedGroup = activeWithoutWorkspace.groups.find((item: any) => item.id === group.id);
+    expect(blockedGroup.dispatch_readiness).toBe("blocked");
+    expect(blockedGroup.dispatch_diagnostics).toContainEqual(expect.objectContaining({ code: "DELIVERY_WORKSPACE_GATE_PENDING" }));
+  });
+
+  test("does not infer definitive parent PR absence from missing facts", () => {
+    const ledger = structuredClone(createPlanningDemoLedger(1_767_200_000_000));
+    const group = ledger.groups.find((item) => item.id === "core")!;
+    group.delivery_unit_kind = "bootstrap";
+    group.owner_kind = "main";
+    group.agent_thread_id = null;
+    group.state = "active";
+    group.lifecycle.workspace_ready = "passed";
+    group.atoms.find((atom) => atom.lifecycle_stage === "workspace_ready")!.status = "completed";
+    ledger.events.push({
+      id: "missing-parent-workspace-ready",
+      type: "lifecycle_recorded",
+      subject_id: group.id,
+      actor_id: ledger.control.owner_thread_id!,
+      occurred_at: ledger.updated_at,
+      recorded_at: ledger.updated_at,
+      data: { target_type: "group", stage: "workspace_ready", evidence_ref: "missing-parent-workspace" },
+    });
+    const view = buildView(ledger) as any;
+    const projected = view.groups.find((item: any) => item.id === group.id);
+    expect(projected.dispatch_readiness).toBe("blocked");
+    expect(projected.dispatch_diagnostics).toContainEqual(expect.objectContaining({ code: "DELIVERY_PARENT_PR_GATE_PENDING" }));
+  });
+
+  test("does not project a closed parent PR as ready", () => {
+    const ledger = withRuntimeEvidence(structuredClone(createPlanningDemoLedger(1_767_200_000_000)));
+    ledger.contract_version = 2;
+    ledger.source_schema_version = null;
+    const group = ledger.groups.find((item) => item.id === "dashboard")!;
+    group.parent_pr = { provider: "github", repository: "example/repo", id: "parent-pr", url: "https://github.com/example/repo/pull/1" };
+    group.lifecycle.pr_created = "passed";
+    group.atoms.push({ id: "parent-pr", title: "Create parent PR", purpose: "Publish", output: "Created", lifecycle_stage: "pr_created", status: "completed" });
+    ledger.plans[0]!.group_atoms = ledger.groups.flatMap((item) => item.atoms.map(({ status, ...atom }: any) => ({ ...atom, group_id: item.id })));
+    ledger.facts.push({
+      id: "closed-parent-pr",
+      kind: "pr_published",
+      subject_id: group.id,
+      status: "passed",
+      source: "github",
+      observed_at: at,
+      sha: null,
+      evidence_ref: "provider:closed-parent-pr",
+      receipt: {
+        provider: "github",
+        repository: "example/repo",
+        resource_type: "pr",
+        resource_id: "parent-pr",
+        branch: "main",
+        target_branch: "main",
+        base_sha: null,
+        head_sha: null,
+        pr: { provider: "github", repository: "example/repo", id: "parent-pr", url: "https://github.com/example/repo/pull/1" },
+        state: "absent",
+        evidence_ref: "provider:closed-parent-pr",
+      },
+    });
+    const view = buildView(ledger) as any;
+    const projected = view.groups.find((item: any) => item.id === group.id);
+    expect(projected.dispatch_readiness).toBe("blocked");
+    expect(projected.dispatch_diagnostics).toContainEqual(expect.objectContaining({ code: "DELIVERY_PARENT_PR_GATE_PENDING" }));
+  });
+
   test("projects an unresolved group conversation creation as unknown", () => {
     const ledger = structuredClone(createPlanningDemoLedger(1_767_200_000_000));
     ledger.contract_version = 2;

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; }
@@ -399,6 +405,7 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
 .detail-empty-output::before { width: 5px; height: 5px; flex: none; border: 1px solid currentColor; border-radius: 50%; content: ""; }
 .detail-empty-output::after { content: attr(data-empty-label); }
 .detail-value a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+.detail-placeholder { color: var(--muted); font-style: italic; }
 .mobile-close { display: grid; }
 .details-backdrop { display: none; }
 .hover-preview { position: fixed; z-index: 50; width: min(280px, calc(100vw - 24px)); max-height: min(420px, calc(100vh - 24px)); overflow: auto; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-card); color: var(--text); background: var(--raised); box-shadow: var(--shadow); opacity: 0; pointer-events: auto; transform: translateY(5px) scale(.98); transform-origin: center; transition: opacity 140ms ease-out, transform 180ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 180ms; visibility: hidden; }
@@ -420,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;
@@ -437,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;
@@ -451,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; }
@@ -561,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; }
@@ -695,6 +751,9 @@ time[data-local-timestamp] { cursor: help; font-variant-numeric: tabular-nums; }
 #atomic-graph .react-flow__node-card { pointer-events:none !important; }
 #atomic-graph .react-flow__node-card > .atomic-dependency-card { pointer-events:auto; }
 #atomic-graph .react-flow__node.selected .atomic-dependency-card { outline:2px solid var(--accent); outline-offset:3px; }
+#atomic-graph .atomic-dependency-card { border-color: var(--node-color, var(--border)); background: var(--raised); box-shadow: 0 3px 10px #00000022; }
+#atomic-graph .atomic-dependency-card[data-state="planned"] { border-style: dashed; }
+#atomic-graph .atomic-dependency-card[data-state="blocked"] { background: color-mix(in srgb, var(--raised) 92%, var(--negative) 8%); }
 #atomic-graph .react-flow__handle { opacity:0; width:1px; height:1px; border:0; pointer-events:none; }
 #atomic-graph .react-flow__attribution { background:var(--surface); color:var(--muted); font-size:9px; }
 .atomic-dependency-scope { margin-top:6px; color:var(--muted); font-size:11px; line-height:15px; overflow-wrap:anywhere; }

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"
@@ -585,7 +602,15 @@ function render(): void {
   if (restoreClosedDetailsOnNextRender) { restoreClosedDetailsOnNextRender = false; restoreClosedDetails(); }
   if (phaseTransition) { $("phase-notice").hidden = false; $("phase-notice-text").textContent = "已有真实任务开始执行，阶段已切换；当前视图和筛选保持不变。"; } else $("phase-notice").hidden = true;
 }
-function setTabAria(tab: DashboardTab): void { for (const button of document.querySelectorAll<HTMLButtonElement>("[data-tab]")) button.setAttribute("aria-selected", String(button.dataset.tab === tab)); for (const name of ["graph", "planned", "actual", "tasks"]) $(`${name}-view`).hidden = name !== tab; $("workspace").dataset.viewTab = tab; }
+function setTabAria(tab: DashboardTab): void {
+  for (const button of document.querySelectorAll<HTMLButtonElement>("[data-tab]")) button.setAttribute("aria-selected", String(button.dataset.tab === tab));
+  const graphView = $("graph-view");
+  const graphVisible = ["graph", "atomic"].includes(tab);
+  graphView.hidden = !graphVisible;
+  graphView.setAttribute("aria-labelledby", tab === "atomic" ? "tab-atomic" : "tab-graph");
+  for (const name of ["planned", "actual", "tasks"]) $(`${name}-view`).hidden = name !== tab;
+  $("workspace").dataset.viewTab = tab;
+}
 
 function renderAtomicGraph(): void {
   if (!data) return;
@@ -627,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);
@@ -658,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(); } });
@@ -667,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

@@ -11,7 +11,7 @@ type AtomicCardData = { title: string; kind: string; state: string; scope: strin
 
 const AtomicCard = memo(function AtomicCard({ data }: NodeProps) {
   const value = data as unknown as AtomicCardData;
-  return <div className="dependency-card atomic-dependency-card" data-context-kind={value.taskId ? "task" : undefined} data-context-id={value.taskId ?? value.nodeId}>
+  return <div className="dependency-card atomic-dependency-card" data-context-kind={value.taskId ? "task" : undefined} data-context-id={value.taskId ?? value.nodeId} data-state={value.state} style={{ "--node-color": value.color } as React.CSSProperties}>
     <div className="dependency-card-meta"><span>{value.kind}</span><span>{value.state}</span></div>
     <div className="dependency-card-title">{value.title}</div>
     <div className="atomic-dependency-scope">{value.scope}</div>
@@ -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?.(); });
   }