@qaick/runner 0.32.1 → 0.32.3

package/package-dist/styles.css

@@ -1,6 +1,6 @@
 :root { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; color: #182234; background: #f7f8fc; font-size: 13px; color-scheme: light; }
 :root[data-theme='dark'] { color: #e6edf7; background: #111827; color-scheme: dark; }
-* { box-sizing: border-box; } body { margin: 0; min-width: 980px; } button, select { font: inherit; }
+* { box-sizing: border-box; } body { margin: 0; } button, select { font: inherit; }
 .runner-shell { height: 100vh; min-height: 100vh; display: grid; grid-template-rows: 44px minmax(0, 1fr); } .runner-header { display: flex; align-items: center; gap: 18px; padding: 0 12px 0 16px; border-bottom: 1px solid #cbd1d8; background: #fff; font-size: 13px; }
 .runner-brand { display: flex; align-items: baseline; gap: 6px; flex: none; } .runner-brand-mark { color: #4f46d8; font-size: 13px; font-weight: 500; letter-spacing: .04em; } .runner-brand-product { color: #182234; font-size: 13px; font-weight: 500; } .runner-brand .about-button { height: 25px; margin-left: 6px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; color: #34435b; font-size: 12px; font-weight: 650; } .runner-brand .about-button:hover { background: #f0f3f8; color: #182234; } .runner-logo { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: white; background: #4f46d8; font-size: 13px; } .alpha-label { color: #70809a; font-size: 13px; } .header-spacer, .panel-spacer { flex: 1; }
 .engine-status { display: flex; align-items: center; gap: 7px; color: #14804a; font-size: 12px; font-weight: 500; } .engine-status i { width: 8px; height: 8px; border-radius: 50%; background: #19a463; }
@@ -18,7 +18,7 @@
 .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: #18a15d; 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; }
+.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; }
@@ -91,8 +91,8 @@ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding:
 :root {
   --runner-chrome: #fff;
   --runner-primary-label: #fff;
-  --runner-blue: #4f46d8;
-  --runner-blue-strong: #3f37b8;
+  --runner-blue: #0969ff;
+  --runner-blue-strong: #0055d4;
   --runner-blue-soft: #e8eeff;
   --runner-blue-line: #c8d5fa;
   --runner-ink: #182234;
@@ -102,8 +102,8 @@ table { width: 100%; border-collapse: collapse; font-size: 13px; } th { padding:
   --runner-surface: #fff;
   --runner-surface-2: #f7f8fc;
   --runner-surface-3: #edf0f7;
-  --runner-canvas: #fff;
-  --runner-pane-explorer: #eef0f2;
+  --runner-canvas: #f7f8fc;
+  --runner-pane-explorer: #fff;
   --runner-pane-properties: #f4f5f6;
   --runner-heading: #e1e4e8;
   --runner-divider: #cbd1d8;
@@ -207,9 +207,9 @@ td { border-color: var(--runner-line); }
 tr.parent-row td,
 .loop-content td { background: var(--runner-surface); }
 tr.nested-row td { background: var(--runner-surface-3); }
-tr.selected td { background: var(--runner-blue-soft) !important; border-top-color: var(--runner-blue-line); }
-tr.selected td:first-child { border-left-color: var(--runner-blue); }
-tr.selected .hierarchy-name,
+tr.selected td { background: color-mix(in srgb, var(--runner-blue) 10%, var(--runner-surface)) !important; border-top-color: var(--runner-line); }
+tr.selected td:first-child { border-left-color: transparent; }
+tr.selected .hierarchy-name { color: var(--runner-ink); }
 .selected-detail-name,
 code { color: var(--runner-blue-strong); }
 .hierarchy-hint { border-color: var(--runner-blue-line); color: var(--runner-blue-strong); background: var(--runner-blue-soft); }
@@ -256,7 +256,10 @@ code { color: var(--runner-blue-strong); }
 .runner-nav { background: var(--runner-pane-explorer); }
 .inspector { background: var(--runner-pane-properties); min-width: 0; }
 .runner-brand-mark { font-weight: 700; }
-.runner-nav .nav-item.active { color: var(--runner-blue); background: var(--runner-blue-soft); }
+.runner-nav .nav-item:hover { background: var(--runner-surface-3); }
+.runner-nav .nav-item.active { color: var(--runner-blue); background: var(--runner-surface-3); }
+.table-scroll[aria-label='Execution steps'] tbody tr:hover td { background: var(--runner-surface-3); }
+.panel { border-color: var(--runner-line); }
 .button, .file-button, .about-button, .hierarchy-action, .collapse-toggle,
 select, .input-field input, .event-search {
   font-family: inherit;
@@ -283,10 +286,14 @@ select, .input-field input, .event-search {
 .button:disabled, .about-button:disabled, .hierarchy-action:disabled {
   color: var(--runner-faint); cursor: not-allowed;
 }
-.button.primary:disabled, .button.resume-highlight:disabled { border-color: transparent; background: var(--runner-surface-3); box-shadow: none; }
+.button:disabled:hover { color: var(--runner-faint); background: var(--runner-surface); border-color: var(--runner-line-strong); }
+.button.primary:disabled, .button.resume-highlight:disabled,
+.button.primary:disabled:hover, .button.resume-highlight:disabled:hover { border-color: transparent; background: var(--runner-surface-3); box-shadow: none; }
 :is(button, select, input, a, summary):focus-visible { outline: 2px solid var(--runner-blue); outline-offset: 2px; }
 .file-button:focus-within { outline: 2px solid var(--runner-blue); outline-offset: 2px; }
 input[type='checkbox'] { accent-color: var(--runner-blue); }
+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; }
@@ -296,8 +303,11 @@ input[type='checkbox'] { accent-color: var(--runner-blue); }
 .parallel-event, .execution-menu-label, .empty-state { color: var(--runner-muted); }
 .status.pending, .status.skipped { color: var(--runner-muted); background: var(--runner-surface-3); }
 .selected-label { color: var(--runner-blue); background: var(--runner-blue-soft); }
-.step-icon { background: var(--runner-ok); color: var(--runner-surface); }
-.step-icon.pending { border-color: var(--runner-faint); background: transparent; }
+.step-icon { background: var(--runner-surface-3); color: var(--runner-muted); }
+.step-icon.finished { background: var(--runner-ok); color: var(--runner-surface); }
+.step-icon.running { background: var(--runner-blue); color: var(--runner-primary-label); }
+.step-icon.pending, .step-icon.not-executed { border: 2px solid var(--runner-faint); background: transparent; }
+.step-icon.waiting, .step-icon.failed, .step-icon.cancelled { color: var(--runner-surface); }
 .step-icon.waiting { background: var(--runner-warn); }
 .step-icon.failed, .step-icon.cancelled, .validation-failed .validation-icon, .issue-icon, .breakpoint-marker { background: var(--runner-fail); }
 .step-icon.skipped { color: var(--runner-muted); background: var(--runner-surface-3); }
@@ -329,7 +339,7 @@ input[type='checkbox'] { accent-color: var(--runner-blue); }
 .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; }
@@ -376,11 +386,6 @@ input[type='checkbox'] { accent-color: var(--runner-blue); }
   .run-settings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 @media (max-width: 1100px) {
-  .runner-main { grid-template-columns: 170px minmax(0, 1fr) 280px; }
-  .runner-workspace { padding: 16px; }
-  .runner-nav { padding: 14px 8px; }
-  .nav-item { gap: 6px; padding-inline: 8px; }
-  .inspector { padding: 16px 12px; }
   .input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
   .panel-heading .panel-spacer { display: none; }
   .panel-heading h2 { flex: 1 1 auto; }
@@ -394,7 +399,7 @@ input[type='checkbox'] { accent-color: var(--runner-blue); }
 .runner-theme-toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; flex-shrink: 0; border: 0; border-radius: 4px; color: var(--runner-ink-2); background: transparent; cursor: pointer; }
 .runner-theme-toggle:hover { color: var(--runner-ink); background: var(--runner-surface-3); }
 .runner-help { position: relative; flex-shrink: 0; }
-.runner-help-menu { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); min-width: 170px; padding: 4px; border: 1px solid var(--runner-line); border-radius: 5px; background: var(--runner-surface); box-shadow: 0 8px 24px rgb(25 32 45 / 18%); }
+.runner-help-menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 4px); min-width: 170px; padding: 4px; border: 1px solid var(--runner-line); border-radius: 5px; background: var(--runner-surface); box-shadow: 0 8px 24px rgb(25 32 45 / 18%); }
 .runner-help-menu :is(a,button) { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 3px; background: transparent; color: var(--runner-ink); font: inherit; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
 .runner-help-menu :is(a,button):hover { background: var(--runner-surface-3); }
 
@@ -402,6 +407,59 @@ input[type='checkbox'] { accent-color: var(--runner-blue); }
 .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"] { padding: 6px 14px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--runner-ink); font: inherit; cursor: pointer; }
+.runner-tabs [aria-selected="true"] { background: var(--runner-blue); color: var(--runner-primary-label); }
+.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); }
+
 .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.1",
+  "version": "0.32.3",
   "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": {