@exoscient/control-panel 0.1.0

package/dist/task-detail.css

@@ -0,0 +1,1601 @@
+/*
+ * @exoscient/control-panel — task-detail.css
+ * Redesigned 2026 with a compact pro-tool aesthetic.
+ *
+ * The drawer is non-modal: it floats above the page (no overlay), so the
+ * underlying task list stays clickable and clicking a different task swaps
+ * the drawer contents in place. Layout is driven by CSS variables so the
+ * host application can override tokens at :root level.
+ */
+
+@layer exoscient-cp-lib-defaults {
+  :root {
+    --exo-bg:               #fafbfc;
+    --exo-surface:          #ffffff;
+    --exo-surface-2:        #f4f5f7;
+    --exo-surface-3:        #eceef1;
+    --exo-border:           #e6e8ec;
+    --exo-border-strong:    #d4d7dd;
+    --exo-text:             #14181f;
+    --exo-text-2:           #5b626c;
+    --exo-text-3:           #8b929c;
+    --exo-accent:           #2f6feb;
+    --exo-accent-fg:        #ffffff;
+    --exo-accent-soft:      #eaf0fe;
+    --exo-accent-strong:    #2356c7;
+    --exo-success:          #168a4b;
+    --exo-success-soft:     #e3f5ea;
+    --exo-warning:          #b86e00;
+    --exo-warning-soft:     #fdf2dd;
+    --exo-danger:           #c2261d;
+    --exo-danger-soft:      #fbe7e5;
+    --exo-shadow-md:        0 4px 12px rgba(15, 23, 42, 0.08);
+    --exo-shadow-drawer:    -12px 0 32px rgba(15, 23, 42, 0.10);
+    --exo-radius:           6px;
+    --exo-ring:             0 0 0 2px rgba(47, 111, 235, 0.18);
+    --exo-z-drawer:         90;
+    --exo-z-dock:           85;
+    --exo-z-trace:          95;
+    --exo-task-detail-reserved-left: 0px;
+    --exo-mono:             'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    --exo-sans:             Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  }
+
+  /* ---------- Drawer ---------- */
+  /* Non-modal: no overlay element is rendered. The drawer floats above the
+     page with a left-edge shadow giving the float depth cue. */
+  .drawer {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    width: min(600px, 100vw);
+    background: var(--exo-surface);
+    color: var(--exo-text);
+    border-left: 1px solid var(--exo-border);
+    box-shadow: var(--exo-shadow-drawer);
+    transform: translateX(100%);
+    transition: transform 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    z-index: var(--exo-z-drawer);
+    font-family: var(--exo-sans);
+    font-size: 14px;
+    line-height: 1.45;
+  }
+  .drawer.open { transform: translateX(0); }
+  .drawer.maximized {
+    left: var(--exo-task-detail-reserved-left);
+    width: calc(100vw - var(--exo-task-detail-reserved-left));
+    border-left: 0;
+    box-shadow: none;
+  }
+
+  /* drawer header */
+  .drawer > header {
+    padding: 10px 12px 10px 12px;
+    border-bottom: 1px solid var(--exo-border);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    text-align: left;
+  }
+  .drawer-heading {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    font-size: 12.5px;
+    color: var(--exo-text-3);
+  }
+  .drawer-status-row {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    min-width: 0;
+    flex: 1;
+  }
+  .drawer-heading p {
+    margin: 0;
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+  }
+  .drawer-tools {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+  .drawer > header h2 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    line-height: 1.3;
+    color: var(--exo-text);
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
+
+  .task-detail-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 2px;
+    padding: 8px 10px;
+    border: 1px solid var(--exo-border);
+    border-radius: var(--exo-radius);
+    background: var(--exo-surface-2);
+  }
+
+  /* drawer meta strip — small ID/started/turns row inside the details panel */
+  .drawer-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px 14px;
+    padding: 0;
+    background: transparent;
+    font-size: 12.5px;
+    color: var(--exo-text-3);
+    flex-wrap: wrap;
+  }
+  .drawer-meta .muted { color: var(--exo-text-3); }
+  .drawer-meta code {
+    color: var(--exo-text);
+    font-family: var(--exo-mono);
+    font-size: 12px;
+  }
+
+  /* drawer content + body */
+  .drawer-content {
+    position: relative;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+  .drawer-body {
+    overflow: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .task-publication-warning {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 9px 10px;
+    border: 1px solid color-mix(in srgb, var(--exo-warning) 36%, var(--exo-border));
+    border-radius: var(--exo-radius);
+    background: var(--exo-warning-soft);
+    color: var(--exo-text);
+    font-size: 12.5px;
+  }
+  .task-publication-warning strong {
+    color: var(--exo-warning);
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+  .task-publication-warning span {
+    overflow-wrap: anywhere;
+  }
+
+  /* Drawer dock — shown when minimized */
+  .task-detail-dock {
+    position: fixed;
+    right: 16px;
+    bottom: 16px;
+    max-width: min(480px, calc(100vw - 32px));
+    z-index: var(--exo-z-dock);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 8px 6px 10px;
+    background: var(--exo-surface);
+    color: var(--exo-text);
+    border: 1px solid var(--exo-border);
+    border-radius: var(--exo-radius);
+    box-shadow: var(--exo-shadow-md);
+    font-family: var(--exo-sans);
+    font-size: 13.5px;
+  }
+  .task-detail-dock-main {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    line-height: 1.2;
+  }
+  .task-detail-dock-main strong {
+    font-size: 13.5px;
+    font-weight: 500;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .task-detail-dock-main > span {
+    font-size: 12px;
+    color: var(--exo-text-3);
+  }
+  .task-detail-dock-actions {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  /* ---------- Icon buttons ---------- */
+  .icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    background: transparent;
+    color: var(--exo-text-2);
+    cursor: pointer;
+    transition: background 0.08s ease, color 0.08s ease;
+  }
+  .icon-button:hover { background: var(--exo-surface-2); color: var(--exo-text); }
+  .icon-button:focus-visible { outline: none; box-shadow: var(--exo-ring); }
+  .icon-button[disabled] { opacity: 0.45; cursor: not-allowed; }
+  .icon-button svg { width: 14px; height: 14px; }
+
+  /* ---------- Working indicator ---------- */
+  .working-indicator {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    color: var(--exo-accent);
+    font-weight: 500;
+    font-size: 13px;
+  }
+  .working-dots {
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+  }
+  .working-dots span {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+    animation: exo-dot 1s infinite ease-in-out;
+  }
+  .working-dots span:nth-child(2) { animation-delay: 0.12s; }
+  .working-dots span:nth-child(3) { animation-delay: 0.24s; }
+  @keyframes exo-dot {
+    0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
+    40%           { opacity: 1;    transform: translateY(-3px); }
+  }
+
+  /* ---------- Inline spinner ---------- */
+  .inline-spinner {
+    display: inline-block;
+    width: 13px;
+    height: 13px;
+    border: 1.5px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: exo-spin 700ms linear infinite;
+    vertical-align: -2px;
+  }
+  @keyframes exo-spin { to { transform: rotate(360deg); } }
+
+  /* ---------- Loading state ---------- */
+  .loading-state {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 14px;
+    color: var(--exo-text-3);
+    font-size: 13px;
+  }
+
+  /* ---------- Status pills (status-text) ---------- */
+  .status-text {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 20px;
+    padding: 0 8px;
+    border-radius: 9999px;
+    font-size: 11.5px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: 0.01em;
+  }
+  .status-text.status-success { background: var(--exo-success-soft); color: var(--exo-success); }
+  .status-text.status-active  { background: var(--exo-accent-soft);  color: var(--exo-accent-strong); }
+  .status-text.status-danger  { background: var(--exo-danger-soft);  color: var(--exo-danger); }
+  .status-text.status-muted   {
+    background: var(--exo-surface-2);
+    color: var(--exo-text-2);
+    border: 1px solid var(--exo-border);
+  }
+
+  /* ---------- Task access summary ---------- */
+  .task-access-summary {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 24px;
+    padding: 2px 5px;
+    border: 1px solid var(--exo-border-strong);
+    border-radius: 9999px;
+    background: var(--exo-surface);
+    color: var(--exo-text);
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .task-access-summary:hover,
+  .task-access-summary[aria-expanded="true"] {
+    background: var(--exo-surface-2);
+    border-color: var(--exo-accent);
+  }
+  .task-access-summary-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 2px 4px;
+    border-radius: 9999px;
+    font-size: 11.5px;
+    font-weight: 500;
+    line-height: 1;
+  }
+  .task-access-summary-item.granted { color: var(--exo-success); }
+  .task-access-summary-item.released { color: var(--exo-text-3); }
+  .task-access-summary-item.waiting { color: var(--exo-warning); }
+  .task-access-summary-item.denied { color: var(--exo-danger); }
+  .task-access-summary-icon {
+    width: 13px;
+    height: 13px;
+    stroke-width: 2.4;
+  }
+  .task-details-summary-label {
+    padding: 2px 5px;
+    font-size: 11.5px;
+    font-weight: 500;
+    line-height: 1;
+    color: var(--exo-text-2);
+  }
+  .task-access-chips {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 0;
+  }
+  .task-access-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    max-width: 100%;
+    min-height: 24px;
+    padding: 3px 8px;
+    border: 1px solid var(--exo-border);
+    border-radius: 9999px;
+    background: var(--exo-surface-2);
+    color: var(--exo-text);
+    font-size: 12px;
+    line-height: 1.2;
+  }
+  .task-access-chip.granted {
+    border-color: color-mix(in srgb, var(--exo-success) 32%, var(--exo-border));
+    color: var(--exo-success);
+  }
+  .task-access-chip.released { color: var(--exo-text-3); }
+  .task-access-chip.waiting {
+    border-color: color-mix(in srgb, var(--exo-warning) 36%, var(--exo-border));
+    color: var(--exo-warning);
+  }
+  .task-access-chip.denied {
+    border-color: color-mix(in srgb, var(--exo-danger) 36%, var(--exo-border));
+    color: var(--exo-danger);
+  }
+  .task-access-chip.muted {
+    color: var(--exo-text-3);
+    font-family: var(--exo-sans);
+  }
+  .task-access-icon {
+    width: 13px;
+    height: 13px;
+    flex: 0 0 auto;
+    stroke-width: 2.4;
+  }
+  .task-access-text {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .task-access-text strong {
+    font-family: var(--exo-mono);
+    font-size: 11.5px;
+    font-weight: 500;
+  }
+
+  /* ---------- Turn structure ---------- */
+  .turn {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    border: 1px solid var(--exo-border);
+    border-radius: 8px;
+    background: var(--exo-surface);
+    overflow: visible;
+  }
+  .turn-panel {
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
+  }
+  .request-panel {
+    align-self: stretch;
+    width: 100%;
+    border: 0;
+    border-radius: 7px 7px 0 0;
+    background: var(--exo-accent-soft);
+  }
+  .output-panel {
+    align-self: stretch;
+    width: 100%;
+    border-top: 1px solid color-mix(in srgb, var(--exo-accent) 14%, var(--exo-border));
+    border-radius: 0 0 7px 7px;
+    background: var(--exo-surface);
+  }
+  .turn-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 10px;
+    background: var(--exo-surface-2);
+    border-bottom: 1px solid var(--exo-border);
+    font-size: 12.5px;
+    color: var(--exo-text-2);
+  }
+  .turn-title h3 {
+    margin: 0;
+    font-size: 12.5px;
+    font-weight: 500;
+    color: var(--exo-text-2);
+  }
+  .turn-title time {
+    margin-left: auto;
+    font-size: 12px;
+    color: var(--exo-text-3);
+    font-variant-numeric: tabular-nums;
+  }
+  .request-panel .turn-title {
+    background: color-mix(in srgb, var(--exo-accent-soft) 72%, var(--exo-surface));
+    border-bottom-color: color-mix(in srgb, var(--exo-accent) 18%, var(--exo-border));
+  }
+  .request-panel .turn-title h3,
+  .request-panel .turn-title time {
+    color: var(--exo-accent-strong);
+  }
+
+  .request-panel > p {
+    margin: 0;
+    padding: 10px 12px;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--exo-text);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .output-panel .result {
+    margin: 0;
+    padding: 10px 12px;
+    font-size: 13.5px;
+    line-height: 1.55;
+    color: var(--exo-text);
+  }
+
+  .working-result-body {
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    min-height: 1.45em;
+  }
+
+  .formatted-text p { margin: 0 0 8px; }
+  .formatted-text p:last-child { margin: 0; }
+  .formatted-text h4,
+  .formatted-text h5,
+  .formatted-text h6 {
+    margin: 10px 0 6px;
+    color: var(--exo-text);
+    font-weight: 650;
+    line-height: 1.25;
+  }
+  .formatted-text h4 { font-size: 14px; }
+  .formatted-text h5 { font-size: 13.5px; }
+  .formatted-text h6 { font-size: 13px; }
+  .formatted-text ul,
+  .formatted-text ol {
+    margin: 6px 0 10px;
+    padding-left: 22px;
+  }
+  .formatted-text li {
+    margin: 4px 0;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+  .formatted-text :not(pre) > code {
+    padding: 1px 5px;
+    border-radius: 5px;
+    background: var(--exo-surface-2);
+    border: 1px solid var(--exo-border);
+    color: var(--exo-accent-strong);
+    font-family: var(--exo-mono);
+    font-size: 0.86em;
+  }
+  .formatted-text a {
+    color: var(--exo-accent-strong);
+    font-weight: 600;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
+  }
+  .formatted-text > :first-child { margin-top: 0; }
+  .formatted-text > :last-child { margin-bottom: 0; }
+  .code-block {
+    margin: 6px 0;
+    padding: 8px 10px;
+    background: var(--exo-surface-2);
+    border: 1px solid var(--exo-border);
+    border-radius: 4px;
+    font-family: var(--exo-mono);
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: var(--exo-text);
+  }
+
+  /* technical summary collapsible */
+  .technical-summary {
+    margin: 6px 0 4px;
+    border: 1px dashed var(--exo-border-strong);
+    border-radius: 5px;
+    background: var(--exo-surface-2);
+  }
+  .output-panel .result > .technical-summary {
+    margin: 8px -12px -10px;
+    border-radius: 5px 5px 0 0;
+  }
+  .technical-summary > summary {
+    list-style: none;
+    cursor: pointer;
+    padding: 7px 10px;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--exo-text-3);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    user-select: none;
+  }
+  .technical-summary > summary::-webkit-details-marker { display: none; }
+  .technical-summary > summary::before {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 4px solid currentColor;
+    border-top: 3px solid transparent;
+    border-bottom: 3px solid transparent;
+    transform: translateX(1px);
+    transition: transform 0.12s ease;
+    flex: 0 0 auto;
+  }
+  .technical-summary-title {
+    flex: 1;
+    min-width: 0;
+  }
+  .technical-summary > summary .trace-open-button {
+    display: none;
+  }
+  .technical-summary[open] > summary .trace-open-button {
+    display: inline-flex;
+  }
+  .technical-summary[open] > summary::before { transform: rotate(90deg) translateY(1px); }
+  .technical-summary-body {
+    padding: 0 12px 10px;
+    font-size: 13px;
+    color: var(--exo-text-2);
+    line-height: 1.55;
+  }
+
+  .client-action-panel {
+    display: grid;
+    gap: 8px;
+    margin: 10px -4px 0;
+    padding: 10px;
+    border: 1px solid var(--exo-border);
+    border-radius: 6px;
+    background: var(--exo-surface-2);
+  }
+  .client-action-heading strong {
+    display: block;
+    color: var(--exo-text);
+    font-size: 13px;
+    line-height: 1.35;
+  }
+  .client-action-options {
+    display: grid;
+    gap: 6px;
+  }
+  .client-action-option {
+    display: grid;
+    grid-template-columns: 18px minmax(0, 1fr);
+    gap: 8px;
+    align-items: start;
+    padding: 7px 8px;
+    border: 1px solid var(--exo-border);
+    border-radius: 5px;
+    background: var(--exo-surface);
+    cursor: pointer;
+  }
+  .client-action-option input {
+    width: 14px;
+    height: 14px;
+    margin: 2px 0 0;
+  }
+  .client-action-option span {
+    display: grid;
+    gap: 2px;
+    min-width: 0;
+  }
+  .client-action-option strong {
+    color: var(--exo-text);
+    font-size: 13px;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+  }
+  .client-action-option small {
+    color: var(--exo-text-2);
+    font-size: 12px;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+  .client-action-other {
+    display: grid;
+    gap: 5px;
+    color: var(--exo-text-2);
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .client-action-other textarea {
+    width: 100%;
+    min-height: 54px;
+    resize: vertical;
+    border: 1px solid var(--exo-border);
+    border-radius: 5px;
+    padding: 7px 8px;
+    color: var(--exo-text);
+    background: var(--exo-surface);
+    font: inherit;
+    font-weight: 400;
+  }
+  .client-action-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    min-height: 30px;
+  }
+  .client-action-footer .command-status {
+    margin-right: auto;
+  }
+
+  /* output panel actions */
+  .output-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px 10px;
+  }
+  .trace-open-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    min-height: 26px;
+    padding: 0 9px;
+    border: 1px solid var(--exo-border);
+    border-radius: 9999px;
+    background: var(--exo-surface);
+    color: var(--exo-text-2);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+  }
+  .trace-open-button:hover {
+    background: var(--exo-accent-soft);
+    border-color: var(--exo-accent);
+    color: var(--exo-accent-strong);
+  }
+  .trace-open-button:disabled {
+    cursor: wait;
+    opacity: 0.82;
+  }
+  .trace-open-button svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  /* ---------- Drawer form (compose + interrupt) ---------- */
+  .drawer-form {
+    border-top: 1px solid var(--exo-border);
+    padding: 10px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    background: var(--exo-surface);
+  }
+  .drawer-form textarea {
+    width: 100%;
+    min-height: 72px;
+    padding: 8px 10px;
+    border: 1px solid var(--exo-border-strong);
+    border-radius: 5px;
+    background: var(--exo-surface);
+    color: var(--exo-text);
+    font-family: var(--exo-sans);
+    font-size: 13.5px;
+    line-height: 1.45;
+    resize: vertical;
+    box-sizing: border-box;
+  }
+  .drawer-form textarea:focus {
+    outline: none;
+    border-color: var(--exo-accent);
+    box-shadow: var(--exo-ring);
+  }
+  .drawer-form textarea:disabled {
+    background: var(--exo-surface-2);
+    color: var(--exo-text-3);
+  }
+  .drawer-form-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .drawer-form-buttons {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    margin-left: auto;
+  }
+
+  .interrupt-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  /* Primary / danger / icon-action buttons inside the drawer */
+  .drawer-form .primary,
+  .drawer-form .danger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 11px;
+    border: 1px solid transparent;
+    border-radius: 5px;
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1;
+    cursor: pointer;
+    transition: background 0.08s ease, border-color 0.08s ease;
+    font-family: inherit;
+  }
+  .drawer-form .primary {
+    background: var(--exo-accent);
+    color: var(--exo-accent-fg);
+    border-color: var(--exo-accent);
+  }
+  .drawer-form .primary:hover { background: var(--exo-accent-strong); border-color: var(--exo-accent-strong); }
+  .drawer-form .primary[disabled],
+  .drawer-form .primary:disabled { opacity: 0.45; cursor: not-allowed; }
+  .drawer-form .danger {
+    background: var(--exo-surface);
+    color: var(--exo-danger);
+    border-color: var(--exo-border-strong);
+  }
+  .drawer-form .danger:hover { background: var(--exo-danger-soft); border-color: var(--exo-danger); }
+  .drawer-form .danger[disabled],
+  .drawer-form .danger:disabled { opacity: 0.45; cursor: not-allowed; }
+  .icon-action-button {
+    width: 30px;
+    padding: 0;
+    justify-content: center;
+  }
+  .icon-action-button svg { width: 14px; height: 14px; }
+
+  .command-status {
+    font-size: 12px;
+    color: var(--exo-text-3);
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+  }
+  .command-status.error { color: var(--exo-danger); }
+
+  /* ---------- Attachment picker ---------- */
+  .attachment-picker {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .attachment-picker input[type="file"] { display: none; }
+  .attachment-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 30px;
+    padding: 0 11px;
+    border: 1px solid var(--exo-border-strong);
+    border-radius: 5px;
+    background: var(--exo-surface);
+    color: var(--exo-text-2);
+    cursor: pointer;
+    font-size: 13px;
+    font-family: inherit;
+  }
+  .attachment-picker.compact .attachment-button {
+    width: 30px;
+    padding: 0;
+    justify-content: center;
+  }
+  .attachment-button:hover { background: var(--exo-surface-2); }
+  .attachment-button svg { width: 14px; height: 14px; }
+  .attachment-button[disabled] { opacity: 0.45; cursor: not-allowed; }
+
+  .attachment-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--exo-text-3);
+  }
+  .attachment-list {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+  .attachment-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    height: 22px;
+    padding: 0 4px 0 8px;
+    border: 1px solid var(--exo-border-strong);
+    border-radius: 4px;
+    background: var(--exo-surface);
+    color: var(--exo-text-2);
+    font-size: 12px;
+  }
+  .attachment-chip small {
+    color: var(--exo-text-3);
+    font-variant-numeric: tabular-nums;
+    font-size: 11.5px;
+  }
+  .attachment-chip button {
+    width: 18px;
+    height: 18px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: 0;
+    color: var(--exo-text-3);
+    cursor: pointer;
+    border-radius: 3px;
+  }
+  .attachment-chip button:hover {
+    background: var(--exo-surface-2);
+    color: var(--exo-text);
+  }
+  .attachment-chip button svg { width: 12px; height: 12px; }
+
+  /* ---------- Trace overlay (covers drawer body area when expanded) ---------- */
+  .task-trace-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: var(--exo-z-trace);
+    background: var(--exo-surface);
+    display: flex;
+    animation: exo-trace-enter 120ms ease-out;
+  }
+  @keyframes exo-trace-enter {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  .trace-shell {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+  }
+  .trace-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--exo-border);
+    background: var(--exo-surface-2);
+  }
+  .trace-toolbar-summary {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 12.5px;
+    color: var(--exo-text-2);
+    flex-wrap: wrap;
+  }
+  .trace-toolbar-actions {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+  }
+  .trace-toggle-button {
+    height: 24px;
+    padding: 0 10px;
+    background: transparent;
+    border: 1px solid var(--exo-border-strong);
+    border-radius: 9999px;
+    color: var(--exo-text-2);
+    font-size: 12px;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .trace-toggle-button:hover { background: var(--exo-surface); }
+  .trace-toggle-button.active {
+    color: var(--exo-accent-strong);
+    background: var(--exo-accent-soft);
+    border-color: transparent;
+  }
+  .trace-collapse-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--exo-text-2);
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  .trace-collapse-button:hover { background: var(--exo-surface); color: var(--exo-text); }
+  .trace-collapse-button svg { width: 14px; height: 14px; }
+
+  /* Context pressure */
+  .context-pressure {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--exo-text-2);
+  }
+  .context-pressure-meter {
+    width: 100px;
+    height: 4px;
+    border-radius: 9999px;
+    background: var(--exo-surface-3);
+    overflow: hidden;
+  }
+  .context-pressure-fill {
+    height: 100%;
+    background: var(--exo-accent);
+    border-radius: inherit;
+  }
+  .context-pressure-low    .context-pressure-fill { background: var(--exo-success); }
+  .context-pressure-medium .context-pressure-fill { background: var(--exo-accent); }
+  .context-pressure-high   .context-pressure-fill { background: var(--exo-warning); }
+  .context-pressure-critical .context-pressure-fill { background: var(--exo-danger); }
+
+  /* trace filters */
+  .trace-filter-bar {
+    display: flex;
+    gap: 4px;
+    padding: 7px 10px;
+    border-bottom: 1px solid var(--exo-border);
+    flex-wrap: wrap;
+  }
+  .trace-filter-button {
+    height: 22px;
+    padding: 0 9px;
+    background: transparent;
+    color: var(--exo-text-3);
+    border: 1px solid var(--exo-border);
+    border-radius: 9999px;
+    font-size: 11.5px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .trace-filter-button:hover {
+    color: var(--exo-text-2);
+    border-color: var(--exo-border-strong);
+  }
+  .trace-filter-button.active {
+    color: var(--exo-accent-strong);
+    background: var(--exo-accent-soft);
+    border-color: transparent;
+  }
+
+  /* trace events */
+  .trace-list {
+    flex: 1;
+    overflow: auto;
+    padding: 0;
+    font-size: 13px;
+  }
+  .trace-list > .muted {
+    padding: 16px;
+    color: var(--exo-text-3);
+  }
+  .trace-event {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--exo-border);
+  }
+  .trace-event:last-child { border-bottom: 0; }
+  .trace-event:hover { background: var(--exo-surface-2); }
+  .trace-event-header {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    font-size: 11.5px;
+  }
+  .trace-event-header span {
+    font-family: var(--exo-mono);
+    color: var(--exo-text-3);
+  }
+  .trace-event-header strong {
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--exo-text-2);
+  }
+  .trace-event.assistant .trace-event-header strong { color: var(--exo-text); }
+  .trace-event.tool   .trace-event-header strong { color: var(--exo-accent); }
+  .trace-event.file   .trace-event-header strong { color: var(--exo-success); }
+  .trace-event.command .trace-event-header strong { color: var(--exo-text-2); }
+  .trace-event.error  .trace-event-header strong { color: var(--exo-danger); }
+  .trace-event.tokens .trace-event-header strong { color: var(--exo-warning); }
+  .trace-event .formatted-text { font-size: 13px; color: var(--exo-text); }
+  .trace-event .formatted-text p { margin: 0 0 4px; }
+
+  .trace-body {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .trace-event pre,
+  .trace-command {
+    margin: 0;
+    padding: 7px 9px;
+    background: var(--exo-surface-2);
+    border: 1px solid var(--exo-border);
+    border-radius: 4px;
+    font-family: var(--exo-mono);
+    font-size: 12px;
+    line-height: 1.45;
+    white-space: pre-wrap;
+    word-break: break-word;
+    color: var(--exo-text);
+  }
+  .trace-meta {
+    margin: 0;
+    font-size: 11.5px;
+    color: var(--exo-text-3);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
+  /* raw details */
+  .raw-details {
+    border: 1px dashed var(--exo-border);
+    border-radius: 4px;
+    background: var(--exo-surface-2);
+  }
+  .raw-details > summary {
+    cursor: pointer;
+    padding: 5px 8px;
+    font-size: 11.5px;
+    color: var(--exo-text-3);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    list-style: none;
+  }
+  .raw-details > summary::-webkit-details-marker { display: none; }
+  .raw-details > pre,
+  .raw-details > .json-tree {
+    margin: 0;
+    padding: 6px 8px 8px;
+  }
+
+  /* JSON tree */
+  .json-tree {
+    margin: 0;
+    padding: 0 0 0 16px;
+    font-family: var(--exo-mono);
+    font-size: 12px;
+    line-height: 1.5;
+    list-style: none;
+  }
+  .json-tree li {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .json-key { color: var(--exo-text-3); }
+  .json-value {
+    color: var(--exo-text);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .json-value.string { color: var(--exo-success); }
+  .json-value.number,
+  .json-value.boolean { color: var(--exo-accent-strong); }
+  .json-value.null { color: var(--exo-text-3); font-style: italic; }
+
+  /* ---------- Misc ---------- */
+  .muted { color: var(--exo-text-3); }
+
+  /* narrow viewport: drawer becomes full-bleed */
+  @media (max-width: 720px) {
+    .drawer { width: 100vw; border-left: 0; }
+    .task-detail-dock {
+      left: 12px;
+      right: 12px;
+    }
+  }
+}
+
+/* Unlayered essentials keep host-app button/details rules from flattening Task Detail controls. */
+.drawer .task-access-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  padding: 2px 5px;
+  border: 1px solid var(--exo-border-strong);
+  border-radius: 9999px;
+  background: var(--exo-surface);
+  color: var(--exo-text);
+  cursor: pointer;
+  font: inherit;
+}
+.drawer .task-access-summary:hover,
+.drawer .task-access-summary[aria-expanded="true"] {
+  background: var(--exo-surface-2);
+  border-color: var(--exo-accent);
+}
+.drawer .task-access-summary-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 4px;
+  border-radius: 9999px;
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1;
+}
+.drawer .task-access-summary-item.granted { color: var(--exo-success); }
+.drawer .task-access-summary-item.released { color: var(--exo-text-3); }
+.drawer .task-access-summary-item.waiting { color: var(--exo-warning); }
+.drawer .task-access-summary-item.denied { color: var(--exo-danger); }
+.drawer .task-access-summary-icon {
+  width: 13px;
+  height: 13px;
+  stroke-width: 2.4;
+}
+.drawer .task-details-summary-label {
+  padding: 2px 5px;
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1;
+  color: var(--exo-text-2);
+}
+.drawer .task-detail-details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 2px;
+  padding: 8px 10px;
+  border: 1px solid var(--exo-border);
+  border-radius: var(--exo-radius);
+  background: var(--exo-surface-2);
+}
+.drawer .task-sharing-panel {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 8px 10px;
+  border: 1px solid var(--exo-border);
+  border-radius: var(--exo-radius);
+  background: var(--exo-surface-2);
+}
+.drawer .task-sharing-form {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  gap: 6px;
+  align-items: center;
+}
+.drawer .task-sharing-form svg,
+.drawer .task-share-row svg {
+  width: 15px;
+  height: 15px;
+}
+.drawer .task-sharing-form input,
+.drawer .task-sharing-form select {
+  min-width: 0;
+  padding: 6px 8px;
+  border: 1px solid var(--exo-border);
+  border-radius: var(--exo-radius-sm);
+  background: var(--exo-surface);
+  color: var(--exo-text);
+  font: inherit;
+}
+.drawer .task-sharing-form button,
+.drawer .task-share-row button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 31px;
+  padding: 5px 9px;
+  border: 1px solid var(--exo-border);
+  border-radius: var(--exo-radius-sm);
+  background: var(--exo-surface);
+  color: var(--exo-text);
+  font: inherit;
+}
+.drawer .task-sharing-error {
+  color: var(--exo-danger);
+  font-size: 12.5px;
+}
+.drawer .task-share-list {
+  display: grid;
+  gap: 5px;
+}
+.drawer .task-share-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 8px;
+  align-items: center;
+  color: var(--exo-text-2);
+  font-size: 12.5px;
+}
+.drawer .task-share-row span {
+  overflow-wrap: anywhere;
+}
+.drawer .task-share-row strong {
+  color: var(--exo-text-3);
+  font-size: 12px;
+}
+@media (max-width: 640px) {
+  .drawer .task-sharing-form {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+  .drawer .task-sharing-form select,
+  .drawer .task-sharing-form button {
+    grid-column: 2;
+  }
+}
+.drawer .drawer-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--exo-text-3);
+  font-size: 12.5px;
+}
+.drawer .drawer-meta code {
+  color: var(--exo-text);
+  font-family: var(--exo-mono);
+  font-size: 12px;
+}
+.drawer .task-access-chips {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 0;
+}
+.drawer .task-access-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  min-height: 24px;
+  padding: 3px 8px;
+  border: 1px solid var(--exo-border);
+  border-radius: 9999px;
+  background: var(--exo-surface-2);
+  color: var(--exo-text);
+  font-size: 12px;
+  line-height: 1.2;
+}
+.drawer .task-access-chip.granted {
+  border-color: color-mix(in srgb, var(--exo-success) 32%, var(--exo-border));
+  color: var(--exo-success);
+}
+.drawer .task-access-chip.released { color: var(--exo-text-3); }
+.drawer .task-access-chip.waiting {
+  border-color: color-mix(in srgb, var(--exo-warning) 36%, var(--exo-border));
+  color: var(--exo-warning);
+}
+.drawer .task-access-chip.denied {
+  border-color: color-mix(in srgb, var(--exo-danger) 36%, var(--exo-border));
+  color: var(--exo-danger);
+}
+.drawer .task-access-icon {
+  width: 13px;
+  height: 13px;
+  flex: 0 0 auto;
+  stroke-width: 2.4;
+}
+.drawer .task-access-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.drawer > header h2 {
+  max-width: 100%;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+
+.drawer .turn {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--exo-border);
+  border-radius: 8px;
+  background: var(--exo-surface);
+  overflow: visible;
+}
+.drawer .turn-panel {
+  max-width: 100%;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  overflow: visible;
+}
+.drawer .request-panel {
+  align-self: stretch;
+  width: 100%;
+  border: 0;
+  border-radius: 7px 7px 0 0;
+  background: var(--exo-accent-soft);
+}
+.drawer .output-panel {
+  align-self: stretch;
+  width: 100%;
+  border-top: 1px solid color-mix(in srgb, var(--exo-accent) 14%, var(--exo-border));
+  border-radius: 0 0 7px 7px;
+  background: var(--exo-surface);
+}
+.drawer .request-panel .turn-title {
+  background: color-mix(in srgb, var(--exo-accent-soft) 72%, var(--exo-surface));
+  border-bottom-color: color-mix(in srgb, var(--exo-accent) 18%, var(--exo-border));
+}
+.drawer .request-panel .turn-title h3,
+.drawer .request-panel .turn-title time {
+  color: var(--exo-accent-strong);
+}
+
+.drawer .technical-summary {
+  margin: 6px 0 4px;
+  border: 1px solid var(--exo-border);
+  border-radius: 8px;
+  background: var(--exo-surface-2);
+}
+.drawer .output-panel .result > .technical-summary {
+  margin: 8px -12px -10px;
+  border-radius: 5px 5px 0 0;
+}
+.drawer .technical-summary > summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 30px;
+  padding: 0 10px;
+  color: var(--exo-text-2);
+  cursor: pointer;
+  font-size: 12.5px;
+  font-weight: 600;
+  list-style: none;
+}
+.drawer .technical-summary > summary::-webkit-details-marker { display: none; }
+.drawer .technical-summary > summary::before {
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 5px solid currentColor;
+  transition: transform 120ms ease;
+}
+.drawer .technical-summary-title {
+  flex: 1;
+  min-width: 0;
+}
+.drawer .technical-summary > summary .trace-open-button {
+  display: none;
+}
+.drawer .technical-summary[open] > summary .trace-open-button {
+  display: inline-flex;
+}
+.drawer .technical-summary[open] > summary::before {
+  transform: rotate(90deg) translateY(1px);
+}
+.drawer .technical-summary-body {
+  border-top: 1px solid var(--exo-border);
+  padding: 8px 10px;
+}
+
+.drawer .formatted-text p { margin: 0 0 8px; }
+.drawer .formatted-text h4,
+.drawer .formatted-text h5,
+.drawer .formatted-text h6 {
+  margin: 10px 0 6px;
+  color: var(--exo-text);
+  font-weight: 650;
+  line-height: 1.25;
+}
+.drawer .formatted-text h4 { font-size: 14px; }
+.drawer .formatted-text h5 { font-size: 13.5px; }
+.drawer .formatted-text h6 { font-size: 13px; }
+.drawer .formatted-text ul,
+.drawer .formatted-text ol {
+  margin: 6px 0 10px;
+  padding-left: 22px;
+}
+.drawer .formatted-text li {
+  margin: 4px 0;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+.drawer .formatted-text :not(pre) > code {
+  padding: 1px 5px;
+  border-radius: 5px;
+  background: var(--exo-surface-2);
+  border: 1px solid var(--exo-border);
+  color: var(--exo-accent-strong);
+  font-family: var(--exo-mono);
+  font-size: 0.86em;
+}
+.drawer .formatted-text a {
+  color: var(--exo-accent-strong);
+  font-weight: 600;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+.drawer .formatted-text > :first-child { margin-top: 0; }
+.drawer .formatted-text > :last-child { margin-bottom: 0; }
+
+.drawer .trace-open-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 26px;
+  padding: 0 9px;
+  border: 1px solid var(--exo-border);
+  border-radius: 9999px;
+  background: var(--exo-surface);
+  color: var(--exo-text-2);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+}
+.drawer .trace-open-button:hover {
+  background: var(--exo-accent-soft);
+  border-color: var(--exo-accent);
+  color: var(--exo-accent-strong);
+}
+.drawer .trace-open-button:disabled {
+  cursor: wait;
+  opacity: 0.82;
+}
+.drawer .trace-open-button svg {
+  width: 13px;
+  height: 13px;
+}
+
+.task-trace-overlay {
+  animation: exo-trace-enter 120ms ease-out;
+}
+
+.task-trace-overlay .trace-filter-bar {
+  display: flex;
+  gap: 4px;
+  padding: 7px 10px;
+  border-bottom: 1px solid var(--exo-border);
+  flex-wrap: wrap;
+}
+.task-trace-overlay .trace-filter-button,
+.task-trace-overlay .trace-toggle-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--exo-border);
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--exo-text-3);
+  cursor: pointer;
+  font: inherit;
+  line-height: 1;
+}
+.task-trace-overlay .trace-filter-button {
+  height: 22px;
+  padding: 0 9px;
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.task-trace-overlay .trace-toggle-button {
+  height: 24px;
+  padding: 0 10px;
+  border-color: var(--exo-border-strong);
+  color: var(--exo-text-2);
+  font-size: 12px;
+}
+.task-trace-overlay .trace-filter-button:hover,
+.task-trace-overlay .trace-toggle-button:hover {
+  color: var(--exo-text-2);
+  background: var(--exo-surface);
+  border-color: var(--exo-border-strong);
+}
+.task-trace-overlay .trace-filter-button.active,
+.task-trace-overlay .trace-toggle-button.active {
+  color: var(--exo-accent-strong);
+  background: var(--exo-accent-soft);
+  border-color: transparent;
+}