agentweaver 0.1.19 → 0.1.20

package/dist/interactive/web/static/app.js

@@ -1,9 +1,23 @@
 (function () {
   "use strict";
 
+  var AUTO_FLOW_HEIGHT_DEFAULT = 520;
+  var AUTO_FLOW_HEIGHT_MIN = 120;
+  var AUTO_FLOW_HEIGHT_MAX = 640;
+  var AUTO_FLOW_LOWER_PANELS_MIN = 180;
+  var WORKSPACE_SPLIT_DEFAULT = 36;
+  var WORKSPACE_SPLIT_MIN = 24;
+  var WORKSPACE_SPLIT_MAX = 58;
+  var autoFlowResizeDrag = null;
+  var workspaceResizeDrag = null;
+
   var state = {
     viewModel: null,
     connectionState: "connecting",
+    theme: "light",
+    autoFlowHeight: null,
+    workspaceSplit: WORKSPACE_SPLIT_DEFAULT,
+    logAutoscroll: true,
     formValues: {},
     modalSignature: null,
     artifacts: {
@@ -18,6 +32,26 @@
       previewRequestId: 0,
       viewerModes: {},
     },
+    gitSelectedPaths: [],
+    gitCommitMessage: "",
+    gitDiff: {
+      open: false,
+      selectedPath: null,
+      mode: "head",
+      loading: false,
+      error: null,
+      diff: null,
+      requestId: 0,
+    },
+    scrollSync: {
+      suppress: false,
+      releaseTimer: null,
+      sentOffsets: {
+        progress: null,
+        log: null,
+        help: null,
+      },
+    },
   };
 
   var elements = {
@@ -28,15 +62,45 @@
     run: document.getElementById("run-button"),
     interrupt: document.getElementById("interrupt-button"),
     help: document.getElementById("help-button"),
+    themeToggle: document.getElementById("theme-toggle-button"),
+    themeToggleLabel: document.getElementById("theme-toggle-label"),
     flowsTitle: document.getElementById("flows-title"),
     flows: document.getElementById("flows-list"),
-    description: document.getElementById("description-text"),
+    autoFlowEditor: document.getElementById("auto-flow-editor"),
+    autoFlowResizer: document.getElementById("auto-flow-resizer"),
+    splitPanels: document.getElementById("split-panels"),
+    workspaceResizer: document.getElementById("workspace-resizer"),
     progressTitle: document.getElementById("progress-title"),
+    progressFlowLabel: document.getElementById("progress-flow-label"),
     progress: document.getElementById("progress-text"),
-    summaryTitle: document.getElementById("summary-title"),
-    summary: document.getElementById("summary-text"),
+    gitRefresh: document.getElementById("git-refresh-button"),
+    gitSummary: document.getElementById("git-summary"),
+    gitBranchInput: document.getElementById("git-branch-input"),
+    gitCreateBranch: document.getElementById("git-create-branch-button"),
+    gitCheckoutSelect: document.getElementById("git-checkout-select"),
+    gitCheckout: document.getElementById("git-checkout-button"),
+    gitFetch: document.getElementById("git-fetch-button"),
+    gitPull: document.getElementById("git-pull-button"),
+    gitFiles: document.getElementById("git-files"),
+    gitCommitMessage: document.getElementById("git-commit-message"),
+    gitStage: document.getElementById("git-stage-button"),
+    gitUnstage: document.getElementById("git-unstage-button"),
+    gitCommit: document.getElementById("git-commit-button"),
+    gitPush: document.getElementById("git-push-button"),
+    gitFeedback: document.getElementById("git-feedback"),
+    gitDiffDrawer: document.getElementById("git-diff-drawer"),
+    gitDiffClose: document.getElementById("git-diff-close-button"),
+    gitDiffTitle: document.getElementById("git-diff-title"),
+    gitDiffMeta: document.getElementById("git-diff-meta"),
+    gitDiffStatus: document.getElementById("git-diff-status"),
+    gitDiffFileList: document.getElementById("git-diff-file-list"),
+    gitDiffSelectedTitle: document.getElementById("git-diff-selected-title"),
+    gitDiffSelectedMeta: document.getElementById("git-diff-selected-meta"),
+    gitDiffModeControls: document.getElementById("git-diff-mode-controls"),
+    gitDiffBody: document.getElementById("git-diff-body"),
     logTitle: document.getElementById("log-title"),
     log: document.getElementById("log-text"),
+    logAutoscroll: document.getElementById("log-autoscroll-toggle"),
     clearLog: document.getElementById("clear-log-button"),
     artifactOpen: document.getElementById("artifact-open-button"),
     artifactDrawer: document.getElementById("artifact-drawer"),
@@ -67,10 +131,411 @@
     return fallback;
   }
 
+  function normalizeTheme(value) {
+    return value === "dark" ? "dark" : "light";
+  }
+
+  function isTheme(value) {
+    return value === "dark" || value === "light";
+  }
+
+  function persistThemePreference(theme) {
+    api.updateSettings({ theme: normalizeTheme(theme) });
+  }
+
+  function applyTheme(theme) {
+    var nextTheme = normalizeTheme(theme);
+    var root = document.documentElement || document.body;
+    state.theme = nextTheme;
+    if (root) {
+      root.setAttribute("data-theme", nextTheme);
+    }
+    if (elements.themeToggle) {
+      var dark = nextTheme === "dark";
+      elements.themeToggle.setAttribute("aria-pressed", dark ? "true" : "false");
+      elements.themeToggle.setAttribute("aria-label", dark ? "Switch to light theme" : "Switch to dark theme");
+      elements.themeToggle.title = dark ? "Switch to light theme" : "Switch to dark theme";
+    }
+    if (elements.themeToggleLabel) {
+      elements.themeToggleLabel.textContent = nextTheme === "dark" ? "Dark" : "Light";
+    }
+  }
+
+  function toggleTheme() {
+    var nextTheme = state.theme === "dark" ? "light" : "dark";
+    applyTheme(nextTheme);
+    persistThemePreference(nextTheme);
+  }
+
+  function persistAutoFlowHeight(height) {
+    var clamped = clampAutoFlowHeight(height);
+    api.updateSettings({ autoFlowHeight: clamped });
+  }
+
+  function autoFlowHeightBounds() {
+    var max = AUTO_FLOW_HEIGHT_MAX;
+    var detailsPane = elements && elements.autoFlowEditor ? elements.autoFlowEditor.parentNode : null;
+    if (detailsPane) {
+      var rectHeight = typeof detailsPane.getBoundingClientRect === "function"
+        ? detailsPane.getBoundingClientRect().height
+        : 0;
+      if (Number.isFinite(rectHeight) && rectHeight > AUTO_FLOW_HEIGHT_MIN + AUTO_FLOW_LOWER_PANELS_MIN) {
+        max = Math.min(max, rectHeight - AUTO_FLOW_LOWER_PANELS_MIN);
+      }
+    }
+    return {
+      min: AUTO_FLOW_HEIGHT_MIN,
+      max: Math.max(AUTO_FLOW_HEIGHT_MIN, max),
+    };
+  }
+
+  function clampAutoFlowHeight(value) {
+    var numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+      return null;
+    }
+    var bounds = autoFlowHeightBounds();
+    return Math.min(bounds.max, Math.max(bounds.min, Math.round(numeric)));
+  }
+
+  function getAutoFlowEditorHeight() {
+    if (!elements.autoFlowEditor) {
+      return state.autoFlowHeight || AUTO_FLOW_HEIGHT_DEFAULT;
+    }
+    if (typeof elements.autoFlowEditor.getBoundingClientRect === "function") {
+      var rect = elements.autoFlowEditor.getBoundingClientRect();
+      if (rect && Number.isFinite(rect.height) && rect.height > 0) {
+        return rect.height;
+      }
+    }
+    var inlineHeight = parseInt(elements.autoFlowEditor.style.height || "", 10);
+    return Number.isFinite(inlineHeight) ? inlineHeight : (state.autoFlowHeight || AUTO_FLOW_HEIGHT_DEFAULT);
+  }
+
+  function applyAutoFlowHeight(height) {
+    if (!elements.autoFlowEditor) {
+      return;
+    }
+    var clamped = clampAutoFlowHeight(height);
+    if (clamped === null) {
+      state.autoFlowHeight = null;
+      elements.autoFlowEditor.style.height = "";
+      updateAutoFlowResizerState(null);
+      return;
+    }
+    state.autoFlowHeight = clamped;
+    elements.autoFlowEditor.style.height = clamped + "px";
+    updateAutoFlowResizerState(clamped);
+  }
+
+  function updateAutoFlowResizerState(currentHeight) {
+    if (!elements.autoFlowResizer) {
+      return;
+    }
+    var bounds = autoFlowHeightBounds();
+    elements.autoFlowResizer.setAttribute("aria-valuemin", String(bounds.min));
+    elements.autoFlowResizer.setAttribute("aria-valuemax", String(bounds.max));
+    elements.autoFlowResizer.setAttribute("aria-valuenow", String(Math.round(currentHeight || getAutoFlowEditorHeight())));
+  }
+
+  function beginAutoFlowResize(event) {
+    if (!elements.autoFlowEditor || elements.autoFlowEditor.hidden) {
+      return;
+    }
+    if (event.button !== undefined && event.button !== 0) {
+      return;
+    }
+    if (event.preventDefault) {
+      event.preventDefault();
+    }
+    autoFlowResizeDrag = {
+      startY: Number.isFinite(Number(event.clientY)) ? Number(event.clientY) : 0,
+      startHeight: getAutoFlowEditorHeight(),
+    };
+    document.body.classList.add("auto-flow-resizing");
+    elements.autoFlowResizer.classList.add("resizing");
+    if (event.currentTarget && typeof event.currentTarget.setPointerCapture === "function" && event.pointerId !== undefined) {
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+        // Pointer capture is a progressive enhancement for smoother dragging.
+      }
+    }
+    window.addEventListener("pointermove", updateAutoFlowResize);
+    window.addEventListener("pointerup", finishAutoFlowResize);
+    window.addEventListener("pointercancel", finishAutoFlowResize);
+  }
+
+  function updateAutoFlowResize(event) {
+    if (!autoFlowResizeDrag) {
+      return;
+    }
+    if (event.preventDefault) {
+      event.preventDefault();
+    }
+    var clientY = Number(event.clientY);
+    if (!Number.isFinite(clientY)) {
+      clientY = autoFlowResizeDrag.startY;
+    }
+    applyAutoFlowHeight(autoFlowResizeDrag.startHeight + clientY - autoFlowResizeDrag.startY);
+  }
+
+  function finishAutoFlowResize() {
+    if (!autoFlowResizeDrag) {
+      return;
+    }
+    autoFlowResizeDrag = null;
+    document.body.classList.remove("auto-flow-resizing");
+    elements.autoFlowResizer.classList.remove("resizing");
+    persistAutoFlowHeight(state.autoFlowHeight);
+    window.removeEventListener("pointermove", updateAutoFlowResize);
+    window.removeEventListener("pointerup", finishAutoFlowResize);
+    window.removeEventListener("pointercancel", finishAutoFlowResize);
+  }
+
+  function resetAutoFlowHeight() {
+    applyAutoFlowHeight(null);
+    persistAutoFlowHeight(null);
+  }
+
+  function handleAutoFlowResizerKeydown(event) {
+    var step = event.shiftKey ? 48 : 20;
+    var nextHeight = getAutoFlowEditorHeight();
+    if (event.key === "ArrowUp") {
+      nextHeight -= step;
+    } else if (event.key === "ArrowDown") {
+      nextHeight += step;
+    } else if (event.key === "Home") {
+      nextHeight = AUTO_FLOW_HEIGHT_MIN;
+    } else if (event.key === "End") {
+      nextHeight = AUTO_FLOW_HEIGHT_MAX;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    applyAutoFlowHeight(nextHeight);
+    persistAutoFlowHeight(state.autoFlowHeight);
+  }
+
+  function persistWorkspaceSplit(split) {
+    var nextSplit = Number.isFinite(split) ? clampWorkspaceSplit(split) : WORKSPACE_SPLIT_DEFAULT;
+    api.updateSettings({ workspaceSplit: nextSplit });
+  }
+
+  function clampWorkspaceSplit(value) {
+    var numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+      return WORKSPACE_SPLIT_DEFAULT;
+    }
+    return Math.min(WORKSPACE_SPLIT_MAX, Math.max(WORKSPACE_SPLIT_MIN, Math.round(numeric)));
+  }
+
+  function applyWorkspaceSplit(split) {
+    if (!elements.splitPanels) {
+      return;
+    }
+    var clamped = clampWorkspaceSplit(split);
+    state.workspaceSplit = clamped;
+    if (elements.splitPanels.style && typeof elements.splitPanels.style.setProperty === "function") {
+      elements.splitPanels.style.setProperty("--aw-work-panel-width", clamped + "%");
+    } else if (elements.splitPanels.style) {
+      elements.splitPanels.style["--aw-work-panel-width"] = clamped + "%";
+    }
+    updateWorkspaceResizerState(clamped);
+  }
+
+  function workspacePanelWidth() {
+    if (!elements.splitPanels || typeof elements.splitPanels.getBoundingClientRect !== "function") {
+      return 0;
+    }
+    var rect = elements.splitPanels.getBoundingClientRect();
+    return rect && Number.isFinite(rect.width) ? rect.width : 0;
+  }
+
+  function updateWorkspaceResizerState(split) {
+    if (!elements.workspaceResizer) {
+      return;
+    }
+    elements.workspaceResizer.setAttribute("aria-valuemin", String(WORKSPACE_SPLIT_MIN));
+    elements.workspaceResizer.setAttribute("aria-valuemax", String(WORKSPACE_SPLIT_MAX));
+    elements.workspaceResizer.setAttribute("aria-valuenow", String(clampWorkspaceSplit(split)));
+  }
+
+  function beginWorkspaceResize(event) {
+    if (event.button !== undefined && event.button !== 0) {
+      return;
+    }
+    var width = workspacePanelWidth();
+    if (width <= 0) {
+      return;
+    }
+    if (event.preventDefault) {
+      event.preventDefault();
+    }
+    workspaceResizeDrag = {
+      startX: Number.isFinite(Number(event.clientX)) ? Number(event.clientX) : 0,
+      startSplit: state.workspaceSplit,
+      width: width,
+    };
+    document.body.classList.add("workspace-split-resizing");
+    elements.workspaceResizer.classList.add("resizing");
+    if (event.currentTarget && typeof event.currentTarget.setPointerCapture === "function" && event.pointerId !== undefined) {
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch {
+        // Pointer capture is a progressive enhancement for smoother dragging.
+      }
+    }
+    window.addEventListener("pointermove", updateWorkspaceResize);
+    window.addEventListener("pointerup", finishWorkspaceResize);
+    window.addEventListener("pointercancel", finishWorkspaceResize);
+  }
+
+  function updateWorkspaceResize(event) {
+    if (!workspaceResizeDrag) {
+      return;
+    }
+    if (event.preventDefault) {
+      event.preventDefault();
+    }
+    var clientX = Number(event.clientX);
+    if (!Number.isFinite(clientX)) {
+      clientX = workspaceResizeDrag.startX;
+    }
+    var nextSplit = workspaceResizeDrag.startSplit + ((clientX - workspaceResizeDrag.startX) / workspaceResizeDrag.width) * 100;
+    applyWorkspaceSplit(nextSplit);
+  }
+
+  function finishWorkspaceResize() {
+    if (!workspaceResizeDrag) {
+      return;
+    }
+    workspaceResizeDrag = null;
+    document.body.classList.remove("workspace-split-resizing");
+    elements.workspaceResizer.classList.remove("resizing");
+    persistWorkspaceSplit(state.workspaceSplit);
+    window.removeEventListener("pointermove", updateWorkspaceResize);
+    window.removeEventListener("pointerup", finishWorkspaceResize);
+    window.removeEventListener("pointercancel", finishWorkspaceResize);
+  }
+
+  function resetWorkspaceSplit() {
+    applyWorkspaceSplit(WORKSPACE_SPLIT_DEFAULT);
+    persistWorkspaceSplit(null);
+  }
+
+  function handleWorkspaceResizerKeydown(event) {
+    var step = event.shiftKey ? 6 : 2;
+    var nextSplit = state.workspaceSplit;
+    if (event.key === "ArrowLeft") {
+      nextSplit -= step;
+    } else if (event.key === "ArrowRight") {
+      nextSplit += step;
+    } else if (event.key === "Home") {
+      nextSplit = WORKSPACE_SPLIT_MIN;
+    } else if (event.key === "End") {
+      nextSplit = WORKSPACE_SPLIT_MAX;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    applyWorkspaceSplit(nextSplit);
+    persistWorkspaceSplit(state.workspaceSplit);
+  }
+
+  function persistLogAutoscroll(enabled) {
+    api.updateSettings({ logAutoscroll: Boolean(enabled) });
+  }
+
+  function applyLogAutoscroll(enabled) {
+    state.logAutoscroll = Boolean(enabled);
+    if (elements.logAutoscroll) {
+      elements.logAutoscroll.checked = state.logAutoscroll;
+    }
+    if (state.logAutoscroll) {
+      scrollLogToBottom();
+    }
+  }
+
+  function applyWebUiSettings(settings) {
+    if (!settings || typeof settings !== "object") {
+      return;
+    }
+    if (isTheme(settings.theme)) {
+      applyTheme(settings.theme);
+    }
+    if ("autoFlowHeight" in settings) {
+      applyAutoFlowHeight(settings.autoFlowHeight);
+    }
+    if (Number.isFinite(Number(settings.workspaceSplit))) {
+      applyWorkspaceSplit(settings.workspaceSplit);
+    }
+    if (typeof settings.logAutoscroll === "boolean") {
+      applyLogAutoscroll(settings.logAutoscroll);
+    }
+  }
+
+  function scrollLogToBottom() {
+    if (!elements.log) {
+      return;
+    }
+    elements.log.scrollTop = elements.log.scrollHeight;
+    rememberScrollOffset("log", elements.log.scrollTop);
+  }
+
   function actionId() {
     return "web-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
   }
 
+  function controlId(prefix) {
+    var parts = Array.prototype.slice.call(arguments, 1).map(function (part) {
+      return String(part || "")
+        .trim()
+        .replace(/[^A-Za-z0-9_-]+/g, "-")
+        .replace(/^-+|-+$/g, "") || "value";
+    });
+    return [prefix].concat(parts).join("-");
+  }
+
+  function roundedScrollTop(element) {
+    return Math.round(Number(element.scrollTop) || 0);
+  }
+
+  function rememberScrollOffset(pane, offset) {
+    if (state.scrollSync.sentOffsets[pane] !== undefined) {
+      state.scrollSync.sentOffsets[pane] = Math.round(Number(offset) || 0);
+    }
+  }
+
+  function rememberCurrentScrollOffsets() {
+    rememberScrollOffset("progress", elements.progress ? elements.progress.scrollTop : 0);
+    rememberScrollOffset("log", elements.log ? elements.log.scrollTop : 0);
+    rememberScrollOffset("help", elements.helpText ? elements.helpText.scrollTop : 0);
+  }
+
+  function releaseScrollSuppressionSoon() {
+    if (state.scrollSync.releaseTimer) {
+      clearTimeout(state.scrollSync.releaseTimer);
+    }
+    state.scrollSync.releaseTimer = setTimeout(function () {
+      state.scrollSync.suppress = false;
+      state.scrollSync.releaseTimer = null;
+      rememberCurrentScrollOffsets();
+    }, 0);
+  }
+
+  function sendScrollPane(pane, element) {
+    if (state.scrollSync.suppress) {
+      return;
+    }
+    var offset = roundedScrollTop(element);
+    if (state.scrollSync.sentOffsets[pane] === offset) {
+      return;
+    }
+    rememberScrollOffset(pane, offset);
+    api.scrollPane(pane, offset);
+  }
+
   function selectedFlow() {
     var vm = state.viewModel;
     if (!vm || !Array.isArray(vm.flowItems)) {
@@ -172,6 +637,60 @@
     scrollPane: function (pane, offset) {
       api.send({ type: "scroll", pane: pane, offset: offset });
     },
+    refreshGit: function () {
+      api.send({ type: "git.refresh" });
+    },
+    createGitBranch: function () {
+      api.send({ type: "git.createBranch", branchName: elements.gitBranchInput.value });
+    },
+    checkoutGitBranch: function () {
+      api.send({ type: "git.checkout", branchName: elements.gitCheckoutSelect.value });
+    },
+    fetchGit: function () {
+      api.send({ type: "git.fetch" });
+    },
+    pullGit: function () {
+      api.send({ type: "git.pullFfOnly" });
+    },
+    stageGit: function () {
+      api.send({ type: "git.stage", paths: selectedGitPaths() });
+    },
+    unstageGit: function () {
+      api.send({ type: "git.unstage", paths: selectedGitPaths() });
+    },
+    commitGit: function () {
+      api.send({ type: "git.commit", paths: selectedGitPaths(), message: elements.gitCommitMessage.value });
+    },
+    pushGit: function () {
+      api.send({ type: "git.push" });
+    },
+    updateGitCommitMessage: function () {
+      api.send({ type: "git.updateCommitMessage", message: elements.gitCommitMessage.value });
+    },
+    updateSettings: function (settings) {
+      api.send({ type: "settings.update", settings: settings });
+    },
+    selectAutoFlowPreset: function (preset) {
+      api.send({ type: "autoFlow.selectPreset", preset: preset });
+    },
+    saveAutoFlow: function () {
+      api.send({ type: "autoFlow.save" });
+    },
+    resetAutoFlow: function () {
+      api.send({ type: "autoFlow.reset" });
+    },
+    toggleAutoFlowBlock: function (slotId, blockId, enabled) {
+      api.send({ type: "autoFlow.toggleBlock", slotId: slotId, blockId: blockId, enabled: enabled });
+    },
+    updateAutoFlowParam: function (slotId, blockId, paramName, value) {
+      api.send({ type: "autoFlow.updateParam", slotId: slotId, blockId: blockId, paramName: paramName, value: value });
+    },
+    insertAutoFlowBlock: function (slotId, blockId) {
+      api.send({ type: "autoFlow.insertBlock", slotId: slotId, blockId: blockId });
+    },
+    removeAutoFlowBlock: function (slotId, blockId) {
+      api.send({ type: "autoFlow.removeBlock", slotId: slotId, blockId: blockId });
+    },
   };
 
   function setConnection(nextState) {
@@ -190,11 +709,18 @@
     }
 
     if (message.type === "snapshot") {
+      applyWebUiSettings(message.settings);
       var uiState = captureUiState();
       state.viewModel = message.viewModel || {};
       state.formValues = state.viewModel.form ? Object.assign({}, state.viewModel.form.values || {}) : {};
+      state.gitSelectedPaths = state.viewModel.gitWorkspace && Array.isArray(state.viewModel.gitWorkspace.selectedPaths)
+        ? state.viewModel.gitWorkspace.selectedPaths.slice()
+        : [];
+      state.scrollSync.suppress = true;
       render();
       restoreUiState(uiState);
+      rememberCurrentScrollOffsets();
+      releaseScrollSuppressionSoon();
       return;
     }
     if (message.type === "log.append") {
@@ -215,8 +741,8 @@
     if (!lines) return;
     var wasPinned = elements.log.scrollTop + elements.log.clientHeight >= elements.log.scrollHeight - 8;
     elements.log.textContent += (elements.log.textContent ? "\n" : "") + lines;
-    if (wasPinned) {
-      elements.log.scrollTop = elements.log.scrollHeight;
+    if (state.logAutoscroll || wasPinned) {
+      scrollLogToBottom();
     }
   }
 
@@ -226,30 +752,967 @@
     elements.header.textContent = text(vm.header, "Local operator console");
     elements.status.textContent = text(vm.statusText, "Idle");
     elements.flowsTitle.textContent = text(vm.flowListTitle, "Flows");
-    elements.description.textContent = text(vm.descriptionText, "No flow selected.");
+    renderAutoFlowEditor(vm);
     elements.progressTitle.textContent = text(vm.progressTitle, "Progress");
-    setTextPreservingScroll(elements.progress, text(vm.progressText, "No progress yet."));
-    elements.summaryTitle.textContent = text(vm.summaryTitle, "Task Summary");
-    setTextPreservingScroll(elements.summary, vm.summaryVisible === false ? "Summary is hidden." : text(vm.summaryText, "No task summary yet."));
+    renderProgress(vm);
     elements.logTitle.textContent = text(vm.logTitle, "Activity");
-    setTextPreservingScroll(elements.log, text(vm.logText, ""));
+    setTextPreservingScroll(elements.log, text(vm.logText, ""), state.logAutoscroll);
     elements.helpText.textContent = text(vm.helpText, "No help is available.");
     elements.helpPanel.hidden = !vm.helpVisible;
     elements.help.setAttribute("aria-pressed", vm.helpVisible ? "true" : "false");
 
     renderFlows(vm);
+    renderGitWorkspace(vm);
+    renderGitDiffDrawer(vm);
     renderModal(vm);
     renderArtifactExplorer(vm);
   }
 
-  function setTextPreservingScroll(element, value) {
+  function gitWorkspace(vm) {
+    var workspace = vm && vm.gitWorkspace;
+    if (!workspace || typeof workspace !== "object") {
+      return {
+        available: false,
+        changedFiles: [],
+        branches: [],
+        remotes: [],
+        selectedPaths: [],
+        commitMessage: "",
+        operation: { status: "idle" },
+      };
+    }
+    return workspace;
+  }
+
+  function renderGitWorkspace(vm) {
+    var git = gitWorkspace(vm);
+    var blocked = hasBlockingInput(vm);
+    var changedFiles = Array.isArray(git.changedFiles) ? git.changedFiles : [];
+    var branches = Array.isArray(git.branches) ? git.branches : [];
+    var operation = git.operation || { status: "idle" };
+    var isRunning = operation.status === "running";
+
+    if (typeof git.commitMessage === "string" && document.activeElement !== elements.gitCommitMessage) {
+      state.gitCommitMessage = git.commitMessage;
+      elements.gitCommitMessage.value = git.commitMessage;
+    }
+
+    elements.gitSummary.innerHTML = "";
+    var summary = document.createElement("span");
+    if (!git.available) {
+      summary.textContent = git.error || "Git workspace is unavailable.";
+    } else {
+      summary.append(
+        document.createTextNode("Branch "),
+        strong(git.detachedHead ? "detached HEAD" : (git.branch || "-")),
+        document.createTextNode(git.clean ? " | clean" : " | dirty"),
+        document.createTextNode(" | upstream " + (git.upstream || "-")),
+        document.createTextNode(" | ahead " + (git.ahead || 0) + " behind " + (git.behind || 0)),
+      );
+      if (git.lastCommit && git.lastCommit.shortHash) {
+        summary.append(document.createTextNode(" | last " + git.lastCommit.shortHash + " " + (git.lastCommit.subject || "")));
+      }
+      if (git.refreshedAt) {
+        summary.append(document.createTextNode(" | refreshed " + git.refreshedAt));
+      }
+    }
+    elements.gitSummary.append(summary);
+
+    renderGitBranches(branches, git.branch);
+    renderGitFiles(changedFiles);
+
+    elements.gitCreateBranch.disabled = blocked || isRunning || !git.available;
+    elements.gitCheckout.disabled = blocked || isRunning || !git.available || !elements.gitCheckoutSelect.value;
+    elements.gitFetch.disabled = blocked || isRunning || !git.available;
+    elements.gitPull.disabled = blocked || isRunning || !git.available;
+    elements.gitStage.disabled = blocked || isRunning || !git.available || selectedStageableGitPaths(git).length === 0;
+    elements.gitUnstage.disabled = blocked || isRunning || !git.available || selectedUnstageableGitPaths(git).length === 0;
+    elements.gitCommit.disabled = blocked || isRunning || !git.available || elements.gitCommitMessage.value.trim().length === 0;
+    elements.gitPush.disabled = blocked || isRunning || !git.available || !git.canPush;
+    elements.gitPush.title = git.canPush ? "Push current branch" : (git.pushDisabledReason || "Push is not available.");
+
+    elements.gitFeedback.className = "git-feedback";
+    if (operation.status === "error") {
+      elements.gitFeedback.classList.add("error");
+    } else if (operation.status === "success") {
+      elements.gitFeedback.classList.add("success");
+    }
+    var feedback = operation.message || git.pushDisabledReason || "";
+    var warnings = Array.isArray(git.warnings) && git.warnings.length > 0 ? " " + git.warnings.join(" ") : "";
+    elements.gitFeedback.textContent = feedback + warnings;
+  }
+
+  function strong(value) {
+    var element = document.createElement("strong");
+    element.textContent = value;
+    return element;
+  }
+
+  function renderAutoFlowEditor(vm) {
+    var model = vm && vm.autoFlow;
+    if (!elements.autoFlowEditor) return;
+    elements.autoFlowEditor.innerHTML = "";
+    if (!model || !Array.isArray(model.slots)) {
+      elements.autoFlowEditor.hidden = true;
+      if (elements.autoFlowResizer) {
+        elements.autoFlowResizer.hidden = true;
+      }
+      return;
+    }
+    elements.autoFlowEditor.hidden = false;
+    if (elements.autoFlowResizer) {
+      elements.autoFlowResizer.hidden = false;
+    }
+    applyAutoFlowHeight(state.autoFlowHeight);
+    var blocked = hasBlockingInput(vm);
+
+    var toolbar = document.createElement("div");
+    toolbar.className = "auto-flow-toolbar";
+    var simple = document.createElement("button");
+    simple.type = "button";
+    simple.textContent = "Simple";
+    simple.disabled = blocked;
+    simple.className = model.basePreset === "simple" ? "primary" : "";
+    simple.addEventListener("click", function () {
+      api.selectAutoFlowPreset("simple");
+    });
+    var standard = document.createElement("button");
+    standard.type = "button";
+    standard.textContent = "Standard";
+    standard.disabled = blocked;
+    standard.className = model.basePreset === "standard" ? "primary" : "";
+    standard.addEventListener("click", function () {
+      api.selectAutoFlowPreset("standard");
+    });
+    var save = document.createElement("button");
+    save.type = "button";
+    save.textContent = "Save";
+    save.disabled = blocked || !model.status || !model.status.canSave;
+    save.addEventListener("click", api.saveAutoFlow);
+    var reset = document.createElement("button");
+    reset.type = "button";
+    reset.textContent = "Reset";
+    reset.disabled = blocked || !model.status || !model.status.canReset;
+    reset.title = "Discard unsaved auto-flow edits";
+    reset.addEventListener("click", api.resetAutoFlow);
+    var status = document.createElement("span");
+    status.className = "auto-flow-status " + (model.status && model.status.valid ? "valid" : "invalid");
+    status.textContent = (model.status && model.status.valid ? "valid" : "invalid") + " | " + text(model.status && model.status.sourceLabel, model.configName || "auto-flow");
+    toolbar.append(simple, standard, save, reset, status);
+    elements.autoFlowEditor.append(toolbar);
+
+    if (model.status && model.status.lastMessage) {
+      var message = document.createElement("div");
+      message.className = "auto-flow-message";
+      message.textContent = model.status.lastMessage;
+      elements.autoFlowEditor.append(message);
+    }
+
+    if (Array.isArray(model.diagnostics) && model.diagnostics.length > 0) {
+      var diagnostics = document.createElement("div");
+      diagnostics.className = "auto-flow-diagnostics";
+      model.diagnostics.forEach(function (diagnostic) {
+        var item = document.createElement("div");
+        item.textContent = diagnostic.message || "Invalid auto-flow configuration.";
+        diagnostics.append(item);
+      });
+      elements.autoFlowEditor.append(diagnostics);
+    }
+
+    var slots = document.createElement("div");
+    slots.className = "auto-flow-slots";
+    model.slots.forEach(function (slot) {
+      var slotRow = document.createElement("section");
+      slotRow.className = "auto-flow-slot status-" + slot.status;
+      slotRow.dataset.slotId = slot.slotId;
+      var title = document.createElement("div");
+      title.className = "auto-flow-slot-title";
+      title.append(strong(text(slot.title, slot.slotId)), document.createTextNode(" "), statusPill(slot.status));
+      var reason = document.createElement("div");
+      reason.className = "auto-flow-reason";
+      reason.textContent = text(slot.reason, "");
+      slotRow.append(title, reason);
+
+      var blockList = document.createElement("div");
+      blockList.className = "auto-flow-blocks";
+      if (!Array.isArray(slot.blocks) || slot.blocks.length === 0) {
+        var empty = document.createElement("div");
+        empty.className = "auto-flow-empty";
+        empty.textContent = "Empty slot.";
+        blockList.append(empty);
+      } else {
+        slot.blocks.forEach(function (block) {
+          blockList.append(renderAutoFlowBlock(block, blocked));
+        });
+      }
+      slotRow.append(blockList);
+      var insert = renderAutoFlowInsert(slot, model.availableBlocks || [], blocked);
+      if (insert) {
+        slotRow.append(insert);
+      }
+      slots.append(slotRow);
+    });
+    elements.autoFlowEditor.append(slots);
+    updateAutoFlowResizerState(state.autoFlowHeight);
+  }
+
+  function statusPill(status) {
+    var pill = document.createElement("span");
+    pill.className = "auto-flow-pill status-" + status;
+    pill.textContent = status || "pending";
+    return pill;
+  }
+
+  function renderAutoFlowBlock(block, blocked) {
+    var row = document.createElement("div");
+    row.className = "auto-flow-block status-" + block.status;
+    row.dataset.blockId = block.blockId;
+    row.dataset.slotId = block.slotId;
+    var enabled = document.createElement("input");
+    enabled.type = "checkbox";
+    enabled.id = controlId("auto-flow-enabled", block.slotId, block.blockId);
+    enabled.name = enabled.id;
+    enabled.checked = block.enabled !== false;
+    enabled.disabled = blocked || block.locked || !(block.actions && (block.actions.canEnable || block.actions.canDisable));
+    enabled.title = block.locked ? "Locked core block" : "Enable or disable block";
+    enabled.addEventListener("change", function () {
+      api.toggleAutoFlowBlock(block.slotId, block.blockId, enabled.checked);
+    });
+    var main = document.createElement("div");
+    main.className = "auto-flow-block-main";
+    var label = document.createElement("div");
+    label.className = "auto-flow-block-label";
+    label.append(strong(text(block.title, block.blockId)), document.createTextNode(" "), statusPill(block.status));
+    if (block.locked) {
+      var locked = document.createElement("span");
+      locked.className = "auto-flow-locked";
+      locked.textContent = "locked";
+      label.append(document.createTextNode(" "), locked);
+    }
+    var reason = document.createElement("div");
+    reason.className = "auto-flow-reason";
+    reason.textContent = text(block.reason, "");
+    main.append(label, reason);
+    if (Array.isArray(block.params) && block.params.length > 0) {
+      var params = document.createElement("div");
+      params.className = "auto-flow-params";
+      block.params.forEach(function (param) {
+        var field = document.createElement("label");
+        field.textContent = param.label + " ";
+        var input = document.createElement("input");
+        input.type = "number";
+        input.id = controlId("auto-flow-param", block.slotId, block.blockId, param.name);
+        input.name = input.id;
+        input.min = String(param.min);
+        input.max = String(param.max);
+        input.step = "1";
+        input.value = param.value === null || param.value === undefined ? "" : String(param.value);
+        input.disabled = blocked || !(block.actions && block.actions.canEditParams);
+        input.addEventListener("change", function () {
+          var next = Number(input.value);
+          if (Number.isInteger(next)) {
+            api.updateAutoFlowParam(block.slotId, block.blockId, param.name, next);
+          }
+        });
+        field.append(input);
+        params.append(field);
+      });
+      main.append(params);
+    }
+    row.append(enabled, main);
+    if (block.actions && block.actions.canRemove) {
+      var remove = document.createElement("button");
+      remove.type = "button";
+      remove.className = "danger";
+      remove.textContent = "Delete";
+      remove.disabled = blocked;
+      remove.title = "Remove block from this slot";
+      remove.addEventListener("click", function (event) {
+        if (event && typeof event.preventDefault === "function") {
+          event.preventDefault();
+        }
+        api.removeAutoFlowBlock(block.slotId, block.blockId);
+      });
+      row.append(remove);
+    }
+    return row;
+  }
+
+  function renderAutoFlowInsert(slot, availableBlocks, blocked) {
+    var configured = new Set((Array.isArray(slot.blocks) ? slot.blocks : []).map(function (block) {
+      return block.blockId;
+    }));
+    var candidates = availableBlocks.filter(function (block) {
+      return Array.isArray(block.allowedSlots)
+        && block.allowedSlots.indexOf(slot.slotId) !== -1
+        && !configured.has(block.blockId);
+    });
+    if (candidates.length === 0) {
+      return null;
+    }
+    var container = document.createElement("div");
+    container.className = "auto-flow-insert";
+    var select = document.createElement("select");
+    select.id = controlId("auto-flow-insert", slot.slotId);
+    select.name = select.id;
+    select.value = "";
+    var placeholder = document.createElement("option");
+    placeholder.value = "";
+    placeholder.textContent = "Add block...";
+    placeholder.disabled = true;
+    placeholder.selected = true;
+    select.append(placeholder);
+    candidates.forEach(function (block) {
+      var option = document.createElement("option");
+      option.value = block.blockId;
+      option.textContent = block.title || block.blockId;
+      select.append(option);
+    });
+    var button = document.createElement("button");
+    button.type = "button";
+    button.textContent = "Insert";
+    button.disabled = blocked || !select.value;
+    select.addEventListener("change", function () {
+      button.disabled = blocked || !select.value;
+    });
+    button.addEventListener("click", function (event) {
+      if (event && typeof event.preventDefault === "function") {
+        event.preventDefault();
+      }
+      if (!select.value) {
+        return;
+      }
+      api.insertAutoFlowBlock(slot.slotId, select.value);
+    });
+    container.append(select, button);
+    return container;
+  }
+
+  function renderGitBranches(branches, currentBranch) {
+    elements.gitCheckoutSelect.innerHTML = "";
+    branches.forEach(function (branch) {
+      var option = document.createElement("option");
+      option.value = branch.name;
+      option.textContent = branch.current ? branch.name + " (current)" : branch.name;
+      option.selected = branch.name === currentBranch;
+      elements.gitCheckoutSelect.append(option);
+    });
+  }
+
+  function renderGitFiles(files) {
+    elements.gitFiles.innerHTML = "";
+    if (!Array.isArray(files) || files.length === 0) {
+      var empty = document.createElement("div");
+      empty.className = "git-empty";
+      empty.textContent = "No changed files.";
+      elements.gitFiles.append(empty);
+      return;
+    }
+
+    var tree = buildGitFileTree(files);
+    elements.gitFiles.setAttribute("role", "tree");
+    tree.forEach(function (root) {
+      elements.gitFiles.append(renderGitTreeNode(root, 0));
+    });
+  }
+
+  function buildGitFileTree(files) {
+    var roots = [
+      createGitTreeNode("group", "modified", "modified", "modified"),
+      createGitTreeNode("group", "untracked", "untracked", "untracked"),
+    ];
+    var rootByKey = { modified: roots[0], untracked: roots[1] };
+    files.forEach(function (file) {
+      var filePath = file.path || file.file || "";
+      if (!filePath) return;
+      var rootKey = gitRootKey(file);
+      var parent = rootByKey[rootKey] || rootByKey.modified;
+      var parts = filePath.split("/").filter(Boolean);
+      var leafName = parts.pop() || filePath;
+      parts.forEach(function (part) {
+        parent = findOrCreateGitDirectory(parent, part);
+      });
+      var leaf = createGitTreeNode("file", leafName, filePath, rootKey);
+      leaf.file = file;
+      leaf.path = filePath;
+      parent.children.push(leaf);
+    });
+    roots.forEach(sortGitTreeNode);
+    return roots;
+  }
+
+  function gitRootKey(file) {
+    return file && (file.type === "untracked" || file.xy === "??") ? "untracked" : "modified";
+  }
+
+  function createGitTreeNode(kind, name, label, rootKey) {
+    return {
+      kind: kind,
+      name: name,
+      label: label,
+      rootKey: rootKey,
+      children: [],
+      file: null,
+      path: null,
+    };
+  }
+
+  function findOrCreateGitDirectory(parent, name) {
+    var existing = parent.children.find(function (child) {
+      return child.kind === "dir" && child.name === name;
+    });
+    if (existing) return existing;
+    var directory = createGitTreeNode("dir", name, name, parent.rootKey);
+    parent.children.push(directory);
+    return directory;
+  }
+
+  function sortGitTreeNode(node) {
+    node.children.sort(function (left, right) {
+      if (left.kind === "dir" && right.kind !== "dir") return -1;
+      if (left.kind !== "dir" && right.kind === "dir") return 1;
+      return left.name.localeCompare(right.name);
+    });
+    node.children.forEach(sortGitTreeNode);
+  }
+
+  function renderGitTreeNode(node, depth) {
+    var paths = gitTreePaths(node);
+    var selectedCount = paths.filter(function (filePath) {
+      return state.gitSelectedPaths.indexOf(filePath) !== -1;
+    }).length;
+    var checked = paths.length > 0 && selectedCount === paths.length;
+    var indeterminate = selectedCount > 0 && selectedCount < paths.length;
+    var row = document.createElement("label");
+    row.className = node.kind === "file" ? "git-file-row git-tree-row" : "git-tree-row git-tree-" + node.kind;
+    row.style.paddingLeft = String(8 + depth * 18) + "px";
+    row.setAttribute("role", "treeitem");
+    row.setAttribute("aria-level", String(depth + 1));
+    row.setAttribute("aria-checked", indeterminate ? "mixed" : String(checked));
+    if (node.kind === "file" && node.path) {
+      row.dataset.path = node.path;
+    } else if (node.kind === "group") {
+      row.dataset.gitRoot = node.rootKey;
+    }
+
+    var checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+    checkbox.id = controlId("git-select", node.kind, node.rootKey, node.path || node.label || node.name);
+    checkbox.name = checkbox.id;
+    checkbox.checked = checked;
+    checkbox.indeterminate = indeterminate;
+    checkbox.disabled = paths.length === 0;
+    checkbox.addEventListener("change", function () {
+      setGitSelection(paths, checkbox.checked);
+      renderGitWorkspace(state.viewModel || {});
+    });
+
+    var typeLabel = gitTreeTypeLabel(node);
+    var type = null;
+    if (typeLabel) {
+      type = document.createElement("span");
+      type.className = "git-file-type" + (typeLabel === "staged" ? " staged" : "");
+      type.textContent = typeLabel;
+    } else {
+      row.classList.add("without-type");
+    }
+
+    var pathText = document.createElement("span");
+    pathText.className = "git-file-path";
+    pathText.textContent = gitTreeDisplayLabel(node);
+
+    var meta = document.createElement("span");
+    meta.className = "git-file-meta";
+    meta.textContent = node.kind === "file" ? gitFileMeta(node.file) : paths.length + " file" + (paths.length === 1 ? "" : "s");
+
+    row.append(checkbox);
+    if (type) row.append(type);
+    row.append(pathText, meta);
+    if (node.kind === "file" && node.path) {
+      var diffButton = document.createElement("button");
+      diffButton.type = "button";
+      diffButton.className = "git-diff-open";
+      diffButton.textContent = "Diff";
+      diffButton.setAttribute("aria-label", "Open diff for " + node.path);
+      diffButton.addEventListener("click", function (event) {
+        if (event && typeof event.preventDefault === "function") event.preventDefault();
+        if (event && typeof event.stopPropagation === "function") event.stopPropagation();
+        openGitDiff(node.path);
+      });
+      row.append(diffButton);
+    }
+    if (node.kind === "file") {
+      return row;
+    }
+
+    var container = document.createElement("div");
+    container.className = "git-tree-node";
+    container.append(row);
+    node.children.forEach(function (child) {
+      container.append(renderGitTreeNode(child, depth + 1));
+    });
+    return container;
+  }
+
+  function gitTreeTypeLabel(node) {
+    if (node.kind === "group") return node.rootKey;
+    if (node.kind === "dir") return "";
+    if (node.file && isGitFileStaged(node.file) && !needsGitFileStage(node.file)) return "staged";
+    return (node.file && (node.file.type || node.file.xy)) || "changed";
+  }
+
+  function gitTreeDisplayLabel(node) {
+    if (node.kind !== "file") return node.label;
+    var file = node.file || {};
+    return file.originalPath || file.originalFile
+      ? (file.originalPath || file.originalFile) + " -> " + (node.path || "")
+      : (node.path || node.label);
+  }
+
+  function gitFileMeta(file) {
+    file = file || {};
+    if (file.type === "untracked" || file.xy === "??") return "untracked";
+    if (isGitFileStaged(file) && needsGitFileStage(file)) return "staged+unstaged";
+    if (isGitFileStaged(file)) return "staged";
+    if (needsGitFileStage(file)) return "unstaged";
+    return (file.xy || "").trim() || "changed";
+  }
+
+  function gitTreePaths(node) {
+    if (node.kind === "file") return node.path ? [node.path] : [];
+    return node.children.reduce(function (paths, child) {
+      return paths.concat(gitTreePaths(child));
+    }, []);
+  }
+
+  function setGitSelection(paths, selected) {
+    if (selected) {
+      paths.forEach(function (filePath) {
+        if (state.gitSelectedPaths.indexOf(filePath) === -1) {
+          state.gitSelectedPaths.push(filePath);
+        }
+      });
+      return;
+    }
+    state.gitSelectedPaths = state.gitSelectedPaths.filter(function (filePath) {
+      return paths.indexOf(filePath) === -1;
+    });
+  }
+
+  function selectedGitPaths() {
+    return state.gitSelectedPaths.slice();
+  }
+
+  function gitChangedFiles() {
+    var git = gitWorkspace(state.viewModel || {});
+    return Array.isArray(git.changedFiles) ? git.changedFiles : [];
+  }
+
+  function gitFilePath(file) {
+    return file && (file.path || file.file) || "";
+  }
+
+  function findGitChangedFile(filePath) {
+    return gitChangedFiles().find(function (file) {
+      return gitFilePath(file) === filePath || file.file === filePath;
+    }) || null;
+  }
+
+  function openGitDiff(filePath) {
+    state.gitDiff.open = true;
+    state.gitDiff.selectedPath = filePath;
+    state.gitDiff.error = null;
+    state.gitDiff.diff = null;
+    fetchGitDiff();
+    renderGitDiffDrawer(state.viewModel || {});
+  }
+
+  function closeGitDiff() {
+    state.gitDiff.open = false;
+    state.gitDiff.requestId += 1;
+    state.gitDiff.loading = false;
+    renderGitDiffDrawer(state.viewModel || {});
+  }
+
+  function setGitDiffMode(mode) {
+    if (state.gitDiff.mode === mode) {
+      return;
+    }
+    state.gitDiff.mode = mode;
+    state.gitDiff.error = null;
+    state.gitDiff.diff = null;
+    if (state.gitDiff.open && state.gitDiff.selectedPath) {
+      fetchGitDiff();
+    }
+    renderGitDiffDrawer(state.viewModel || {});
+  }
+
+  function gitDiffApiUrl(filePath, mode) {
+    var params = new URLSearchParams();
+    params.set("path", filePath);
+    params.set("mode", mode);
+    return "/__agentweaver/api/git/diff?" + params.toString();
+  }
+
+  function fetchGitDiff() {
+    var filePath = state.gitDiff.selectedPath;
+    if (!filePath) {
+      return;
+    }
+    var requestId = state.gitDiff.requestId + 1;
+    state.gitDiff.requestId = requestId;
+    state.gitDiff.loading = true;
+    state.gitDiff.error = null;
+    state.gitDiff.diff = null;
+    fetch(gitDiffApiUrl(filePath, state.gitDiff.mode))
+      .then(function (response) {
+        return response.json().then(function (body) {
+          if (!response.ok) {
+            throw new Error(body && body.message ? body.message : "Git diff request failed.");
+          }
+          return body;
+        });
+      })
+      .then(function (diff) {
+        if (requestId !== state.gitDiff.requestId) {
+          return;
+        }
+        state.gitDiff.loading = false;
+        state.gitDiff.diff = diff;
+        state.gitDiff.error = null;
+        renderGitDiffDrawer(state.viewModel || {});
+      })
+      .catch(function (error) {
+        if (requestId !== state.gitDiff.requestId) {
+          return;
+        }
+        state.gitDiff.loading = false;
+        state.gitDiff.diff = null;
+        state.gitDiff.error = error.message || "Git diff request failed.";
+        renderGitDiffDrawer(state.viewModel || {});
+      });
+  }
+
+  function renderGitDiffDrawer(vm) {
+    var files = gitChangedFiles();
+    var selectedPath = state.gitDiff.selectedPath;
+    var selectedPathChanged = false;
+    if (selectedPath && !findGitChangedFile(selectedPath)) {
+      selectedPath = files[0] ? gitFilePath(files[0]) : null;
+      state.gitDiff.selectedPath = selectedPath;
+      state.gitDiff.diff = null;
+      state.gitDiff.error = null;
+      state.gitDiff.loading = false;
+      selectedPathChanged = Boolean(selectedPath);
+    }
+    elements.gitDiffDrawer.hidden = !state.gitDiff.open;
+    elements.gitDiffTitle.textContent = "Git Diff Viewer";
+    elements.gitDiffMeta.textContent = files.length === 0
+      ? "No changed files are available."
+      : String(files.length) + " changed file" + (files.length === 1 ? "" : "s") + ".";
+    if (!state.gitDiff.open) {
+      return;
+    }
+    if (selectedPathChanged) {
+      fetchGitDiff();
+    }
+    renderGitDiffFileList(files);
+    renderGitDiffModeControls();
+    renderGitDiffPreview(vm);
+  }
+
+  function renderGitDiffFileList(files) {
+    elements.gitDiffFileList.innerHTML = "";
+    if (!Array.isArray(files) || files.length === 0) {
+      var empty = document.createElement("div");
+      empty.className = "git-diff-empty";
+      empty.textContent = "No changed files.";
+      elements.gitDiffFileList.append(empty);
+      return;
+    }
+    files.forEach(function (file) {
+      var filePath = gitFilePath(file);
+      var button = document.createElement("button");
+      button.type = "button";
+      button.className = "git-diff-file" + (filePath === state.gitDiff.selectedPath ? " selected" : "");
+      button.dataset.path = filePath;
+      button.setAttribute("aria-pressed", filePath === state.gitDiff.selectedPath ? "true" : "false");
+      button.addEventListener("click", function () {
+        if (state.gitDiff.selectedPath !== filePath) {
+          openGitDiff(filePath);
+        }
+      });
+      var title = document.createElement("strong");
+      title.textContent = file.originalPath || file.originalFile
+        ? (file.originalPath || file.originalFile) + " -> " + filePath
+        : filePath;
+      var meta = document.createElement("span");
+      meta.textContent = gitFileMeta(file);
+      button.append(title, meta);
+      elements.gitDiffFileList.append(button);
+    });
+  }
+
+  function renderGitDiffModeControls() {
+    ensureGitDiffModeButtons();
+    Array.prototype.slice.call(elements.gitDiffModeControls.querySelectorAll("button")).forEach(function (button) {
+      var mode = button.dataset.gitDiffMode || "head";
+      var active = state.gitDiff.mode === mode;
+      button.className = active ? "primary" : "";
+      button.setAttribute("aria-pressed", active ? "true" : "false");
+    });
+  }
+
+  function ensureGitDiffModeButtons() {
+    if (elements.gitDiffModeControls.querySelectorAll("button").length > 0) {
+      return;
+    }
+    [
+      ["head", "All"],
+      ["staged", "Staged"],
+      ["worktree", "Unstaged"],
+    ].forEach(function (entry) {
+      var button = document.createElement("button");
+      button.type = "button";
+      button.dataset.gitDiffMode = entry[0];
+      button.textContent = entry[1];
+      elements.gitDiffModeControls.append(button);
+    });
+  }
+
+  function renderGitDiffPreview(vm) {
+    var selected = state.gitDiff.selectedPath ? findGitChangedFile(state.gitDiff.selectedPath) : null;
+    if (!selected) {
+      elements.gitDiffSelectedTitle.textContent = "Diff";
+      elements.gitDiffSelectedMeta.textContent = "No file selected.";
+      elements.gitDiffStatus.textContent = "";
+      renderGitDiffMessage("Select a changed file to inspect its diff.", false);
+      return;
+    }
+    var displayPath = selected.originalPath || selected.originalFile
+      ? (selected.originalPath || selected.originalFile) + " -> " + gitFilePath(selected)
+      : gitFilePath(selected);
+    elements.gitDiffSelectedTitle.textContent = displayPath;
+    elements.gitDiffSelectedMeta.textContent = [gitFileMeta(selected), gitModeLabel(state.gitDiff.mode)].join(" | ");
+    if (state.gitDiff.loading) {
+      elements.gitDiffStatus.textContent = "Loading diff...";
+      renderGitDiffMessage("Loading diff...", false);
+      return;
+    }
+    if (state.gitDiff.error) {
+      elements.gitDiffStatus.textContent = state.gitDiff.error;
+      renderGitDiffMessage(state.gitDiff.error, true);
+      return;
+    }
+    var diff = state.gitDiff.diff;
+    if (!diff) {
+      elements.gitDiffStatus.textContent = "Diff has not been loaded yet.";
+      renderGitDiffMessage("Diff has not been loaded yet.", false);
+      return;
+    }
+    elements.gitDiffStatus.textContent = diff.message || "";
+    renderGitDiffContent(diff);
+  }
+
+  function gitModeLabel(mode) {
+    if (mode === "staged") return "Staged";
+    if (mode === "worktree") return "Unstaged";
+    return "All";
+  }
+
+  function renderGitDiffMessage(message, failed) {
+    elements.gitDiffBody.textContent = "";
+    elements.gitDiffBody.className = "git-diff-body" + (failed ? " error-text" : "");
+    elements.gitDiffBody.textContent = message;
+  }
+
+  function renderGitDiffContent(diff) {
+    elements.gitDiffBody.textContent = "";
+    elements.gitDiffBody.className = "git-diff-body";
+    if (diff.binary) {
+      renderGitDiffMessage(diff.message || "Binary file diff is not displayed.", false);
+      return;
+    }
+    if (diff.tooLarge) {
+      renderGitDiffMessage(diff.message || "Diff is too large to display.", false);
+      return;
+    }
+    if (diff.empty || !Array.isArray(diff.hunks) || diff.hunks.length === 0) {
+      renderGitDiffMessage(diff.message || "No diff is available for this mode.", false);
+      return;
+    }
+    var table = document.createElement("div");
+    table.className = "git-diff-table";
+    diff.hunks.forEach(function (hunk) {
+      var hunkRow = document.createElement("div");
+      hunkRow.className = "git-diff-hunk";
+      hunkRow.textContent = hunk.header || "@@";
+      table.append(hunkRow);
+      (Array.isArray(hunk.rows) ? hunk.rows : []).forEach(function (row) {
+        table.append(renderGitDiffRow(row));
+      });
+    });
+    elements.gitDiffBody.append(table);
+  }
+
+  function renderGitDiffRow(row) {
+    var element = document.createElement("div");
+    var kind = row && row.kind ? row.kind : "context";
+    element.className = "git-diff-row row-" + kind;
+    var leftNumber = document.createElement("span");
+    leftNumber.className = "git-diff-line-number";
+    leftNumber.textContent = row.leftLineNumber === null || row.leftLineNumber === undefined ? "" : String(row.leftLineNumber);
+    var leftText = document.createElement("code");
+    leftText.className = "git-diff-code left";
+    leftText.textContent = row.leftText || "";
+    var rightNumber = document.createElement("span");
+    rightNumber.className = "git-diff-line-number";
+    rightNumber.textContent = row.rightLineNumber === null || row.rightLineNumber === undefined ? "" : String(row.rightLineNumber);
+    var rightText = document.createElement("code");
+    rightText.className = "git-diff-code right";
+    rightText.textContent = row.rightText || "";
+    element.append(leftNumber, leftText, rightNumber, rightText);
+    return element;
+  }
+
+  function selectedStageableGitPaths(git) {
+    return selectedGitPathsFor(git, needsGitFileStage);
+  }
+
+  function selectedUnstageableGitPaths(git) {
+    return selectedGitPathsFor(git, isGitFileStaged);
+  }
+
+  function selectedGitPathsFor(git, predicate) {
+    git = git || gitWorkspace(state.viewModel || {});
+    var selected = selectedGitPaths();
+    var selectedSet = new Set(selected);
+    var files = Array.isArray(git.changedFiles) ? git.changedFiles : [];
+    return files.filter(function (file) {
+      var filePath = file.path || file.file || "";
+      return selectedSet.has(filePath) && predicate(file);
+    }).map(function (file) {
+      return file.path || file.file || "";
+    });
+  }
+
+  function needsGitFileStage(file) {
+    if (!file) return false;
+    if (file.type === "untracked" || file.xy === "??") return true;
+    var workTreeStatus = typeof file.workTreeStatus === "string" ? file.workTreeStatus : (file.xy || "  ")[1];
+    return workTreeStatus !== " " && workTreeStatus !== undefined;
+  }
+
+  function isGitFileStaged(file) {
+    if (!file) return false;
+    var indexStatus = typeof file.indexStatus === "string" ? file.indexStatus : (file.xy || "  ")[0];
+    return indexStatus !== " " && indexStatus !== "?";
+  }
+
+  function renderProgress(vm) {
+    var progress = vm && vm.progress;
+    var items = progress && Array.isArray(progress.items) ? progress.items.filter(isProgressItem) : [];
+    renderProgressFlowLabel(progress && progress.flow ? text(progress.flow.label, progress.flow.id || "") : "");
+    if (!progress || !progress.flow || items.length === 0) {
+      var fallbackText = text(vm && vm.progressText, "No progress yet.");
+      elements.progress.className = "progress-tree fallback";
+      if (elements.progress.children.length > 0) {
+        var previousFallbackScrollTop = elements.progress.scrollTop;
+        var fallbackWasPinned = previousFallbackScrollTop + elements.progress.clientHeight >= elements.progress.scrollHeight - 8;
+        elements.progress.textContent = fallbackText;
+        elements.progress.scrollTop = fallbackWasPinned ? elements.progress.scrollHeight : previousFallbackScrollTop;
+      } else {
+        setTextPreservingScroll(elements.progress, fallbackText);
+      }
+      return;
+    }
+
+    var previousScrollTop = elements.progress.scrollTop;
+    var wasPinned = previousScrollTop + elements.progress.clientHeight >= elements.progress.scrollHeight - 8;
+    elements.progress.className = "progress-tree";
+    elements.progress.innerHTML = "";
+
+    items.forEach(function (item, index) {
+      elements.progress.append(renderProgressRow(item, index));
+    });
+    elements.progress.scrollTop = wasPinned ? elements.progress.scrollHeight : previousScrollTop;
+  }
+
+  function renderProgressFlowLabel(label) {
+    if (!elements.progressFlowLabel) {
+      return;
+    }
+    var value = text(label, "");
+    elements.progressFlowLabel.textContent = value;
+    elements.progressFlowLabel.hidden = value.length === 0;
+  }
+
+  function isProgressItem(item) {
+    if (!item || typeof item !== "object") return false;
+    if (["group", "phase", "step", "slot", "block", "termination"].indexOf(item.kind) === -1) return false;
+    if (["pending", "running", "done", "success", "failed", "stopped", "skipped", "waiting-user", "disabled", "blocked", "invalid", "empty"].indexOf(item.status) === -1) return false;
+    return typeof item.label === "string" && Number.isFinite(item.depth);
+  }
+
+  function renderProgressRow(item, index) {
+    var depth = Math.max(0, Math.min(12, Math.floor(item.depth)));
+    var row = document.createElement("div");
+    row.className = "progress-row kind-" + item.kind + " status-" + item.status;
+    row.dataset.kind = item.kind;
+    row.dataset.status = item.status;
+    row.dataset.depth = String(depth);
+    row.setAttribute("role", "treeitem");
+    row.setAttribute("aria-level", String(depth + 1));
+    row.setAttribute("aria-current", item.status === "running" ? "step" : "false");
+    row.style.paddingLeft = String(8 + depth * 18) + "px";
+    row.title = item.kind + ": " + item.status;
+
+    var marker = document.createElement("span");
+    marker.className = "progress-marker";
+    marker.setAttribute("aria-hidden", "true");
+    marker.textContent = progressMarker(item.status);
+
+    var body = document.createElement("span");
+    body.className = "progress-row-body";
+
+    var label = document.createElement("span");
+    label.className = "progress-label";
+    label.textContent = text(item.label, "Untitled progress item");
+    body.append(label);
+
+    if (typeof item.detail === "string" && item.detail.length > 0) {
+      var detail = document.createElement("span");
+      detail.className = "progress-detail";
+      detail.textContent = item.detail;
+      body.append(detail);
+    }
+
+    row.append(marker, body);
+    row.dataset.index = String(index);
+    return row;
+  }
+
+  function progressMarker(status) {
+    if (status === "done" || status === "success") return "✓";
+    if (status === "failed" || status === "invalid") return "×";
+    if (status === "stopped" || status === "blocked") return "■";
+    if (status === "running" || status === "waiting-user") return "●";
+    if (status === "skipped") return "↷";
+    if (status === "disabled" || status === "empty") return "·";
+    return "○";
+  }
+
+  function setTextPreservingScroll(element, value, forceBottom) {
     if (element.textContent === value) {
+      if (forceBottom) {
+        element.scrollTop = element.scrollHeight;
+      }
       return;
     }
     var previousScrollTop = element.scrollTop;
     var wasPinned = previousScrollTop + element.clientHeight >= element.scrollHeight - 8;
     element.textContent = value;
-    element.scrollTop = wasPinned ? element.scrollHeight : previousScrollTop;
+    element.scrollTop = forceBottom || wasPinned ? element.scrollHeight : previousScrollTop;
   }
 
   function captureUiState() {
@@ -265,7 +1728,6 @@
     }
     return {
       progressScrollTop: elements.progress.scrollTop,
-      summaryScrollTop: elements.summary.scrollTop,
       logScrollTop: elements.log.scrollTop,
       helpScrollTop: elements.helpText.scrollTop,
       modalScrollTop: elements.modalRoot.scrollTop,
@@ -281,8 +1743,7 @@
   function restoreUiState(uiState) {
     if (!uiState) return;
     elements.progress.scrollTop = uiState.progressScrollTop;
-    elements.summary.scrollTop = uiState.summaryScrollTop;
-    elements.log.scrollTop = uiState.logScrollTop;
+    elements.log.scrollTop = state.logAutoscroll ? elements.log.scrollHeight : uiState.logScrollTop;
     elements.helpText.scrollTop = uiState.helpScrollTop;
     elements.modalRoot.scrollTop = uiState.modalScrollTop;
     var modalBody = currentModalBody();
@@ -446,9 +1907,9 @@
       parts.push("Scope " + explorer.scopeKey);
     }
     if (Array.isArray(explorer.runIds) && explorer.runIds.length > 1) {
-      parts.push("Runs " + explorer.runIds.join(", "));
+      parts.push("Current runs " + explorer.runIds.join(", "));
     } else if (explorer.runId) {
-      parts.push("Run " + explorer.runId);
+      parts.push("Current run " + explorer.runId);
     }
     return parts.join(" | ");
   }
@@ -457,7 +1918,7 @@
     if (typeof count !== "number") {
       return "Artifacts are available.";
     }
-    return String(count) + " artifact" + (count === 1 ? "" : "s") + " created.";
+    return String(count) + " artifact" + (count === 1 ? "" : "s") + " in scope.";
   }
 
   function artifactApiUrl(explorer, suffix) {
@@ -466,13 +1927,6 @@
     if (explorer.scopeKey) {
       params.set("scope", explorer.scopeKey);
     }
-    if (Array.isArray(explorer.runIds) && explorer.runIds.length > 0) {
-      explorer.runIds.forEach(function (runId) {
-        params.append("runId", runId);
-      });
-    } else if (explorer.runId) {
-      params.set("runId", explorer.runId);
-    }
     var query = params.toString();
     return query ? base + "?" + query : base;
   }
@@ -483,6 +1937,7 @@
         return {
           title: group.title || group.phaseId || "Artifacts",
           items: Array.isArray(group.items) ? group.items : [],
+          groups: Array.isArray(group.groups) ? artifactGroups({ groups: group.groups }) : [],
         };
       });
     }
@@ -493,8 +1948,23 @@
   }
 
   function flattenArtifacts(catalog) {
+    function flattenGroup(group) {
+      var nested = Array.isArray(group.groups) ? group.groups.reduce(function (items, child) {
+        return items.concat(flattenGroup(child));
+      }, []) : [];
+      var ownItems = Array.isArray(group.items) ? group.items : [];
+      if (nested.length > 0) {
+        var nestedIds = new Set(nested.map(function (item) {
+          return item && item.id;
+        }));
+        ownItems = ownItems.filter(function (item) {
+          return item && !nestedIds.has(item.id);
+        });
+      }
+      return nested.concat(ownItems);
+    }
     return artifactGroups(catalog).reduce(function (items, group) {
-      return items.concat(group.items);
+      return items.concat(flattenGroup(group));
     }, []);
   }
 
@@ -535,14 +2005,23 @@
     return item && item.kind ? String(item.kind) : "unknown";
   }
 
-  function chooseDefaultArtifact(items) {
+  function currentArtifactRunIds(explorer) {
+    if (explorer && Array.isArray(explorer.runIds) && explorer.runIds.length > 0) {
+      return explorer.runIds.filter(Boolean);
+    }
+    return explorer && explorer.runId ? [explorer.runId] : [];
+  }
+
+  function chooseDefaultArtifact(items, explorer) {
     if (!Array.isArray(items) || items.length === 0) {
       return null;
     }
+    var currentRunIds = new Set(currentArtifactRunIds(explorer));
     var best = null;
     var bestScore = Infinity;
     items.forEach(function (item, index) {
-      var score = artifactUsefulnessScore(item) * 1000 + index;
+      var runScore = currentRunIds.size > 0 && item && currentRunIds.has(item.runId) ? 0 : 1;
+      var score = runScore * 100000 + artifactUsefulnessScore(item) * 1000 + index;
       if (score < bestScore) {
         best = item;
         bestScore = score;
@@ -603,7 +2082,7 @@
           return item && item.id === state.artifacts.selectedId;
         });
         if (!selectedStillExists) {
-          var defaultItem = chooseDefaultArtifact(items);
+          var defaultItem = chooseDefaultArtifact(items, explorer);
           state.artifacts.selectedId = defaultItem ? defaultItem.id : null;
           state.artifacts.preview = null;
           if (defaultItem) {
@@ -640,26 +2119,48 @@
     var groups = artifactGroups(catalog);
     var rendered = 0;
     groups.forEach(function (group) {
-      var items = Array.isArray(group.items) ? group.items : [];
-      if (items.length === 0) {
-        return;
+      var renderedGroup = renderArtifactGroup(explorer, group, 0);
+      rendered += renderedGroup.count;
+      if (renderedGroup.element) {
+        elements.artifactList.append(renderedGroup.element);
       }
-      var section = document.createElement("section");
-      section.className = "artifact-group";
-      var title = document.createElement("h3");
-      title.textContent = group.title || "Artifacts";
-      section.append(title);
-      items.forEach(function (item) {
-        rendered += 1;
-        section.append(renderArtifactRow(explorer, item));
-      });
-      elements.artifactList.append(section);
     });
     if (rendered === 0) {
-      elements.artifactList.append(artifactEmpty("No artifacts were found for the current scope or run."));
+      elements.artifactList.append(artifactEmpty("No artifacts were found for the current scope."));
     }
   }
 
+  function renderArtifactGroup(explorer, group, depth) {
+    var childGroups = Array.isArray(group.groups) ? group.groups : [];
+    var nestedIds = new Set();
+    childGroups.forEach(function (child) {
+      (Array.isArray(child.items) ? child.items : []).forEach(function (item) {
+        if (item && item.id) nestedIds.add(item.id);
+      });
+    });
+    var items = (Array.isArray(group.items) ? group.items : []).filter(function (item) {
+      return item && !nestedIds.has(item.id);
+    });
+    var section = document.createElement("section");
+    section.className = depth > 0 ? "artifact-group artifact-subgroup" : "artifact-group";
+    var title = document.createElement(depth > 0 ? "h4" : "h3");
+    title.textContent = group.title || "Artifacts";
+    section.append(title);
+    var count = 0;
+    childGroups.forEach(function (child) {
+      var renderedChild = renderArtifactGroup(explorer, child, depth + 1);
+      count += renderedChild.count;
+      if (renderedChild.element) {
+        section.append(renderedChild.element);
+      }
+    });
+    items.forEach(function (item) {
+      count += 1;
+      section.append(renderArtifactRow(explorer, item));
+    });
+    return { element: count > 0 ? section : null, count: count };
+  }
+
   function renderArtifactRow(explorer, item) {
     var row = document.createElement("article");
     row.className = "artifact-row" + (state.artifacts.selectedId === item.id ? " selected" : "");
@@ -1433,6 +2934,8 @@
       checkRow.className = "check-row";
       var checkbox = document.createElement("input");
       checkbox.type = "checkbox";
+      checkbox.id = "field-" + field.id;
+      checkbox.name = field.id;
       checkbox.dataset.fieldId = field.id;
       checkbox.dataset.fieldType = field.type;
       checkbox.checked = currentValue(field) === true;
@@ -1450,6 +2953,7 @@
         var input = document.createElement(field.multiline ? "textarea" : "input");
         input.id = "field-" + field.id;
         if (!field.multiline) input.type = "text";
+        input.name = field.id;
         if (field.placeholder) input.placeholder = field.placeholder;
         if (field.rows) input.rows = field.rows;
         input.dataset.fieldId = field.id;
@@ -1485,6 +2989,7 @@
       var input = document.createElement("input");
       input.type = "radio";
       input.name = "field-" + field.id;
+      input.id = controlId("field", field.id, option.value);
       input.value = option.value;
       input.dataset.fieldId = field.id;
       input.dataset.fieldType = field.type;
@@ -1515,6 +3020,8 @@
       label.className = "field-option";
       var input = document.createElement("input");
       input.type = "checkbox";
+      input.id = controlId("field", field.id, option.value);
+      input.name = field.id;
       input.value = option.value;
       input.dataset.fieldId = field.id;
       input.dataset.fieldType = field.type;
@@ -1551,6 +3058,36 @@
     return Object.assign({}, state.formValues);
   }
 
+  applyTheme(state.theme);
+  if (elements.themeToggle) {
+    elements.themeToggle.addEventListener("click", toggleTheme);
+  }
+  if (elements.autoFlowResizer) {
+    elements.autoFlowResizer.setAttribute("role", "separator");
+    elements.autoFlowResizer.setAttribute("aria-orientation", "horizontal");
+    elements.autoFlowResizer.setAttribute("aria-label", "Resize flow editor");
+    elements.autoFlowResizer.setAttribute("tabindex", "0");
+    elements.autoFlowResizer.addEventListener("pointerdown", beginAutoFlowResize);
+    elements.autoFlowResizer.addEventListener("dblclick", resetAutoFlowHeight);
+    elements.autoFlowResizer.addEventListener("keydown", handleAutoFlowResizerKeydown);
+  }
+  applyWorkspaceSplit(state.workspaceSplit);
+  if (elements.workspaceResizer) {
+    elements.workspaceResizer.setAttribute("role", "separator");
+    elements.workspaceResizer.setAttribute("aria-orientation", "vertical");
+    elements.workspaceResizer.setAttribute("aria-label", "Resize workspace panels");
+    elements.workspaceResizer.setAttribute("tabindex", "0");
+    elements.workspaceResizer.addEventListener("pointerdown", beginWorkspaceResize);
+    elements.workspaceResizer.addEventListener("dblclick", resetWorkspaceSplit);
+    elements.workspaceResizer.addEventListener("keydown", handleWorkspaceResizerKeydown);
+  }
+  applyLogAutoscroll(state.logAutoscroll);
+  if (elements.logAutoscroll) {
+    elements.logAutoscroll.addEventListener("change", function () {
+      applyLogAutoscroll(elements.logAutoscroll.checked);
+      persistLogAutoscroll(state.logAutoscroll);
+    });
+  }
   elements.run.addEventListener("click", api.openRunConfirm);
   elements.interrupt.addEventListener("click", api.openInterruptConfirm);
   elements.artifactOpen.addEventListener("click", api.openArtifactExplorer);
@@ -1558,22 +3095,39 @@
   elements.artifactToolbarClose.addEventListener("click", api.closeArtifactExplorer);
   elements.artifactCopyContent.addEventListener("click", copySelectedArtifactContent);
   elements.artifactCopyReference.addEventListener("click", copySelectedArtifactReference);
+  ensureGitDiffModeButtons();
+  elements.gitDiffClose.addEventListener("click", closeGitDiff);
+  Array.prototype.slice.call(elements.gitDiffModeControls.querySelectorAll("button")).forEach(function (button) {
+    button.addEventListener("click", function () {
+      setGitDiffMode(button.dataset.gitDiffMode || "head");
+    });
+  });
+  elements.gitRefresh.addEventListener("click", api.refreshGit);
+  elements.gitCreateBranch.addEventListener("click", api.createGitBranch);
+  elements.gitCheckout.addEventListener("click", api.checkoutGitBranch);
+  elements.gitFetch.addEventListener("click", api.fetchGit);
+  elements.gitPull.addEventListener("click", api.pullGit);
+  elements.gitStage.addEventListener("click", api.stageGit);
+  elements.gitUnstage.addEventListener("click", api.unstageGit);
+  elements.gitCommit.addEventListener("click", api.commitGit);
+  elements.gitPush.addEventListener("click", api.pushGit);
+  elements.gitCommitMessage.addEventListener("input", function () {
+    state.gitCommitMessage = elements.gitCommitMessage.value;
+  });
+  elements.gitCommitMessage.addEventListener("change", api.updateGitCommitMessage);
   elements.help.addEventListener("click", api.toggleHelp);
   elements.closeHelp.addEventListener("click", function () {
     api.showHelp(false);
   });
   elements.clearLog.addEventListener("click", api.clearLog);
   elements.progress.addEventListener("scroll", function () {
-    api.scrollPane("progress", Math.round(elements.progress.scrollTop));
-  });
-  elements.summary.addEventListener("scroll", function () {
-    api.scrollPane("summary", Math.round(elements.summary.scrollTop));
+    sendScrollPane("progress", elements.progress);
   });
   elements.log.addEventListener("scroll", function () {
-    api.scrollPane("log", Math.round(elements.log.scrollTop));
+    sendScrollPane("log", elements.log);
   });
   elements.helpText.addEventListener("scroll", function () {
-    api.scrollPane("help", Math.round(elements.helpText.scrollTop));
+    sendScrollPane("help", elements.helpText);
   });
 
   api.connect();