@qaick/runner 0.32.2 → 0.32.4

package/package-dist/styles.css

@@ -14,16 +14,15 @@
 .button { height: 28px; padding: 0 10px; border: 1px solid #cfd5dd; border-radius: 5px; background: white; color: #334560; font-weight: 500; cursor: pointer; } .button.primary { border-color: #4f46d8; background: #4f46d8; color: white; } .button.dry-run { border-color: #8a9fc4; color: #315da9; background: #eef3fc; } .button.stop { color: #b33a30; }
 .file-button { position: relative; display: inline-grid; height: 28px; padding: 0 10px; place-items: center; border: 1px solid #cfd5dd; border-radius: 5px; background: white; color: #334560; cursor: pointer; } .file-button input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .load-error { margin: 12px 0 -8px; color: #b33a30; font-size: 12px; font-weight: 500; }
 .inputs-panel { margin-top: 18px; } .input-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px; } .input-field { color: #617089; } .input-field input { width: 100%; height: 28px; padding: 0 9px; border: 1px solid #cfd5dd; border-radius: 5px; color: #182234; background: #fff; font: inherit; font-weight: 500; } .input-hint { color: #7a899d; font-size: 11px; }
-.history-view-banner { margin-top: 12px; padding: 9px 12px; border: 1px solid #b9cbed; border-radius: 5px; color: #315da9; background: #eaf2ff; font-size: 12px; font-weight: 500; }
 .panel { margin-top: 24px; border: 1px solid #e5e7eb; border-radius: 8px; background: white; overflow: hidden; } .panel-heading { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; } h2 { margin: 0; font-size: 16px; } .running { color: #14804a; font-size: 12px; font-weight: 600; } .stopped { color: #b33a30; font-size: 12px; font-weight: 600; }
 table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding: 10px 14px; color: #7b899d; background: #fafbfd; font-size: 11px; text-align: left; text-transform: uppercase; letter-spacing: .04em; } td { padding: 10px 12px; border-top: 1px solid #edf0f7; } tr.parent-row td { background: #ffffff; } tr.nested-row td { background: #f3f7fd; } tr.selected td { background: #dce8ff !important; border-top-color: #9db9ed; } tr.selected td:first-child { border-left: 4px solid #4f46d8; } tr.selected .hierarchy-name { color: #173e91; font-weight: 500; } tbody tr { cursor: pointer; }
-.hierarchy-hint { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #dbe6fa; color: #315da9; background: #f2f6ff; font-size: 11px; } .hierarchy-hint span { color: #637897; } .hierarchy-action { padding: 4px 7px; border: 1px solid #b9cbed; border-radius: 4px; color: #315da9; background: #fff; font-size: 10px; font-weight: 500; cursor: pointer; } .hierarchy-action:first-of-type { margin-left: auto; } .hierarchy-name { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; } .collapse-toggle { display: inline-grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid #9eb5df; border-radius: 4px; color: #315da9; background: #eaf1ff; font-size: 14px; line-height: 1; cursor: pointer; } .branch-marker { color: #5d82ca; font-size: 18px; font-weight: 400; } .kind-label { display: inline-flex; padding: 3px 5px; border-radius: 4px; color: #6c7890; background: #edf0f7; font-size: 9px; font-weight: 600; letter-spacing: .05em; } .nested-label { color: #315da9; background: #e5efff; } .nested-row td:first-child { border-left: 3px solid #8eaded; } .parent-row td:first-child { border-left: 3px solid transparent; }
-.step-icon { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 50%; color: white; background: var(--runner-surface-3); font-size: 11px; } .nested-row .step-icon { margin-left: 18px; } .nested-row .hierarchy-name { padding-left: 0 !important; } .step-icon.waiting { background: #efaa18; } .step-icon.skipped { color: #62738c; background: #edf1f6; } .step-icon.failed, .step-icon.cancelled { background: #c94b42; } .step-icon.pending { border: 2px solid #aab6c7; background: transparent; }
+.hierarchy-hint { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid #dbe6fa; color: #315da9; background: #f2f6ff; font-size: 11px; } .hierarchy-hint span { color: #637897; } .hierarchy-action { padding: 4px 7px; border: 1px solid #b9cbed; border-radius: 4px; color: #315da9; background: #fff; font-size: 10px; font-weight: 500; cursor: pointer; } .hierarchy-action:first-of-type { margin-left: auto; } .hierarchy-name { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; } .collapse-toggle { display: inline-grid; width: 18px; height: 18px; place-items: center; padding: 0; border: 1px solid #9eb5df; border-radius: 4px; color: #315da9; background: #eaf1ff; font-size: 14px; line-height: 1; cursor: pointer; } .branch-marker { color: #5d82ca; font-size: 18px; font-weight: 400; } .kind-label { display: inline-flex; padding: 3px 5px; border-radius: 4px; color: #6c7890; background: #edf0f7; font-size: 9px; font-weight: 600; letter-spacing: .05em; } .nested-label { color: #315da9; background: #e5efff; } .nested-row td:first-child { border-left: 3px solid transparent; } .parent-row td:first-child { border-left: 3px solid transparent; }
+.step-icon { display: inline-grid; width: 20px; height: 20px; margin-right: 7px; place-items: center; border-radius: 50%; color: white; background: var(--runner-surface-3); font-size: 11px; } .nested-row .step-icon { margin-left: 18px; } .step-icon.waiting { background: #efaa18; } .step-icon.skipped { color: #62738c; background: #edf1f6; } .step-icon.failed, .step-icon.cancelled { background: #c94b42; } .step-icon.pending { border: 2px solid #aab6c7; background: transparent; }
 .selected-label { display: inline-flex; margin-left: 8px; padding: 3px 5px; border-radius: 4px; color: #3f37b8; background: #c4d7ff; font-size: 9px; font-weight: 600; letter-spacing: .05em; }
 .status { display: inline-flex; padding: 4px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; letter-spacing: .03em; } .status.finished { color: #14804a; background: #e7f6ed; } .status.waiting { color: #98660b; background: #fff2d5; } .status.pending, .status.skipped { color: #62738c; background: #edf1f6; } .status.failed, .status.cancelled { color: #a33a32; background: #ffebe8; }
-.loop-row td { background: #f5f8fe; border-top: 1px solid #c8d7f0; border-bottom: 1px solid #dce6f6; } .loop-row td:first-child { border-left: 3px solid #668bd2; border-radius: 9px 0 0 0; } .loop-row td:last-child { border-right: 1px solid #c8d7f0; border-radius: 0 9px 0 0; } .loop-icon { color: #fff; background: #668bd2; font-size: 15px; } .loop-label { color: #315da9; background: #e7efff; } .loop-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; min-width: 220px; margin-bottom: 4px; color: #315da9; font-size: 10px; letter-spacing: .02em; } .loop-progress small { flex-basis: 100%; color: #71839c; font-size: 10px; } .loop-bar { width: 92px; height: 6px; overflow: hidden; border-radius: 99px; background: #dce6f6; } .loop-bar i { display: block; height: 100%; border-radius: inherit; background: #668bd2; transition: width .2s ease; } .loop-content td { border-top: 0; border-bottom: 0; background: #ffffff; } .loop-content td:first-child { border-left: 3px solid #c8d7f0; } .loop-content td:last-child { border-right: 1px solid #c8d7f0; } .loop-end td { border-bottom: 1px solid #c8d7f0; } .loop-end td:first-child { border-radius: 0 0 0 9px; } .loop-end td:last-child { border-radius: 0 0 9px 0; }
+.loop-row td { background: #f5f8fe; border-top: 1px solid #c8d7f0; border-bottom: 1px solid #dce6f6; } .loop-row td:first-child { border-left: 3px solid transparent; border-radius: 9px 0 0 0; } .loop-row td:last-child { border-right: 1px solid #c8d7f0; border-radius: 0 9px 0 0; } .loop-icon { color: #fff; background: #668bd2; font-size: 15px; } .loop-label { color: #315da9; background: #e7efff; } .loop-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 8px; min-width: 220px; margin-bottom: 4px; color: #315da9; font-size: 10px; letter-spacing: .02em; } .loop-progress small { flex-basis: 100%; color: #71839c; font-size: 10px; } .loop-bar { width: 92px; height: 6px; overflow: hidden; border-radius: 99px; background: #dce6f6; } .loop-bar i { display: block; height: 100%; border-radius: inherit; background: #668bd2; transition: width .2s ease; } .loop-content td { border-top: 0; border-bottom: 0; background: #ffffff; } .loop-content td:first-child { border-left: 3px solid transparent; } .loop-content td:last-child { border-right: 1px solid #c8d7f0; } .loop-end td { border-bottom: 1px solid #c8d7f0; } .loop-end td:first-child { border-radius: 0 0 0 9px; } .loop-end td:last-child { border-radius: 0 0 9px 0; }
 .event-panel { margin-top: 18px; } .event-row td { padding: 9px 14px; font-size: 12px; } code { color: #294d9c; font-family: ui-monospace, monospace; font-size: 11px; }
-.inspector { padding: 20px 16px; border-left: 1px solid #cbd1d8; } .inspector h2 { font-size: 17px; } .selected-detail-name { margin: 6px 0 0; color: #3f37b8; font-size: 13px; } .run-id { margin: 5px 0 20px; color: #7a899d; font-family: ui-monospace, monospace; font-size: 10px; } .inspector-section { padding: 14px 0; border-top: 1px solid #e5e7eb; } .inspector-section h3 { margin: 0 0 11px; font-size: 13px; }
+.inspector { padding: 20px; border-left: 1px solid #cbd1d8; } .inspector h2 { font-size: 17px; } .selected-detail-name { margin: 6px 0 0; color: #3f37b8; font-size: 13px; } .run-id { margin: 5px 0 20px; color: #7a899d; font-family: ui-monospace, monospace; font-size: 10px; } .inspector-section { padding: 14px 0; border-top: 1px solid #e5e7eb; } .inspector-section h3 { margin: 0 0 11px; font-size: 13px; }
 .selection-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .selection-nav .button { padding: 5px 8px; font-size: 11px; }
 .parallel-event { color: #617089; font-size: 10px; }
 .event-filter { min-width: 120px; padding: 6px 8px; font-size: 11px; }
@@ -67,7 +66,7 @@ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding:
 .runner-context-menu strong { display: block; padding: 7px 9px 5px; color: #637897; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
 .runner-context-menu button { display: block; width: 100%; padding: 8px 9px; border: 0; border-radius: 4px; color: #243753; background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
 .runner-context-menu button:hover { background: #edf3ff; color: #173e91; }
-.breakpoint-marker { display: inline-grid; width: 22px; height: 22px; place-items: center; color: #fff; background: #b93645; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); filter: drop-shadow(0 1px 1px rgba(62, 20, 27, .25)); font-family: Arial, sans-serif; font-size: 4.5px; font-weight: 900; letter-spacing: .06em; line-height: 1; }
+.breakpoint-marker { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--runner-fail); }
 
 .button.resume-highlight { border-color: #4f46d8; background: #4f46d8; color: #fff; box-shadow: 0 0 0 3px rgba(53, 105, 212, .18); }
 
@@ -201,7 +200,7 @@ label { color: var(--runner-muted); }
 .button.primary:hover,
 .button.resume-highlight:hover { border-color: var(--runner-blue-strong); background: var(--runner-blue-strong); }
 .panel-heading,
-.inspector-section { border-color: var(--runner-line); }
+.inspector-section { border-color: var(--runner-divider); }
 th { color: var(--runner-faint); background: var(--runner-surface-2); }
 td { border-color: var(--runner-line); }
 tr.parent-row td,
@@ -296,7 +295,8 @@ select { color: var(--runner-ink); }
 :root[data-theme='dark'] select { color: var(--runner-ink-2); }
 .event-search { height: 28px; padding: 0 8px; border: 1px solid var(--runner-line-strong); min-width: 0; }
 .panel-heading { background: var(--runner-surface-2); }
-.panel-heading h2, .inspector h2 { font-size: 14px; font-weight: 600; }
+.panel-heading h2 { font-size: 13px; line-height: 18.85px; font-weight: 700; }
+.inspector h2 { font-size: 15px; line-height: 21.75px; font-weight: 600; }
 .nav-label, .eyebrow, th { font-size: 10px; font-weight: 600; letter-spacing: .05em; }
 .package-card { margin: 20px 0 0; background: var(--runner-surface-2); }
 .description, .about-dialog p, .about-dialog small, .about-dialog footer, .history-meta,
@@ -316,11 +316,11 @@ select { color: var(--runner-ink); }
 .validation-issue { color: var(--runner-fail); background: var(--runner-fail-soft); }
 .validation-pass .validation-icon { background: var(--runner-ok); }
 .key-values span { border-color: var(--runner-line); overflow-wrap: anywhere; min-width: 0; }
-.history-view-banner { border-color: var(--runner-blue-line); color: var(--runner-blue); background: var(--runner-blue-soft); }
 .debug-session-badge, .local-control.active { border-color: var(--runner-fail); color: var(--runner-fail); background: var(--runner-fail-soft); }
 .loop-row td { background: var(--runner-surface-2); border-color: var(--runner-line); }
 .loop-content td, .loop-end td { border-color: var(--runner-line); }
-.loop-row td:first-child, .loop-row td:last-child, .nested-row td:first-child { border-color: var(--runner-blue-line); }
+.loop-row td:last-child { border-color: var(--runner-blue-line); }
+.nested-row td:first-child, .loop-row td:first-child, .loop-content td:first-child { border-left-color: transparent; }
 .loop-icon, .loop-bar i { background: var(--runner-blue); }
 .loop-progress, .branch-marker { color: var(--runner-blue); }
 .loop-progress small { color: var(--runner-muted); }
@@ -339,12 +339,15 @@ select { color: var(--runner-ink); }
 .runner-nav, .inspector { scrollbar-gutter: stable; }
 .runner-nav .nav-item { white-space: nowrap; }
 .run-controls { display: grid; gap: 12px; margin-top: 18px; }
-.run-settings { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(120px, 1fr)); gap: 8px 12px; }
+.run-settings { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(120px, 1fr); gap: 8px 12px; }
 .run-settings label { min-width: 0; font-weight: 500; gap: 5px; }
 .run-settings select { min-width: 0; width: 100%; }
 .run-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-bottom: 4px; }
 .run-actions :is(.button, .file-button) { white-space: nowrap; flex-shrink: 0; }
-.run-actions .primary { font-weight: 600; }
+.run-actions .button { height: 28px; padding: 0 10px; border-width: 1px; border-radius: 5px; font-size: 12px; line-height: 17.4px; font-weight: 500; }
+.run-actions :is(.primary, .resume-highlight) { font-weight: 600; }
+/* Existing stronger accent keeps text readable on the subtle selected surface. */
+.run-actions .button.dry-run:not(:disabled) { color: var(--runner-blue-strong); }
 .panel { margin-top: 18px; }
 .panel-heading { flex-wrap: wrap; gap: 8px; }
 .panel-heading .run-status, .panel-heading .running, .panel-heading .stopped { white-space: nowrap; font-weight: 600; }
@@ -364,13 +367,17 @@ select { color: var(--runner-ink); }
 .event-search { flex: 1 1 120px; width: 140px; max-width: 220px; }
 .event-filter { min-width: 110px; }
 .history-panel table { min-width: 640px; }
-.history-panel td:first-child { white-space: normal; min-width: 180px; max-width: 280px; }
-.history-panel td:last-child { min-width: 220px; }
-.history-panel td:last-child .button { margin: 0 4px 4px 0; white-space: nowrap; }
+.history-panel td:first-child { white-space: normal; min-width: 180px; }
+.history-panel td:last-child { white-space: nowrap; }
+.history-panel td:last-child .button { margin: 0 4px 0 0; white-space: nowrap; }
+.history-panel td:last-child .button:last-child { margin-right: 0; }
+.history-panel td:not(:first-child) { white-space: nowrap; }
+.history-project-name { display: block; font-size: 13px; font-weight: 600; line-height: 18.85px; overflow-wrap: anywhere; }
+.history-scope { display: block; margin-top: 3px; color: var(--runner-muted); font-size: 12px; line-height: 17.4px; overflow-wrap: anywhere; }
 .history-meta { overflow-wrap: anywhere; line-height: 1.5; }
-.inspector h2 { font-size: 14px; }
-.inspector-section { padding: 12px 0; }
-.inspector-section h3 { margin-bottom: 8px; }
+.inspector h2 { font-size: 15px; }
+.inspector-section { padding: 20px 0; }
+.inspector-section h3 { margin-bottom: 8px; font-size: 13px; line-height: 18.85px; font-weight: 700; }
 .run-id { overflow-wrap: anywhere; margin-bottom: 14px; line-height: 1.5; }
 .key-values { grid-template-columns: minmax(80px, .85fr) minmax(0, 1.15fr); }
 .key-values span { padding: 7px 8px; }
@@ -386,31 +393,6 @@ select { color: var(--runner-ink); }
   .run-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 1100px) {
-  .runner-main {
-    grid-template-columns: 170px minmax(0, 1fr);
-    grid-template-rows: max-content max-content;
-    align-content: start;
-    overflow-y: auto;
-  }
-  .runner-workspace { grid-column: 2; padding: 16px; overflow: visible; }
-  .runner-nav {
-    grid-column: 1;
-    grid-row: 1 / span 2;
-    position: sticky;
-    top: 0;
-    align-self: start;
-    max-height: 100%;
-    padding: 14px 8px;
-  }
-  .nav-item { gap: 6px; padding-inline: 8px; }
-  .inspector {
-    grid-column: 2;
-    grid-row: 2;
-    padding: 16px 12px;
-    overflow: visible;
-    border-left: 0;
-    border-top: 1px solid var(--runner-line);
-  }
   .input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .panel-heading .panel-spacer { display: none; }
   .panel-heading h2 { flex: 1 1 auto; }
@@ -432,6 +414,95 @@ select { color: var(--runner-ink); }
 .runner-authoring-source .run-settings { max-width: 40rem; }
 .runner-authoring-source .notice, .runner-authoring-source [role="alert"] { max-width: 80ch; }
 
+/* Execution and History share the loaded artifact context and live lifecycle. */
+.runner-shell { grid-template-rows: auto auto auto minmax(0, 1fr); }
+.runner-tabs { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--runner-line); background: var(--runner-chrome); }
+.runner-tabs [role="tab"] { height: 32px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--runner-ink-2); font: inherit; font-size: 13px; line-height: 18.85px; font-weight: 500; cursor: pointer; }
+.runner-tabs [aria-selected="true"] { border-bottom-color: var(--runner-blue); background: var(--runner-surface-3); color: var(--runner-blue-strong); }
+.runner-tabs [role="tab"]:hover:not([aria-selected="true"]) { background: var(--runner-surface-3); }
+.runner-tabs [role="tab"]:focus-visible { outline: 2px solid var(--runner-blue); outline-offset: 2px; }
+.runner-project-context { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 10px 16px; background: var(--runner-surface-2); border-bottom: 1px solid var(--runner-line); font-size: 12px; min-width: 0; }
+.runner-project-context .loaded-identity { min-width: 0; overflow-wrap: anywhere; color: var(--runner-muted); }
+.runner-pane-scroll { min-height: 0; min-width: 0; overflow: auto; }
+.runner-pane-scroll:focus-visible { outline: 2px solid var(--runner-blue); outline-offset: -2px; }
+.runner-main.runner-tabbed-main { height: 100%; grid-template-rows: minmax(0, 1fr); }
+.runner-tabbed-main > .runner-workspace { grid-column: 1; grid-row: 1; }
+.runner-tabbed-main > .inspector { grid-column: 3; grid-row: 1; border-left: 0; }
+.inspector-divider { position: relative; grid-column: 2; grid-row: 1; min-height: 0; background: var(--runner-pane-properties); cursor: col-resize; touch-action: none; user-select: none; }
+.inspector-divider::before { content: ''; position: absolute; inset-block: 0; left: 3px; width: 1px; background: var(--runner-divider); }
+.inspector-divider:hover::before, .inspector-divider:focus-visible::before { width: 2px; background: var(--runner-blue); }
+.inspector-divider:focus-visible { outline: 2px solid var(--runner-blue); outline-offset: -2px; }
+.runner-shell [hidden] { display: none !important; }
+
+/* Live evidence belongs below execution; History retains its Inspector disclosure. */
+.runner-event-log > summary { cursor: pointer; color: var(--runner-ink); font-size: 13px; font-weight: 600; }
+.runner-event-log .event-log-content { margin-top: 10px; min-width: 0; }
+.runner-event-log .event-log-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
+.runner-event-log .event-search { flex: 1 1 120px; width: auto; max-width: none; }
+.runner-event-log .event-filter { flex: 1 1 110px; min-width: 0; }
+.runner-event-log .event-log-scroll { max-height: 320px; overflow: auto; }
+.runner-event-log .event-log-list { margin: 0; padding: 0; list-style: none; }
+.runner-event-log .event-log-list > li + li { border-top: 1px solid var(--runner-line); }
+.runner-event-log .event-row { display: grid; gap: 4px; width: 100%; min-width: 0; padding: 10px 4px; border: 0; border-radius: 0; background: transparent; color: var(--runner-ink); font: inherit; font-size: 12px; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
+.runner-event-log .event-row:hover { background: var(--runner-surface-3); }
+.runner-event-log .event-row:focus-visible { outline-offset: -2px; }
+.runner-event-log .event-row-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; min-width: 0; font-size: 10px; }
+.runner-event-log .event-row-meta time, .runner-event-log .event-state { color: var(--runner-muted); }
+.runner-event-log .event-row-meta code { min-width: 0; }
+.runner-event-log .event-message, .runner-event-log .parallel-event { min-width: 0; }
+.runner-event-log .empty-state { padding: 0; overflow-wrap: anywhere; }
+
+.execution-event-log { padding: 12px; }
+
+.input-lock-fields { margin: 0; border: 0; min-width: 0; }
+
+/* Keep names aligned at each hierarchy depth, including leaves without a toggle. */
+.collapse-spacer { display: inline-block; flex: 0 0 18px; width: 18px; }
+.collapse-toggle { flex: 0 0 18px; }
+
+/* Outside the submitted execution scope: retain inspection and focus affordances. */
+.table-scroll tr.outside-scope td,
+.table-scroll tr.outside-scope .hierarchy-name,
+.table-scroll tr.outside-scope .branch-marker,
+.table-scroll tr.outside-scope .kind-label,
+.table-scroll tr.outside-scope .selected-label { color: var(--runner-muted); }
+
+/* L01–L06: simplify light surfaces without changing controls or dark theme. */
+:root:not([data-theme='dark']) .runner-workspace,
+:root:not([data-theme='dark']) .runner-workspace :is(.panel-heading, .hierarchy-hint, th),
+:root:not([data-theme='dark']) .runner-workspace tr:is(.parent-row, .nested-row, .loop-row, .loop-content, .loop-end) td {
+  background: var(--runner-surface);
+}
+:root:not([data-theme='dark']) .runner-workspace :is(.panel-heading, .hierarchy-hint) {
+  border-bottom-color: var(--runner-line);
+}
+:root:not([data-theme='dark']) .inspector .key-values span {
+  background: var(--runner-surface);
+}
+:root:not([data-theme='dark']) .inspector :is(.notice, .iteration-entry, .timing-details, .branch-path, .result-summary) {
+  background: var(--runner-pane-properties);
+}
+:root:not([data-theme='dark']) .inspector-section {
+  border-color: var(--runner-line);
+}
+
+/* R01–R06: structure and ownership remain separate from execution indicators. */
+.table-scroll[aria-label='Execution steps'] .hierarchy-cell { position: relative; white-space: nowrap; }
+.hierarchy-cell .hierarchy-name { position: relative; vertical-align: top; }
+.structural-icon { flex: 0 0 16px; color: var(--runner-ink-2); }
+.hierarchy-guides { --guide-center: 21px; position: absolute; inset: 0; pointer-events: none; color: var(--runner-divider); }
+.hierarchy-guide { position: absolute; top: 0; bottom: 0; border-left: 1px solid currentColor; }
+.hierarchy-guide.elbow { bottom: auto; height: var(--guide-center); }
+.hierarchy-guide.stem { top: var(--guide-center); }
+.hierarchy-guide.connected::after { content: ''; position: absolute; left: 0; right: 0; top: var(--guide-center); border-top: 1px solid currentColor; }
+.hierarchy-guide.elbow::after { top: auto; bottom: -1px; }
+
+.execution-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.execution-status .execution-status-icon { flex: 0 0 14px; width: 14px; height: 14px; margin: 0; font-size: 9px; }
+
+.history-view-banner { margin-top: 12px; padding: 9px 12px; border: 1px solid #b9cbed; border-radius: 5px; color: #315da9; background: #eaf2ff; font-size: 12px; font-weight: 500; }
+.history-view-banner { border-color: var(--runner-blue-line); color: var(--runner-blue); background: var(--runner-blue-soft); }
+
 .runner-demo { min-height: 100vh; padding: 24px 32px 34px; box-sizing: border-box; background: #edf2f8; color: #243654; }
 .runner-demo-title { display: flex; align-items: center; justify-content: space-between; max-width: 1420px; margin: 0 auto 24px; }
 .runner-demo-title div { display: flex; align-items: baseline; gap: 14px; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qaick/runner",
   "description": "Reusable QAick Runner module and standalone execution application.",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "type": "module",
   "files": [
     "package-dist",
@@ -62,10 +62,10 @@
     "publish:release": "npm run check:package && npm publish --tag latest"
   },
   "dependencies": {
-    "@qaick/contract": "0.5.0",
-    "@qaick/executor": "0.2.6",
-    "@qaick/http-executor": "0.2.6",
-    "@qaick/runtime": "0.2.7",
+    "@qaick/contract": "0.7.1",
+    "@qaick/executor": "0.4.1",
+    "@qaick/http-executor": "0.2.10",
+    "@qaick/runtime": "0.4.1",
     "zustand": "^5.0.15"
   },
   "peerDependencies": {