diff --git a/.gitignore b/.gitignore
index 2c165dcf..fbcb249e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,8 @@ data/
 # Libretto runtime state. Keep config/skills if setup creates them.
 .libretto/sessions/
 .libretto/profiles/
+
+# Local design prototypes and visual QA artifacts.
+/design-qa.md
+/prototypes/
+/qa/
diff --git a/docs/superpowers/plans/2026-07-18-automation-logging-variants.md b/docs/superpowers/plans/2026-07-18-automation-logging-variants.md
new file mode 100644
index 00000000..d640ff1b
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-18-automation-logging-variants.md
@@ -0,0 +1,161 @@
+# Automation Logging Variants Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Simplify parallel sync launch and provide three directly comparable live-log presentations.
+
+**Architecture:** Keep one React app and one parallel-run state. Select `drawer`, `inline`, or `console` from `?logging=`; each presentation renders the same deterministic log event list, so only layout changes between links.
+
+**Tech Stack:** React 19, Vite 6, Phosphor Icons, native CSS, Node test runner, Sites hosting.
+
+## Global Constraints
+
+- Reuse the existing task data, timer, dialogs, sidebar, and three-stage workflow.
+- Do not add routes, packages, backend calls, persistence, scheduling, queues, or retry logic.
+- Keep Traditional Chinese product copy.
+- Keep the existing `.openai/hosting.json` project and workspace-wide access.
+
+---
+
+### Task 1: Shared live-log events
+
+**Files:**
+- Modify: `prototypes/automation-guided-flow/src/task-state.test.mjs`
+- Modify: `prototypes/automation-guided-flow/src/task-state.mjs`
+
+**Interfaces:**
+- Produces: `buildRunLogs(progress: number, elapsedSeconds: number): Array<{time: string, task: string, message: string, level: "info" | "success" | "error"}>`
+
+- [ ] **Step 1: Write the failing test**
+
+Add a test that imports `buildRunLogs`, checks that progress `4` returns only the dispatch event, and checks that progress `60` includes the failed 渣打 event with `level: "error"`.
+
+```js
+test("buildRunLogs reveals chronological task events as progress advances", () => {
+  assert.equal(buildRunLogs(4, 0).length, 1);
+  const logs = buildRunLogs(60, 18);
+  assert.equal(logs.at(-1).task, "渣打銀行對帳單");
+  assert.equal(logs.at(-1).level, "error");
+});
+```
+
+- [ ] **Step 2: Verify the test fails for the missing export**
+
+Run: `node --test src/task-state.test.mjs`
+
+Expected: FAIL because `buildRunLogs` is not exported.
+
+- [ ] **Step 3: Implement the smallest deterministic event builder**
+
+Use one ordered event array with progress thresholds and return only reached events. Format time from `elapsedSeconds` without timers or I/O.
+
+```js
+export function buildRunLogs(progress, elapsedSeconds) {
+  const now = (offset) => `00:${String(Math.max(0, elapsedSeconds - offset)).padStart(2, "0")}`;
+  return [
+    [0, "系統", "已送出 14 個同步任務", "info", 0],
+    [10, "富邦全部對帳單", "已連線銀行網站", "info", 3],
+    [24, "玉山信用卡對帳單", "登入完成，開始下載", "info", 7],
+    [42, "富邦全部對帳單", "已下載 5 個檔案", "success", 12],
+    [58, "渣打銀行對帳單", "登入逾時，需要重新執行", "error", 18],
+  ].filter(([threshold]) => progress >= threshold).map(([, task, message, level, offset]) => ({ time: now(offset), task, message, level }));
+}
+```
+
+- [ ] **Step 4: Verify all state tests pass**
+
+Run: `node --test src/task-state.test.mjs`
+
+Expected: 5 tests pass.
+
+### Task 2: Simplified launch and three presentations
+
+**Files:**
+- Modify: `prototypes/automation-guided-flow/src/App.jsx`
+- Modify: `prototypes/automation-guided-flow/src/styles.css`
+
+**Interfaces:**
+- Consumes: `buildRunLogs(progress, elapsedSeconds)` from Task 1.
+- Produces: direct variants at `?logging=drawer`, `?logging=inline`, and `?logging=console`.
+
+- [ ] **Step 1: Simplify the idle hero and confirmation sheet**
+
+Change the hero to one heading and one `同步全部` button. Remove summary counts and `調整任務`. Trim `PreflightSheet` to credential readiness, selected tasks, `取消`, and `開始同步`; delete warning and acknowledgement state/props.
+
+```jsx
+<section className="hero simple-hero">
+  <h1>{count} 個任務可以同步執行</h1>
+  <button className="button primary hero-primary" onClick={onStart}><Play size={18} weight="fill" />同步全部</button>
+</section>
+```
+
+- [ ] **Step 2: Select the presentation from the query parameter**
+
+Normalize once at module load and default invalid values to `drawer`.
+
+```js
+const requestedLoggingMode = new URLSearchParams(window.location.search).get("logging");
+const loggingMode = ["drawer", "inline", "console"].includes(requestedLoggingMode) ? requestedLoggingMode : "drawer";
+```
+
+- [ ] **Step 3: Add one shared log renderer**
+
+Render time, task, message, and error/success color from `buildRunLogs`. Keep the markup reusable in all three surfaces.
+
+```jsx
+function LogEntries({ logs }) {
+  return <ol className="log-entries">{logs.map((log) => <li className={log.level} key={`${log.time}-${log.task}`}><time>{log.time}</time><div><strong>{log.task}</strong><span>{log.message}</span></div></li>)}</ol>;
+}
+```
+
+- [ ] **Step 4: Add drawer, inline, and console wrappers**
+
+- Drawer: fixed right panel with aggregate progress, `LogEntries`, close, and stop-all.
+- Inline: add a unique `日誌` button per included task row and expand the selected row directly beneath it.
+- Console: fixed bottom panel with chronological `LogEntries`, collapse, and stop-all.
+
+All three wrappers receive only `run`, `logs`, visibility callbacks, and `onStop`; they do not own run state.
+
+- [ ] **Step 5: Connect launch and visibility**
+
+On confirm, start the existing parallel run, close confirmation, then open the selected log surface. During a run, the hero contains `查看日誌` and `停止全部`; `查看日誌` reopens the relevant surface.
+
+- [ ] **Step 6: Style only the new surfaces and delete obsolete rules**
+
+Remove `.preflight-warning`, `.acknowledge`, and unused multi-check spacing. Add `.live-log-drawer`, `.inline-log`, `.log-console`, and shared `.log-entries` rules using existing colors and borders. Keep the drawer responsive and the console above the 64px sidebar breakpoint.
+
+- [ ] **Step 7: Build and verify**
+
+Run: `node --test src/task-state.test.mjs && npm run build && git diff --check`
+
+Expected: tests pass, Vite emits `dist/server/index.js`, and diff check is clean.
+
+### Task 3: Browser QA and existing Sites deployment
+
+**Files:**
+- Modify: `prototypes/automation-guided-flow/design-qa.md`
+- Generated build output only: `prototypes/automation-guided-flow/dist/**`
+
+**Interfaces:**
+- Consumes the three query-parameter variants from Task 2.
+- Produces an updated version at the existing Sites URL.
+
+- [ ] **Step 1: Verify all three local variants**
+
+For each query parameter, launch sync and confirm the expected logging surface appears. Check that removed copy and controls are absent, `同步全部` is present, and the browser console has no fresh errors.
+
+- [ ] **Step 2: Verify responsive layout**
+
+At the existing narrow browser viewport, confirm no document-level horizontal overflow and that the active logging surface can be closed and reopened.
+
+- [ ] **Step 3: Update design QA**
+
+Record the simplified launch flow, three tested variants, interaction checks, browser-console result, and `final result: passed` in `design-qa.md`.
+
+- [ ] **Step 4: Publish the validated source**
+
+Push the exact source state to the existing Sites source repository, package the current `dist`, save version 2 with the pushed commit SHA, deploy it, poll to `succeeded`, and retain `workspace_all` access.
+
+- [ ] **Step 5: Return three direct links**
+
+Return the same deployed base URL with `?logging=drawer`, `?logging=inline`, and `?logging=console` so the user can compare without a new route or selector UI.
diff --git a/docs/superpowers/plans/2026-07-19-automation-active-task-jump.md b/docs/superpowers/plans/2026-07-19-automation-active-task-jump.md
new file mode 100644
index 00000000..252527eb
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-automation-active-task-jump.md
@@ -0,0 +1,53 @@
+# Automation Active Task Jump Prototype Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build one isolated Automation prototype where active tasks in the running summary navigate to their inline logs.
+
+**Architecture:** Create one self-contained HTML prototype with realistic mock data and native browser behavior. Keep all presentation and interaction local to the prototype; add one source-level Node check for the required interaction contract.
+
+**Tech Stack:** HTML, CSS, browser JavaScript, Node.js assertions.
+
+## Global Constraints
+
+- Do not modify the production app.
+- Remove the 「查看日誌」 action from the prototype.
+- Task start and polling never cause automatic expansion or scrolling.
+- Preserve other manually opened inline logs.
+- Use no new dependencies.
+
+---
+
+### Task 1: Active-task summary and inline-log navigation
+
+**Files:**
+- Create: `prototypes/automation-active-task-jump/index.html`
+- Create: `prototypes/automation-active-task-jump/active-task-jump.check.mjs`
+
+**Interfaces:**
+- Consumes: browser `scrollIntoView`, `focus`, `matchMedia`, and DOM events.
+- Produces: `revealTaskLog(taskId)` in the prototype script.
+
+- [ ] **Step 1: Write the failing source contract check**
+
+Assert that the prototype contains active-task buttons, no 「查看日誌」 button, `revealTaskLog`, `scrollIntoView`, focus transfer, reduced-motion handling, and multiple independently open inline logs.
+
+- [ ] **Step 2: Run the check to verify it fails**
+
+Run: `node prototypes/automation-active-task-jump/active-task-jump.check.mjs`
+Expected: FAIL because `index.html` does not exist.
+
+- [ ] **Step 3: Implement the self-contained prototype**
+
+Build the existing Automation shell, running summary task buttons, three workflow stages, and inline log panels. Selecting an active task opens its stage and log, scrolls to it, focuses its heading, and applies a temporary highlight.
+
+- [ ] **Step 4: Run the source check**
+
+Run: `node prototypes/automation-active-task-jump/active-task-jump.check.mjs`
+Expected: PASS.
+
+- [ ] **Step 5: Render and visually verify**
+
+Render at 1600 × 1000. Confirm typography, layout, active-task scanability, target highlight, and narrow responsiveness. Start a local-only static server and provide the prototype URL.
+
+**Repository note:** Keep the existing dirty worktree uncommitted and preserve unrelated user changes.
diff --git a/docs/superpowers/plans/2026-07-19-automation-disclosure-motion.md b/docs/superpowers/plans/2026-07-19-automation-disclosure-motion.md
new file mode 100644
index 00000000..d8ae797d
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-automation-disclosure-motion.md
@@ -0,0 +1,86 @@
+# Automation Disclosure Motion Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Animate automation stage, inline-log, and show-all disclosures without changing their layout or state model.
+
+**Architecture:** Reuse Svelte's installed `slide` transition through one local reduced-motion-aware wrapper in `AutomationDashboard.svelte`. Apply it to the three existing conditional surfaces and add a CSS transition to the existing caret.
+
+**Tech Stack:** Svelte 5, TypeScript, native CSS, Node assertion checks, Electron CDP.
+
+## Global Constraints
+
+- No new dependency, route, data state, or visual redesign.
+- Expansion and collapse duration is 220 ms; caret rotation is 180 ms.
+- `prefers-reduced-motion: reduce` changes disclosure duration to 0 ms.
+- Preserve table semantics, fixed column widths, labels, and controls.
+
+---
+
+### Task 1: Disclosure transitions
+
+**Files:**
+- Modify: `src/lib/automation/AutomationDashboard.check.ts`
+- Modify: `src/lib/automation/AutomationDashboard.svelte`
+
+**Interfaces:**
+- Consumes: Svelte `slide(node, { duration })`.
+- Produces: `disclosureSlide(node: Element)` transition used by stage bodies, inline logs, and task rows.
+
+- [ ] **Step 1: Write the failing source regression checks**
+
+Add assertions for the `slide` import, reduced-motion wrapper, three transition directives, and caret transition:
+
+```ts
+assert.match(source, /import \{ slide \} from "svelte\/transition"/);
+assert.match(source, /function disclosureSlide\(node: Element\)/);
+assert.match(source, /matchMedia\("\(prefers-reduced-motion: reduce\)"\)\.matches \? 0 : 220/);
+assert.match(source, /class="stage-body"[^>]*transition:disclosureSlide/);
+assert.match(source, /class="task-row"[^>]*transition:disclosureSlide/);
+assert.match(source, /class="inline-log-panel"[^>]*transition:disclosureSlide/);
+assert.match(source, /transition: transform 180ms ease/);
+```
+
+- [ ] **Step 2: Run the focused check and confirm the new assertions fail**
+
+Run: `node --no-warnings --experimental-strip-types --test src/lib/automation/AutomationDashboard.check.ts`
+
+Expected: FAIL on the missing `svelte/transition` import.
+
+- [ ] **Step 3: Add the smallest implementation**
+
+Import `slide`, add the local wrapper, apply `transition:disclosureSlide` to the existing stage body, keyed task rows, and inline log panel, and add `transition: transform 180ms ease` to `.stage-caret`.
+
+```svelte
+<script lang="ts">
+  import { slide } from "svelte/transition";
+
+  function disclosureSlide(node: Element) {
+    return slide(node, {
+      duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 220,
+    });
+  }
+</script>
+```
+
+- [ ] **Step 4: Run focused and project verification**
+
+Run: `node --no-warnings --experimental-strip-types --test src/lib/automation/AutomationDashboard.check.ts`
+
+Expected: PASS.
+
+Run: `npm run typecheck`
+
+Expected: exit 0 with no Svelte or TypeScript errors.
+
+Run: `npm run build`
+
+Expected: exit 0 and renderer/electron bundles emitted.
+
+- [ ] **Step 5: Verify the live Electron interactions**
+
+Connect to `http://127.0.0.1:9222`, reload the built page, and verify stage collapse/expand, inline-log collapse/expand, and show-all/collapse. Capture the implementation at the same desktop viewport and confirm there are no fresh console errors.
+
+- [ ] **Step 6: Record design QA**
+
+Update `design-qa.md` with the source screenshot paths, implementation screenshot path, viewport/state, the three interactions, console result, focused comparison, and `final result: passed` only when no actionable P0/P1/P2 mismatch remains.
diff --git a/docs/superpowers/plans/2026-07-19-automation-log-redesign-options.md b/docs/superpowers/plans/2026-07-19-automation-log-redesign-options.md
new file mode 100644
index 00000000..1946d4bb
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-19-automation-log-redesign-options.md
@@ -0,0 +1,88 @@
+# Automation Log Redesign Options — Implementation Plan
+
+> **For Codex:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Remove the aggregate progress bar from the production Automation running summary and deliver three interactive, directly comparable log-viewer prototypes.
+
+**Architecture:** Keep the production change narrowly scoped to `AutomationDashboard.svelte` and its source-level regression check. Build the three visual directions as isolated, self-contained HTML prototypes under `prototypes/automation-log-options/`, using the existing Automation shell, Traditional Chinese labels, realistic concurrent task data, and no Electron or banking side effects.
+
+**Tech Stack:** Svelte 5 source checks for production; standalone HTML/CSS/JavaScript for prototypes.
+
+---
+
+### Task 1: Remove the production aggregate progress bar
+
+**Files:**
+- Modify: `src/lib/automation/AutomationDashboard.check.ts`
+- Modify: `src/lib/automation/AutomationDashboard.svelte`
+
+**Step 1: Write the failing regression check**
+
+- Replace the assertions for `combinedTaskProgress` with assertions that the running-summary aggregate progress markup and state are absent.
+- Keep assertions proving per-task progress UI remains available.
+
+**Step 2: Run the focused check to verify RED**
+
+Run: `npx tsx src/lib/automation/AutomationDashboard.check.ts`
+Expected: FAIL because the aggregate progress state/function/markup still exists.
+
+**Step 3: Implement the minimal production change**
+
+- Remove `aggregateProgress` reactive state.
+- Remove `combinedTaskProgress`.
+- Remove the hero `aggregate-progress` block only.
+- Preserve running task count, 「查看日誌」, 「停止全部」, and per-task progress/status.
+
+**Step 4: Run the focused check to verify GREEN**
+
+Run: `npx tsx src/lib/automation/AutomationDashboard.check.ts`
+Expected: PASS.
+
+### Task 2: Build three isolated interactive log prototypes
+
+**Files:**
+- Create: `prototypes/automation-log-options/task-stack.html`
+- Create: `prototypes/automation-log-options/console-matrix.html`
+- Create: `prototypes/automation-log-options/merged-stream.html`
+- Create: `prototypes/automation-log-options/index.html`
+
+**Step 1: Build the three directions in parallel**
+
+- Option 1 — Task stack: full-width stacked log sections with sticky task headers and independent collapse.
+- Option 2 — Console matrix: equal responsive consoles with independent scroll and follow-tail controls.
+- Option 3 — Merged stream: one chronological stream with task tags, filter/search, error-only, and pause/follow controls.
+- In every option, one modal must show multiple active task logs simultaneously.
+- Do not include the aggregate hero progress bar.
+
+**Step 2: Add the comparison hub**
+
+- Add a simple index page linking all three options and summarizing their operational trade-offs.
+- Keep every option directly addressable by URL.
+
+**Step 3: Render all three at one viewport**
+
+- Produce same-size preview screenshots for direct visual comparison.
+- Check modal fit, content density, controls, overflow, and task-state legibility.
+
+### Task 3: Verify implementation and hand off for selection
+
+**Files:**
+- Modify: `design-qa.md`
+
+**Step 1: Verify production code**
+
+Run the focused dashboard check, typecheck, and build. Record any unrelated pre-existing failures without changing their scope.
+
+**Step 2: Verify prototype interactions**
+
+- Confirm open/close and Escape behavior.
+- Confirm each option displays at least four active tasks at once.
+- Confirm option-specific controls work.
+- Confirm no option auto-opens on simulated task start.
+
+**Step 3: Record visual QA and share links**
+
+- Append a concise comparison result to `design-qa.md`.
+- Return all three prototype links and ask the user to choose 1, 2, or 3 before production log UI implementation.
+
+**Repository note:** Keep the current dirty worktree uncommitted; do not include unrelated user changes in a commit.
diff --git a/docs/superpowers/specs/2026-07-18-automation-logging-variants-design.md b/docs/superpowers/specs/2026-07-18-automation-logging-variants-design.md
new file mode 100644
index 00000000..8b4f19bc
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-18-automation-logging-variants-design.md
@@ -0,0 +1,33 @@
+# Automation Logging Variants
+
+## Goal
+
+Make parallel sync easier to start, then compare three logging presentations without changing the underlying task flow.
+
+## Shared launch flow
+
+- Hero shows only `14 個任務可以同步執行` and one `同步全部` action.
+- Remove the summary counts and `調整任務` action.
+- The confirmation sheet keeps only its title, credential readiness, selected task list, `取消`, and `開始同步`.
+- Remove the running-task check, dependency check, downstream-unlock check, multi-window warning, and acknowledgement checkbox.
+
+## Logging variants
+
+All variants use the same live run state and realistic timestamped events. The selected mode is controlled by the `logging` query parameter so each version has a direct link.
+
+1. `drawer`: after launch, the right sheet becomes `即時日誌`, with aggregate progress, latest events, error emphasis, and stop-all.
+2. `inline`: each running task row exposes a `日誌` control; the selected task expands beneath its row with recent events.
+3. `console`: a bottom panel shows a dense chronological stream across all tasks, with a collapse control.
+
+## Behavior and error handling
+
+- Starting sync launches every selected task with one click.
+- Logs advance from the same timer as progress, so all three presentations stay consistent.
+- A simulated failure event is visually distinct and identifies the task; no backend, persistence, scheduling, or retry system is added.
+- Existing credential and run-history dialogs remain available.
+
+## Verification
+
+- Unit-test log event generation and existing parallel-run state.
+- Verify launch and log visibility for all three query-parameter variants.
+- Check responsive behavior, browser console, production build, and update the existing Sites deployment.
diff --git a/docs/superpowers/specs/2026-07-19-automation-active-task-jump-design.md b/docs/superpowers/specs/2026-07-19-automation-active-task-jump-design.md
new file mode 100644
index 00000000..984e1ebe
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-19-automation-active-task-jump-design.md
@@ -0,0 +1,57 @@
+# Automation Active Task Jump — Design Spec
+
+## Goal
+
+Replace the running-summary 「查看日誌」 action with a compact list of active tasks. Selecting a task reveals and scrolls to that task's inline log on the Automation page.
+
+## Scope
+
+- This specification now describes the production implementation.
+- Reuse the current Automation visual system and page structure.
+- Keep 「停止全部」 as the only summary-level action.
+- Do not add a log modal, filters, progress aggregation, or new task-management behavior.
+
+## Running Summary
+
+- The heading continues to show the number of concurrently running tasks.
+- Below the heading, render active, waiting-for-human, and failed tasks as circular icon buttons in a horizontally scrollable layer.
+- Hover and keyboard focus reveal a tooltip with the task name, stage, state, and timestamp.
+- The former 「查看日誌」 button is absent.
+
+## Selection Interaction
+
+When an active task is selected:
+
+1. Open the workflow stage containing that task if it is collapsed.
+2. Reveal that task's inline log if it is collapsed.
+3. Close any previously expanded inline log so only the selected task remains open.
+4. Smooth-scroll the selected task row into view with enough top offset for the fixed application header.
+5. Apply a short blue focus highlight to the target log container, then remove it automatically.
+6. Move keyboard focus to the inline log panel without triggering a second scroll.
+
+Starting or polling a task must not automatically expand logs or move the viewport.
+
+## Production State
+
+- Show every active, waiting-for-human, and failed task in the summary.
+- Tasks can appear across workflow stages; selecting one opens its collapsed stage.
+- Labels, statuses, timestamps, and log output come from the current page model.
+
+## Accessibility
+
+- Active-task items use buttons, not generic clickable containers.
+- Each button names both the task and the action, for example 「前往玉山信用卡對帳單日誌」.
+- Each button's accessible name includes both the log action and task name.
+- The target log panel receives programmatic focus.
+- Smooth scrolling is disabled when `prefers-reduced-motion: reduce` is active; the focus highlight remains.
+- Status is conveyed by text, not color alone.
+
+## Verification
+
+- The page initially shows no inline logs expanded.
+- Selecting each summary task opens the correct stage and log.
+- Opening another log closes the previously expanded log.
+- Repeated selection of the same task still repositions and highlights it.
+- Simulated task start does not expand or scroll.
+- Escape has no special behavior because this design uses no modal.
+- Verify desktop layout at 1600 × 1000 and a narrow responsive state.
diff --git a/docs/superpowers/specs/2026-07-19-automation-disclosure-motion-design.md b/docs/superpowers/specs/2026-07-19-automation-disclosure-motion-design.md
new file mode 100644
index 00000000..781b4bef
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-19-automation-disclosure-motion-design.md
@@ -0,0 +1,25 @@
+# Automation Disclosure Motion Design
+
+## Goal
+
+Add a consistent expanding and collapsing motion to the automation workflow disclosures shown in the approved screenshots.
+
+## Interaction
+
+- Stage bodies expand and collapse vertically in 220 ms.
+- Inline task logs use the same vertical motion beneath the selected task.
+- Additional collect-stage task rows animate when `顯示全部任務` is toggled.
+- Stage carets rotate over 180 ms so the control state changes with the content.
+- Reduced-motion users receive an immediate state change.
+
+## Constraints
+
+- Reuse Svelte's installed `slide` transition and the existing component state.
+- Do not add packages for the disclosure motion, or add routes, data state, or new visual styling.
+- Preserve table semantics, fixed column widths, labels, and existing controls.
+
+## Verification
+
+- Add a source-level regression check for the shared transition and each disclosure surface.
+- Run the focused check, typecheck, and production build.
+- Use the running Electron app over CDP to open and close the three disclosure surfaces and inspect console errors.
diff --git a/docs/superpowers/specs/2026-07-19-automation-log-redesign-options-design.md b/docs/superpowers/specs/2026-07-19-automation-log-redesign-options-design.md
new file mode 100644
index 00000000..ea89c7f8
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-19-automation-log-redesign-options-design.md
@@ -0,0 +1,53 @@
+# Automation Log Redesign Options
+
+## Goal
+
+Create three interactive HTML prototypes for the shared modal that displays every currently running task's live log, then let the user choose one before production implementation. Independently remove the aggregate progress bar from the production Automation hero.
+
+## Shared constraints
+
+- Keep the existing Automation visual system, Traditional Chinese copy, modal backdrop, task data, semantic states, and desktop density.
+- The modal shows all currently running tasks at the same time; it is not a one-task switcher.
+- Opening the modal must not change task execution. Starting a task must not open the modal or an inline log.
+- Each prototype uses realistic raw log text, long paths, success/running/error states, and at least four concurrent tasks.
+- The close action, Escape key, scrolling, and visible task-state updates must work.
+- Prototype work remains isolated from the production app until an option is selected.
+
+## Direction 1: Task stack
+
+- One full-width task section per running task in a single modal scroll area.
+- Sticky task header contains name, state, elapsed time, and collapse control.
+- Every task is expanded initially; users may collapse noisy tasks while leaving several logs visible.
+- Best for readability, raw-log fidelity, and the smallest production implementation.
+
+## Direction 2: Console matrix
+
+- Responsive two-column grid of equal task consoles, collapsing to one column at narrow widths.
+- Each console has an independent vertical scroll, follow-tail toggle, and compact state header.
+- The modal itself keeps a stable header and footer while consoles use the available height.
+- Best for operators comparing several tasks side by side.
+
+## Direction 3: Merged event stream
+
+- One chronological stream combines entries from every running task.
+- Each entry includes timestamp, task label, level, and message; task chips filter the shared stream without hiding the fact that multiple tasks are running.
+- Search, pause-follow, and error-only controls are interactive in the prototype.
+- Best for quickly locating failures, but production implementation would require reliable per-line timestamps or ingestion metadata.
+
+## Production hero change
+
+- Remove the aggregate progress bar and percentage from the active Automation hero.
+- Keep the running-task count on the left, show the active-task icon strip beneath it for inline-log jumps, and keep `停止全部` on the right.
+- Preserve per-task status/progress in the task table; only the hero aggregate is removed.
+
+## Prototype delivery
+
+- Deliver one local prototype with three directly addressable variants and an in-prototype option switcher.
+- Use mock-only state; do not call Electron automation APIs or launch banking workflows.
+- Verify all primary controls, responsive layout, and console output before handoff.
+
+## Verification
+
+- Add a focused production source check proving the hero no longer renders the aggregate progress block.
+- Run the focused check, typecheck, production build, and `git diff --check`.
+- Capture each prototype at the same desktop viewport and record a design-QA comparison against the supplied modal screenshots.
diff --git a/electron/ipc.ts b/electron/ipc.ts
index 91d9fe0f..5c217755 100644
--- a/electron/ipc.ts
+++ b/electron/ipc.ts
@@ -4,6 +4,7 @@ import {
   automationCancel,
   automationResume,
   automationRun,
+  automationRunMany,
   automationRunHistory,
   automationSaveCredentials,
   loadAutomationDesktopModel,
@@ -81,6 +82,7 @@ export function registerOctopusBeakIpc({
     (_event, updates: Record<string, string>) => automationSaveCredentials(updates),
   );
   ipcMain.handle("automation:run", (_event, taskId: string) => automationRun(taskId));
+  ipcMain.handle("automation:runMany", (_event, taskIds: string[]) => automationRunMany(taskIds));
   ipcMain.handle("automation:resume", (_event, taskId: string) => automationResume(taskId));
   ipcMain.handle("automation:cancel", (_event, taskId: string) => automationCancel(taskId));
   ipcMain.handle("automation:runHistory", () => automationRunHistory());
diff --git a/electron/main.check.ts b/electron/main.check.ts
new file mode 100644
index 00000000..0fb9cab0
--- /dev/null
+++ b/electron/main.check.ts
@@ -0,0 +1,9 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+
+const source = readFileSync(new URL("./main.ts", import.meta.url), "utf8");
+
+assert.match(
+  source,
+  /try\s*{\s*prepareLibrettoRunCdpPatch\(\);\s*}\s*catch\s*\(error\)\s*{\s*console\.warn\("libretto-run-cdp-patch-failed", error\);\s*}/,
+);
diff --git a/electron/main.ts b/electron/main.ts
index 8dc72a3a..61d7cd1c 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -3,6 +3,7 @@ import { pathToFileURL } from "node:url";
 import { app, BrowserWindow, dialog } from "electron";
 import {
   activeAutomationTaskIds,
+  prepareLibrettoRunCdpPatch,
   recoverAbandonedAutomationSessions,
   shutdownAutomationSessions,
   startAutomationTask,
@@ -154,6 +155,11 @@ async function start() {
     electronPath: process.execPath,
   }));
   process.chdir(userData);
+  try {
+    prepareLibrettoRunCdpPatch();
+  } catch (error) {
+    console.warn("libretto-run-cdp-patch-failed", error);
+  }
   migrateLedgerBeforeWindow();
   await recoverAbandonedAutomationSessions().catch((error) => {
     console.warn("automation-session-startup-recovery-failed", error);
diff --git a/electron/preload.check.ts b/electron/preload.check.ts
index 3fdfdc52..c8f8dc1a 100644
--- a/electron/preload.check.ts
+++ b/electron/preload.check.ts
@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { octopusBeakApiChannels } from "../src/lib/desktop/api.ts";
 
 assert.equal(octopusBeakApiChannels.includes("automation:run"), true);
+assert.equal(octopusBeakApiChannels.includes("automation:runMany"), true);
 assert.equal(octopusBeakApiChannels.includes("automation:cancel"), true);
 assert.equal(octopusBeakApiChannels.includes("automation:runHistory"), true);
 assert.equal(octopusBeakApiChannels.includes("automation:viewerScreenshot"), true);
diff --git a/electron/preload.ts b/electron/preload.ts
index a4410e94..3faceef9 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -33,6 +33,7 @@ const api: OctopusBeakApi = {
     load: () => ipcRenderer.invoke("automation:load"),
     saveCredentials: (updates) => ipcRenderer.invoke("automation:saveCredentials", updates),
     run: (taskId) => ipcRenderer.invoke("automation:run", taskId),
+    runMany: (taskIds) => ipcRenderer.invoke("automation:runMany", taskIds),
     resume: (taskId) => ipcRenderer.invoke("automation:resume", taskId),
     cancel: (taskId) => ipcRenderer.invoke("automation:cancel", taskId),
     runHistory: () => ipcRenderer.invoke("automation:runHistory"),
diff --git a/package-lock.json b/package-lock.json
index 8aa7e94f..c29d03e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@electron-forge/cli": "^7.11.2",
         "@electron-forge/maker-dmg": "^7.11.2",
         "@electron-forge/maker-zip": "^7.11.2",
+        "@lucide/svelte": "^1.25.0",
         "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/kit": "^2.68.0",
         "@types/node": "^26.0.0",
@@ -1717,6 +1718,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@lucide/svelte": {
+      "version": "1.25.0",
+      "resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.25.0.tgz",
+      "integrity": "sha512-v9m+dD68jxVnqkU3K59mG/RSRFlPGzmKCGSyMfnXcaGv9jODDQMyQkcp1CGvk3Y/cUj9v7f8rw1n//K0B53xGQ==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "svelte": "^5"
+      }
+    },
     "node_modules/@malept/cross-spawn-promise": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz",
diff --git a/package.json b/package.json
index 2aab3103..abf53c06 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "@electron-forge/cli": "^7.11.2",
     "@electron-forge/maker-dmg": "^7.11.2",
     "@electron-forge/maker-zip": "^7.11.2",
+    "@lucide/svelte": "^1.25.0",
     "@sveltejs/adapter-static": "^3.0.10",
     "@sveltejs/kit": "^2.68.0",
     "@types/node": "^26.0.0",
diff --git a/scripts/spending-chart-alternatives.check.mjs b/scripts/spending-chart-alternatives.check.mjs
index 68d9c5dc..76c8098a 100644
--- a/scripts/spending-chart-alternatives.check.mjs
+++ b/scripts/spending-chart-alternatives.check.mjs
@@ -88,8 +88,8 @@ try {
   assert.equal(await chart.locator("[data-selection-outline]").count(), 0);
   assert.equal(await chart.locator("canvas.lc-layout-canvas").count(), 1);
   assert.equal(await chart.locator("svg.lc-layout-svg").count() > 0, true);
-  assert.equal(await chart.getAttribute("data-rendered-months"), "20");
-  assert.equal(await chart.getAttribute("data-rendered-buckets"), "40");
+  assert.equal(await chart.getAttribute("data-rendered-months"), "30");
+  assert.equal(await chart.getAttribute("data-rendered-buckets"), "60");
   const confirmedToggle = page.locator('[data-chart-state="confirmed"]');
   const pendingToggle = page.locator('[data-chart-state="pending"]');
   assert.equal(await confirmedToggle.getAttribute("aria-pressed"), "true");
@@ -98,10 +98,10 @@ try {
   await pendingToggle.click();
   assert.equal(await pendingToggle.getAttribute("aria-pressed"), "true");
   assert.equal(await chart.getAttribute("data-show-pending"), "true");
-  assert.equal(await chart.getAttribute("data-rendered-buckets"), "40");
+  assert.equal(await chart.getAttribute("data-rendered-buckets"), "60");
   assert.match(await chart.locator(".spending-row-summary").nth(24).textContent(), /Pending.*TWD 8,400/u);
   assert.match(await chart.locator(".spending-row-summary").nth(24).textContent(), new RegExp(`Confirmed total.*TWD ${monthlyRows[24].total.toLocaleString("en-US")}`, "u"));
-  assert.equal(await chart.getAttribute("data-rounded-bars"), "38");
+  assert.equal(await chart.getAttribute("data-rounded-bars"), "58");
   assert.equal(await chart.locator("[data-spending-bar]").count(), 0);
   const initialScale = Number(await chart.getAttribute("data-initial-scale"));
   const initialTranslateX = Number(await chart.getAttribute("data-initial-translate-x"));
@@ -158,8 +158,7 @@ try {
   const selectedBandAfterDrag = await chart.locator("[data-selected-period]").boundingBox();
   assert.ok(selectedBandAfterDrag);
   assert.notEqual(selectedBandAfterDrag.x, selectedBandBeforeDrag.x);
-  const renderedMonthsAfterDrag = Number(await chart.getAttribute("data-rendered-months"));
-  assert.ok(renderedMonthsAfterDrag <= 23, `rendered ${renderedMonthsAfterDrag} months after drag`);
+  assert.equal(await chart.getAttribute("data-rendered-months"), "30");
   assert.equal(await page.evaluate(() => window.__spendingLoadCount), loadCountBeforeDrag);
   assert.equal(await chart.locator('[data-action="reset"]').count(), 1);
   const paintedBounds = await chart.locator('canvas[data-spending-bars-canvas]').evaluate((canvas) => {
diff --git a/src/lib/automation/AutomationDashboard.check.ts b/src/lib/automation/AutomationDashboard.check.ts
new file mode 100644
index 00000000..a19cff31
--- /dev/null
+++ b/src/lib/automation/AutomationDashboard.check.ts
@@ -0,0 +1,112 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+
+const source = readFileSync(new URL("./AutomationDashboard.svelte", import.meta.url), "utf8");
+const runTaskSource = source.slice(source.indexOf("async function runTask"), source.indexOf("async function runParallelTasks"));
+const runParallelTasksSource = source.slice(source.indexOf("async function runParallelTasks"), source.indexOf("async function stopAllTasks"));
+
+assert.doesNotMatch(runTaskSource, /expandedLogTaskId\s*=/);
+assert.doesNotMatch(runParallelTasksSource, /expandedLogTaskId\s*=/);
+assert.match(runParallelTasksSource, /automation\.runMany\(tasks\.map\(\(task\) => task\.id\)\)/);
+assert.doesNotMatch(runParallelTasksSource, /Promise\.allSettled/);
+assert.match(source, /import \{ slide \} from "svelte\/transition"/);
+assert.match(source, /function disclosureSlide\(node: Element\)/);
+assert.match(source, /matchMedia\("\(prefers-reduced-motion: reduce\)"\)\.matches \? 0 : 220/);
+assert.match(source, /class="stage-body"[^>]*transition:disclosureSlide/);
+assert.match(source, /class="inline-log-panel"[^>]*transition:disclosureSlide/);
+assert.match(source, /async function toggleCollectTasks\(event: MouseEvent\)/);
+assert.match(source, /class="table-reveal"/);
+assert.match(source, /container\.animate\(/);
+assert.doesNotMatch(source, /class="task-row"[^>]*transition:disclosureSlide/);
+assert.match(source, /transition: transform 180ms ease/);
+assert.match(source, /class="inline-task-log"/);
+assert.doesNotMatch(source, /activeLogsOpen/);
+assert.doesNotMatch(source, /openActiveLogs/);
+assert.doesNotMatch(source, /aria-labelledby="active-logs-title"/);
+assert.doesNotMatch(source, /\$t\.automation\.viewLogs/);
+assert.match(source, /from "@lucide\/svelte"/);
+assert.match(source, /ArrowLeftRight/);
+assert.match(source, /CircleEllipsis/);
+assert.match(source, /CloudDownload/);
+assert.match(source, /Import as ImportIcon/);
+assert.match(source, /Landmark/);
+assert.match(source, /class="active-task-jump-list"/);
+assert.match(source, /class="active-task-filter"/);
+assert.match(source, /\$: iconTasks = automation\.tasks\.filter\([\s\S]*?task\.status === "failed"/);
+assert.match(source, /\{#if iconTasks\.length\}/);
+assert.match(source, /\{#each iconTasks as task \(task\.id\)\}/);
+assert.match(source, /class="active-task-jump"/);
+assert.match(source, /class:failed=\{task\.status === "failed"\}/);
+assert.match(source, /aria-label=\{`\$\{\$t\.automation\.logs\} · \$\{taskLabel\(task, \$t\)\}`\}/);
+assert.match(source, /title=\{taskLabel\(task, \$t\)\}/);
+assert.match(source, /onclick=\{\(\) => handleActiveTaskClick\(task\)\}/);
+assert.match(source, /function handleActiveTaskClick\(task: AutomationTaskRow\)/);
+assert.match(source, /task\.status === "waiting_for_human" && task\.humanSession/);
+assert.match(source, /openHumanViewer\(task\)/);
+assert.match(source, /async function revealTaskLog\(task: AutomationTaskRow\)/);
+assert.match(source, /expandedLogTaskId = task\.id/);
+assert.match(source, /showAllCollectTasks = true/);
+assert.match(source, /<tr class="task-row"[^>]*id=\{`\$\{task\.id\}-task-row`\}/);
+assert.match(source, /getElementById\(`\$\{task\.id\}-task-row`\)/);
+assert.match(source, /scrollIntoView\(\{ behavior: reducedMotion \? "auto" : "smooth", block: "start" \}\)/);
+assert.match(source, /\.task-row\s*\{\s*scroll-margin-top: 88px;/);
+assert.match(source, /focus\(\{ preventScroll: true \}\)/);
+assert.match(source, /overflow-x:\s*auto/);
+assert.match(source, /\.active-task-filter\s*\{[\s\S]*?border: 1px solid var\(--border\)/);
+assert.match(source, /\.active-task-jump-list\s*\{[\s\S]*?flex-wrap: nowrap/);
+assert.match(source, /scrollbar-width: none/);
+assert.match(source, /onwheel=\{scrollActiveTasks\}/);
+assert.match(source, /function scrollActiveTasks\(event: WheelEvent\)/);
+assert.match(source, /class="active-task-tooltip"/);
+assert.match(source, /role="tooltip"/);
+assert.match(source, /onpointerenter=\{\(event\) => showTaskTooltip\(task, event\)\}/);
+assert.match(source, /onpointerleave=\{hideTaskTooltip\}/);
+assert.match(source, /\$t\.automation\.statusLabels\[hoveredTask\.status\]/);
+assert.match(source, /border-radius: 50%/);
+assert.match(source, /\.active-task-jump\.failed\s*\{[\s\S]*?var\(--danger\)/);
+const resumeHumanViewerSource = source.slice(source.indexOf("async function resumeHumanViewer"), source.indexOf("function pointerPoint"));
+assert.match(resumeHumanViewerSource, /automation\.resume\(task\.id\)/);
+assert.doesNotMatch(resumeHumanViewerSource, /runTask\(task\)/);
+assert.doesNotMatch(source, /aggregateProgress/);
+assert.doesNotMatch(source, /combinedTaskProgress/);
+assert.doesNotMatch(source, /class="aggregate-progress"/);
+assert.match(source, /class="progress-cell"/);
+assert.match(source, /\$: activeTasks = automation\.tasks\.filter\(\(task\) => task\.isActive\);/);
+assert.match(source, /task\.status === "waiting_for_human"[\s\S]*?automation\.forceQuit\(task\.id\)/);
+assert.match(source, /historyTaskCount\(historyRows\.length\)/);
+assert.match(source, /class="stage-toggle-action"/);
+assert.match(source, /aria-expanded=\{stageOpen\[stage\.id\]\}/);
+assert.doesNotMatch(source, /<details/);
+assert.doesNotMatch(source, /\$t\.automation\.independentTasks/);
+assert.doesNotMatch(source, /\$: parallelTasks =/);
+assert.match(source, /class="button primary stage-sync-action"/);
+assert.match(source, /onclick=\{\(\) => openSyncSheet\(stage\.tasks\)\}/);
+assert.match(source, /class:muted=\{!stageRunnableTasks\(stage\.tasks\)\.length\}/);
+assert.doesNotMatch(source, /stage\.description/);
+assert.match(source, /\$t\.automation\.startImportHeading/);
+assert.match(source, /grid-template-columns: repeat\(2, minmax\(0, 1fr\)\)/);
+assert.match(source, /:global\(html\) \{\s*overflow-y: scroll;/);
+assert.match(source, /class="card workflow-card"/);
+assert.match(source, /class="sync-sheet"/);
+assert.doesNotMatch(source, /\$t\.automation\.commandId/);
+assert.doesNotMatch(source, /class="task-command"/);
+assert.match(source, /<colgroup>[\s\S]*width: 32%[\s\S]*width: 14%[\s\S]*width: 22%[\s\S]*width: 12%[\s\S]*width: 20%[\s\S]*<\/colgroup>/);
+assert.match(source, /\.automation-table\s*\{\s*table-layout: fixed;/);
+assert.match(source, /colspan="5"/);
+assert.match(source, /class="modal-body credential-layout"/);
+assert.match(source, /class="credential-provider-list"/);
+assert.match(source, /class:selected=\{group\.id === selectedCredentialGroupId\}/);
+assert.match(source, /async function updateCredentialSearch\(event: Event\)/);
+assert.match(source, /selectedCredentialGroupId = visibleCredentialGroups\[0\]\?\.id \?\? ""/);
+assert.match(source, /value=\{credentialSearch\} oninput=\{updateCredentialSearch\}/);
+assert.match(source, /\$: selectedCredentialGroup = visibleCredentialGroups\.find/);
+assert.match(source, /class="modal-body history-layout"/);
+assert.match(source, /class="history-filters"/);
+assert.match(source, /class="history-error-detail"/);
+assert.match(source, /\.history-table \.task-name span\s*\{[\s\S]*display: block/);
+assert.match(source, /historySearch/);
+assert.match(source, /historyFilter/);
+assert.match(source, /\$: historyCounts = historyRows\.reduce/);
+assert.match(source, /historyCounts\.completed/);
+assert.doesNotMatch(source, /historyFinishedTime/);
+assert.doesNotMatch(source, /class="modal-footer"/);
diff --git a/src/lib/automation/AutomationDashboard.svelte b/src/lib/automation/AutomationDashboard.svelte
index c4d77007..9e8e5e12 100644
--- a/src/lib/automation/AutomationDashboard.svelte
+++ b/src/lib/automation/AutomationDashboard.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
   import { onDestroy, tick } from "svelte";
+  import { slide } from "svelte/transition";
+  import { ArrowLeftRight, CircleEllipsis, CloudDownload, Import as ImportIcon, Landmark, Search, X } from "@lucide/svelte";
   import { locale, t, type Translation } from "$lib/i18n/i18n.ts";
   import { systemTimezone } from "$lib/settings/system-timezone-store.ts";
   import DashboardShell from "$lib/shared-shell/components/DashboardShell.svelte";
@@ -19,10 +21,18 @@
   export let reload: () => Promise<void>;
 
   let credentialsOpen = false;
-  let logTask: AutomationTaskRow | null = null;
+  let syncOpen = false;
+  let syncTasks: AutomationTaskRow[] = [];
+  let showAllCollectTasks = false;
+  let expandedLogTaskId: string | null = null;
+  let jumpHighlightTaskId: string | null = null;
+  let jumpHighlightTimer: ReturnType<typeof setTimeout> | null = null;
   let historyOpen = false;
   let historyLoading = false;
   let historyRows: AutomationTaskHistoryRow[] = [];
+  let historySearch = "";
+  let historyFilter: "all" | "running" | "completed" | "failed" = "all";
+  let expandedHistoryRunId: string | null = null;
   let humanTask: AutomationTaskRow | null = null;
   let pollTimer: ReturnType<typeof setInterval> | null = null;
   let viewerTimer: ReturnType<typeof setInterval> | null = null;
@@ -34,8 +44,13 @@
   let floatingInput: { left: number; top: number; value: string } | null = null;
   let floatingInputEl: HTMLInputElement | null = null;
   let viewerExpanded = false;
+  let hoveredTask: AutomationTaskRow | null = null;
+  let taskTooltipPosition = { left: 0, top: 0 };
   let groupEnabled: Record<string, boolean> = {};
   let credentialDrafts: Record<string, string> = {};
+  let selectedCredentialGroupId = "";
+  let credentialSearch = "";
+  let stageOpen: Record<string, boolean> = { collect: true, import: false, sync: false };
 
   $: sideValue = automation.active
     ? $t.common.runningCount(automation.activeTaskCount)
@@ -43,28 +58,50 @@
       ? $t.common.importLocked
       : $t.common.ready;
   $: sideSub = $t.common.businessDay(automation.businessDate);
-  $: topStatus = automation.active
-    ? $t.common.runningCount(automation.activeTaskCount)
-    : automation.importGate.locked
-      ? $t.common.importLocked
-      : $t.common.ready;
-  $: topStatusClass = automation.active
-    ? "warn"
-    : automation.importGate.locked
-      ? "bad"
-      : "good";
-  $: readyTaskCount = automation.tasks.filter((task) => task.canRun && !task.isActive).length;
-  $: attentionTaskCount = automation.tasks.filter((task) =>
-    task.status === "failed" || task.status === "waiting_for_human" || task.status === "locked",
+  $: parallelTaskIds = new Set(automation.parallelRunnableTaskIds);
+  $: activeTasks = automation.tasks.filter((task) => task.isActive);
+  $: iconTasks = automation.tasks.filter((task) =>
+    task.isActive || task.status === "waiting_for_human" || task.status === "failed"
+  );
+  $: credentialReadyCount = syncTasks.filter((task) =>
+    task.credentialKeys.every((key) => automation.credentials[key]),
   ).length;
-  $: automationStats = [
-    { label: $t.automation.activeNow, value: automation.activeTaskCount, detail: topStatus, tone: topStatusClass },
-    { label: $t.automation.readyToRun, value: readyTaskCount, detail: $t.automation.readyTasks, tone: readyTaskCount ? "good" : "" },
-    { label: $t.automation.needsAttention, value: attentionTaskCount, detail: $t.automation.attentionTasks, tone: attentionTaskCount ? "bad" : "good" },
+  $: taskStages = [
+    {
+      id: "collect",
+      title: $t.automation.collectStage,
+      tasks: automation.tasks.filter((task) => task.kind === "crawler"),
+    },
+    {
+      id: "import",
+      title: $t.automation.importStage,
+      tasks: automation.tasks.filter((task) => task.kind === "import"),
+    },
+    {
+      id: "sync",
+      title: $t.automation.syncStage,
+      tasks: automation.tasks.filter((task) => task.kind === "sync"),
+    },
   ];
   $: credentialInputDirty = Object.values(credentialDrafts).some((value) => value.trim().length > 0);
   $: credentialToggleDirty = credentialGroups.some((group) => (groupEnabled[group.id] !== false) !== group.enabled);
   $: credentialsDirty = credentialInputDirty || credentialToggleDirty;
+  $: visibleCredentialGroups = credentialGroups.filter((group) =>
+    group.label.toLowerCase().includes(credentialSearch.trim().toLowerCase()),
+  );
+  $: selectedCredentialGroup = visibleCredentialGroups.find((group) => group.id === selectedCredentialGroupId) ?? visibleCredentialGroups[0];
+  $: visibleHistoryRows = historyRows.filter((run) => {
+    const term = historySearch.trim().toLowerCase();
+    return (historyFilter === "all" || historyStatusGroup(run.status) === historyFilter)
+      && (!term || `${taskIdLabel(run.taskId, $t)} ${run.script}`.toLowerCase().includes(term));
+  });
+  $: historyCounts = historyRows.reduce(
+    (counts, run) => {
+      counts[historyStatusGroup(run.status)] += 1;
+      return counts;
+    },
+    { running: 0, completed: 0, failed: 0 },
+  );
 
   $: if (automation.active && !pollTimer) {
     pollTimer = setInterval(() => {
@@ -76,6 +113,7 @@
 
   onDestroy(() => {
     stopPolling();
+    if (jumpHighlightTimer) clearTimeout(jumpHighlightTimer);
     if (viewerTimer) clearInterval(viewerTimer);
     if (viewerImageUrl) URL.revokeObjectURL(viewerImageUrl);
   });
@@ -93,6 +131,52 @@
     return "";
   }
 
+  function disclosureSlide(node: Element) {
+    return slide(node, {
+      duration: matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 220,
+    });
+  }
+
+  function toggleStage(stageId: string) {
+    stageOpen = { ...stageOpen, [stageId]: !stageOpen[stageId] };
+  }
+
+  async function toggleCollectTasks(event: MouseEvent) {
+    const container = (event.currentTarget as HTMLElement)
+      .closest(".stage-body")
+      ?.querySelector<HTMLElement>(".table-reveal");
+    if (!container) {
+      showAllCollectTasks = !showAllCollectTasks;
+      return;
+    }
+
+    const startHeight = container.offsetHeight;
+    showAllCollectTasks = !showAllCollectTasks;
+    await tick();
+    const endHeight = container.offsetHeight;
+    if (matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+
+    container.style.height = `${startHeight}px`;
+    const animation = container.animate(
+      [{ height: `${startHeight}px` }, { height: `${endHeight}px` }],
+      { duration: 220, easing: "ease", fill: "both" },
+    );
+    await animation.finished;
+    container.style.height = "";
+    animation.cancel();
+  }
+
+  function stageRunnableTasks(tasks: AutomationTaskRow[]) {
+    return tasks.filter((task) => parallelTaskIds.has(task.id));
+  }
+
+  function openSyncSheet(tasks: AutomationTaskRow[]) {
+    syncTasks = stageRunnableTasks(tasks);
+    if (syncTasks.length) syncOpen = true;
+  }
+
   function formatTime(value: string | null) {
     return formatUtcDateTime(value, $systemTimezone, $locale) || "--";
   }
@@ -101,6 +185,10 @@
     return formatTime(task.latestFinishedAt ?? task.latestStartedAt);
   }
 
+  function taskCredentialsReady(task: AutomationTaskRow) {
+    return task.credentialKeys.every((key) => automation.credentials[key]);
+  }
+
   function credentialLabel(key: string, dictionary: Translation) {
     const words = dictionary.automation.credentialWords as Record<string, string>;
     return key
@@ -119,6 +207,8 @@
 
   function openCredentials() {
     resetCredentialChanges();
+    selectedCredentialGroupId = selectedCredentialGroupId || credentialGroups[0]?.id || "";
+    credentialSearch = "";
     credentialsOpen = true;
   }
 
@@ -158,6 +248,14 @@
     };
   }
 
+  async function updateCredentialSearch(event: Event) {
+    credentialSearch = (event.currentTarget as HTMLInputElement).value;
+    await tick();
+    if (!visibleCredentialGroups.some((group) => group.id === selectedCredentialGroupId)) {
+      selectedCredentialGroupId = visibleCredentialGroups[0]?.id ?? "";
+    }
+  }
+
   async function runTask(task: AutomationTaskRow) {
     try {
       actionError = "";
@@ -169,6 +267,85 @@
     }
   }
 
+  async function runParallelTasks() {
+    const tasks = syncTasks;
+    if (!tasks.length) return;
+    syncOpen = false;
+    try {
+      actionError = "";
+      await window.octopusBeak.automation.runMany(tasks.map((task) => task.id));
+      await reload();
+    } catch (error) {
+      actionError = error instanceof Error ? error.message : String(error);
+    }
+  }
+
+  async function stopAllTasks() {
+    if (!activeTasks.length || !confirm($t.automation.confirmStopAll)) return;
+    const results = await Promise.allSettled(activeTasks.map((task) => window.octopusBeak.automation.cancel(task.id)));
+    actionError = results
+      .flatMap((result) => result.status === "rejected"
+        ? [result.reason instanceof Error ? result.reason.message : String(result.reason)]
+        : [])
+      .join("\n");
+    await reload();
+  }
+
+  async function revealTaskLog(task: AutomationTaskRow) {
+    const stageId = task.kind === "crawler" ? "collect" : task.kind;
+    stageOpen = { ...stageOpen, [stageId]: true };
+    if (stageId === "collect") showAllCollectTasks = true;
+    expandedLogTaskId = task.id;
+    jumpHighlightTaskId = task.id;
+    if (jumpHighlightTimer) clearTimeout(jumpHighlightTimer);
+
+    await tick();
+    const target = document.getElementById(`${task.id}-task-row`);
+    const inlineLog = document.getElementById(`${task.id}-inline-log`);
+    const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)").matches;
+    target?.scrollIntoView({ behavior: reducedMotion ? "auto" : "smooth", block: "start" });
+    inlineLog?.querySelector<HTMLElement>(".inline-log-panel")?.focus({ preventScroll: true });
+    jumpHighlightTimer = setTimeout(() => {
+      jumpHighlightTaskId = null;
+      jumpHighlightTimer = null;
+    }, 1_400);
+  }
+
+  function handleActiveTaskClick(task: AutomationTaskRow) {
+    if (task.status === "waiting_for_human" && task.humanSession) {
+      openHumanViewer(task);
+      return;
+    }
+    void revealTaskLog(task);
+  }
+
+  function scrollActiveTasks(event: WheelEvent) {
+    const list = event.currentTarget as HTMLElement;
+    if (list.scrollWidth <= list.clientWidth) return;
+    event.preventDefault();
+    list.scrollLeft += Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+    hideTaskTooltip();
+  }
+
+  function showTaskTooltip(task: AutomationTaskRow, event: Event) {
+    const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
+    hoveredTask = task;
+    taskTooltipPosition = {
+      left: Math.min(Math.max(rect.left + rect.width / 2, 150), window.innerWidth - 150),
+      top: rect.bottom + 10,
+    };
+  }
+
+  function hideTaskTooltip() {
+    hoveredTask = null;
+  }
+
+  function taskStageTitle(task: AutomationTaskRow, dictionary: Translation) {
+    if (task.kind === "crawler") return dictionary.automation.collectStage;
+    if (task.kind === "import") return dictionary.automation.importStage;
+    return dictionary.automation.syncStage;
+  }
+
   async function primaryTaskAction(task: AutomationTaskRow) {
     if (task.primaryAction !== "Cancel") {
       await runTask(task);
@@ -177,7 +354,8 @@
     if (!confirm($t.automation.confirmCancel(taskLabel(task, $t)))) return;
     try {
       actionError = "";
-      await window.octopusBeak.automation.cancel(task.id);
+      if (task.status === "waiting_for_human") await window.octopusBeak.automation.forceQuit(task.id);
+      else await window.octopusBeak.automation.cancel(task.id);
       await reload();
     } catch (error) {
       actionError = error instanceof Error ? error.message : String(error);
@@ -187,6 +365,9 @@
   async function openRunHistory() {
     historyOpen = true;
     historyLoading = true;
+    historySearch = "";
+    historyFilter = "all";
+    expandedHistoryRunId = null;
     try {
       actionError = "";
       historyRows = await window.octopusBeak.automation.runHistory();
@@ -197,6 +378,20 @@
     }
   }
 
+  function historyStatusGroup(status: AutomationTaskHistoryRow["status"]): "running" | "completed" | "failed" {
+    if (status === "completed") return "completed";
+    if (status === "failed" || status === "locked") return "failed";
+    return "running";
+  }
+
+  function formatDuration(run: AutomationTaskHistoryRow) {
+    const start = Date.parse(run.startedAt);
+    const end = Date.parse(run.finishedAt ?? new Date().toISOString());
+    if (!Number.isFinite(start) || !Number.isFinite(end)) return "--";
+    const seconds = Math.max(0, Math.floor((end - start) / 1_000));
+    return `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`;
+  }
+
   async function saveCredentials(event: SubmitEvent) {
     event.preventDefault();
     const updates: Record<string, string> = {};
@@ -292,11 +487,17 @@
     }
   }
 
-  function resumeHumanViewer() {
+  async function resumeHumanViewer() {
     if (!humanTask) return;
     const task = humanTask;
     closeHumanViewer();
-    void runTask(task);
+    try {
+      actionError = "";
+      await window.octopusBeak.automation.resume(task.id);
+      await reload();
+    } catch (error) {
+      actionError = error instanceof Error ? error.message : String(error);
+    }
   }
 
   function pointerPoint(event: PointerEvent) {
@@ -413,88 +614,158 @@
   {sideSub}
 >
   <svelte:fragment slot="topbar-actions">
-    <span class={`chip ${topStatusClass}`}>{topStatus}</span>
+    <button class="button secondary topbar-action" type="button" onclick={openCredentials}>{$t.automation.credentials}</button>
+    <button class="button secondary topbar-action" type="button" onclick={() => void openRunHistory()}>
+      {$t.automation.runHistory}
+    </button>
   </svelte:fragment>
 
-  <div class="content automation-content">
-    <section class="automation-command-grid" aria-label={$t.automation.commandCenter}>
-      <article class="card command-card command-primary">
-        <div class="command-topline">
-          <span class="label">{$t.automation.commandCenter}</span>
-          <span class={`chip ${topStatusClass}`}>{topStatus}</span>
-        </div>
-        <h2>{sideValue}</h2>
-      </article>
-
-      <article class="card command-card">
-        <div>
-          <span class="label">{$t.automation.controls}</span>
-          <h2>{$t.automation.taskQueue}</h2>
-        </div>
-        <div class="command-actions">
-          <button class="button secondary fixed-action" type="button" onclick={openCredentials}>{$t.automation.credentials}</button>
-          <button class="button secondary fixed-action" type="button" onclick={() => void openRunHistory()}>
-            {$t.automation.runHistory}
+  <div class:sync-sheet-open={syncOpen} class="content automation-content">
+    <section class:active={automation.active} class="card sync-hero" aria-label={$t.automation.commandCenter}>
+      <div class="sync-hero-copy">
+        {#if automation.active}
+          <span class="running-kicker"><CloudDownload size={16} strokeWidth={2.2} aria-hidden="true" />{$t.automation.syncInProgress}</span>
+        {/if}
+        <h2>
+          {automation.active
+            ? $t.automation.runningTaskHeading(automation.activeTaskCount)
+            : $t.automation.startImportHeading}
+        </h2>
+        {#if iconTasks.length}
+          <div class="active-task-filter">
+            <div
+              class="active-task-jump-list"
+              aria-label={$t.automation.taskQueue}
+              onwheel={scrollActiveTasks}
+            >
+              {#each iconTasks as task (task.id)}
+                <button
+                  class="active-task-jump"
+                  class:waiting={task.status === "waiting_for_human"}
+                  class:failed={task.status === "failed"}
+                  class:import-task={task.kind === "import"}
+                  class:sync-task={task.kind === "sync"}
+                  type="button"
+                  aria-label={`${$t.automation.logs} · ${taskLabel(task, $t)}`}
+                  aria-describedby={hoveredTask?.id === task.id ? "active-task-tooltip" : undefined}
+                  title={taskLabel(task, $t)}
+                  onpointerenter={(event) => showTaskTooltip(task, event)}
+                  onpointerleave={hideTaskTooltip}
+                  onfocus={(event) => showTaskTooltip(task, event)}
+                  onblur={hideTaskTooltip}
+                  onclick={() => handleActiveTaskClick(task)}
+                >
+                  {#if task.status === "waiting_for_human"}
+                    <CircleEllipsis size={22} strokeWidth={2.2} aria-hidden="true" />
+                  {:else if task.kind === "crawler"}
+                    <Landmark size={22} strokeWidth={2.2} aria-hidden="true" />
+                  {:else if task.kind === "import"}
+                    <ImportIcon size={22} strokeWidth={2.2} aria-hidden="true" />
+                  {:else if task.kind === "sync"}
+                    <ArrowLeftRight size={22} strokeWidth={2.2} aria-hidden="true" />
+                  {:else}
+                    <CloudDownload size={22} strokeWidth={2.2} aria-hidden="true" />
+                  {/if}
+                </button>
+              {/each}
+            </div>
+          </div>
+        {/if}
+      </div>
+      {#if automation.active}
+        <div class="sync-hero-actions">
+          <button class="button danger hero-action" type="button" onclick={() => void stopAllTasks()}>
+            {$t.automation.stopAll}
           </button>
         </div>
-      </article>
-    </section>
-
-    <section class="automation-stats" aria-label={$t.automation.statusSummary}>
-      {#each automationStats as stat}
-        <article class="card automation-stat">
-          <span class="label">{stat.label}</span>
-          <strong>{stat.value}</strong>
-          <span class={`chip ${stat.tone}`}>{stat.detail}</span>
-        </article>
-      {/each}
+      {/if}
     </section>
 
-    <section class="card task-board">
-      <div class="panel-title automation-title">
-        <div>
-          <h2>{$t.automation.taskQueue}</h2>
-        </div>
-      </div>
-
-      <div class="table-wrap">
-        <table class="table automation-table">
+    <section class="card workflow-card" aria-label={$t.automation.taskQueue}>
+      {#each taskStages as stage, stageIndex}
+        <section class="stage-section">
+          <div class="stage-head">
+            <div class="stage-head-content">
+              <span class:muted={!stageRunnableTasks(stage.tasks).length} class="stage-number" aria-hidden="true">{stageIndex + 1}</span>
+              <span class="stage-copy">
+                <span class="stage-title-row">
+                  <h2 id={`${stage.id}-stage-title`}>{stage.title}</h2>
+                  {#if stage.id !== "collect" && stage.tasks.some((task) => task.status === "locked")}
+                    <span class="chip bad">{$t.common.importLocked}</span>
+                  {/if}
+                </span>
+              </span>
+              <div class="stage-head-actions">
+                <button
+                  class="button primary stage-sync-action"
+                  type="button"
+                  disabled={!stageRunnableTasks(stage.tasks).length}
+                  onclick={() => openSyncSheet(stage.tasks)}
+                >
+                  {$t.automation.syncAll}
+                </button>
+                <button
+                  class="stage-toggle-action"
+                  type="button"
+                  aria-label={stageOpen[stage.id] ? $t.automation.collapseStage(stage.title) : $t.automation.expandStage(stage.title)}
+                  aria-expanded={stageOpen[stage.id]}
+                  aria-controls={`${stage.id}-stage-body`}
+                  onclick={() => toggleStage(stage.id)}
+                >
+                  <span class="stage-caret" aria-hidden="true"></span>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {#if stageOpen[stage.id]}
+          <div class="stage-body" id={`${stage.id}-stage-body`} transition:disclosureSlide>
+            <div class="table-reveal">
+              <div class="table-wrap">
+              <table class="table automation-table">
+          <colgroup>
+            <col style="width: 32%" />
+            <col style="width: 14%" />
+            <col style="width: 22%" />
+            <col style="width: 12%" />
+            <col style="width: 20%" />
+          </colgroup>
           <thead>
             <tr>
               <th>{$t.automation.task}</th>
+              <th>{$t.automation.credentialStatus}</th>
+              <th>{$t.automation.latestTime($systemTimezone)}</th>
               <th>{$t.automation.status}</th>
-              <th>{$t.automation.progress}</th>
-              <th>{$t.automation.ranToday}</th>
               <th class="right">{$t.automation.controls}</th>
             </tr>
           </thead>
           <tbody>
-            {#each automation.tasks as task}
-              <tr class:task-active={task.isActive} class:task-attention={statusClass(task.status) === "bad" || task.status === "waiting_for_human"}>
+            {#each (stage.id === "collect" && !showAllCollectTasks ? stage.tasks.slice(0, 5) : stage.tasks) as task (task.id)}
+              <tr class="task-row" class:task-active={task.isActive} class:task-attention={statusClass(task.status) === "bad" || task.status === "waiting_for_human"} id={`${task.id}-task-row`}>
                 <td>
                   <div class="task-name">
                     <strong>{taskLabel(task, $t)}</strong>
-                    <span>{task.script}</span>
-                    <span>{$t.automation.latestTime($systemTimezone)}: {latestTaskTime(task)}</span>
                   </div>
                 </td>
                 <td>
-                  <span class={`chip ${statusClass(task.status)}`} title={importLockTitle(task, $t)}>
-                    {$t.automation.statusLabels[task.status]}
+                  <span class={`credential-state ${taskCredentialsReady(task) ? "good" : "bad"}`}>
+                    {taskCredentialsReady(task) ? $t.common.ready : $t.common.missing}
                   </span>
                 </td>
+                <td class="mono latest-time">{latestTaskTime(task)}</td>
                 <td>
+                  {#if task.isActive}
                   <div class="progress-cell">
                     <div class="progress-bar" aria-hidden="true">
                       <span style={`width: ${task.progressPercent ?? 0}%`}></span>
                     </div>
                     <span class="mono">{progressLabel(task, $t)}</span>
                   </div>
-                </td>
-                <td>
-                  <span class={`chip ${task.ranToday ? "good" : ""}`}>
-                    {task.ranToday ? $t.automation.ran : $t.automation.notRun}
+                  {:else}
+                  <span class={`chip ${statusClass(task.status)}`} title={importLockTitle(task, $t)}>
+                    {$t.automation.statusLabels[task.status]}
                   </span>
+                  {/if}
                 </td>
                 <td class="right">
                   <div class="task-actions">
@@ -514,21 +785,95 @@
                         {$t.automation.assist}
                       </button>
                     {/if}
-                    <button class="button secondary task-control" type="button" onclick={() => (logTask = task)}>
+                    <button
+                      class="button secondary task-control"
+                      class:active-log={expandedLogTaskId === task.id}
+                      type="button"
+                      aria-expanded={expandedLogTaskId === task.id}
+                      aria-controls={`${task.id}-inline-log`}
+                      onclick={() => (expandedLogTaskId = expandedLogTaskId === task.id ? null : task.id)}
+                    >
                       {$t.automation.logs}
                     </button>
                   </div>
                 </td>
               </tr>
+              {#if expandedLogTaskId === task.id}
+                <tr class="inline-task-log" class:jump-highlight={jumpHighlightTaskId === task.id} id={`${task.id}-inline-log`}>
+                  <td colspan="5">
+                    <div class="inline-log-panel" tabindex="-1" transition:disclosureSlide>
+                      <div class="inline-log-head">
+                        <strong>{$t.automation.inlineLogTitle(taskLabel(task, $t))}</strong>
+                        <span class={`chip ${statusClass(task.status)}`}>{progressLabel(task, $t)}</span>
+                      </div>
+                      <p class="mono inline-log-path">{task.logPath ?? $t.automation.noLogFile}</p>
+                      <pre class="log-output">{task.errorMessage ?? (task.logTail || $t.automation.noLogs)}</pre>
+                    </div>
+                  </td>
+                </tr>
+              {/if}
             {/each}
           </tbody>
-        </table>
-      </div>
-      {#if actionError}<p class="viewer-error">{actionError}</p>{/if}
+              </table>
+              </div>
+            </div>
+            {#if stage.id === "collect" && stage.tasks.length > 5}
+              <button class="show-all-tasks" type="button" onclick={(event) => void toggleCollectTasks(event)}>
+                {showAllCollectTasks ? $t.automation.collapseTasks : $t.automation.showAllTasks(stage.tasks.length)}
+              </button>
+            {/if}
+          </div>
+          {/if}
+        </section>
+      {/each}
     </section>
+
+    {#if actionError}<p class="viewer-error">{actionError}</p>{/if}
   </div>
 </DashboardShell>
 
+{#if hoveredTask}
+  <div
+    id="active-task-tooltip"
+    class="active-task-tooltip"
+    role="tooltip"
+    style={`left: ${taskTooltipPosition.left}px; top: ${taskTooltipPosition.top}px;`}
+  >
+    <strong>{taskLabel(hoveredTask, $t)}</strong>
+    <span>{taskStageTitle(hoveredTask, $t)} · {$t.automation.statusLabels[hoveredTask.status]}</span>
+    <span>{latestTaskTime(hoveredTask)}</span>
+  </div>
+{/if}
+
+{#if syncOpen}
+  <aside class="sync-sheet" aria-labelledby="sync-title">
+      <div class="modal-head sync-sheet-head">
+        <div>
+          <h2 id="sync-title">{$t.automation.syncDialogTitle}</h2>
+          <p>{$t.automation.syncDialogDescription(syncTasks.length)}</p>
+        </div>
+        <button class="button sync-sheet-close" type="button" onclick={() => (syncOpen = false)}>{$t.common.close}</button>
+      </div>
+      <div class="sync-modal-body">
+        <div class="sync-readiness">
+          <strong>{$t.automation.credentialsReady(credentialReadyCount, syncTasks.length)}</strong>
+        </div>
+        <ul class="sync-task-list">
+          {#each syncTasks as task}
+            <li>
+              <span>{taskLabel(task, $t)}</span>
+              <code>{task.script}</code>
+            </li>
+          {/each}
+        </ul>
+      </div>
+      <div class="sync-modal-actions">
+        <button class="button" type="button" onclick={() => (syncOpen = false)}>{$t.common.cancel}</button>
+        <button class="button primary" type="button" onclick={() => void runParallelTasks()}>{$t.automation.startSync}</button>
+      </div>
+  </aside>
+{/if}
+
 {#if credentialsOpen}
   <div class="modal" role="dialog" aria-modal="true" aria-labelledby="credentials-title">
     <button class="modal-backdrop" type="button" aria-label={$t.automation.closeCredentials} onclick={closeCredentials}></button>
@@ -541,44 +886,62 @@
         <div class="credential-head-actions">
           <button class="button fixed-action" type="button" onclick={closeCredentials}>{$t.common.cancel}</button>
           <button class="button primary fixed-action" type="submit">{$t.common.save}</button>
+          <button class="modal-close" type="button" aria-label={$t.common.close} onclick={closeCredentials}><X size={20} /></button>
         </div>
       </div>
-      <div class="modal-body credential-body">
-        <div class="credential-sections">
-          {#each credentialGroups as group}
-            <section class="credential-section" aria-labelledby={`${group.id}-credentials-title`}>
-              <div class="credential-section-head">
-                <h3 id={`${group.id}-credentials-title`}>{group.label}</h3>
-                <button
-                  class="switch credential-switch"
-                  class:dirty={(groupEnabled[group.id] !== false) !== group.enabled}
-                  type="button"
-                  aria-pressed={groupEnabled[group.id] !== false}
-                  onclick={() => toggleGroup(group.id)}
-                >
-                  <span>{$t.common.enabled}</span>
-                  <span class="switch-track" aria-hidden="true"></span>
-                </button>
-              </div>
-              <div class="credential-grid">
-                {#each group.credentialKeys as key}
-                  <label class="credential-field">
-                    <span>{credentialLabel(key, $t)}</span>
-                    <input
-                      name={key}
-                      type={key.includes("PASSWORD") || key.includes("SECRET") || key.includes("KEY") ? "password" : "text"}
-                      value={credentialDrafts[key] ?? ""}
-                      class:dirty={Boolean(credentialDrafts[key]?.trim())}
-                      oninput={(event) => updateCredentialDraft(key, event)}
-                      placeholder={automation.credentials[key] ? $t.common.saved : $t.common.missing}
-                      autocomplete="off"
-                    />
-                  </label>
-                {/each}
-              </div>
-            </section>
-          {/each}
-        </div>
+      <div class="modal-body credential-layout">
+        <aside class="credential-provider-list">
+          <label class="modal-search">
+            <Search size={18} />
+            <input value={credentialSearch} oninput={updateCredentialSearch} placeholder={$t.automation.credentialSearch} />
+          </label>
+          <nav aria-label={$t.automation.credentialsTitle}>
+            {#each visibleCredentialGroups as group}
+              <button
+                type="button"
+                class:selected={group.id === selectedCredentialGroupId}
+                aria-current={group.id === selectedCredentialGroupId ? "true" : undefined}
+                onclick={() => (selectedCredentialGroupId = group.id)}
+              >
+                <strong>{group.label}</strong>
+                <span>{groupEnabled[group.id] !== false ? $t.common.enabled : $t.common.disabled}</span>
+              </button>
+            {/each}
+          </nav>
+        </aside>
+        {#if selectedCredentialGroup}
+          <section class="credential-body" aria-labelledby={`${selectedCredentialGroup.id}-credentials-title`}>
+            <div class="credential-section-head">
+              <h3 id={`${selectedCredentialGroup.id}-credentials-title`}>{selectedCredentialGroup.label}</h3>
+              <button
+                class="switch credential-switch"
+                class:dirty={(groupEnabled[selectedCredentialGroup.id] !== false) !== selectedCredentialGroup.enabled}
+                type="button"
+                aria-pressed={groupEnabled[selectedCredentialGroup.id] !== false}
+                onclick={() => toggleGroup(selectedCredentialGroup.id)}
+              >
+                <span>{$t.common.enabled}</span>
+                <span class="switch-track" aria-hidden="true"></span>
+              </button>
+            </div>
+            <div class="credential-grid">
+              {#each selectedCredentialGroup.credentialKeys as key}
+                <label class="credential-field">
+                  <span>{credentialLabel(key, $t)}</span>
+                  <input
+                    name={key}
+                    type={key.includes("PASSWORD") || key.includes("SECRET") || key.includes("KEY") ? "password" : "text"}
+                    value={credentialDrafts[key] ?? ""}
+                    class:dirty={Boolean(credentialDrafts[key]?.trim())}
+                    oninput={(event) => updateCredentialDraft(key, event)}
+                    placeholder={automation.credentials[key] ? $t.common.saved : $t.common.missing}
+                    autocomplete="off"
+                  />
+                </label>
+              {/each}
+            </div>
+          </section>
+        {/if}
       </div>
     </form>
   </div>
@@ -591,61 +954,57 @@
       <div class="modal-head">
         <div>
           <h2 id="history-title">{$t.automation.runHistory}</h2>
-          <p>{historyRows.length} / 100</p>
+          <p>{$t.automation.historyTaskCount(historyRows.length)}</p>
+        </div>
+        <div class="history-head-actions">
+          <label class="modal-search history-search">
+            <Search size={18} />
+            <input bind:value={historySearch} placeholder={$t.automation.historySearch} />
+          </label>
+          <button class="modal-close" type="button" aria-label={$t.common.close} onclick={() => (historyOpen = false)}><X size={20} /></button>
         </div>
-        <button class="modal-close" type="button" aria-label={$t.common.close} onclick={() => (historyOpen = false)}>x</button>
       </div>
-      <div class="modal-body history-body">
-        <table class="table history-table">
-          <thead>
-            <tr>
-              <th>{$t.automation.task}</th>
-              <th>{$t.automation.status}</th>
-              <th>{$t.automation.historyStartedTime($systemTimezone)}</th>
-              <th>{$t.automation.historyFinishedTime($systemTimezone)}</th>
-              <th>{$t.automation.historyError}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {#if historyLoading}
-              <tr>
-                <td colspan="5">{$t.common.loading}</td>
-              </tr>
-            {/if}
-            {#each historyRows as run}
+      <div class="modal-body history-layout">
+        <aside class="history-filters">
+          <button class:selected={historyFilter === "all"} type="button" onclick={() => (historyFilter = "all")}><span>{$t.automation.historyAll}</span><strong>{historyRows.length}</strong></button>
+          <button class:selected={historyFilter === "running"} type="button" onclick={() => (historyFilter = "running")}><span>{$t.automation.historyRunning}</span><strong>{historyCounts.running}</strong></button>
+          <button class:selected={historyFilter === "completed"} type="button" onclick={() => (historyFilter = "completed")}><span>{$t.automation.historyCompleted}</span><strong>{historyCounts.completed}</strong></button>
+          <button class:selected={historyFilter === "failed"} type="button" onclick={() => (historyFilter = "failed")}><span>{$t.automation.historyFailed}</span><strong>{historyCounts.failed}</strong></button>
+        </aside>
+        <div class="history-body">
+          <table class="table history-table">
+            <thead>
               <tr>
-                <td>
-                  <div class="task-name">
-                    <strong>{taskIdLabel(run.taskId, $t)}</strong>
-                    <span>{run.script}</span>
-                  </div>
-                </td>
-                <td><span class={`chip ${statusClass(run.status)}`}>{$t.automation.statusLabels[run.status]}</span></td>
-                <td class="mono">{formatTime(run.startedAt)}</td>
-                <td class="mono">{formatTime(run.finishedAt)}</td>
-                <td class="history-error">{run.errorMessage ?? "--"}</td>
+                <th>{$t.automation.task}</th>
+                <th>{$t.automation.status}</th>
+                <th>{$t.automation.historyStartedTime($systemTimezone)}</th>
+                <th>{$t.automation.historyDuration}</th>
+                <th>{$t.automation.historyError}</th>
               </tr>
-            {/each}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-{/if}
-
-{#if logTask}
-  <div class="modal" role="dialog" aria-modal="true" aria-labelledby="logs-title">
-    <button class="modal-backdrop" type="button" aria-label={$t.automation.closeLogs} onclick={() => (logTask = null)}></button>
-    <div class="modal-panel">
-      <div class="modal-head">
-        <div>
-          <h2 id="logs-title">{$t.automation.logsTitle(taskLabel(logTask, $t))}</h2>
-          <p>{logTask.logPath ?? $t.automation.noLogFile}</p>
+            </thead>
+            <tbody>
+              {#if historyLoading}
+                <tr><td colspan="5">{$t.common.loading}</td></tr>
+              {/if}
+              {#each visibleHistoryRows as run}
+                <tr>
+                  <td><div class="task-name"><strong>{taskIdLabel(run.taskId, $t)}</strong><span>{run.script}</span></div></td>
+                  <td><span class={`chip ${statusClass(run.status)}`}>{$t.automation.statusLabels[run.status]}</span></td>
+                  <td class="mono">{formatTime(run.startedAt)}</td>
+                  <td class="mono">{formatDuration(run)}</td>
+                  <td class="history-error">
+                    {#if run.errorMessage}
+                      <button type="button" onclick={() => (expandedHistoryRunId = expandedHistoryRunId === run.taskRunId ? null : run.taskRunId)}>{run.errorMessage}</button>
+                    {:else}--{/if}
+                  </td>
+                </tr>
+                {#if run.errorMessage && expandedHistoryRunId === run.taskRunId}
+                  <tr class="history-error-detail"><td colspan="5"><strong>{$t.automation.historyError}</strong><code>{run.errorMessage}</code></td></tr>
+                {/if}
+              {/each}
+            </tbody>
+          </table>
         </div>
-        <button class="modal-close" type="button" aria-label={$t.common.close} onclick={() => (logTask = null)}>x</button>
-      </div>
-      <div class="modal-body">
-        <pre class="log-output">{logTask.errorMessage ?? (logTask.logTail || $t.automation.noLogs)}</pre>
       </div>
     </div>
   </div>
@@ -721,173 +1080,772 @@
 {/if}
 
 <style>
+  :global(html) {
+    overflow-y: scroll;
+    scrollbar-gutter: stable;
+  }
+
   .automation-content {
     display: grid;
-    gap: var(--space-6);
+    gap: 22px;
+    transition: margin-right 0.2s ease;
   }
 
-  .automation-command-grid {
-    display: grid;
-    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
-    gap: var(--space-4);
+  .automation-content.sync-sheet-open {
+    margin-right: 455px;
   }
 
-  .command-card {
-    min-height: 132px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    gap: var(--space-4);
-    padding: var(--space-5);
+  :global(.topbar-title) {
+    display: none;
   }
 
-  .command-card h2 {
-    margin: var(--space-2) 0 0;
-    font-size: clamp(24px, 3vw, 34px);
-    line-height: 1.05;
+  :global(.topbar-actions) {
+    grid-column: 3;
   }
 
-  .command-primary {
-    border-color: color-mix(in oklch, var(--accent) 12%, var(--border));
+  .topbar-action {
+    width: auto;
+    min-width: 112px;
+    border-color: var(--border);
     background: var(--surface);
   }
 
-  .command-topline,
-  .command-actions {
+  .sync-hero {
+    min-height: 116px;
     display: flex;
     align-items: center;
-    gap: var(--space-3);
-    flex-wrap: wrap;
-  }
-
-  .command-topline {
     justify-content: space-between;
+    gap: 28px;
+    padding: 24px 30px;
+    border-radius: 8px;
   }
 
-  .automation-stats {
+  .sync-hero.active {
+    min-height: 132px;
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: var(--space-4);
+    grid-template-columns: minmax(0, 1fr) auto;
+    border-color: color-mix(in oklch, var(--accent) 28%, var(--border));
+    background: color-mix(in oklch, var(--accent-soft) 24%, var(--surface));
   }
 
-  .automation-stat {
-    min-height: 132px;
+  .sync-hero-copy {
+    min-width: 0;
     display: grid;
-    align-content: space-between;
-    gap: var(--space-4);
-    padding: var(--space-5);
+    gap: 6px;
   }
 
-  .automation-stat strong {
-    font-family: var(--font-mono);
-    font-size: 30px;
-    line-height: 1;
+  .sync-hero h2 {
+    margin: 0;
+    font-size: clamp(25px, 2vw, 31px);
+    line-height: 1.25;
+    letter-spacing: -0.035em;
   }
 
-  .task-board {
-    overflow: hidden;
+  .running-kicker {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    color: var(--accent);
+    font-size: 14px;
+    font-weight: 780;
   }
 
-  .automation-title {
-    align-items: flex-start;
+  .active-task-filter {
+    width: fit-content;
+    max-width: min(100%, 540px);
+    padding: 4px;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface);
+    box-shadow: 0 1px 3px rgb(30 48 66 / 0.06);
+    overflow: hidden;
   }
 
-  .modal-head p {
-    margin: var(--space-1) 0 0;
-    color: var(--muted);
-    font-size: 13px;
+  .active-task-jump-list {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 6px;
+    padding: 2px;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    scroll-behavior: smooth;
+    scroll-snap-type: x proximity;
+    scrollbar-width: none;
   }
 
-  .automation-table td {
-    vertical-align: middle;
+  .active-task-jump-list::-webkit-scrollbar {
+    display: none;
   }
 
-  .automation-table tr.task-active td {
-    background: color-mix(in oklch, var(--warn) 2%, white);
+  .active-task-jump {
+    flex: 0 0 46px;
+    width: 46px;
+    height: 46px;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: 1px solid color-mix(in oklch, var(--accent) 34%, var(--border));
+    border-radius: 50%;
+    background: color-mix(in oklch, var(--accent-soft) 74%, var(--surface));
+    color: var(--accent);
+    cursor: pointer;
+    scroll-snap-align: start;
+    transition: border-color 150ms ease, background 150ms ease;
   }
 
-  .automation-table tr.task-attention td {
-    background: color-mix(in oklch, var(--danger) 2%, white);
+  .active-task-tooltip {
+    position: fixed;
+    z-index: 40;
+    width: max-content;
+    max-width: 280px;
+    display: grid;
+    gap: 3px;
+    padding: 10px 12px;
+    border: 1px solid color-mix(in oklch, var(--border) 72%, transparent);
+    border-radius: var(--radius);
+    background: var(--fg);
+    color: var(--surface);
+    box-shadow: 0 14px 32px rgb(15 23 42 / 0.18);
+    pointer-events: none;
+    transform: translateX(-50%);
   }
 
-  .task-name {
-    min-width: 220px;
-    display: grid;
-    gap: 2px;
+  .active-task-tooltip strong {
+    font-size: 13px;
   }
 
-  .task-name strong {
-    font-weight: 720;
+  .active-task-tooltip span {
+    color: color-mix(in oklch, var(--surface) 74%, transparent);
+    font-size: 11px;
   }
 
-  .task-name span,
-  .mono {
-    color: var(--muted);
-    font-family: var(--font-mono);
-    font-size: 12px;
+  .active-task-jump:hover {
+    border-color: var(--accent);
+    background: var(--surface);
+    animation: active-task-settle 280ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
   }
 
-  .progress-cell {
-    min-width: 150px;
-    display: grid;
-    gap: var(--space-1);
+  @keyframes active-task-settle {
+    42% {
+      transform: scale(0.94);
+    }
+
+    100% {
+      transform: scale(1.06);
+    }
   }
 
-  .progress-bar {
-    width: 100%;
-    height: 6px;
-    overflow: hidden;
-    border-radius: 999px;
-    background: var(--surface-soft);
+  @media (prefers-reduced-motion: reduce) {
+    .active-task-jump:hover {
+      animation: none;
+    }
   }
 
-  .progress-bar span {
-    display: block;
-    height: 100%;
-    border-radius: inherit;
-    background: var(--accent);
+  .active-task-jump:focus-visible {
+    outline: 3px solid color-mix(in oklch, var(--accent) 24%, transparent);
+    outline-offset: 2px;
   }
 
-  .task-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-2);
-    flex-wrap: wrap;
+  .active-task-jump.waiting {
+    border-color: color-mix(in oklch, var(--warn) 34%, var(--border));
+    background: color-mix(in oklch, var(--warn) 8%, var(--surface));
+    color: var(--warn);
   }
 
-  .task-control,
-  .fixed-action {
-    width: 112px;
-    min-width: 112px;
+  .active-task-jump.import-task {
+    border-color: color-mix(in oklch, #7367c8 34%, var(--border));
+    background: color-mix(in oklch, #7367c8 8%, var(--surface));
+    color: #6559b5;
   }
 
-  .task-control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--space-2);
+  .active-task-jump.sync-task {
+    border-color: color-mix(in oklch, #158276 34%, var(--border));
+    background: color-mix(in oklch, #158276 8%, var(--surface));
+    color: #11756a;
   }
 
-  .history-modal {
-    width: min(1040px, 100%);
+  .active-task-jump.failed {
+    border-color: color-mix(in oklch, var(--danger) 34%, var(--border));
+    background: color-mix(in oklch, var(--danger) 8%, var(--surface));
+    color: var(--danger);
+  }
+
+  .sync-hero-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .stage-sync-action,
+  .sync-modal-actions .button.primary {
+    border-color: var(--accent);
+    background: var(--accent);
+    color: white;
+  }
+
+  .hero-action {
+    min-width: 132px;
+    min-height: 48px;
+    font-size: 15px;
+  }
+
+  .workflow-card {
+    overflow: hidden;
+    border-radius: 8px;
+  }
+
+  .stage-section {
+    border-bottom: 1px solid var(--border);
+  }
+
+  .stage-section:last-child {
+    border-bottom: 0;
+  }
+
+  .stage-head {
+    min-height: 82px;
+    padding: 10px 20px;
+  }
+
+  .stage-head:hover {
+    background: var(--surface-soft);
+  }
+
+  .stage-head-content {
+    min-height: 62px;
+    display: grid;
+    grid-template-columns: 42px minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .stage-head-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .stage-sync-action {
+    min-width: 112px;
+    min-height: 42px;
+  }
+
+  .stage-toggle-action {
+    width: 48px;
+    height: 48px;
+    display: inline-grid;
+    place-items: center;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius);
+    background: transparent;
+    color: var(--fg);
+  }
+
+  .stage-toggle-action:hover,
+  .stage-toggle-action:focus-visible {
+    background: var(--surface-soft);
+  }
+
+  .stage-caret {
+    width: 10px;
+    height: 10px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    transform: rotate(45deg) translate(-1px, -1px);
+    transition: transform 180ms ease;
+  }
+
+  .stage-toggle-action[aria-expanded="true"] .stage-caret {
+    transform: rotate(225deg) translate(-1px, -1px);
+  }
+
+  .stage-number {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--accent);
+    color: white;
+    font-family: var(--font-mono);
+    font-weight: 760;
+    box-shadow: 0 2px 5px color-mix(in oklch, var(--accent) 16%, transparent);
+  }
+
+  .stage-number.muted {
+    background: var(--muted);
+    box-shadow: none;
+  }
+
+  .stage-copy {
+    min-width: 0;
+    display: grid;
+    gap: 5px;
+  }
+
+  .stage-title-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    flex-wrap: wrap;
+  }
+
+  .stage-title-row h2 {
+    margin: 0;
+  }
+
+  .stage-title-row h2 {
+    font-size: 20px;
+  }
+
+  .stage-body {
+    padding: 0 20px 18px 74px;
+  }
+
+  .table-reveal {
+    overflow: clip;
+  }
+
+  .show-all-tasks {
+    width: 100%;
+    min-height: 44px;
+    border: 0;
+    background: var(--surface);
+    color: var(--accent);
+    font-size: 13px;
+    font-weight: 760;
+  }
+
+  .show-all-tasks:hover {
+    background: var(--surface-soft);
+  }
+
+  .modal-head p {
+    margin: var(--space-1) 0 0;
+    color: var(--muted);
+    font-size: 13px;
+  }
+
+  .automation-table td {
+    vertical-align: middle;
+  }
+
+  .automation-table {
+    table-layout: fixed;
+    min-width: 760px;
+  }
+
+  .automation-table th,
+  .automation-table td {
+    padding-inline: 8px;
+  }
+
+  .automation-table th {
+    font-size: 11px;
+  }
+
+  .automation-table tr.task-active td {
+    background: color-mix(in oklch, var(--warn) 2%, white);
+  }
+
+  .task-row {
+    scroll-margin-top: 88px;
+  }
+
+  .automation-table tr.task-attention td {
+    background: color-mix(in oklch, var(--danger) 2%, white);
+  }
+
+  .task-name {
+    min-width: 150px;
+  }
+
+  .task-name strong {
+    font-weight: 720;
+  }
+
+  .mono {
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 11px;
+  }
+
+  .latest-time {
+    white-space: nowrap;
+  }
+
+  .credential-state {
+    font-size: 12px;
+    font-weight: 760;
+  }
+
+  .credential-state.good {
+    color: var(--success);
+  }
+
+  .credential-state.bad {
+    color: var(--danger);
+  }
+
+  .progress-cell {
+    min-width: 96px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .progress-bar {
+    width: 100%;
+    height: 6px;
+    overflow: hidden;
+    border-radius: 999px;
+    background: var(--surface-soft);
+  }
+
+  .progress-bar span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--accent);
+  }
+
+  .task-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    flex-wrap: wrap;
+  }
+
+  .fixed-action {
+    width: 112px;
+    min-width: 112px;
+  }
+
+  .task-control {
+    width: auto;
+    min-width: 0;
+    min-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 8px;
+    border: 0;
+    background: transparent;
+    color: var(--accent);
+    font-size: 12px;
+  }
+
+  .task-control.active-log {
+    border-color: var(--accent);
+    color: var(--accent);
+    background: var(--accent-soft);
+  }
+
+  .task-control.primary,
+  .task-control.danger {
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .task-control.primary {
+    color: var(--accent);
+  }
+
+  .task-control.danger {
+    color: var(--danger);
+  }
+
+  .inline-task-log td {
+    padding: 0;
+    background: color-mix(in oklch, var(--accent-soft) 38%, var(--surface));
+    scroll-margin-top: 88px;
+  }
+
+  .inline-log-panel {
+    display: grid;
+    gap: var(--space-3);
+    padding: var(--space-5);
+    border-top: 1px solid color-mix(in oklch, var(--accent) 24%, var(--border));
+    border-bottom: 1px solid color-mix(in oklch, var(--accent) 24%, var(--border));
+    outline: none;
+    transition: background 240ms ease, box-shadow 240ms ease;
+  }
+
+  .inline-task-log.jump-highlight .inline-log-panel {
+    background: color-mix(in oklch, var(--accent-soft) 76%, var(--surface));
+    box-shadow: inset 4px 0 0 var(--accent);
+  }
+
+  .inline-log-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+
+  .inline-log-path {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .inline-log-panel .log-output {
+    min-height: 120px;
+    max-height: 280px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+  }
+
+  .sync-sheet {
+    position: fixed;
+    z-index: 25;
+    inset: var(--topbar-height, 60px) 0 0 auto;
+    width: 455px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    border-left: 1px solid var(--border);
+    background: var(--surface);
+    box-shadow: -7px 0 22px rgb(30 48 66 / 0.05);
+  }
+
+  .sync-sheet-head {
+    align-items: flex-start;
+    padding: 28px 28px 18px;
+    border-bottom: 0;
+  }
+
+  .sync-sheet-head h2 {
+    font-size: 24px;
+  }
+
+  .sync-sheet-close {
+    width: auto;
+    min-height: 34px;
+    padding-inline: 12px;
+  }
+
+  .sync-modal-body {
+    display: grid;
+    gap: 12px;
+    padding: 0 28px 18px;
+  }
+
+  .sync-readiness {
+    padding: 16px;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface-soft);
+    color: var(--success);
+    font-size: 13px;
+  }
+
+  .sync-task-list {
+    max-height: 360px;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    list-style: none;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+  }
+
+  .sync-task-list li {
+    display: grid;
+    gap: 2px;
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border);
+  }
+
+  .sync-task-list li:last-child {
+    border-bottom: 0;
+  }
+
+  .sync-task-list code {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .sync-modal-actions {
+    position: sticky;
+    bottom: 0;
+    margin-top: auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    padding: 18px 28px 28px;
+    border-top: 1px solid var(--border);
+    background: var(--surface);
+  }
+
+  .history-modal {
+    width: min(1180px, 100%);
+    height: min(760px, calc(100vh - 40px));
+  }
+
+  .history-head-actions,
+  .credential-head-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--space-3);
+  }
+
+  .modal-search {
+    min-height: 40px;
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: 0 var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--muted);
+    background: var(--surface);
+  }
+
+  .modal-search:focus-within {
+    border-color: var(--fg);
+    box-shadow: 0 0 0 3px var(--surface-soft);
+  }
+
+  .modal-search input {
+    min-width: 0;
+    flex: 1;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    color: var(--fg);
+  }
+
+  .history-search {
+    width: min(320px, 34vw);
+  }
+
+  .history-layout {
+    min-height: 0;
+    flex: 1;
+    display: grid;
+    grid-template-columns: 190px minmax(0, 1fr);
+    overflow: hidden;
+  }
+
+  .history-filters {
+    padding: var(--space-3);
+    border-right: 1px solid var(--border);
+  }
+
+  .history-filters button {
+    width: 100%;
+    min-height: 46px;
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--space-3);
+    padding: 0 var(--space-3);
+    border: 0;
+    background: transparent;
+    color: var(--muted);
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .history-filters button:hover {
+    color: var(--fg);
+  }
+
+  .history-filters button.selected {
+    color: var(--fg);
+    font-weight: 760;
+  }
+
+  .history-filters button.selected span {
+    text-decoration: underline;
+    text-decoration-color: var(--muted);
+    text-underline-offset: 6px;
   }
 
   .history-body {
-    max-height: min(68vh, 720px);
+    min-width: 0;
     overflow: auto;
     padding: 0;
   }
 
+  .history-table {
+    table-layout: fixed;
+    min-width: 820px;
+  }
+
+  .history-table th:nth-child(1) { width: 31%; }
+  .history-table th:nth-child(2) { width: 13%; }
+  .history-table th:nth-child(3) { width: 21%; }
+  .history-table th:nth-child(4) { width: 10%; }
+  .history-table th:nth-child(5) { width: 25%; }
+
   .history-table td {
     vertical-align: middle;
   }
 
+  .history-table .task-name span {
+    display: block;
+    margin-top: 4px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    overflow-wrap: anywhere;
+  }
+
   .history-error {
-    max-width: 320px;
+    max-width: 0;
     color: var(--muted);
     font-size: 12px;
   }
 
+  .history-error button {
+    width: 100%;
+    overflow: hidden;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .history-error-detail td {
+    padding: 0 var(--space-4) var(--space-4);
+    border-top: 0;
+  }
+
+  .history-error-detail td > strong,
+  .history-error-detail code {
+    display: block;
+    padding: var(--space-3) var(--space-4);
+    color: var(--danger);
+    background: color-mix(in oklch, var(--danger) 5%, var(--surface));
+  }
+
+  .history-error-detail td > strong {
+    padding-bottom: 0;
+    border: 1px solid color-mix(in oklch, var(--danger) 24%, var(--border));
+    border-bottom: 0;
+    border-radius: var(--radius) var(--radius) 0 0;
+    font-size: 12px;
+  }
+
+  .history-error-detail code {
+    padding-top: var(--space-2);
+    border: 1px solid color-mix(in oklch, var(--danger) 24%, var(--border));
+    border-top: 0;
+    border-radius: 0 0 var(--radius) var(--radius);
+    white-space: pre-wrap;
+  }
+
   .spinner {
     box-sizing: border-box;
     flex: 0 0 14px;
@@ -916,34 +1874,64 @@
   }
 
   .credential-modal {
-    width: min(820px, 100%);
+    width: min(1120px, 100%);
+    height: min(760px, calc(100vh - 40px));
   }
 
-  .credential-body {
-    padding: var(--space-5);
+  .credential-layout {
+    min-height: 0;
+    flex: 1;
+    display: grid;
+    grid-template-columns: 250px minmax(0, 1fr);
+    overflow: hidden;
   }
 
-  .credential-head-actions {
+  .credential-provider-list {
+    min-height: 0;
     display: flex;
-    justify-content: flex-end;
+    flex-direction: column;
     gap: var(--space-3);
+    padding: var(--space-4);
+    border-right: 1px solid var(--border);
   }
 
-  .credential-sections {
-    display: grid;
-    gap: var(--space-4);
+  .credential-provider-list nav {
+    min-height: 0;
+    overflow-y: auto;
   }
 
-  .credential-section {
+  .credential-provider-list nav button {
+    width: 100%;
+    min-height: 58px;
     display: grid;
-    gap: var(--space-4);
-    padding-bottom: var(--space-4);
-    border-bottom: 1px solid var(--border);
+    gap: 3px;
+    padding: var(--space-3);
+    border: 0;
+    background: transparent;
+    color: var(--fg);
+    text-align: left;
+    cursor: pointer;
   }
 
-  .credential-section:last-child {
-    padding-bottom: 0;
-    border-bottom: 0;
+  .credential-provider-list nav button:hover {
+    background: var(--surface-soft);
+  }
+
+  .credential-provider-list nav button.selected strong {
+    text-decoration: underline;
+    text-decoration-color: var(--muted);
+    text-underline-offset: 6px;
+  }
+
+  .credential-provider-list nav button span {
+    color: var(--muted);
+    font-size: 12px;
+  }
+
+  .credential-body {
+    min-height: 0;
+    padding: var(--space-6);
+    overflow-y: auto;
   }
 
   .credential-section-head {
@@ -953,10 +1941,9 @@
     gap: var(--space-4);
   }
 
-  .credential-section h3 {
+  .credential-body h3 {
     margin: 0;
-    font-size: 14px;
-    font-weight: 760;
+    font-size: 24px;
   }
 
   .credential-switch {
@@ -1331,18 +2318,64 @@
     white-space: pre-wrap;
   }
 
+  @media (max-width: 1100px) {
+    .automation-content.sync-sheet-open {
+      margin-right: 0;
+    }
+
+    .sync-sheet {
+      box-shadow: -18px 0 46px rgb(30 48 66 / 0.14);
+    }
+
+  }
+
   @media (max-width: 820px) {
-    .automation-command-grid,
-    .automation-stats {
-      grid-template-columns: 1fr;
+    .sync-hero {
+      align-items: stretch;
+      flex-direction: column;
     }
 
-    .command-actions,
-    .command-actions .button,
-    .automation-stat .chip {
+    .sync-hero.active {
+      display: flex;
+    }
+
+    .sync-hero-actions,
+    .sync-hero-actions .button {
       width: 100%;
     }
 
+    .active-task-jump-list {
+      max-width: 100%;
+    }
+
+    .stage-head {
+      padding: var(--space-4);
+    }
+
+    .stage-head-content {
+      grid-template-columns: 42px minmax(0, 1fr);
+    }
+
+    .stage-head-actions {
+      grid-column: 1 / -1;
+      justify-content: flex-end;
+    }
+
+    .stage-body {
+      padding: 0 var(--space-4) var(--space-4);
+    }
+
+    .stage-number {
+      width: 36px;
+      height: 36px;
+      flex-basis: 36px;
+    }
+
+    .inline-log-head {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
     .credential-section-head {
       align-items: flex-start;
       flex-direction: column;
@@ -1356,6 +2389,10 @@
       justify-content: flex-start;
     }
 
+    .sync-sheet {
+      width: min(455px, 100vw);
+    }
+
     .human-viewer-modal .modal-head {
       flex-direction: column;
     }
diff --git a/src/lib/automation/server/desktop-api.check.ts b/src/lib/automation/server/desktop-api.check.ts
index 3c841e36..e33d8f9f 100644
--- a/src/lib/automation/server/desktop-api.check.ts
+++ b/src/lib/automation/server/desktop-api.check.ts
@@ -51,9 +51,17 @@ try {
   const model = api.loadAutomationDesktopModel(dir);
   assert.equal(model.credentialGroups.find((group) => group.id === "fubon")?.enabled, true);
   assert.equal(model.automation.credentials[passwordKey], true);
+  assert.equal(model.automation.credentials.MAX_SUB_ACCOUNT, true);
   assert.equal(Object.hasOwn(model.automation, "runHistory"), false);
   assert.equal(model.automation.tasks.find((task) => task.id === "fubon-all-statements")?.ranToday, true);
   assert.equal(api.automationRunHistory(dir)[0]?.taskId, "fubon-all-statements");
+  assert.deepEqual(
+    api.assertAutomationTasksCanStart(
+      ["fubon-all-statements", "fubon-all-statements"],
+      model,
+    ).map((task) => task.id),
+    ["fubon-all-statements"],
+  );
 
   assert.throws(
     () => api.assertAutomationTaskCanStart("import-downloads-csv", dir),
diff --git a/src/lib/automation/server/desktop-api.ts b/src/lib/automation/server/desktop-api.ts
index 13ba1bfd..533d3480 100644
--- a/src/lib/automation/server/desktop-api.ts
+++ b/src/lib/automation/server/desktop-api.ts
@@ -26,6 +26,7 @@ import {
   resumeSessionFromLog,
   startAutomationResume,
   startAutomationTask,
+  startAutomationTasks,
 } from "./runner.ts";
 import {
   importGateStatus,
@@ -45,6 +46,7 @@ function currentCredentialStatus() {
   for (const key of AUTOMATION_CREDENTIAL_KEYS) {
     status[key] = status[key] || Boolean(settings[key]) || Boolean(process.env[key]?.trim());
   }
+  for (const key of optionalCredentialKeys) status[key] = true;
   return status;
 }
 
@@ -84,17 +86,15 @@ export function loadAutomationDesktopModel(ledgerDir = process.env.LEDGER_DIR ??
   }
 }
 
-function missingCredentialKeys(taskId: string) {
+function missingCredentialKeys(taskId: string, status = currentCredentialStatus()) {
   const task = taskById(taskId);
   if (!task) return [];
-  const status = currentCredentialStatus();
   return task.credentialKeys.filter((key) => !optionalCredentialKeys.has(key) && !status[key]);
 }
 
-export function assertAutomationTaskCanStart(taskId: string, ledgerDir = process.env.LEDGER_DIR ?? "data/ledger") {
+function assertAutomationTaskCanStartInModel(taskId: string, model: AutomationDesktopModel) {
   const task = taskById(taskId);
   if (!task) throw new Error(`Unknown automation task: ${taskId}`);
-  const model = loadAutomationDesktopModel(ledgerDir);
   const row = model.automation.tasks.find((item) => item.id === taskId);
   if (!row) throw new Error("Task is disabled.");
   if (row.status === "waiting_for_human") {
@@ -103,11 +103,19 @@ export function assertAutomationTaskCanStart(taskId: string, ledgerDir = process
   if (row.status === "locked") {
     throw new Error("Import is locked until all crawler dependencies complete for the business day.");
   }
-  const missing = missingCredentialKeys(taskId);
+  const missing = missingCredentialKeys(taskId, model.automation.credentials);
   if (missing.length > 0) throw new Error(`Missing credentials: ${missing.join(", ")}`);
   return task;
 }
 
+export function assertAutomationTasksCanStart(taskIds: readonly string[], model: AutomationDesktopModel) {
+  return [...new Set(taskIds)].map((taskId) => assertAutomationTaskCanStartInModel(taskId, model));
+}
+
+export function assertAutomationTaskCanStart(taskId: string, ledgerDir = process.env.LEDGER_DIR ?? "data/ledger") {
+  return assertAutomationTaskCanStartInModel(taskId, loadAutomationDesktopModel(ledgerDir));
+}
+
 export function automationSaveCredentials(updates: Record<string, string>) {
   const split = splitAutomationUpdates(updates);
   writeAutomationSettings({
@@ -129,6 +137,16 @@ export function automationRun(taskId: string, ledgerDir = process.env.LEDGER_DIR
   return { started: task.id };
 }
 
+export function automationRunMany(taskIds: string[], ledgerDir = process.env.LEDGER_DIR ?? "data/ledger") {
+  if (!Array.isArray(taskIds) || taskIds.some((taskId) => typeof taskId !== "string")) {
+    throw new TypeError("Task IDs must be an array of strings.");
+  }
+  if (taskIds.length === 0) return { started: [] as string[] };
+  const tasks = assertAutomationTasksCanStart(taskIds, loadAutomationDesktopModel(ledgerDir));
+  startAutomationTasks(tasks.map((task) => task.id), ledgerDir);
+  return { started: tasks.map((task) => task.id) };
+}
+
 export function automationCancel(taskId: string) {
   return cancelAutomationTask(taskId);
 }
diff --git a/src/lib/automation/server/page-model.check.ts b/src/lib/automation/server/page-model.check.ts
index b8101cca..e3da4e8f 100644
--- a/src/lib/automation/server/page-model.check.ts
+++ b/src/lib/automation/server/page-model.check.ts
@@ -30,6 +30,8 @@ const model = buildAutomationPageModel({
   todayRunTaskIds: ["fubon-all-statements"],
   credentials: {
     LIBRETTO_CLOUD_FUBON_USER_ID: true,
+    LIBRETTO_CLOUD_FUBON_ACCOUNT: true,
+    LIBRETTO_CLOUD_FUBON_PASSWORD: true,
     MAX_ACCESS_KEY: false,
   },
   importGate: {
@@ -51,6 +53,24 @@ assert.equal(fubonRow?.primaryAction, "Run");
 assert.equal(fubonRow?.ranToday, true);
 assert.equal(fubonRow?.logTail, "ok");
 assert.equal(Object.hasOwn(model, "runHistory"), false);
+assert.equal(model.parallelRunnableTaskIds.includes("fubon-all-statements"), true);
+assert.equal(model.parallelRunnableTaskIds.includes("esun-credit-card-statements"), false);
+assert.equal(model.parallelRunnableTaskIds.includes("import-downloads-csv"), false);
+
+const unlockedImportModel = buildAutomationPageModel({
+  tasks: AUTOMATION_TASKS,
+  latestRuns,
+  activeTaskIds: [],
+  todayRunTaskIds: ["fubon-all-statements"],
+  credentials: {},
+  importGate: {
+    locked: false,
+    missingTaskIds: [],
+  },
+  active: false,
+  businessDate: "2026-06-30",
+});
+assert.equal(unlockedImportModel.parallelRunnableTaskIds.includes("import-downloads-csv"), true);
 
 const failedModel = buildAutomationPageModel({
   tasks: AUTOMATION_TASKS,
@@ -113,6 +133,36 @@ assert.equal(activeFubonRow?.progressPercent, 42);
 assert.equal(activeFubonRow?.progressText, "42%");
 assert.equal(activeEsunRow?.canRun, true);
 assert.equal(activeEsunRow?.ranToday, true);
+assert.equal(activeModel.parallelRunnableTaskIds.includes("fubon-all-statements"), false);
+assert.equal(activeModel.parallelRunnableTaskIds.includes("esun-credit-card-statements"), false);
+
+const waitingModel = buildAutomationPageModel({
+  tasks: AUTOMATION_TASKS,
+  latestRuns: {
+    "fubon-all-statements": {
+      ...latestRuns["fubon-all-statements"],
+      taskRunId: "run-waiting",
+      status: "waiting_for_human",
+      finishedAt: null,
+      logTail: 'Workflow paused. Resume with session "ses-help".',
+    },
+  },
+  activeTaskIds: [],
+  todayRunTaskIds: ["fubon-all-statements"],
+  credentials: {},
+  importGate: {
+    locked: true,
+    missingTaskIds: [],
+  },
+  active: true,
+  businessDate: "2026-06-30",
+});
+
+const waitingRow = waitingModel.tasks.find((task) => task.id === "fubon-all-statements");
+assert.equal(waitingRow?.status, "waiting_for_human");
+assert.equal(waitingRow?.primaryAction, "Cancel");
+assert.equal(waitingRow?.canRun, true);
+assert.equal(waitingModel.parallelRunnableTaskIds.includes("fubon-all-statements"), false);
 
 const staleRunningModel = buildAutomationPageModel({
   tasks: AUTOMATION_TASKS,
diff --git a/src/lib/automation/server/page-model.ts b/src/lib/automation/server/page-model.ts
index e1fcaf28..8a4f07dd 100644
--- a/src/lib/automation/server/page-model.ts
+++ b/src/lib/automation/server/page-model.ts
@@ -27,7 +27,7 @@ function primaryAction(status: AutomationTaskStatus, isActive: boolean) {
   if (isActive) return "Cancel";
   if (status === "locked") return "Locked";
   if (status === "failed") return "Run again";
-  if (status === "waiting_for_human") return "Resume";
+  if (status === "waiting_for_human") return "Cancel";
   return "Run";
 }
 
@@ -54,44 +54,53 @@ export function buildAutomationPageModel(input: {
 }): AutomationPageModel {
   const activeTaskIds = new Set(input.activeTaskIds ?? []);
   const todayRunTaskIds = new Set(input.todayRunTaskIds ?? []);
+  const tasks = input.tasks.map((task) => {
+    const run = input.latestRuns[task.id];
+    const isActive = activeTaskIds.has(task.id);
+    const status = rowStatus(task, run, input.importGate, isActive);
+    const action = primaryAction(status, isActive);
+    const progressPercent = parseAutomationProgress(run?.logTail ?? "");
+    const attempt = run?.attempt ?? 0;
+    const maxAttempts = run?.maxAttempts ?? task.maxAttempts;
+    return {
+      id: task.id,
+      label: task.label,
+      script: task.script,
+      kind: task.kind,
+      credentialGroupId: task.credentialGroupId,
+      credentialKeys: task.credentialKeys,
+      dependencies: task.dependencies,
+      status,
+      attempt,
+      maxAttempts,
+      latestStartedAt: run?.startedAt ?? null,
+      latestFinishedAt: run?.finishedAt ?? null,
+      logTail: run?.logTail ?? "",
+      errorMessage: run?.errorMessage ?? null,
+      logPath: run?.logPath ?? null,
+      progressPercent,
+      progressText: progressText(status, attempt, maxAttempts, progressPercent),
+      humanSession: status === "waiting_for_human" ? resumeSessionFromLog(run?.logTail ?? "") : null,
+      isActive,
+      ranToday: todayRunTaskIds.has(task.id),
+      primaryAction: action,
+      canRun: action === "Cancel" || (!isActive && action !== "Locked"),
+    } satisfies AutomationTaskRow;
+  });
   return {
     businessDate: input.businessDate,
     active: input.active || activeTaskIds.size > 0,
     activeTaskCount: activeTaskIds.size,
+    parallelRunnableTaskIds: tasks
+      .filter((task) =>
+        task.canRun
+        && task.primaryAction !== "Cancel"
+        && !task.isActive
+        && task.credentialKeys.every((key) => input.credentials[key])
+      )
+      .map((task) => task.id),
     credentials: input.credentials,
     importGate: input.importGate,
-    tasks: input.tasks.map((task) => {
-      const run = input.latestRuns[task.id];
-      const isActive = activeTaskIds.has(task.id);
-      const status = rowStatus(task, run, input.importGate, isActive);
-      const action = primaryAction(status, isActive);
-      const progressPercent = parseAutomationProgress(run?.logTail ?? "");
-      const attempt = run?.attempt ?? 0;
-      const maxAttempts = run?.maxAttempts ?? task.maxAttempts;
-      return {
-        id: task.id,
-        label: task.label,
-        script: task.script,
-        kind: task.kind,
-        credentialGroupId: task.credentialGroupId,
-        credentialKeys: task.credentialKeys,
-        dependencies: task.dependencies,
-        status,
-        attempt,
-        maxAttempts,
-        latestStartedAt: run?.startedAt ?? null,
-        latestFinishedAt: run?.finishedAt ?? null,
-        logTail: run?.logTail ?? "",
-        errorMessage: run?.errorMessage ?? null,
-        logPath: run?.logPath ?? null,
-        progressPercent,
-        progressText: progressText(status, attempt, maxAttempts, progressPercent),
-        humanSession: status === "waiting_for_human" ? resumeSessionFromLog(run?.logTail ?? "") : null,
-        isActive,
-        ranToday: todayRunTaskIds.has(task.id),
-        primaryAction: action,
-        canRun: action === "Cancel" || (!isActive && action !== "Locked"),
-      } satisfies AutomationTaskRow;
-    }),
+    tasks,
   };
 }
diff --git a/src/lib/automation/server/runner.check.ts b/src/lib/automation/server/runner.check.ts
index c5df1d0b..fbae3dd5 100644
--- a/src/lib/automation/server/runner.check.ts
+++ b/src/lib/automation/server/runner.check.ts
@@ -13,11 +13,13 @@ import {
 } from "./session-lifecycle.ts";
 import {
   accumulateAutomationOutput,
+  activeAutomationTaskIds,
   appendCleanupError,
   automationCleanupFailureDetails,
   automationSessionFromLog,
   automationProcessEnv,
   createAutomationSessionId,
+  createAutomationOutputBuffer,
   finalFailureMessage,
   finalizeTerminalAutomationSession,
   hasActiveAutomationTask,
@@ -26,16 +28,20 @@ import {
   liveTaskRunUpdate,
   nextAttemptStatus,
   parseAutomationProgress,
+  prepareLibrettoRunCdpPatch,
   claimRunAutomationSession,
+  cancelAutomationTask,
   resumeFailureMessage,
   resumeSessionFromLog,
   recoverAbandonedAutomationSessions,
+  runWithConcurrency,
   shutdownAutomationSessions,
   shouldAutoRunImport,
   shouldCloseResumeSession,
   shouldMarkWaitingForHuman,
   shouldRetainAutomationSession,
   startAutomationTask,
+  startAutomationTasks,
 } from "./runner.ts";
 
 assert.equal(createAutomationSessionId(() => "fixed-uuid"), "ses-octopus-fixed-uuid");
@@ -107,6 +113,96 @@ test("terminal cleanup catch logs owner and appends the workflow error", async (
 assert.equal(automationProcessEnv({ NODE_ENV: "production" }).NODE_ENV, "development");
 assert.equal(automationProcessEnv({ NODE_ENV: "test" }).NODE_ENV, "test");
 
+test("Libretto CDP patch is prepared once per app process", () => {
+  let calls = 0;
+  const runPatch = () => { calls += 1; };
+
+  prepareLibrettoRunCdpPatch(runPatch);
+  prepareLibrettoRunCdpPatch(runPatch);
+
+  assert.equal(calls, 1);
+});
+
+test("automation output is flushed in batches", (context) => {
+  context.mock.timers.enable({ apis: ["setTimeout"] });
+  const flushed: string[] = [];
+  const buffer = createAutomationOutputBuffer((chunk) => flushed.push(chunk));
+
+  buffer.push("first\n");
+  buffer.push("second\n");
+  context.mock.timers.tick(499);
+  assert.deepEqual(flushed, []);
+  context.mock.timers.tick(1);
+  assert.deepEqual(flushed, ["first\nsecond\n"]);
+
+  buffer.push("final\n");
+  buffer.flush();
+  context.mock.timers.tick(500);
+  assert.deepEqual(flushed, ["first\nsecond\n", "final\n"]);
+});
+
+test("batch task startup uses two concurrent slots", () => {
+  const source = readFileSync(new URL("./runner.ts", import.meta.url), "utf8");
+  assert.match(source, /runWithConcurrency\(uniqueTaskIds, 2,/);
+});
+
+test("batch execution limits concurrency and starts the next task after a slot opens", async () => {
+  const started: number[] = [];
+  const releases = new Map<number, () => void>();
+  let active = 0;
+  let peak = 0;
+  const batch = runWithConcurrency([1, 2, 3, 4, 5], 4, async (item) => {
+    started.push(item);
+    active += 1;
+    peak = Math.max(peak, active);
+    await new Promise<void>((resolve) => releases.set(item, resolve));
+    active -= 1;
+  });
+
+  for (let turn = 0; turn < 5; turn += 1) {
+    await new Promise<void>((resolve) => setImmediate(resolve));
+  }
+  assert.deepEqual(started, [1, 2, 3, 4]);
+  assert.equal(peak, 4);
+
+  releases.get(1)?.();
+  await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.deepEqual(started, [1, 2, 3, 4, 5]);
+
+  for (const release of releases.values()) release();
+  await batch;
+  assert.equal(active, 0);
+});
+
+test("batch execution rejects invalid concurrency limits", async () => {
+  await assert.rejects(runWithConcurrency([1], 0, async () => {}), RangeError);
+});
+
+test("batch execution captures synchronous callback failures", async () => {
+  await assert.rejects(
+    runWithConcurrency([1], 1, () => { throw new Error("sync failure"); }),
+    /sync failure/,
+  );
+});
+
+test("batch startup validates every task before claiming any", async () => {
+  assert.throws(
+    () => startAutomationTasks(["exchange-rates", "unknown-task"]),
+    /Unknown automation task/,
+  );
+  const leaked = activeAutomationTaskIds();
+  if (leaked.includes("exchange-rates")) await cancelAutomationTask("exchange-rates");
+  assert.deepEqual(leaked, []);
+});
+
+test("a queued batch task can be cancelled before its process starts", async () => {
+  startAutomationTasks(["exchange-rates"]);
+  assert.deepEqual(activeAutomationTaskIds(), ["exchange-rates"]);
+  assert.deepEqual(await cancelAutomationTask("exchange-rates"), { cancelled: "exchange-rates" });
+  await new Promise<void>((resolve) => setImmediate(resolve));
+  assert.deepEqual(activeAutomationTaskIds(), []);
+});
+
 assert.equal(shouldMarkWaitingForHuman("libretto paused. resume --session abc"), true);
 assert.equal(shouldMarkWaitingForHuman("Please enter OTP in browser"), true);
 assert.equal(
diff --git a/src/lib/automation/server/runner.ts b/src/lib/automation/server/runner.ts
index feea1ad6..cb5cc13b 100644
--- a/src/lib/automation/server/runner.ts
+++ b/src/lib/automation/server/runner.ts
@@ -48,6 +48,7 @@ export { closeLibrettoSession };
 const activeTaskRunIds = new Map<string, string>();
 const activeTaskChildren = new Map<string, ChildProcess>();
 const SESSION_LOG_PREFIX_BYTES = 4_000;
+let librettoRunCdpPatched = false;
 
 export type StartAutomationTaskOptions = {
   scheduledAtUtc?: string;
@@ -159,6 +160,24 @@ export function librettoRunCdpPatchCommand(input: { resumeSession?: string }) {
   return command ? [command.command, ...command.args] as const : null;
 }
 
+export function prepareLibrettoRunCdpPatch(runPatch: () => void = () => {
+  const command = resolvePatchCommand({});
+  if (!command) return;
+  const patch = spawnSync(command.command, command.args, {
+    env: command.env,
+    encoding: "utf8",
+  });
+  if (patch.stdout) console.info(patch.stdout.trim());
+  if (patch.stderr) console.warn(patch.stderr.trim());
+  if (patch.error || patch.status !== 0) {
+    throw patch.error ?? new Error(`Libretto CDP patch exited with code ${patch.status}`);
+  }
+}) {
+  if (librettoRunCdpPatched) return;
+  runPatch();
+  librettoRunCdpPatched = true;
+}
+
 export function shouldAutoRunImport(input: {
   kind: AutomationTaskKind;
   status: AutomationTaskStatus;
@@ -187,6 +206,50 @@ function appendLog(logPath: string, chunk: string) {
   appendFileSync(logPath, chunk);
 }
 
+export function createAutomationOutputBuffer(
+  write: (chunk: string) => void,
+  delayMs = 500,
+) {
+  let pending = "";
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  const flush = () => {
+    if (timer) clearTimeout(timer);
+    timer = null;
+    if (!pending) return;
+    const chunk = pending;
+    pending = "";
+    write(chunk);
+  };
+  return {
+    push(chunk: string) {
+      pending += chunk;
+      if (!timer) timer = setTimeout(flush, delayMs);
+    },
+    flush,
+  };
+}
+
+export async function runWithConcurrency<T>(
+  items: readonly T[],
+  limit: number,
+  run: (item: T) => Promise<void>,
+) {
+  if (!Number.isInteger(limit) || limit < 1) throw new RangeError("Concurrency limit must be a positive integer.");
+  const active = new Set<Promise<void>>();
+  const errors: unknown[] = [];
+  for (const item of items) {
+    if (active.size >= limit) await Promise.race(active);
+    const task = Promise.resolve()
+      .then(() => run(item))
+      .catch((error) => { errors.push(error); })
+      .finally(() => active.delete(task));
+    active.add(task);
+    await new Promise<void>((resolve) => setImmediate(resolve));
+  }
+  await Promise.all(active);
+  if (errors.length) throw errors[0];
+}
+
 export function claimRunAutomationSession(
   db: ReturnType<typeof openLedgerDatabase>,
   taskRunId: string,
@@ -281,6 +344,30 @@ export function startAutomationTask(
   });
 }
 
+export function startAutomationTasks(
+  taskIds: readonly string[],
+  ledgerDir = process.env.LEDGER_DIR ?? "data/ledger",
+) {
+  const uniqueTaskIds = [...new Set(taskIds)];
+  for (const taskId of uniqueTaskIds) {
+    if (!taskById(taskId)) throw new Error(`Unknown automation task: ${taskId}`);
+    if (activeTaskRunIds.has(taskId)) throw new Error(`Automation task is already running: ${taskId}`);
+  }
+  for (const taskId of uniqueTaskIds) {
+    claimTask(taskId);
+    activeTaskRunIds.set(taskId, "queued");
+  }
+  setImmediate(() => {
+    void runWithConcurrency(uniqueTaskIds, 2, async (taskId) => {
+      if (activeTaskRunIds.get(taskId) !== "queued") return;
+      activeTaskRunIds.set(taskId, "pending");
+      await runAutomationTask(taskId, ledgerDir, { claimed: true }).catch((error) => {
+        console.error("automation-task-run-failed", error);
+      });
+    });
+  });
+}
+
 export function startAutomationResume(
   taskId: string,
   session: string,
@@ -296,6 +383,10 @@ export function startAutomationResume(
 
 export async function cancelAutomationTask(taskId: string) {
   if (!activeTaskRunIds.has(taskId)) throw new Error(`Automation task is not running: ${taskId}`);
+  if (activeTaskRunIds.get(taskId) === "queued") {
+    activeTaskRunIds.delete(taskId);
+    return { cancelled: taskId };
+  }
   const child = activeTaskChildren.get(taskId);
   if (!child) throw new Error(`Automation task has not started a process yet: ${taskId}`);
   child.kill("SIGTERM");
@@ -537,12 +628,18 @@ export async function runAutomationTask(
         signal: NodeJS.Signals | null;
         error: Error | null;
       }>((resolve) => {
+        const outputBuffer = createAutomationOutputBuffer((logChunk) => {
+          appendLog(logPath, logChunk);
+          if (!isForceQuitRun(taskRunById(taskDb, run.taskRunId))) {
+            updateTaskRun(taskDb, run.taskRunId, liveTaskRunUpdate(logTail));
+          }
+        });
         const onOutput = (chunk: Buffer) => {
           const output = accumulateAutomationOutput(
             { logTail, resumeFailure: detectedResumeFailure },
             chunk.toString("utf8"),
           );
-          appendLog(logPath, output.logChunk);
+          outputBuffer.push(output.logChunk);
           if (session) {
             ownAutomationSession({
               taskId: task.id,
@@ -553,27 +650,7 @@ export async function runAutomationTask(
           }
           logTail = output.logTail;
           detectedResumeFailure = output.resumeFailure;
-          if (!isForceQuitRun(taskRunById(taskDb, run.taskRunId))) {
-            updateTaskRun(taskDb, run.taskRunId, liveTaskRunUpdate(logTail));
-          }
         };
-        const patchCommand = resolvePatchCommand(options, env);
-        if (patchCommand) {
-          const patch = spawnSync(patchCommand.command, patchCommand.args, {
-            env: patchCommand.env,
-            encoding: "utf8",
-          });
-          if (patch.stdout) onOutput(Buffer.from(patch.stdout));
-          if (patch.stderr) onOutput(Buffer.from(patch.stderr));
-          if (patch.error || patch.status !== 0) {
-            resolve({
-              exitCode: patch.status,
-              signal: patch.signal,
-              error: patch.error ?? new Error(`Libretto CDP patch exited with code ${patch.status}`),
-            });
-            return;
-          }
-        }
         const child = spawn(command.command, command.args, {
           stdio: ["ignore", "pipe", "pipe"],
           env: command.env,
@@ -583,10 +660,12 @@ export async function runAutomationTask(
         child.stderr.on("data", onOutput);
         child.on("error", (error) => {
           activeTaskChildren.delete(task.id);
+          outputBuffer.flush();
           resolve({ exitCode: null, signal: null, error });
         });
         child.on("close", (exitCode, signal) => {
           activeTaskChildren.delete(task.id);
+          outputBuffer.flush();
           resolve({ exitCode, signal, error: null });
         });
       });
diff --git a/src/lib/automation/types.ts b/src/lib/automation/types.ts
index ad7d4d3c..a08dd539 100644
--- a/src/lib/automation/types.ts
+++ b/src/lib/automation/types.ts
@@ -67,6 +67,7 @@ export type AutomationPageModel = {
   businessDate: string;
   active: boolean;
   activeTaskCount: number;
+  parallelRunnableTaskIds: string[];
   credentials: Record<string, boolean>;
   importGate: ImportGate;
   tasks: AutomationTaskRow[];
diff --git a/src/lib/desktop/api.check.ts b/src/lib/desktop/api.check.ts
index 24c734d8..059c5277 100644
--- a/src/lib/desktop/api.check.ts
+++ b/src/lib/desktop/api.check.ts
@@ -13,6 +13,7 @@ assert.deepEqual([...octopusBeakApiChannels], [
   "automation:load",
   "automation:saveCredentials",
   "automation:run",
+  "automation:runMany",
   "automation:resume",
   "automation:cancel",
   "automation:runHistory",
diff --git a/src/lib/desktop/api.ts b/src/lib/desktop/api.ts
index cb8844d1..c74c531b 100644
--- a/src/lib/desktop/api.ts
+++ b/src/lib/desktop/api.ts
@@ -63,6 +63,7 @@ export type OctopusBeakApi = {
     load(): Promise<AutomationDesktopModel>;
     saveCredentials(updates: Record<string, string>): Promise<{ saved: true }>;
     run(taskId: string): Promise<{ started: string }>;
+    runMany(taskIds: string[]): Promise<{ started: string[] }>;
     resume(taskId: string): Promise<{ resumed: string }>;
     cancel(taskId: string): Promise<{ cancelled: string }>;
     runHistory(): Promise<AutomationTaskHistoryRow[]>;
@@ -85,6 +86,7 @@ export const octopusBeakApiChannels = [
   "automation:load",
   "automation:saveCredentials",
   "automation:run",
+  "automation:runMany",
   "automation:resume",
   "automation:cancel",
   "automation:runHistory",
diff --git a/src/lib/i18n/i18n.check.ts b/src/lib/i18n/i18n.check.ts
index 1827a73d..2f89d305 100644
--- a/src/lib/i18n/i18n.check.ts
+++ b/src/lib/i18n/i18n.check.ts
@@ -48,6 +48,12 @@ assert.equal(translations.en.automation.historyFinishedTime("Asia/Taipei"), "Fin
 assert.equal(translations["zh-TW"].automation.latestTime("Asia/Taipei"), "最新（Asia/Taipei）");
 assert.equal(translations["zh-TW"].automation.historyStartedTime("Asia/Taipei"), "開始（Asia/Taipei）");
 assert.equal(translations["zh-TW"].automation.historyFinishedTime("Asia/Taipei"), "完成（Asia/Taipei）");
+assert.equal(translations.en.automation.runningTaskHeading(1), "1 task is running");
+assert.equal(translations.en.automation.runningTaskHeading(2), "2 tasks are running");
+assert.equal(translations.en.automation.syncDialogDescription(1), "1 independent task will start at the same time.");
+assert.equal(translations.en.automation.syncDialogDescription(2), "2 independent tasks will start at the same time.");
+assert.equal(translations.en.automation.showAllTasks(1), "Show all 1 task");
+assert.equal(translations.en.automation.showAllTasks(2), "Show all 2 tasks");
 assert.equal(translations.en.historyTable.rateDates(["2026-07-11"]), "Rate date: 2026-07-11");
 assert.equal(
   translations.en.historyTable.rateDates(["2026-07-10", "2026-07-11"]),
diff --git a/src/lib/i18n/i18n.ts b/src/lib/i18n/i18n.ts
index 875dd576..eb8cc1c1 100644
--- a/src/lib/i18n/i18n.ts
+++ b/src/lib/i18n/i18n.ts
@@ -19,6 +19,7 @@ const en = {
     saved: "saved",
     missing: "missing",
     enabled: "Enabled",
+    disabled: "Disabled",
     ready: "Ready",
     importLocked: "Import locked",
     runningCount: (count: number) => `${count} running`,
@@ -333,6 +334,7 @@ const en = {
     needsAttention: "Needs attention",
     attentionTasks: "tasks to review",
     task: "Task",
+    historyTaskCount: (count: number) => `${count} ${count === 1 ? "task" : "tasks"}`,
     status: "Status",
     progress: "Progress",
     latestTime: (timezone: string) => `Latest (${timezone})`,
@@ -343,8 +345,34 @@ const en = {
     ran: "Ran",
     notRun: "Not run",
     runHistory: "Run history",
+    credentialStatus: "Credential status",
+    syncAll: "Sync all",
+    syncInProgress: "Sync in progress",
+    startSync: "Start sync",
+    stopAll: "Stop all",
+    startImportHeading: "Start import",
+    runningTaskHeading: (count: number) => `${count} ${count === 1 ? "task is" : "tasks are"} running`,
+    syncDialogTitle: "Run tasks together",
+    syncDialogDescription: (count: number) => `${count} independent ${count === 1 ? "task" : "tasks"} will start at the same time.`,
+    credentialsReady: (ready: number, total: number) => `${ready} / ${total} credentials ready`,
+    confirmStopAll: "Stop all running tasks?",
+    collectStage: "Collect statements",
+    importStage: "Import transactions",
+    syncStage: "Sync data",
+    showAllTasks: (count: number) => `Show all ${count} ${count === 1 ? "task" : "tasks"}`,
+    collapseTasks: "Collapse tasks",
+    expandStage: (stage: string) => `Expand ${stage}`,
+    collapseStage: (stage: string) => `Collapse ${stage}`,
+    inlineLogTitle: (task: string) => `${task} · Live logs`,
     credentialsTitle: "Credentials",
     credentialsDescription: "Saved locally. Switches go to settings.json; secrets go to credentials.json.",
+    credentialSearch: "Search services",
+    historySearch: "Search tasks or commands",
+    historyAll: "All",
+    historyRunning: "Running",
+    historyCompleted: "Completed",
+    historyFailed: "Failed",
+    historyDuration: "Duration",
     discardCredentialChanges: "Discard unsaved credential changes?",
     closeCredentials: "Close credentials",
     closeLogs: "Close logs",
@@ -485,6 +513,7 @@ const zh: typeof en = {
     saved: "已儲存",
     missing: "未設定",
     enabled: "已啟用",
+    disabled: "未啟用",
     ready: "就緒",
     importLocked: "匯入已鎖定",
     runningCount: (count) => `${count} 個執行中`,
@@ -796,6 +825,7 @@ const zh: typeof en = {
     needsAttention: "需處理",
     attentionTasks: "需檢查任務",
     task: "任務",
+    historyTaskCount: (count) => `${count} 個任務`,
     status: "狀態",
     progress: "進度",
     latestTime: (timezone) => `最新（${timezone}）`,
@@ -806,8 +836,34 @@ const zh: typeof en = {
     ran: "已執行",
     notRun: "未執行",
     runHistory: "執行歷史",
+    credentialStatus: "憑證狀態",
+    syncAll: "同步全部",
+    syncInProgress: "同步執行中",
+    startSync: "開始同步",
+    stopAll: "停止全部",
+    startImportHeading: "開始匯入",
+    runningTaskHeading: (count) => `${count} 個任務正在同步執行`,
+    syncDialogTitle: "同步執行",
+    syncDialogDescription: (count) => `將同時啟動 ${count} 個互不依賴的任務。`,
+    credentialsReady: (ready, total) => `${ready} / ${total} 憑證已設定`,
+    confirmStopAll: "要停止所有執行中的任務嗎？",
+    collectStage: "取得對帳單",
+    importStage: "匯入交易資料",
+    syncStage: "同步資料",
+    showAllTasks: (count) => `顯示全部 ${count} 個任務`,
+    collapseTasks: "收合任務",
+    expandStage: (stage) => `展開${stage}`,
+    collapseStage: (stage) => `收合${stage}`,
+    inlineLogTitle: (task) => `${task}・即時日誌`,
     credentialsTitle: "憑證",
     credentialsDescription: "儲存在本機。開關寫入 settings.json；密碼與金鑰寫入 credentials.json。",
+    credentialSearch: "搜尋服務",
+    historySearch: "搜尋任務或指令",
+    historyAll: "全部",
+    historyRunning: "執行中",
+    historyCompleted: "已完成",
+    historyFailed: "失敗",
+    historyDuration: "耗時",
     discardCredentialChanges: "要放棄尚未儲存的憑證變更嗎？",
     closeCredentials: "關閉憑證",
     closeLogs: "關閉日誌",