@abot-ai/runtime 1.4.0 → 1.6.0

package/dist/src/web-ui/app/styles/52-automation-step-editor.css

@@ -0,0 +1,73 @@
+.automation-step-preview { display: grid; gap: 12px; padding: 14px; }
+.automation-step-preview .automation-inline-inspector-heading { margin: 0; }
+.automation-step-preview h5 { margin: 0; color: var(--muted); font-size: var(--font-size-xs); font-weight: 600; }
+.automation-step-preview p { margin: 0; line-height: 1.5; }
+.automation-step-preview-description { color: var(--text); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
+.automation-step-preview-inputs { display: grid; gap: 3px; margin: -5px 0 0; font-size: var(--font-size-xs); }
+.automation-step-preview-inputs dt { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
+.automation-step-preview-inputs dd { margin: 0 0 6px; color: var(--muted); overflow-wrap: anywhere; }
+.automation-step-preview-output { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: var(--font-size-xs); }
+.automation-step-preview-output strong { color: var(--text); font-weight: 600; }
+.automation-step-edit-button { width: 100%; min-height: 36px; padding: 8px 12px; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); }
+.automation-tool-identity { display: grid; gap: 5px; min-width: 0; text-align: start; }
+.automation-tool-identity-name { justify-self: start; max-width: 100%; padding: 4px 8px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--font-size-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
+.automation-tool-identity-operation { color: var(--text); font-size: var(--font-size-sm); line-height: 1.45; overflow-wrap: anywhere; }
+.automation-node .automation-tool-identity-operation { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
+.automation-tool-identity-plugin { color: var(--muted); font-size: var(--font-size-xs); }
+.automation-step-dialog-heading > div { min-width: 0; }
+.automation-step-dialog-heading .automation-tool-identity { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; gap: 7px 10px; }
+.automation-step-dialog-heading .automation-tool-identity-name { font-size: var(--font-size-md); }
+.automation-step-dialog-navigation { display: flex; align-items: center; flex: none; gap: 8px; }
+.automation-step-dialog-navigation > button[data-step-direction] { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--control-bg); color: var(--text); font-size: 18px; }
+.automation-step-dialog-navigation > button[data-step-direction]:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.automation-step-dialog-navigation > button:disabled { opacity: .35; cursor: default; }
+.automation-step-position { color: var(--muted); font-size: var(--font-size-xs); white-space: nowrap; }
+
+.automation-step-dialog { box-sizing: border-box; width: min(1060px, calc(100vw - 48px)); max-width: none; max-height: min(920px, calc(100dvh - 48px)); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: 0 24px 80px #0008; }
+.automation-step-dialog[open] { display: flex; flex-direction: column; }
+.automation-step-dialog::backdrop { background: #0009; backdrop-filter: blur(3px); }
+.automation-step-dialog-heading { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
+.automation-step-dialog-heading p { margin: 0 0 4px; color: var(--muted); font-size: var(--font-size-xs); }
+.automation-step-dialog-heading h2 { margin: 0; font-size: var(--font-size-xl); line-height: 1.3; overflow-wrap: anywhere; }
+.automation-step-dialog-feedback { flex: none; margin: 0; padding: 0 24px; color: var(--amber); font-size: var(--font-size-sm); line-height: 1.5; }
+.automation-step-dialog-feedback:not(:empty) { padding-block: 12px; }
+.automation-step-dialog-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 20px 24px; border: 0; border-radius: 0; }
+.automation-step-dialog-content form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
+.automation-step-dialog-content form > h4 { display: none; }
+.automation-step-dialog-content form > :not(label) { grid-column: 1 / -1; }
+.automation-step-dialog-content form > label:has(textarea) { grid-column: 1 / -1; }
+.automation-step-dialog-content :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { box-sizing: border-box; min-height: 38px; border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); color: var(--text); }
+.automation-step-dialog-content :is(input, select, textarea):focus { outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: 1px; border-color: var(--accent); }
+.automation-step-dialog-content textarea { min-height: 104px; line-height: 1.55; }
+.automation-step-dialog-content textarea[name="prompt"] { min-height: 164px; }
+.automation-step-dialog-content .automation-binding-fields { min-width: 0; gap: 12px; }
+.automation-step-dialog-content .automation-binding-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
+.automation-step-dialog-content .automation-binding-row > label:has([data-binding-value]) { grid-column: 1 / -1; }
+.automation-step-dialog-content .automation-binding-row > button { justify-self: start; align-self: end; min-height: 34px; padding: 6px 10px; }
+.automation-step-dialog-content .automation-binding-row > :is(small, .automation-node-error) { grid-column: 1 / -1; }
+.automation-step-dialog-content [data-binding-actions] { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
+.automation-step-dialog-content [data-binding-actions] > label { flex: 1 1 260px; min-width: 0; }
+.automation-step-dialog-content [data-binding-actions] > button { min-height: 38px; padding: 8px 12px; }
+.automation-step-dialog-content .automation-node-contract { min-width: 0; }
+.automation-step-dialog-content .automation-node-contract textarea { min-height: 150px; }
+.automation-step-dialog-content .automation-agent-tool-picker-body { max-height: 400px; }
+.automation-step-dialog-content .automation-agent-operations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.automation-step-dialog-content .automation-inspector-actions { margin-top: 0; }
+.automation-step-dialog-content .automation-workflow-actions-note { flex-basis: 100%; margin: 0 0 4px; color: var(--muted); font-size: var(--font-size-xs); line-height: 1.4; }
+.automation-step-dialog-content .automation-save-agent { flex-basis: auto; padding: 7px 12px; }
+.automation-step-dialog-footer { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--panel); }
+.automation-step-dialog-footer > span { max-width: 380px; color: var(--muted); font-size: var(--font-size-xs); line-height: 1.5; }
+.automation-step-dialog :is(.automation-step-dialog-footer, .automation-step-discard) button { min-height: 36px; padding: 8px 14px; border-radius: 6px; }
+.automation-step-discard { flex: none; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--accent-soft); }
+.automation-step-discard p { margin: 0 0 10px; font-size: var(--font-size-sm); }
+.automation-step-discard .automation-actions { justify-content: flex-start; }
+.automation-step-discard[hidden] { display: none; }
+
+@media (max-width: 680px) {
+  .automation-step-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 9px; }
+  .automation-step-dialog-heading, .automation-step-dialog-content, .automation-step-dialog-footer, .automation-step-discard { padding: 16px; }
+  .automation-step-dialog-heading { flex-wrap: wrap; }
+  .automation-step-dialog-content form, .automation-step-dialog-content .automation-binding-row, .automation-step-dialog-content .automation-agent-operations { grid-template-columns: minmax(0, 1fr); }
+  .automation-step-dialog-footer { align-items: stretch; flex-direction: column; gap: 10px; }
+  .automation-step-dialog-footer .automation-actions { justify-content: space-between; }
+}

package/dist/src/web-ui/app/styles/53-automation-schema-inputs.css

@@ -0,0 +1,21 @@
+.automation-schema-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
+.automation-schema-heading strong { color: var(--text); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
+.automation-schema-heading small { flex-basis: 100%; color: var(--muted); line-height: 1.5; }
+.automation-schema-binding .automation-required { color: var(--muted); font-size: var(--font-size-xs); }
+.automation-step-dialog-content .automation-schema-heading, .automation-step-dialog-content .automation-schema-literal { grid-column: 1 / -1; }
+.automation-schema-literal { min-width: 0; }
+.automation-schema-literal :is(input, select, textarea) { width: 100%; min-width: 0; }
+.automation-schema-literal textarea { min-height: 76px; resize: vertical; }
+.automation-schema-items { display: grid; gap: 8px; }
+.automation-schema-item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 8px; }
+.automation-schema-item-number { color: var(--muted); font-size: var(--font-size-xs); padding-top: 10px; text-align: center; }
+.automation-schema-item > button, .automation-schema-list-actions > button { min-height: 34px; padding: 6px 10px; }
+.automation-schema-item > button { color: var(--muted); }
+.automation-schema-list-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
+.automation-schema-list-actions small, .automation-schema-invalid small { color: var(--muted); font-size: var(--font-size-xs); line-height: 1.5; }
+.automation-schema-invalid { display: grid; gap: 6px; min-width: 0; }
+.automation-schema-invalid small { color: var(--warning); }
+@media (max-width: 560px) {
+  .automation-schema-item { grid-template-columns: 18px minmax(0, 1fr); }
+  .automation-schema-item > button { grid-column: 2; justify-self: end; }
+}

package/dist/src/web-ui/app/styles/54-spark-chat.css

@@ -0,0 +1,111 @@
+.spark-companion { position: fixed; left: calc(var(--workspace-rail-width, 166px) + 12px); bottom: 70px; z-index: 45; color: var(--text); }
+.spark-companion button, .spark-companion select, .spark-companion textarea { font: inherit; }
+.spark-pet { --pet-size: 43px; display: block; width: var(--pet-size); height: var(--pet-size); flex-shrink: 0; transform: rotate(-3deg); filter: drop-shadow(0 3px 4px #0002); }
+.spark-launcher { position: relative; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow); }
+.spark-launcher:hover { background: var(--panel); border-color: var(--line-strong); }
+.spark-rail-launcher { width: 100%; flex: none; }
+.spark-rail-launcher:empty { display: none; }
+.spark-launcher { touch-action: none; user-select: none; }
+.spark-launcher-dragging { cursor: grabbing; }
+.workspace-rail button.spark-launcher { display: flex; width: 100%; height: 52px; padding: 5px 10px; gap: 14px; border-radius: 8px; }
+.spark-launcher-floating { position: fixed; z-index: 45; touch-action: none; }
+.spark-launcher-floating .spark-launcher-label { display: none; }
+.spark-rail-launcher .spark-pet { --pet-size: 34px; }
+.spark-launcher-label { font-size: 12px; }
+.spark-rail-launcher .spark-unread { top: 3px; right: 5px; }
+.spark-unread { position: absolute; right: -5px; top: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; padding: 0 5px; background: #c0c7cd; color: #15191e; border: 2px solid var(--bg); border-radius: 20px; font-size: 11px; font-weight: 600; }
+.spark-chat-panel { position: absolute; left: 0; bottom: 0; width: 390px; height: min(560px, calc(100dvh - 32px)); min-height: 250px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 12px 40px #0005; display: flex; flex-direction: column; overflow: hidden; }
+.spark-chat-header { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
+.spark-chat-header .spark-pet { --pet-size: 29px; }
+.spark-chat-header .spark-header-mascot { width: 30px; height: 30px; overflow: visible; }
+.spark-chat-header strong { flex: 1; font-size: 13px; font-weight: 550; }
+.spark-chat-header button { display: grid; place-items: center; border: 0; box-shadow: none; background: transparent; color: var(--muted); width: 28px; height: 28px; padding: 0; border-radius: 6px; }
+.spark-chat-header button:hover { background: var(--control-bg); color: var(--text); }
+.spark-chat-content { position: relative; display: flex; flex: 1; min-height: 0; }
+.spark-companion .jump-to-latest { position: absolute; top: auto; right: auto; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 2; width: auto; min-height: 28px; padding: 5px 10px; font-size: 11px; }
+.spark-companion .spark-messages { width: 100%; min-width: 0; padding: 16px 12px; margin: 0; gap: 0; overflow-y: auto; overflow-anchor: none; scroll-behavior: auto; }
+.spark-companion .message-row { width: 100%; max-width: none; margin: 0 0 14px; gap: 0; }
+.spark-companion .schedule-message-row { display: none; }
+.spark-companion .message-avatar { display: none; }
+.spark-companion .message-row.assistant .message-bubble, .spark-companion .message-bubble { position: relative; width: auto; max-width: 94%; min-width: 0; padding: 9px 11px; border: 1px solid #c5c9cf14; border-radius: 10px; background: #1c2228; box-shadow: none; }
+.spark-companion .message-row.user .message-bubble { padding: 9px 11px; background: #32373e; border: 1px solid #d0d3d920; border-radius: 10px; color: #eceef1; }
+.spark-companion .message-status-outside { flex-direction: column; gap: 5px; }
+.spark-companion .message-status-outside > .conversation-status { padding: 3px 2px; font-size: 12px; }
+.spark-companion .message-row.user .markdown-body:not(:empty) { width: auto; margin: 0; padding: 0; border-radius: 0; background: transparent; }
+.spark-companion .message-link-preview { background: #ffffff04; border-color: #c9d1d919; box-shadow: none; }
+.spark-companion .message-meta { font-size: 10px; margin-bottom: 5px; }
+.spark-companion .message-meta > span:first-child { display: none; }
+.spark-companion .message-timestamp::before { content: none; }
+.spark-companion .message-row.assistant .message-meta { min-height: 18px; padding-right: 35px; }
+.spark-companion .markdown-body { font-size: 13px; line-height: 1.65; }
+.spark-companion .markdown-body pre { max-width: 100%; overflow: auto; }
+.spark-companion .message-actions { position: absolute; right: 7px; top: 7px; margin: 0; }
+.spark-companion .message-action-button { min-height: 20px; padding: 0 4px; font-size: 10px; line-height: 18px; }
+.spark-companion .chat-empty-state { margin: 0; padding: 10px 8px; min-height: 0; text-align: start; align-items: start; }
+.spark-companion .mode-empty-title { font-size: 15px; }
+.spark-companion .mode-empty-copy { font-size: 12px; }
+.spark-chat-composer-dock { flex-shrink: 0; padding: 8px 10px; border-top: 1px solid var(--line); }
+.spark-compose { margin: 0; padding: 0; }
+.spark-input-row { display: flex; align-items: center; gap: 6px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
+.spark-input-row:focus-within { border-color: #727b84; }
+.spark-companion .spark-input-icon { display: grid; place-items: center; flex: 0 0 32px; align-self: flex-end; width: 32px; min-height: 32px; height: 32px; padding: 0; border: 0; border-radius: 7px; background: transparent; box-shadow: none; color: var(--muted); font-size: 20px; }
+.spark-companion .spark-input-icon:hover { background: #ffffff09; color: var(--text); }
+.spark-companion .spark-input-icon[hidden] { display: none; }
+.spark-companion .spark-stop { font-size: 13px; color: var(--text); }
+.spark-companion .spark-input-row textarea { display: block; box-sizing: border-box; flex: 1; min-width: 0; width: 100%; min-height: 32px; height: 32px; max-height: 168px; padding: 6px 3px; margin: 0; resize: none; border: 0; border-radius: 0; outline: 0; box-shadow: none; background: transparent; color: var(--text); font-size: 13px; line-height: 20px; }
+.spark-companion .spark-input-row textarea:hover, .spark-companion .spark-input-row textarea:focus { border: 0; outline: 0; box-shadow: none; background: transparent; }
+.spark-companion .composer-submit-control { align-self: flex-end; flex-shrink: 0; gap: 0; border: 1px solid #ffffff12; border-radius: 9px; background: #30363d; }
+.spark-companion .send-button, .spark-companion .composer-submit-control.split .send-button { display: grid; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #edf0f3; box-shadow: none; }
+.spark-companion .composer-submit-control.split .send-button { border-radius: 8px 0 0 8px; }
+.spark-companion .send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.spark-companion .send-button:hover, .spark-companion .composer-submit-control.split .send-button:hover { border: 0; background: #ffffff0c; }
+.spark-companion .send-button:disabled, .spark-companion .composer-submit-control.split .send-button:disabled { background: transparent; color: var(--muted-2); opacity: .6; }
+.spark-companion .send-next-menu-button { width: 26px; min-width: 26px; height: 32px; min-height: 32px; padding: 0; border: 0; border-left: 1px solid #ffffff12; border-radius: 0 8px 8px 0; background: transparent; color: #d1d6dc; }
+.spark-companion .send-next-menu-button svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+.spark-companion .send-next-menu-button:hover, .spark-companion .send-next-menu-button.open { border-color: #ffffff12; background: #ffffff0c; color: #fff; }
+.spark-companion .send-next-menu-button[data-count]::after { background: #d3d7dc; color: #252a30; }
+.spark-companion .send-next-menu { bottom: 42px; right: 0; min-width: 200px; padding: 5px; border-color: #ffffff20; background: #252b32; box-shadow: 0 8px 24px #0005; }
+.spark-companion .send-next-menu button { padding: 8px 9px 3px; min-height: 32px; font-size: 12px; }
+.spark-companion .send-next-menu p { margin: 0; padding: 0 9px 7px; color: #acb4bf; font-size: 11px; line-height: 1.5; }
+.spark-chat-status { min-height: 0; margin: 0; font-size: 10px; color: var(--muted); }
+.spark-chat-status:empty { display: none; }
+.spark-message-notice { position: absolute; left: 0; bottom: 0; width: 260px; display: flex; align-items: flex-start; gap: 6px; padding: 10px 8px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
+.spark-message-notice button { background: none; border: none; box-shadow: none; padding: 0; color: var(--text); font-size: 12px; }
+.spark-message-notice [data-spark="noticeButton"] { flex: 1; text-align: start; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
+.spark-message-notice [data-spark="dismissNoticeButton"] { color: var(--muted); width: 18px; }
+.spark-new-messages { display: flex; align-items: center; gap: 8px; color: #bec5cc; font-size: 10px; margin: 0 0 12px; }
+.spark-new-messages::before, .spark-new-messages::after { content: ""; height: 1px; background: var(--line); flex: 1; }
+.spark-chat-panel .conversation-file-preview { position: absolute; inset: 0; z-index: 5; width: auto; max-width: none; }
+.spark-chat-panel .conversation-file-backdrop { display: none; }
+.spark-chat-results:empty { display: none; }
+.spark-handoff-actions { margin-top: 10px; }
+.spark-handoff-button { min-height: 30px; padding: 5px 9px; border: 1px solid #ffffff14; border-radius: 7px; background: #ffffff08; color: var(--text); font-size: 11px; box-shadow: none; }
+.spark-handoff-actions p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
+.spark-chat-results .conversation-tool-file-action { max-width: 100%; font-size: 12px; }
+.spark-result-warning { margin: 6px 0; color: var(--amber); font-size: 12px; }
+.spark-chat-settings { margin: 0 0 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; }
+.spark-chat-settings h4 { margin: 0; font-size: 14px; }
+.spark-chat-settings p, .spark-chat-settings label > span { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.spark-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 16px; }
+.spark-settings-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); }
+.spark-settings-row strong { display: block; font-size: 12px; font-weight: 550; }
+.spark-chat-settings-controls label { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
+.spark-settings-actions { display: flex; align-items: center; gap: 8px; }
+.spark-chat-settings button, .spark-chat-settings select { min-height: 32px; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
+.spark-chat-settings-controls select { width: 104px; }
+.spark-chat-settings [data-spark-clear] { color: var(--muted); background: transparent; }
+.spark-chat-settings .spark-settings-model-note { padding-top: 12px; border-top: 1px solid var(--line); }
+.spark-chat-settings [data-spark-settings-feedback]:empty { display: none; }
+.spark-is-working .spark-pet { filter: drop-shadow(0 0 5px #76cbb077); }
+@keyframes spark-mascot-working {
+  0%, 100% { transform: translateX(0) rotate(-3deg); }
+  20%, 35% { transform: translateX(-2px) rotate(-8deg); }
+  65%, 80% { transform: translateX(2px) rotate(4deg); }
+}
+@keyframes spark-chat-enter { from { opacity: 0; transform: translateY(var(--spark-open-shift, 10px)); } to { opacity: 1; transform: translateY(0); } }
+@media (prefers-reduced-motion: no-preference) {
+  .spark-chat-panel:not([hidden]) { animation: spark-chat-enter .22s cubic-bezier(.2,.8,.2,1); }
+  .spark-launcher .spark-pet { transition: transform .18s ease; }
+  .spark-launcher:hover .spark-pet { transform: rotate(4deg) translateY(-2px); }
+  .spark-is-working .spark-pet { animation: spark-mascot-working 2.8s ease-in-out infinite; }
+}

package/dist/src/web-ui/app/styles/90-responsive.css

@@ -6,7 +6,7 @@
   }
 
   .workspace-page-body {
-    padding-inline: 28px;
+    padding-inline: var(--workspace-page-gutter);
   }
 }
 
@@ -21,11 +21,11 @@
   }
 
   .workspace-page-header {
-    padding-inline: 28px;
+    padding-inline: var(--workspace-page-gutter);
   }
 
   .workspace-page-body {
-    padding: 20px 24px 48px;
+    padding: 20px var(--workspace-page-gutter) 48px;
   }
 
   .config-category-panel {
@@ -41,8 +41,7 @@
     position: static;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     max-height: none;
-    border-right: 0;
-    border-bottom: 1px solid var(--config-line);
+    border: 1px solid var(--config-line);
   }
 
   .config-model-list-title {
@@ -58,6 +57,8 @@
 
 /* Keep editable fields above the mobile focus-zoom threshold. */
 @media (max-width: 760px), (hover: none) and (pointer: coarse) {
+  .composer textarea,
+  .session-search input,
   .config-dashboard input,
   .config-dashboard select,
   .config-dashboard textarea,
@@ -73,6 +74,7 @@
 @media (max-width: 760px) {
   :root {
     --mobile-rail-height: 68px;
+    --workspace-page-gutter: 14px;
   }
 
   .app-shell,
@@ -100,9 +102,9 @@
     min-height: var(--mobile-rail-height);
     padding: 7px max(10px, env(safe-area-inset-right))
       max(7px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
-    border-top: 1px solid rgba(116, 166, 216, 0.18);
+    border-top: 1px solid var(--line);
     border-right: 0;
-    background: rgba(7, 20, 33, 0.96);
+    background: var(--panel);
     box-shadow: 0 -14px 34px rgba(0, 7, 18, 0.22);
     backdrop-filter: blur(20px);
   }
@@ -111,6 +113,7 @@
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .workspace-brand,
   .rail-spacer,
   .rail-runtime {
     display: none;
@@ -138,16 +141,16 @@
   }
 
   .workspace-rail button.rail-button {
-    display: grid;
-    grid-template-rows: 22px minmax(1.125rem, auto);
-    gap: 1px;
-    place-items: center;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    justify-content: center;
     width: 100%;
     min-width: 0;
     min-height: 52px;
-    padding: 5px 4px 4px;
+    padding: 8px 10px;
     border: 0;
-    border-radius: 11px;
+    border-radius: 8px;
   }
 
   .rail-button svg {
@@ -320,7 +323,7 @@
 
   .workspace-page-header {
     min-height: 66px;
-    padding: 11px 14px;
+    padding: 11px var(--workspace-page-gutter);
   }
 
   .workspace-page-heading h2 {
@@ -328,7 +331,7 @@
   }
 
   .workspace-page-body {
-    padding: 16px 14px 42px;
+    padding: 16px var(--workspace-page-gutter) 42px;
   }
 
   .config-summary {
@@ -364,7 +367,7 @@
 
 @media (max-width: 620px) {
   .config-workspace-body {
-    padding: 12px 10px 34px;
+    padding: 12px var(--workspace-page-gutter) 34px;
   }
 
   .config-dashboard {

package/dist/src/web-ui/app/styles/91-schedules-responsive.css

@@ -1,12 +1,17 @@
 @media (max-width: 1000px) {
   .schedules-layout {
-    grid-template-columns: minmax(230px, 0.8fr) minmax(300px, 1.2fr);
+    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
     gap: 14px;
   }
   .schedule-details {
     padding: 18px;
   }
 }
+@media (max-width: 980px) {
+  .schedules-content {
+    padding: 22px;
+  }
+}
 @media (max-width: 760px) {
   .app-shell .workspace-rail {
     grid-template-columns: repeat(5, minmax(0, 1fr));
@@ -40,11 +45,12 @@
     grid-template-columns: 1fr;
   }
   .schedules-list {
-    max-height: 230px;
+    max-height: 260px;
     overflow: auto;
+    scroll-padding-block: 4px;
   }
-  .schedules-workspace-body {
-    padding: 16px 14px 32px;
+  .schedules-content {
+    padding: 20px;
   }
   .schedule-form-grid {
     grid-template-columns: 1fr;
@@ -70,3 +76,8 @@
     font-size: 1.15rem;
   }
 }
+@media (max-width: 620px) {
+  .schedules-content {
+    border-radius: 8px;
+  }
+}

package/dist/src/web-ui/app/styles/92-dashboard-responsive.css

@@ -1,11 +1,5 @@
 /* Home dashboard and navigation at narrow widths. */
 
-@media (max-width: 1000px) {
-  .home-shortcuts {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
 @media (max-width: 760px) {
   .home-workspace-panel {
     grid-column: 1;
@@ -13,8 +7,8 @@
   }
 
   .home-workspace-header {
-    min-height: 52px;
-    padding: 8px 16px;
+    min-height: 86px;
+    padding: 14px var(--workspace-page-gutter);
   }
 
   .app-shell .workspace-rail,
@@ -22,7 +16,9 @@
   .app-shell.schedules-workspace .workspace-rail {
     grid-template-columns: none;
     grid-auto-flow: column;
-    grid-auto-columns: minmax(0, 1fr);
+    grid-auto-columns: minmax(112px, 1fr);
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .workspace-rail #homeWorkspaceButton,
@@ -30,31 +26,38 @@
   .workspace-rail #newSessionButton,
   .workspace-rail #sessionsToggleButton,
   .workspace-rail #schedulesWorkspaceButton,
+  .workspace-rail #memoryWorkspaceButton,
+  .workspace-rail #learningWorkspaceButton,
   .workspace-rail #configWorkspaceButton {
     order: 0;
   }
 
   .home-workspace-body {
-    gap: 24px;
-    padding: 22px 16px 18px;
+    gap: 12px;
+    padding: 16px var(--workspace-page-gutter) 20px;
+  }
+
+  .home-workspace-content {
+    gap: 12px;
   }
 
   .home-overview {
     grid-template-columns: minmax(0, 1fr);
-    gap: 16px;
+    gap: 0;
   }
 
-  .home-panel-rows {
-    max-height: 300px;
+  .home-overview > .home-panel + .home-panel {
+    border-inline-start: 0;
+    border-top: 1px solid var(--line);
   }
 
-  .home-panel-empty {
-    min-height: 160px;
+  .home-panel-rows {
+    max-height: none;
+    overflow: visible;
   }
 
-  .home-shortcut {
-    gap: 9px;
-    padding: 12px;
+  .home-panel-empty {
+    min-height: 128px;
   }
 
   .home-panel-header,
@@ -64,10 +67,6 @@
 }
 
 @media (max-width: 400px) {
-  .home-workspace-body {
-    padding-inline: 10px;
-  }
-
   .home-panel-header,
   .home-panel-footer {
     flex-wrap: wrap;
@@ -82,7 +81,4 @@
     padding-top: 0;
   }
 
-  .home-shortcut {
-    align-items: flex-start;
-  }
 }

package/dist/src/web-ui/app/styles/93-compact-viewport.css

@@ -0,0 +1,21 @@
+/* Keep composer actions in view when little vertical space is available. */
+@media (max-height: 600px) {
+  .composer textarea {
+    max-height: clamp(42px, 16dvh, 96px);
+  }
+
+  .attachment-preview {
+    max-height: clamp(32px, 10dvh, 60px);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
+
+  .home-workspace-body {
+    gap: 8px;
+    padding-block: 8px;
+  }
+
+  .home-composer-note {
+    display: none;
+  }
+}

package/dist/src/web-ui/app/styles/94-automations-responsive.css

@@ -0,0 +1,35 @@
+@media (max-width: 1100px) {
+  .automation-editor-layout { grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); gap: 12px; }
+  .automation-node { padding: 10px; }
+}
+@media (max-width: 960px) {
+  .automation-editor-layout { grid-template-columns: minmax(0, 1fr); }
+  .automation-canvas { order: 1; }
+  .automation-editor-sidebar { order: 2; }
+  .automation-run-layout { grid-template-columns: minmax(0, 1fr); }
+  .automation-palette-item { display: inline-block; width: auto; min-width: 130px; margin-right: 12px; }
+}
+@media (max-width: 600px) {
+  .automation-report-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .automation-report-stats > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; }
+  .automation-run-report { padding: 16px; }
+  .automation-recorded-targets li, .automation-step-effects .automation-recorded-targets li { grid-template-columns: minmax(0, 1fr); }
+  .automation-heading, .automation-toolbar { align-items: stretch; flex-direction: column; }
+  .automation-heading-actions { justify-items: start; }
+  .automation-actions { justify-content: flex-start; }
+  .automation-top-fields { grid-template-columns: minmax(0, 1fr); }
+  .automation-trigger-fields, .automation-source-fields, .automation-limit-fields { grid-template-columns: minmax(0, 1fr); }
+  .automation-sequence-item { grid-template-columns: minmax(0, 1fr); }
+  .automation-sequence-item > .automation-node { grid-column: 1 !important; justify-self: stretch !important; width: 100%; }
+  .automation-sequence-item > .automation-inline-inspector-frame { grid-column: 1 !important; justify-self: stretch !important; width: 100%; }
+  .automation-sequence-item > .automation-node::after { display: none; }
+  .automation-branches { --automation-branch-gap: 10px; }
+  .automation-branch-label { text-align: center; }
+  .automation-chat-run-panel { padding: 16px 12px; }
+  .automations-workspace-body input, .automations-workspace-body select, .automations-workspace-body textarea { font-size: max(16px, 1rem); }
+}
+@media (prefers-reduced-motion: reduce) {
+  .automation-node[data-state="running"]::before, .automation-connector[data-active="true"] { animation: none; }
+  .automation-inline-inspector-frame { animation: none; }
+  .automations-workspace-body button, .automation-chat-run-panel button { transition: none; }
+}

package/dist/src/web-ui/app/styles/foundation.css

@@ -1,40 +1,4 @@
-/* Shared tokens, reset, and native control primitives ----------------------- */
-
-:root {
-  color-scheme: dark;
-  --bg: #07080a;
-  --panel: rgba(21, 22, 26, 0.86);
-  --panel-solid: #15161a;
-  --panel-raised: rgba(31, 33, 39, 0.9);
-  --panel-soft: rgba(255, 255, 255, 0.055);
-  --text: #f5f7fb;
-  --text-strong: #ffffff;
-  --muted: #a1a7b3;
-  --muted-2: #747b88;
-  --line: rgba(255, 255, 255, 0.11);
-  --line-strong: rgba(255, 255, 255, 0.18);
-  --accent: #0a84ff;
-  --accent-strong: #409cff;
-  --accent-soft: rgba(10, 132, 255, 0.18);
-  --control-bg: rgba(255, 255, 255, 0.064);
-  --control-bg-hover: rgba(255, 255, 255, 0.096);
-  --control-fill: rgba(255, 255, 255, 0.068);
-  --green: #32d74b;
-  --amber: #ffd60a;
-  --danger: #ff453a;
-  --shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
-  --font-ui:
-    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
-    "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
-  --font-display:
-    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
-    "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
-  --font-mono:
-    "SFMono-Regular", "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas,
-    "Liberation Mono", monospace;
-  --sessions-panel-width: 292px;
-  --chat-content-width: 920px;
-}
+/* Shared reset and native control primitives ----------------------- */
 
 * {
   box-sizing: border-box;
@@ -48,9 +12,6 @@ body {
 
 body {
   margin: 0;
-  background: #07080a;
-  color: var(--text);
-  font-family: var(--font-ui);
   letter-spacing: 0;
   -webkit-font-smoothing: antialiased;
   text-rendering: geometricPrecision;
@@ -61,20 +22,8 @@ input,
 select,
 textarea {
   font: inherit;
-}
-
-button,
-input,
-select,
-textarea {
   border: 1px solid var(--line);
-  border-radius: 8px;
-  background: var(--control-fill);
-  color: var(--text);
   outline: none;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.055),
-    0 1px 1px rgba(0, 0, 0, 0.16);
 }
 
 button,
@@ -91,22 +40,7 @@ textarea {
 button {
   padding: 0 10px;
   cursor: pointer;
-  font-weight: 590;
   letter-spacing: 0;
-  transition:
-    transform 140ms ease,
-    border-color 140ms ease,
-    background 140ms ease,
-    box-shadow 140ms ease;
-}
-
-button:hover {
-  border-color: var(--line-strong);
-  background: var(--control-bg-hover);
-}
-
-button:active {
-  transform: scale(0.985);
 }
 
 button:disabled {
@@ -115,25 +49,10 @@ button:disabled {
   transform: none;
 }
 
-button:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  border-color: rgba(10, 132, 255, 0.72);
-  box-shadow:
-    0 0 0 3px rgba(10, 132, 255, 0.2),
-    inset 0 1px 0 rgba(255, 255, 255, 0.075);
-}
-
 select {
   padding: 0 30px 0 11px;
   appearance: none;
-  font-weight: 560;
-  background:
-    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 15px)
-      14px / 5px 5px no-repeat,
-    linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 10px)
-      14px / 5px 5px no-repeat,
-    var(--control-fill);
+  font-weight: 400;
 }
 
 h1,
@@ -148,16 +67,8 @@ pre {
   font-family: var(--font-mono);
 }
 
-select:focus,
-textarea:focus {
-  border-color: rgba(10, 132, 255, 0.72);
-  box-shadow:
-    0 0 0 3px rgba(10, 132, 255, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.05);
-}
-
 select option {
-  background: #0f2033;
+  background: var(--panel-raised);
   color: var(--text);
 }