codexmate 0.0.56 → 0.1.1

package/web-ui/styles/task-orchestration.css

@@ -528,9 +528,6 @@
     box-sizing: border-box;
 }
 
-.task-action-preview {
-    min-width: 104px;
-}
 
 .task-action-row-right {
     display: flex;
@@ -779,9 +776,71 @@
     line-height: 1.55;
 }
 
+.task-node-output-card {
+    margin-top: 12px;
+    padding: 12px;
+    border-radius: 16px;
+    border: 1px solid rgba(100, 116, 139, 0.16);
+    background: #F8FAFC;
+}
+
+.task-node-output-head,
+.task-node-output-facts {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.task-node-output-head strong {
+    font-size: 13px;
+    color: var(--color-text-primary);
+}
+
+.task-node-output-meta,
+.task-node-output-facts,
+.task-materialized-file {
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--color-text-secondary);
+}
+
+.task-node-output-facts {
+    justify-content: flex-start;
+    margin-top: 6px;
+}
+
+.task-output-block {
+    max-height: 260px;
+    min-height: 96px;
+    overflow: auto;
+    background: #FFFFFF;
+}
+
+.task-materialized-files {
+    margin-top: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.task-workspace-files {
+    padding: 10px;
+    border: 1px solid rgba(199, 116, 98, 0.2);
+    border-radius: 14px;
+    background: #FFFDFC;
+}
+
+.task-workspace-files .task-node-deps {
+    color: var(--color-brand-dark);
+    font-weight: 800;
+}
+
 @media (max-width: 1200px) {
     .task-layout-grid-primary,
-    .task-layout-grid-secondary {
+    .task-layout-grid-secondary,
+    .task-chat-context-row-primary {
         grid-template-columns: 1fr;
     }
 }
@@ -820,3 +879,2101 @@
         flex-wrap: wrap;
     }
 }
+
+.task-quick-layout {
+    margin-bottom: 18px;
+}
+
+.task-quick-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
+    gap: 18px;
+    align-items: stretch;
+}
+
+.task-quick-main {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.task-quick-copy {
+    max-width: 780px;
+}
+
+.task-quick-title {
+    font-size: clamp(22px, 2vw, 30px);
+    line-height: 1.18;
+}
+
+.task-quick-input-card {
+    padding: 18px;
+    border-radius: 22px;
+    border: 1px solid var(--color-border-soft);
+    background: #F8FAFC;
+    box-shadow: var(--shadow-subtle);
+}
+
+.task-quick-target-field {
+    display: block;
+}
+
+.task-chat-composer .selector-label {
+    font-size: 12px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+.task-quick-target {
+    min-height: 88px;
+    border-radius: 18px;
+    background: var(--color-surface);
+    font-size: 15px;
+}
+
+
+.task-chat-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.task-chat-thread {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    max-height: 420px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+    padding: 12px;
+    border-radius: 20px;
+    border: 1px solid var(--color-border-soft);
+    background: rgba(255, 255, 255, 0.74);
+    transition: scrollbar-color 0.16s ease;
+}
+
+.task-chat-thread:hover,
+.task-chat-thread:focus-within {
+    scrollbar-color: rgba(100, 116, 139, 0.28) transparent;
+}
+
+.task-chat-thread::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+.task-chat-thread::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.task-chat-thread::-webkit-scrollbar-thumb {
+    border-radius: 999px;
+    background: transparent;
+}
+
+.task-chat-thread:hover::-webkit-scrollbar-thumb,
+.task-chat-thread:focus-within::-webkit-scrollbar-thumb {
+    background: rgba(100, 116, 139, 0.28);
+}
+
+.task-chat-thread::-webkit-scrollbar-thumb:hover {
+    background: rgba(100, 116, 139, 0.42);
+}
+
+.task-chat-bubble-row {
+    display: flex;
+    width: 100%;
+}
+
+.task-chat-bubble-row.is-assistant {
+    justify-content: flex-start;
+}
+
+.task-chat-bubble-row.is-user {
+    justify-content: flex-end;
+}
+
+.task-chat-bubble {
+    max-width: min(76%, 680px);
+    padding: 11px 13px;
+    border-radius: 18px;
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface);
+    box-shadow: 0 8px 24px rgba(36, 24, 20, 0.06);
+}
+
+.task-chat-bubble-row.is-user .task-chat-bubble {
+    border-color: rgba(199, 116, 98, 0.28);
+    background: var(--color-brand-light);
+    color: var(--color-brand-dark);
+    border-bottom-right-radius: 6px;
+}
+
+.task-chat-bubble-row.is-assistant .task-chat-bubble {
+    border-bottom-left-radius: 6px;
+}
+
+.task-chat-bubble-label {
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--color-text-muted);
+    margin-bottom: 5px;
+}
+
+.task-chat-bubble-text {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--color-text-primary);
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+}
+
+.task-chat-bubble-row.is-user .task-chat-bubble-text,
+.task-chat-bubble-row.is-user .task-chat-bubble-label,
+.task-chat-bubble-row.is-user .task-chat-bubble-meta {
+    color: var(--color-brand-dark);
+}
+
+.task-chat-bubble-meta {
+    margin-top: 6px;
+    font-size: 11px;
+    line-height: 1.45;
+    color: var(--color-text-secondary);
+}
+
+.task-chat-send-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+}
+
+.task-chat-action-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.task-chat-primary-action {
+    flex: 1 1 180px;
+    display: grid;
+    place-items: center;
+    align-self: stretch;
+}
+
+.task-chat-primary-button {
+    min-width: 168px;
+    min-height: 44px;
+    justify-content: center;
+    font-weight: 800;
+}
+
+.task-chat-execute-caption {
+    margin-top: 8px;
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    line-height: 1.45;
+}
+
+.task-chat-context-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 12px;
+}
+
+.task-chat-context-row-primary {
+    display: grid;
+    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 0.8fr) repeat(3, minmax(96px, auto));
+    align-items: stretch;
+    padding: 10px;
+    border: 1px solid rgba(199, 116, 98, 0.18);
+    border-radius: 18px;
+    background: #FFFFFF;
+}
+
+.task-chat-context-chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 30px;
+    max-width: 100%;
+    padding: 0 10px;
+    border-radius: 999px;
+    border: 1px solid rgba(199, 116, 98, 0.18);
+    background: rgba(255, 255, 255, 0.68);
+    color: var(--color-text-secondary);
+    font-size: 12px;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-chat-context-chip-strong {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    gap: 2px;
+    min-height: 42px;
+    border-radius: 14px;
+    background: #FFFDFC;
+    color: var(--color-text-primary);
+    white-space: normal;
+}
+
+.task-chat-context-chip-strong small {
+    color: var(--color-text-muted);
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.task-chat-context-chip-strong strong {
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    font-size: 12px;
+    line-height: 1.35;
+}
+
+.task-chat-context-action {
+    cursor: pointer;
+    font: inherit;
+}
+
+.task-chat-context-action:hover,
+.task-chat-context-action:focus-visible {
+    border-color: rgba(199, 116, 98, 0.38);
+    color: var(--color-brand-dark);
+    outline: none;
+}
+
+.task-quick-readiness {
+    margin-top: 14px;
+    background: rgba(255, 255, 255, 0.58);
+}
+
+.task-quick-template-block {
+    padding: 14px;
+}
+
+.task-quick-template-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 10px;
+    margin-top: 10px;
+}
+
+.task-quick-template-card {
+    min-width: 0;
+    padding: 14px;
+    border-radius: 16px;
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface);
+    color: var(--color-text-primary);
+    text-align: left;
+    cursor: pointer;
+    transition:
+        transform var(--transition-fast) var(--ease-smooth),
+        border-color var(--transition-fast) var(--ease-smooth),
+        box-shadow var(--transition-fast) var(--ease-smooth),
+        background var(--transition-fast) var(--ease-smooth);
+}
+
+.task-quick-template-card:hover {
+    transform: translateY(-1px);
+    border-color: rgba(199, 116, 98, 0.34);
+    background: var(--color-brand-light);
+    box-shadow: var(--shadow-subtle);
+}
+
+.task-quick-template-card strong,
+.task-quick-template-card span {
+    display: block;
+}
+
+.task-quick-template-card strong {
+    font-size: 13px;
+    color: var(--color-text-primary);
+}
+
+.task-quick-template-card span {
+    margin-top: 6px;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--color-text-secondary);
+}
+
+.task-quick-advanced {
+    margin-top: 0;
+}
+
+.task-quick-side-card {
+    min-width: 0;
+    padding: 16px;
+    border-radius: 20px;
+    border: 1px solid var(--color-border-soft);
+    background: var(--color-surface-alt);
+    box-shadow: var(--shadow-subtle);
+}
+
+.task-provider-status-card {
+    margin-bottom: 14px;
+    padding: 14px;
+    border-radius: 16px;
+    border: 1px solid rgba(100, 116, 139, 0.16);
+    background: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.task-provider-status-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+}
+
+.task-provider-status-row {
+    min-width: 0;
+    padding: 9px 10px;
+    border-radius: 12px;
+    background: #F8FAFC;
+    border: 1px solid rgba(100, 116, 139, 0.10);
+}
+
+.task-provider-status-row-wide {
+    grid-column: 1 / -1;
+}
+
+.task-provider-status-row span,
+.task-provider-status-row strong {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.task-provider-status-row span {
+    font-size: 11px;
+    color: var(--color-text-muted);
+}
+
+.task-provider-status-row strong {
+    margin-top: 3px;
+    font-size: 12px;
+    color: var(--color-text-primary);
+}
+
+.task-provider-status-error {
+    margin: 0;
+}
+
+.task-provider-config-button {
+    align-self: flex-start;
+}
+
+.task-quick-checklist {
+    grid-template-columns: 1fr;
+}
+
+.task-quick-status-card {
+    margin-top: 14px;
+    padding: 14px;
+    border-radius: 16px;
+    border: 1px solid rgba(199, 116, 98, 0.18);
+    background: var(--color-surface);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.task-quick-status-card strong {
+    color: var(--color-text-primary);
+}
+
+.task-quick-status-card span {
+    font-size: 12px;
+    line-height: 1.55;
+    color: var(--color-text-secondary);
+}
+
+@media (max-width: 1200px) {
+    .task-quick-card {
+        grid-template-columns: 1fr;
+    }
+
+    .task-quick-checklist {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 720px) {
+    .task-quick-template-grid,
+    .task-quick-checklist {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Codex-style orchestration simplification: keep the chat thread as the main surface. */
+#panel-orchestration {
+    --task-orchestration-main-width: 1200px;
+    --task-orchestration-context-width: 260px;
+}
+
+#panel-orchestration .task-hero-card {
+    max-width: var(--task-orchestration-main-width);
+    margin: -4px auto 14px;
+    padding: 16px 18px;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-hero-main {
+    align-items: center;
+}
+
+#panel-orchestration .task-hero-copy,
+#panel-orchestration .task-hero-meta-strip,
+#panel-orchestration .task-quick-copy,
+#panel-orchestration .task-template-block,
+#panel-orchestration .task-stage-card {
+    display: none;
+}
+
+#panel-orchestration .task-layout-grid-primary,
+#panel-orchestration .task-layout-grid-secondary {
+    max-width: var(--task-orchestration-main-width);
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#panel-orchestration .task-quick-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--task-orchestration-context-width);
+    gap: 14px;
+    align-items: start;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-quick-main {
+    display: block;
+    min-width: 0;
+}
+
+#panel-orchestration {
+    min-height: calc(100vh - 96px);
+}
+
+#panel-orchestration .task-hero-card {
+    padding: 10px 14px;
+    border-radius: 16px;
+    background: rgba(255, 255, 255, 0.62);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-hero-main {
+    align-items: center;
+    gap: 12px;
+}
+
+#panel-orchestration .task-hero-card .selector-title {
+    font-size: 1rem;
+    line-height: 1.25;
+}
+
+#panel-orchestration .task-hero-card .task-hero-copy,
+#panel-orchestration .task-hero-card .task-hero-kicker {
+    display: none;
+}
+
+#panel-orchestration .task-quick-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) var(--task-orchestration-context-width);
+    gap: 14px;
+    align-items: start;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-quick-main {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    min-width: 0;
+}
+
+#panel-orchestration .task-chat-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    height: min(780px, calc(100vh - 170px));
+    min-height: 620px;
+    margin: 0;
+    padding: 12px;
+    overflow: hidden;
+    border: 1px solid rgba(199, 116, 98, 0.16);
+    border-radius: 22px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 252, 248, 0.7)),
+        rgba(255, 255, 255, 0.6);
+    box-shadow: 0 18px 52px rgba(86, 58, 39, 0.08);
+}
+
+#panel-orchestration .task-chat-thread {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
+    margin: 0;
+    padding: 10px 8px 16px;
+    gap: 12px;
+    overflow-y: auto;
+    border: 0;
+    background: transparent;
+}
+
+#panel-orchestration .task-thread-message-card {
+    position: relative;
+    align-self: flex-start;
+    width: min(100%, 760px);
+    margin: 2px 0 4px 44px;
+    padding: 14px;
+    border: 1px solid rgba(199, 116, 98, 0.18);
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.84);
+    box-shadow: 0 12px 30px rgba(86, 58, 39, 0.09);
+}
+
+#panel-orchestration .task-thread-message-card::before {
+    content: 'AI';
+    position: absolute;
+    left: -40px;
+    top: 12px;
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--color-brand-light);
+    color: var(--color-brand-dark);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+}
+
+#panel-orchestration .task-thread-message-card .selector-header {
+    margin-bottom: 10px;
+}
+
+#panel-orchestration .task-thread-message-card .selector-title {
+    font-size: 0.98rem;
+}
+
+#panel-orchestration .task-thread-message-card .skills-panel-note {
+    font-size: 0.82rem;
+}
+
+#panel-orchestration .task-thread-composer {
+    flex: 0 0 auto;
+    position: sticky;
+    bottom: 0;
+    z-index: 2;
+    width: min(100%, 800px);
+    align-self: center;
+    margin-top: 0;
+    padding: 10px;
+    border: 1px solid rgba(199, 116, 98, 0.18);
+    border-radius: 18px 18px 20px 20px;
+    background: rgba(255, 255, 255, 0.96);
+    box-shadow: 0 -10px 34px rgba(86, 58, 39, 0.13);
+}
+
+#panel-orchestration .task-thread-composer .selector-label {
+    font-size: 0.78rem;
+}
+
+#panel-orchestration .task-thread-composer .task-textarea-goal {
+    min-height: 76px;
+    resize: vertical;
+    border: 0;
+    border-radius: 12px;
+    background: rgba(255, 248, 241, 0.48);
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 15px;
+    line-height: 1.55;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-composer .task-textarea-goal:focus {
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-composer .task-chat-send-row,
+#panel-orchestration .task-thread-composer .task-chat-context-row,
+#panel-orchestration .task-thread-composer .task-draft-inline,
+#panel-orchestration .task-thread-composer .task-action-row-prominent {
+    margin-top: 8px;
+}
+
+#panel-orchestration .task-thread-composer .task-draft-inline {
+    padding: 8px 10px;
+    border-radius: 14px;
+    background: rgba(255, 248, 241, 0.58);
+}
+
+#panel-orchestration .task-thread-composer .task-action-row-prominent {
+    padding-top: 0;
+    border-top: 1px solid rgba(199, 116, 98, 0.12);
+}
+
+#panel-orchestration .task-thread-composer .task-action-row-right {
+    margin-left: auto;
+}
+
+#panel-orchestration .task-thread-composer .task-field-hint {
+    font-size: 0.75rem;
+}
+
+#panel-orchestration .task-plan-summary-strip,
+#panel-orchestration .task-wave-list,
+#panel-orchestration .task-node-list,
+#panel-orchestration .task-runtime-list {
+    gap: 8px;
+}
+
+#panel-orchestration .task-quick-advanced {
+    margin-top: 8px;
+    border: 1px solid rgba(148, 163, 184, 0.14);
+    background: rgba(255, 255, 255, 0.46);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-codex-queue-action {
+    justify-content: flex-start;
+    margin: 0 0 12px;
+}
+
+#panel-orchestration .task-quick-side-card {
+    position: sticky;
+    top: 14px;
+    padding: 12px;
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.42);
+    opacity: 0.82;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-provider-status-card,
+#panel-orchestration .task-quick-status-card,
+#panel-orchestration .task-quick-side-card .task-readiness-item {
+    background: rgba(255, 255, 255, 0.48);
+    border-color: rgba(148, 163, 184, 0.16);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-provider-status-card,
+#panel-orchestration .task-quick-status-card {
+    margin-bottom: 10px;
+    padding: 10px;
+    border-radius: 14px;
+}
+
+#panel-orchestration .task-provider-status-grid {
+    grid-template-columns: 1fr;
+    gap: 6px;
+}
+
+#panel-orchestration .task-provider-status-row {
+    padding: 7px 8px;
+    border-radius: 10px;
+    background: rgba(248, 250, 252, 0.62);
+}
+
+#panel-orchestration .task-provider-status-card .task-readiness-copy,
+#panel-orchestration .task-readiness-head .task-readiness-copy {
+    display: none;
+}
+
+#panel-orchestration .task-readiness-grid.task-quick-checklist {
+    grid-template-columns: 1fr;
+    gap: 7px;
+    margin-top: 8px;
+}
+
+#panel-orchestration .task-readiness-item {
+    padding: 9px 10px;
+    border-radius: 12px;
+}
+
+#panel-orchestration .task-quick-status-card {
+    margin-top: 10px;
+}
+
+@media (max-width: 1180px) {
+    #panel-orchestration .task-quick-card {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    #panel-orchestration .task-thread-message-card {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    #panel-orchestration .task-thread-message-card::before {
+        display: none;
+    }
+
+    #panel-orchestration .task-quick-side-card {
+        position: static;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 10px;
+    }
+
+    #panel-orchestration .task-provider-status-card,
+    #panel-orchestration .task-quick-status-card {
+        margin-bottom: 0;
+    }
+}
+
+@media (max-width: 760px) {
+    #panel-orchestration .task-hero-main,
+    #panel-orchestration .task-action-row-prominent,
+    #panel-orchestration .task-action-row-prominent .task-action-row-right {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    #panel-orchestration .task-action-row-prominent .btn-tool,
+    #panel-orchestration .task-action-row-prominent .task-action-row-right {
+        width: 100%;
+    }
+
+    #panel-orchestration .task-quick-side-card,
+    #panel-orchestration .task-template-block,
+    #panel-orchestration .task-quick-copy,
+    #panel-orchestration .task-stage-card {
+        display: none;
+    }
+
+    #panel-orchestration .task-chat-panel {
+        height: calc(100vh - 126px);
+        min-height: 620px;
+        padding: 10px;
+        border-radius: 18px;
+    }
+
+    #panel-orchestration .task-chat-thread {
+        padding: 10px 6px 14px;
+    }
+
+    #panel-orchestration .task-thread-message-card {
+        padding: 12px;
+        border-radius: 18px;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        width: 100%;
+        padding: 8px;
+        border-radius: 16px;
+        box-shadow: 0 -8px 26px rgba(86, 58, 39, 0.12);
+    }
+
+    #panel-orchestration .task-thread-composer .task-textarea-goal {
+        min-height: 56px;
+        max-height: 120px;
+    }
+
+    #panel-orchestration .task-thread-composer .task-chat-context-row,
+    #panel-orchestration .task-thread-composer .task-draft-inline,
+    #panel-orchestration .task-thread-composer .task-action-caption,
+    #panel-orchestration .task-thread-composer .task-field-hint {
+        display: none;
+    }
+
+    #panel-orchestration .task-thread-composer .task-chat-send-row,
+    #panel-orchestration .task-thread-composer .task-action-row-prominent {
+        margin-top: 6px;
+    }
+
+    #panel-orchestration .task-thread-composer .btn-tool {
+        min-height: 34px;
+        padding: 0 12px;
+        font-size: 0.78rem;
+    }
+}
+
+/* Codex-style transcript final pass: the task flow is a chat, not a dashboard. */
+#panel-orchestration {
+    --task-orchestration-main-width: 920px;
+    --task-orchestration-context-width: 0px;
+
+    min-height: calc(100vh - 72px);
+    padding-bottom: 188px;
+}
+
+#panel-orchestration .task-hero-card,
+#panel-orchestration .task-quick-copy,
+#panel-orchestration .task-stage-card {
+    display: none;
+}
+
+#panel-orchestration .task-layout-grid,
+#panel-orchestration .task-layout-grid-primary,
+#panel-orchestration .task-layout-grid-secondary,
+#panel-orchestration .task-quick-card {
+    max-width: var(--task-orchestration-main-width);
+    width: min(100%, var(--task-orchestration-main-width));
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#panel-orchestration .task-layout-grid {
+    gap: 0;
+    margin-bottom: 0;
+}
+
+#panel-orchestration .task-quick-card {
+    display: block;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-quick-main {
+    display: block;
+    min-width: 0;
+}
+
+#panel-orchestration .task-template-block {
+    display: block;
+}
+
+#panel-orchestration .task-chat-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    height: auto;
+    min-height: 0;
+    margin: 0 auto;
+    padding: 0;
+    overflow: visible;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-chat-thread {
+    flex: 0 0 auto;
+    min-height: 0;
+    max-height: none;
+    margin: 0;
+    padding: 8px 8px 188px;
+    gap: 7px;
+    overflow: visible;
+    border: 0;
+    background: transparent;
+    scroll-padding-bottom: 188px;
+}
+
+#panel-orchestration .task-chat-bubble-row {
+    position: relative;
+    justify-content: flex-start;
+    gap: 8px;
+    margin: 0;
+    padding: 1px 0 6px 28px;
+}
+
+#panel-orchestration .task-chat-bubble-row::before {
+    content: '•';
+    position: absolute;
+    top: 4px;
+    left: 8px;
+    color: #64748B;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 1;
+}
+
+#panel-orchestration .task-chat-bubble-row.is-user::before {
+    content: '›';
+    top: 2px;
+    color: #2563EB;
+    font-size: 20px;
+}
+
+#panel-orchestration .task-chat-bubble {
+    max-width: min(100%, 760px);
+    padding: 0 0 5px;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-chat-bubble-row.is-user .task-chat-bubble,
+#panel-orchestration .task-chat-bubble-row.is-assistant .task-chat-bubble {
+    border-radius: 0;
+    background: transparent;
+}
+
+#panel-orchestration .task-chat-bubble-label {
+    margin-bottom: 3px;
+    color: #64748B;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 10px;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+
+#panel-orchestration .task-chat-bubble-text {
+    color: #0F172A;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+#panel-orchestration .task-chat-bubble-meta {
+    margin-top: 5px;
+    color: #64748B;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+}
+
+#panel-orchestration .task-thread-plan-request {
+    margin-top: 2px;
+}
+
+#panel-orchestration .task-thread-plan-request .task-chat-bubble {
+    max-width: min(100%, 760px);
+}
+
+#panel-orchestration .task-thread-message-card {
+    position: relative;
+    align-self: flex-start;
+    width: min(100%, 660px);
+    margin: 0 0 2px 34px;
+    padding: 8px 10px;
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-left: 3px solid rgba(199, 116, 98, 0.32);
+    border-radius: 14px 14px 14px 5px;
+    background: rgba(255, 255, 255, 0.50);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-message-card::before {
+    content: 'AI';
+    position: absolute;
+    left: -34px;
+    top: 8px;
+    display: grid;
+    width: 24px;
+    height: 24px;
+    place-items: center;
+    border-radius: 999px;
+    background: var(--color-brand-light);
+    color: var(--color-brand-dark);
+    font-size: 9px;
+    font-weight: 800;
+    letter-spacing: 0.04em;
+}
+
+#panel-orchestration .task-thread-card-label {
+    margin-bottom: 6px;
+    color: var(--color-text-secondary);
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.07em;
+    text-transform: uppercase;
+}
+
+#panel-orchestration .task-thread-message-card .selector-header {
+    margin-bottom: 6px;
+    padding-bottom: 0;
+    border-bottom: 0;
+}
+
+#panel-orchestration .task-thread-message-card .selector-title {
+    font-size: 0.9rem;
+    line-height: 1.2;
+}
+
+#panel-orchestration .task-side-settings-card .task-advanced-summary {
+    margin: 0 0 8px;
+    color: var(--color-text-primary);
+    font-size: 0.86rem;
+    font-weight: 750;
+}
+
+#panel-orchestration .task-side-settings-card:not([open]) {
+    padding: 8px 10px;
+}
+
+#panel-orchestration .task-side-settings-card .selector-grid {
+    margin-top: 8px;
+}
+
+#panel-orchestration .task-side-settings-card .task-codex-queue-action {
+    justify-content: flex-start;
+    margin: 8px 0 0;
+}
+
+#panel-orchestration .task-thread-message-card .skills-panel-note {
+    font-size: 0.76rem;
+    line-height: 1.45;
+}
+
+#panel-orchestration .task-thread-message-card .task-plan-summary-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 5px;
+}
+
+#panel-orchestration .task-thread-message-card .task-plan-summary-item {
+    min-width: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-message-card .task-plan-summary-label {
+    font-size: 9px;
+}
+
+#panel-orchestration .task-thread-plan-card .task-wave-list,
+#panel-orchestration .task-runtime-list {
+    gap: 5px;
+    margin-top: 7px;
+}
+
+#panel-orchestration .task-thread-plan-card .task-wave-list {
+    display: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-node-list {
+    display: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-plan-summary-item:nth-child(n+3) {
+    display: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-wave-card,
+#panel-orchestration .task-thread-plan-card .task-node-card,
+#panel-orchestration .task-thread-message-card .task-runtime-item {
+    padding: 4px 0;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-wave-nodes,
+#panel-orchestration .task-thread-plan-card .task-node-meta,
+#panel-orchestration .task-thread-plan-card .task-node-deps {
+    display: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-node-head {
+    align-items: center;
+}
+
+#panel-orchestration .task-thread-plan-card .pill {
+    padding: 3px 7px;
+    font-size: 10px;
+}
+
+#panel-orchestration .task-thread-plan-card .task-node-title,
+#panel-orchestration .task-thread-plan-card .task-wave-title,
+#panel-orchestration .task-thread-message-card .task-runtime-item-title {
+    font-size: 0.8rem;
+    font-weight: 650;
+}
+
+#panel-orchestration .task-thread-message-card .task-runtime-item-meta {
+    font-size: 0.72rem;
+    line-height: 1.4;
+}
+
+#panel-orchestration .task-side-workbench-card,
+#panel-orchestration .task-side-settings-card {
+    max-height: min(560px, calc(100vh - 220px));
+    margin-bottom: 8px;
+    overflow: auto;
+}
+
+#panel-orchestration .task-side-workbench-card .task-node-list {
+    max-height: 320px;
+    overflow: auto;
+    padding-right: 4px;
+}
+
+#panel-orchestration .task-quick-side-card {
+    width: min(100%, 660px);
+    margin: 8px auto 0;
+    padding: 10px 12px;
+    border: 1px solid rgba(148, 163, 184, 0.18);
+    border-left: 3px solid rgba(100, 116, 139, 0.24);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.42);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-quick-side-card .task-provider-status-card {
+    margin-bottom: 8px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+}
+
+#panel-orchestration .task-quick-side-card .task-readiness-head,
+#panel-orchestration .task-quick-side-card .task-readiness-grid,
+#panel-orchestration .task-quick-side-card .task-quick-status-card {
+    display: none;
+}
+
+#panel-orchestration .task-quick-side-card .task-provider-status-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+#panel-orchestration .task-thread-composer {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: stretch;
+    gap: 6px;
+    flex: 0 0 auto;
+    position: fixed;
+    right: 50%;
+    bottom: 16px;
+    z-index: 20;
+    width: min(872px, calc(100vw - 48px));
+    transform: translateX(50%);
+    margin-top: 0;
+    padding: 6px 8px;
+    border: 1px solid rgba(148, 163, 184, 0.20);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.13);
+}
+
+#panel-orchestration .task-thread-composer .selector-label,
+#panel-orchestration .task-thread-composer .task-chat-context-row,
+#panel-orchestration .task-thread-composer .task-draft-inline,
+#panel-orchestration .task-thread-composer .task-action-caption,
+#panel-orchestration .task-thread-composer .task-field-hint {
+    display: none;
+}
+
+#panel-orchestration .task-thread-composer .task-chat-composer {
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 8px;
+}
+
+#panel-orchestration .task-thread-composer .task-composer-prompt-glyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    padding-top: 7px;
+    color: #2563EB;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 22px;
+    font-weight: 800;
+    line-height: 1;
+}
+
+#panel-orchestration .task-thread-composer .task-textarea-goal {
+    min-height: 48px;
+    max-height: 92px;
+    padding: 8px 10px;
+    resize: vertical;
+    border: 0;
+    border-radius: 12px;
+    background: rgba(248, 250, 252, 0.66);
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 14px;
+    line-height: 1.35;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-composer .task-textarea-goal:focus {
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-composer .task-chat-send-row {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+    margin-top: 0;
+}
+
+#panel-orchestration .task-thread-composer .task-chat-execute-caption {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin: -1px 2px 0 28px;
+    color: #64748B;
+    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+    font-size: 11px;
+    line-height: 1.35;
+}
+
+#panel-orchestration .task-thread-composer .task-action-row-prominent {
+    grid-column: 2;
+    grid-row: 2;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 7px;
+    margin-top: 0;
+    padding-top: 0;
+    border-top: 0;
+}
+
+#panel-orchestration .task-thread-composer .task-action-row-right {
+    margin-left: 0;
+}
+
+#panel-orchestration .task-thread-composer .btn-tool {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 32px;
+    padding: 5px 10px;
+    font-size: 0.78rem;
+}
+
+@media (max-width: 760px) {
+    #panel-orchestration {
+        --task-orchestration-main-width: 100%;
+
+        min-height: calc(100vh - 52px);
+        padding-bottom: 208px;
+    }
+
+    #panel-orchestration .task-layout-grid,
+    #panel-orchestration .task-layout-grid-primary,
+    #panel-orchestration .task-layout-grid-secondary,
+    #panel-orchestration .task-quick-card {
+        width: 100%;
+        max-width: 100%;
+    }
+
+    #panel-orchestration .task-template-block,
+    #panel-orchestration .task-quick-advanced,
+    #panel-orchestration .task-quick-side-card {
+        display: block;
+    }
+
+    #panel-orchestration .task-chat-panel {
+        height: auto;
+        min-height: 0;
+    }
+
+    #panel-orchestration .task-chat-thread {
+        padding: 8px 4px 16px;
+        gap: 7px;
+        scroll-padding-bottom: 28px;
+    }
+
+    #panel-orchestration .task-chat-bubble,
+    #panel-orchestration .task-thread-plan-request .task-chat-bubble {
+        max-width: 92%;
+    }
+
+    #panel-orchestration .task-thread-message-card {
+        width: 100%;
+        margin-left: 0;
+        padding: 9px 10px;
+        border-radius: 15px;
+    }
+
+    #panel-orchestration .task-thread-message-card::before {
+        display: none;
+    }
+
+    #panel-orchestration .task-thread-message-card .task-plan-summary-item {
+        min-width: calc(50% - 4px);
+    }
+
+    #panel-orchestration .task-side-workbench-card {
+        max-height: calc(100vh - 190px);
+    }
+
+    #panel-orchestration .task-side-workbench-card .task-node-list {
+        max-height: 260px;
+    }
+
+    #panel-orchestration .task-chat-thread {
+        padding-bottom: 208px;
+        scroll-padding-bottom: 208px;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-rows: auto;
+        right: 10px;
+        bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+        left: 10px;
+        width: auto;
+        transform: none;
+        padding: 7px;
+        border-radius: 14px;
+        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
+    }
+
+    #panel-orchestration .task-thread-composer .task-chat-composer {
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    #panel-orchestration .task-thread-composer .task-chat-send-row {
+        grid-column: 2;
+        grid-row: 1;
+        align-self: center;
+    }
+
+    #panel-orchestration .task-thread-composer .task-action-row-prominent,
+    #panel-orchestration .task-thread-composer .task-action-row-prominent .task-action-row-right,
+    #panel-orchestration .task-thread-composer .task-action-row-prominent .btn-tool {
+        width: 100%;
+    }
+
+#panel-orchestration .task-thread-composer .task-textarea-goal {
+        min-height: 52px;
+        max-height: 118px;
+    }
+}
+
+/* Chat-alignment correction: keep the transcript clean while preserving a
+   separate side rail for settings, history, and run details. */
+#panel-orchestration {
+    padding-bottom: 240px;
+}
+
+#panel-orchestration .task-chat-thread {
+    padding-bottom: 240px;
+    scroll-padding-bottom: 240px;
+}
+
+#panel-orchestration .task-thread-message-card {
+    width: min(100%, 620px);
+    padding: 10px 12px;
+    border-color: rgba(148, 163, 184, 0.14);
+    border-left-color: rgba(199, 116, 98, 0.26);
+    background: rgba(255, 255, 255, 0.62);
+}
+
+#panel-orchestration .task-thread-plan-card,
+#panel-orchestration .task-side-workbench-card {
+    overflow: visible;
+    max-height: none;
+}
+
+#panel-orchestration .task-thread-message-card .selector-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+#panel-orchestration .task-thread-message-card .selector-title {
+    font-size: 0.86rem;
+}
+
+#panel-orchestration .task-thread-plan-card .skills-panel-note,
+#panel-orchestration .task-side-workbench-card .skills-panel-note {
+    display: none;
+}
+
+#panel-orchestration .task-thread-plan-card .task-plan-summary-strip,
+#panel-orchestration .task-side-workbench-card .task-detail-summary-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin: 6px 0 0;
+}
+
+#panel-orchestration .task-thread-plan-card .task-plan-summary-item,
+#panel-orchestration .task-side-workbench-card .task-plan-summary-item {
+    min-width: auto;
+    padding: 4px 7px;
+    border: 1px solid rgba(148, 163, 184, 0.12);
+    border-radius: 999px;
+    background: rgba(248, 250, 252, 0.60);
+}
+
+#panel-orchestration .task-thread-plan-card .task-plan-summary-label,
+#panel-orchestration .task-side-workbench-card .task-plan-summary-label {
+    display: inline;
+    margin-right: 4px;
+    color: var(--color-text-muted);
+    font-size: 9px;
+}
+
+#panel-orchestration .task-thread-plan-card .task-plan-summary-item strong,
+#panel-orchestration .task-side-workbench-card .task-plan-summary-item strong {
+    display: inline;
+    color: var(--color-text-primary);
+    font-size: 11px;
+    font-weight: 700;
+}
+
+#panel-orchestration .task-side-workbench-card .task-header-actions,
+#panel-orchestration .task-side-workbench-card .task-detail-toolbar,
+#panel-orchestration .task-side-workbench-card .task-workbench-tabs {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-side-workbench-card .task-header-actions .btn-tool,
+#panel-orchestration .task-side-workbench-card .task-detail-toolbar .btn-tool,
+#panel-orchestration .task-side-workbench-card .task-workbench-tab {
+    min-height: 26px;
+    padding: 3px 7px;
+    border-radius: 999px;
+    font-size: 0.7rem;
+}
+
+#panel-orchestration .task-side-workbench-card .task-workbench-panel {
+    margin-top: 8px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-thread-run-summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 4px;
+    color: var(--color-text-secondary);
+    font-size: 0.82rem;
+    line-height: 1.45;
+}
+
+#panel-orchestration .task-thread-run-summary-copy {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#panel-orchestration .task-thread-run-details {
+    margin-top: 8px;
+    color: var(--color-text-secondary);
+}
+
+#panel-orchestration .task-thread-run-details > summary {
+    width: fit-content;
+    cursor: pointer;
+    border-radius: 999px;
+    padding: 4px 9px;
+    background: rgba(248, 250, 252, 0.70);
+    color: var(--color-text-muted);
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+#panel-orchestration .task-thread-run-details:not([open]) {
+    margin-bottom: 0;
+}
+
+#panel-orchestration .task-thread-run-details[open] > summary {
+    margin-bottom: 8px;
+}
+
+#panel-orchestration .task-thread-detail-actions {
+    justify-content: flex-start;
+    margin-bottom: 8px;
+}
+
+#panel-orchestration .task-thread-plan-details .task-plan-summary-strip {
+    margin-top: 0;
+}
+
+#panel-orchestration .task-side-workbench-card .task-runtime-list,
+#panel-orchestration .task-side-workbench-card .task-node-list {
+    max-height: none;
+    gap: 6px;
+    padding-right: 0;
+    overflow: visible;
+}
+
+#panel-orchestration .task-side-workbench-card .task-node-card,
+#panel-orchestration .task-side-workbench-card .task-runtime-item,
+#panel-orchestration .task-side-workbench-card .task-node-output-card {
+    padding: 7px 0;
+    border-width: 1px 0 0;
+    border-radius: 0;
+    background: transparent;
+    box-shadow: none;
+}
+
+#panel-orchestration .task-side-workbench-card .task-node-output-card,
+#panel-orchestration .task-side-workbench-card .task-log-block {
+    max-height: 120px;
+    overflow: auto;
+    border-radius: 10px;
+    background: rgba(15, 23, 42, 0.04);
+}
+
+#panel-orchestration .task-thread-composer {
+    bottom: 20px;
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 8px 26px rgba(15, 23, 42, 0.13);
+}
+
+@media (max-width: 760px) {
+    #panel-orchestration {
+        padding-bottom: 72px;
+    }
+
+    #panel-orchestration .task-chat-thread {
+        padding-bottom: 16px;
+        scroll-padding-bottom: 130px;
+    }
+
+    #panel-orchestration .task-thread-message-card {
+        width: calc(100% - 10px);
+        margin-left: 0;
+    }
+
+    #panel-orchestration .task-side-workbench-card .task-node-output-card,
+    #panel-orchestration .task-side-workbench-card .task-log-block {
+        max-height: 96px;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
+    }
+}
+
+
+/* Workspace selector + records rail: project context belongs beside the chat, not inside it. */
+#panel-orchestration {
+    --task-orchestration-main-width: 1360px;
+    --task-orchestration-project-width: 260px;
+    --task-orchestration-records-width: 320px;
+}
+
+#panel-orchestration .task-layout-grid,
+#panel-orchestration .task-layout-grid-primary,
+#panel-orchestration .task-layout-grid-secondary,
+#panel-orchestration .task-quick-card {
+    max-width: var(--task-orchestration-main-width);
+    width: min(100%, var(--task-orchestration-main-width));
+}
+
+#panel-orchestration .task-quick-card {
+    display: grid;
+    grid-template-columns: var(--task-orchestration-project-width) minmax(0, 1fr) var(--task-orchestration-records-width);
+    align-items: start;
+    gap: 16px;
+}
+
+#panel-orchestration .task-project-sidebar,
+#panel-orchestration .task-quick-side-card {
+    position: sticky;
+    top: 84px;
+    align-self: start;
+    max-height: calc(100vh - 112px);
+    overflow: auto;
+    scrollbar-width: thin;
+}
+
+#panel-orchestration .task-project-sidebar,
+#panel-orchestration .task-quick-side-card > .selector-section,
+#panel-orchestration .task-quick-side-card > details,
+#panel-orchestration .task-provider-status-card {
+    border: 1px solid rgba(148, 163, 184, 0.16);
+    border-radius: 18px;
+    background: rgba(255, 255, 255, 0.62);
+    box-shadow: none;
+}
+
+#panel-orchestration .task-project-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 12px;
+}
+
+#panel-orchestration .task-project-sidebar-head,
+#panel-orchestration .task-session-inbox-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+#panel-orchestration .task-project-sidebar .skills-panel-note {
+    margin-top: 2px;
+    font-size: 0.76rem;
+    line-height: 1.4;
+}
+
+#panel-orchestration .task-project-list,
+#panel-orchestration .task-session-inbox {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+#panel-orchestration .task-project-item,
+#panel-orchestration .task-session-inbox-item {
+    width: 100%;
+    min-width: 0;
+    border: 1px solid rgba(148, 163, 184, 0.14);
+    border-radius: 14px;
+    background: rgba(248, 250, 252, 0.58);
+    color: var(--color-text-primary);
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
+}
+
+#panel-orchestration .task-project-item {
+    display: grid;
+    gap: 3px;
+    padding: 9px 10px;
+}
+
+#panel-orchestration .task-project-item:hover,
+#panel-orchestration .task-session-inbox-item:hover,
+#panel-orchestration .task-project-item.active {
+    border-color: rgba(199, 116, 98, 0.34);
+    background: rgba(255, 255, 255, 0.86);
+}
+
+#panel-orchestration .task-project-item.active {
+    box-shadow: inset 3px 0 0 rgba(199, 116, 98, 0.56);
+}
+
+#panel-orchestration .task-project-item-title,
+#panel-orchestration .task-session-inbox-title {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--color-text-primary);
+    font-size: 0.86rem;
+    font-weight: 800;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#panel-orchestration .task-project-item-meta,
+#panel-orchestration .task-session-inbox-meta,
+#panel-orchestration .task-project-item-stats {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    color: var(--color-text-muted);
+    font-size: 0.72rem;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#panel-orchestration .task-project-new-session {
+    width: 100%;
+    justify-content: center;
+}
+
+#panel-orchestration .task-session-inbox {
+    padding-top: 2px;
+}
+
+#panel-orchestration .task-session-inbox-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 9px;
+}
+
+#panel-orchestration .task-session-inbox-main {
+    min-width: 0;
+}
+
+#panel-orchestration .task-session-empty {
+    padding: 10px;
+    border-radius: 14px;
+    background: rgba(248, 250, 252, 0.52);
+}
+
+#panel-orchestration .task-quick-main {
+    min-width: 0;
+}
+
+#panel-orchestration .task-quick-side-card {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: auto;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+}
+
+#panel-orchestration .task-quick-side-card > .selector-section,
+#panel-orchestration .task-quick-side-card > details,
+#panel-orchestration .task-provider-status-card {
+    margin: 0;
+    padding: 12px;
+}
+
+#panel-orchestration .task-side-workbench-card,
+#panel-orchestration .task-side-settings-card {
+    max-height: none;
+}
+
+#panel-orchestration .task-side-workbench-card .task-runtime-list,
+#panel-orchestration .task-side-workbench-card .task-node-list {
+    max-height: 340px;
+    overflow: auto;
+}
+
+#panel-orchestration .task-thread-composer {
+    width: min(700px, calc(100vw - 680px));
+    min-width: 520px;
+}
+
+@media (max-width: 1180px) {
+    #panel-orchestration {
+        --task-orchestration-main-width: 100%;
+    }
+
+    #panel-orchestration .task-quick-card {
+        grid-template-columns: minmax(220px, 0.34fr) minmax(0, 0.66fr);
+    }
+
+    #panel-orchestration .task-quick-side-card {
+        grid-column: 1 / -1;
+        position: static;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    #panel-orchestration .task-project-sidebar {
+        position: sticky;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        width: min(680px, calc(100vw - 360px));
+        min-width: 420px;
+    }
+}
+
+@media (max-width: 760px) {
+    #panel-orchestration .task-quick-card,
+    #panel-orchestration .task-quick-side-card {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #panel-orchestration .task-project-sidebar,
+    #panel-orchestration .task-quick-side-card {
+        position: static;
+        max-height: none;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        right: auto;
+        bottom: 10px;
+        left: auto;
+        width: 100%;
+        min-width: 0;
+        transform: none;
+    }
+}
+
+/* Web Agent cockpit pass: the orchestration tab is an agent workbench, not a hidden task form. */
+#panel-orchestration {
+    --task-orchestration-main-width: 1440px;
+    --task-orchestration-project-width: 270px;
+    --task-orchestration-records-width: 340px;
+
+    padding-bottom: 40px;
+}
+
+#panel-orchestration .task-hero-card {
+    display: block;
+    max-width: var(--task-orchestration-main-width);
+    margin: -2px auto 14px;
+    border-color: rgba(59, 130, 246, 0.12);
+    background:
+        radial-gradient(circle at 12% 10%, rgba(59, 130, 246, 0.08), transparent 26%),
+        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.76));
+}
+
+#panel-orchestration .task-hero-card .task-hero-kicker,
+#panel-orchestration .task-hero-card .task-hero-copy {
+    display: block;
+}
+
+#panel-orchestration .task-quick-card {
+    grid-template-columns: var(--task-orchestration-project-width) minmax(0, 1fr) var(--task-orchestration-records-width);
+    gap: 18px;
+}
+
+#panel-orchestration .task-project-sidebar,
+#panel-orchestration .task-quick-side-card {
+    top: 92px;
+    max-height: calc(100vh - 120px);
+}
+
+#panel-orchestration .task-agent-cockpit {
+    margin-bottom: 12px;
+    padding: 14px;
+    border: 1px solid rgba(59, 130, 246, 0.14);
+    border-radius: 20px;
+    background:
+        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(239, 246, 255, 0.54)),
+        var(--color-surface);
+    box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
+}
+
+#panel-orchestration .task-agent-cockpit-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+#panel-orchestration .task-agent-title {
+    font-size: clamp(18px, 1.45vw, 24px);
+    line-height: 1.18;
+}
+
+#panel-orchestration .task-agent-copy {
+    display: block;
+    margin-top: 6px;
+    max-width: 760px;
+    line-height: 1.5;
+}
+
+#panel-orchestration .task-agent-surface-grid,
+#panel-orchestration .task-agent-trace-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 8px;
+    margin-top: 12px;
+}
+
+#panel-orchestration .task-agent-surface-card,
+#panel-orchestration .task-agent-trace-card {
+    min-width: 0;
+    padding: 10px;
+    border: 1px solid rgba(148, 163, 184, 0.16);
+    border-radius: 14px;
+    background: rgba(255, 255, 255, 0.72);
+}
+
+#panel-orchestration .task-agent-surface-card span,
+#panel-orchestration .task-agent-trace-card span {
+    display: block;
+    color: var(--color-text-muted);
+    font-size: 10px;
+    font-weight: 800;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+#panel-orchestration .task-agent-surface-card strong,
+#panel-orchestration .task-agent-trace-card strong {
+    display: block;
+    min-width: 0;
+    margin-top: 5px;
+    overflow: hidden;
+    color: var(--color-text-primary);
+    font-size: 12px;
+    font-weight: 800;
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+#panel-orchestration .task-agent-trace-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    margin: 10px 0 2px;
+}
+
+#panel-orchestration .task-agent-trace-card {
+    padding: 8px 9px;
+    background: rgba(248, 250, 252, 0.72);
+}
+
+#panel-orchestration .task-agent-trace-card strong {
+    font-size: 18px;
+}
+
+#panel-orchestration .task-chat-panel {
+    min-height: calc(100vh - 330px);
+    border-radius: 22px;
+    background:
+        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 250, 252, 0.66)),
+        var(--color-surface);
+}
+
+#panel-orchestration .task-chat-thread {
+    padding-bottom: 18px;
+    scroll-padding-bottom: 120px;
+}
+
+#panel-orchestration .task-thread-composer {
+    grid-template-columns: minmax(0, 1fr) auto;
+    right: auto;
+    bottom: 14px;
+    left: auto;
+    width: min(100%, 760px);
+    min-width: 0;
+    margin-top: 10px;
+    transform: none;
+    align-self: center;
+    border-color: rgba(59, 130, 246, 0.16);
+    border-radius: 18px;
+}
+
+#panel-orchestration .task-chat-action-buttons {
+    justify-content: center;
+}
+
+#panel-orchestration .task-chat-action-buttons .btn-tool {
+    min-width: 168px;
+}
+
+#panel-orchestration .task-chat-action-buttons .btn-primary {
+    min-width: 168px;
+}
+
+#panel-orchestration .task-chat-primary-button {
+    border-color: #1D4ED8;
+    background: #2563EB;
+    color: #FFFFFF;
+    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
+}
+
+#panel-orchestration .task-chat-primary-button:hover:not(:disabled),
+#panel-orchestration .task-chat-primary-button:focus-visible:not(:disabled) {
+    border-color: #1E40AF;
+    background: #1D4ED8;
+    color: #FFFFFF;
+}
+
+#panel-orchestration .task-side-workbench-card .task-thread-run-details {
+    margin-top: 10px;
+}
+
+#panel-orchestration .task-side-workbench-card .task-thread-run-details > summary {
+    background: rgba(239, 246, 255, 0.76);
+    color: #1D4ED8;
+}
+
+#panel-orchestration .task-side-workbench-card .task-workbench-panel,
+#panel-orchestration .task-side-workbench-card .task-runtime-list,
+#panel-orchestration .task-side-workbench-card .task-node-list {
+    max-height: 360px;
+    overflow: auto;
+}
+
+#panel-orchestration .task-side-settings-card {
+    border-style: dashed;
+}
+
+@media (max-width: 1180px) {
+    #panel-orchestration .task-quick-card {
+        grid-template-columns: minmax(220px, 0.35fr) minmax(0, 0.65fr);
+    }
+
+    #panel-orchestration .task-agent-surface-grid {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    #panel-orchestration .task-thread-composer {
+        width: min(100%, 720px);
+        min-width: 0;
+    }
+}
+
+@media (max-width: 760px) {
+    #panel-orchestration {
+        padding-bottom: 72px;
+    }
+
+    #panel-orchestration .task-hero-card {
+        margin-bottom: 10px;
+        padding: 12px;
+    }
+
+    #panel-orchestration .task-agent-cockpit {
+        padding: 12px;
+        border-radius: 18px;
+    }
+
+    #panel-orchestration .task-agent-cockpit-head {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    #panel-orchestration .task-agent-surface-grid,
+    #panel-orchestration .task-agent-trace-grid {
+        grid-template-columns: 1fr;
+    }
+
+    #panel-orchestration .task-chat-thread {
+        padding-bottom: 16px;
+        scroll-padding-bottom: 130px;
+    }
+
+    #panel-orchestration .task-thread-composer {
+        right: auto;
+        bottom: 10px;
+        left: auto;
+        width: 100%;
+        min-width: 0;
+        transform: none;
+    }
+
+    #panel-orchestration .task-chat-action-buttons {
+        flex-direction: column;
+        gap: 6px;
+    }
+
+    #panel-orchestration .task-chat-action-buttons .btn-tool {
+        width: 100%;
+        min-width: 0;
+    }
+}