agentweaver 0.1.18 → 0.1.19

package/dist/interactive/web/static/index.html

@@ -18,6 +18,7 @@
         <span id="session-status">Idle</span>
       </div>
       <div class="topbar-actions">
+        <button id="artifact-open-button" type="button" hidden>Artifacts</button>
         <button id="run-button" type="button">Run</button>
         <button id="interrupt-button" type="button">Interrupt</button>
         <button id="help-button" type="button" aria-pressed="false">Help</button>
@@ -71,6 +72,42 @@
     </main>
   </div>
 
+  <aside id="artifact-drawer" class="artifact-drawer" aria-label="Artifact Explorer" hidden>
+    <div class="artifact-drawer-header">
+      <div>
+        <h2 id="artifact-title">Artifact Explorer</h2>
+        <p id="artifact-meta"></p>
+      </div>
+      <button id="artifact-close-button" type="button">Close</button>
+    </div>
+    <div id="artifact-message" class="artifact-message"></div>
+    <div class="artifact-drawer-body">
+      <section class="artifact-list-pane" aria-label="Artifacts by phase">
+        <div class="pane-heading">
+          <h2>Artifacts</h2>
+        </div>
+        <div id="artifact-list" class="artifact-list"></div>
+      </section>
+      <section class="artifact-preview" aria-label="Selected artifact preview">
+        <div class="artifact-preview-header">
+          <div class="artifact-selected">
+            <h2 id="artifact-selected-title">Preview</h2>
+            <p id="artifact-selected-meta">Select an artifact to preview it.</p>
+          </div>
+          <div class="artifact-toolbar" aria-label="Selected artifact actions">
+            <button id="artifact-copy-content-button" type="button" disabled>Copy content</button>
+            <button id="artifact-copy-reference-button" type="button" disabled>Copy path/reference</button>
+            <a id="artifact-open-raw-link" class="artifact-action-link disabled" target="_blank" rel="noopener noreferrer" aria-disabled="true">Open raw</a>
+            <a id="artifact-download-link" class="artifact-action-link disabled" aria-disabled="true">Download</a>
+            <button id="artifact-toolbar-close-button" type="button">Close</button>
+          </div>
+          <p id="artifact-action-status" class="artifact-action-status" role="status" aria-live="polite"></p>
+        </div>
+        <div id="artifact-preview-text" class="artifact-preview-content text-panel compact">Select an artifact to preview it.</div>
+      </section>
+    </div>
+  </aside>
+
   <div id="modal-root" class="modal-root" aria-live="polite"></div>
   <script src="/static/app.js" defer></script>
 </body>

package/dist/interactive/web/static/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-leading:initial;--tw-tracking:initial;--tw-border-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--font-weight-bold:700;--tracking-normal:0em;--leading-tight:1.25;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.hidden{display:none}}:root{color-scheme:dark;--aw-bg:#070b0a;--aw-bg-soft:#0b1210;--aw-panel:#0f1714;--aw-panel-muted:#111d19;--aw-border:#22352e;--aw-border-strong:#36564a;--aw-text:#e8f3ed;--aw-muted:#91a79b;--aw-dim:#6f8379;--aw-accent:#38e08f;--aw-accent-strong:#7af7bd;--aw-accent-soft:#38e08f21;--aw-cyan:#65d8ff;--aw-danger:#ff6b6b;--aw-success:#38e08f;--aw-warning:#f2c94c;--aw-shadow:0 28px 90px #00000073;--aw-glow:0 0 0 1px #38e08f14, 0 18px 60px #38e08f14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:calc(var(--spacing) * 0);background:linear-gradient(180deg, #38e08f14, transparent 24rem), radial-gradient(circle at 88% 8%, #65d8ff17, transparent 24rem), var(--aw-bg);color:var(--aw-text);overflow:hidden}button,input,select,textarea{font:inherit}button{min-height:calc(var(--spacing) * 8);justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border:1px solid var(--aw-border-strong);color:var(--aw-text);cursor:pointer;background:linear-gradient(#ffffff09,#ffffff04);display:inline-flex}button:hover,button:focus-visible{border-color:var(--aw-accent);color:var(--aw-accent-strong);outline:2px solid #0000;box-shadow:0 0 0 3px #38e08f1f}button.primary{color:var(--aw-accent-strong);background:linear-gradient(#38e08f42,#38e08f21);border-color:#38e08fbf}button.danger{color:#ffb3b3;border-color:#ff6b6bad}button:disabled{cursor:not-allowed;opacity:.48}.app-shell{grid-template-rows:auto minmax(0,1fr);height:100%;display:grid}.topbar{align-items:center;gap:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);border-bottom:1px solid var(--aw-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#070b0ae0;grid-template-columns:minmax(220px,1fr) auto auto;display:grid}.identity{min-width:0}h1,h2,p{letter-spacing:0;margin:0}h1{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--aw-text)}h1:before{content:"▰";color:var(--aw-accent);margin-right:.55rem;font-size:.78em}h2{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:uppercase;color:var(--aw-muted)}.identity p,.status-strip{color:var(--aw-muted);font-size:13px;line-height:1.35}.identity p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-strip,.topbar-actions,.pane-heading,.modal-actions{align-items:center;gap:calc(var(--spacing) * 2);display:flex}.topbar-actions{justify-content:flex-end}.connection{min-width:calc(var(--spacing) * 24);padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);border:1px solid;border-radius:3.40282e38px;justify-content:center;display:inline-flex}.connection-connecting{color:var(--aw-warning);background:#f2c94c21}.connection-connected{color:var(--aw-success);background:#38e08f24}.connection-disconnected,.connection-error,.connection-closed{color:var(--aw-danger);background:#ff6b6b1f}.workspace{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 3);grid-template-columns:minmax(230px,300px) minmax(380px,1fr) minmax(300px,440px);display:grid}.flows-pane,.details-pane,.log-pane,.help-panel,.work-panel{min-height:calc(var(--spacing) * 0);border-radius:var(--radius-lg);border:1px solid var(--aw-border);box-shadow:var(--aw-glow);background:linear-gradient(#0f1714f5,#0a100ef5);grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.details-pane{grid-template-rows:auto minmax(92px,.24fr) minmax(0,1fr);gap:10px}.split-panels{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.pane-heading{min-height:calc(var(--spacing) * 10);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);border-bottom:1px solid var(--aw-border);background:linear-gradient(#ffffff09,#ffffff03);justify-content:space-between}.flows-list{min-height:calc(var(--spacing) * 0);padding:calc(var(--spacing) * 2);overflow:auto}.flow-row{align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 1.5);text-align:left;background-color:#0000;border-width:1px;border-color:#0000;grid-template-columns:20px minmax(0,1fr);min-height:36px;display:grid}.flow-row:hover,.flow-row:focus-visible{background:#38e08f14}.flow-row.selected{background:var(--aw-accent-soft);color:var(--aw-accent-strong);border-color:#38e08f9e}.flow-row.folder{font-weight:700}.flow-icon{color:var(--aw-dim);text-align:center}.flow-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.flow-meta{text-overflow:ellipsis;white-space:nowrap;color:var(--aw-dim);grid-column:2;font-size:11px;overflow:hidden}.text-panel{margin:calc(var(--spacing) * 0);min-height:calc(var(--spacing) * 0);padding:calc(var(--spacing) * 3);overflow-wrap:anywhere;white-space:pre-wrap;color:#d7eadf;background:#070b0a6b;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.5;overflow:auto}.text-panel.compact{border-bottom:1px solid var(--aw-border)}.log-output{color:#d8f7e7;background:linear-gradient(#38e08f09,#0000 8rem),#050806}.help-panel{z-index:6;width:min(520px,100vw - 24px);max-height:calc(100vh - 88px);box-shadow:var(--aw-shadow);position:absolute;top:72px;right:12px}.modal-root:empty{display:none}.modal-root{inset:calc(var(--spacing) * 0);z-index:20;padding:calc(var(--spacing) * 5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020504b8;place-items:center;display:grid;position:fixed}.modal{border-radius:var(--radius-lg);border:1px solid var(--aw-border-strong);background:var(--aw-panel);width:min(720px,100%);max-height:min(760px,100vh - 40px);box-shadow:var(--aw-shadow);grid-template-rows:auto minmax(0,1fr) auto;display:grid}.modal.form-flow-routing-editor{width:min(940px,100%)}.modal-header,.modal-body,.modal-footer{padding:12px 14px}.modal-header{border-bottom:1px solid var(--aw-border)}.modal-header p,.field-help,.field-option small,.modal-note{color:var(--aw-muted);font-size:13px}.modal-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);display:grid;overflow:auto}.modal-footer{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 3);border-top:1px solid var(--aw-border);display:flex}.modal-actions{flex-wrap:wrap;justify-content:flex-end}.form-fields{gap:calc(var(--spacing) * 3);display:grid}.form-fields.route-fields{gap:0}.field-pair{align-items:flex-start;gap:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);border-bottom:1px solid var(--aw-border);grid-template-columns:minmax(220px,.9fr) minmax(280px,1.1fr);display:grid}.field-pair:first-child{padding-top:0}.field-pair:last-child{border-bottom:0;padding-bottom:0}.field{gap:calc(var(--spacing) * 1.5);display:grid}.field label,.field-title{font-weight:700}.field input[type=text],.field textarea,.field select{min-height:calc(var(--spacing) * 9);border-radius:var(--radius-md);width:100%;padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 2);border:1px solid var(--aw-border-strong);color:var(--aw-text);background:#070b0a}.field input[type=text]:focus,.field textarea:focus,.field select:focus{border-color:var(--aw-accent);outline:2px solid #0000;box-shadow:0 0 0 3px #38e08f1f}.field textarea{resize:vertical}.check-row,.field-option{align-items:flex-start;gap:calc(var(--spacing) * 2);display:flex}.option-list{gap:calc(var(--spacing) * 1.5);display:grid}.error-text{color:var(--aw-danger);font-weight:700}::selection{color:var(--aw-text);background:#38e08f52}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#284137;border:2px solid #08100d;border-radius:999px}::-webkit-scrollbar-track{background:#08100d}@media (max-width:1080px){body{overflow:auto}.app-shell{height:auto;min-height:100%}.workspace{grid-template-rows:minmax(260px,42vh) minmax(320px,1fr);grid-template-columns:minmax(220px,.35fr) minmax(0,1fr)}.log-pane{grid-column:1/-1;min-height:320px}}@media (max-width:760px){.topbar{grid-template-columns:1fr;gap:10px}.status-strip,.topbar-actions{flex-wrap:wrap;justify-content:flex-start}.workspace,.split-panels{grid-template-columns:1fr}.workspace{grid-template-rows:260px 520px 340px}.field-pair{grid-template-columns:1fr;gap:12px}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight:initial;--tw-leading:initial;--tw-tracking:initial;--tw-border-style:solid}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-semibold:600;--font-weight-bold:700;--tracking-normal:0em;--leading-tight:1.25;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.block{display:block}.hidden{display:none}.table{display:table}}:root{color-scheme:dark;--aw-bg:#070b0a;--aw-bg-soft:#0b1210;--aw-panel:#0f1714;--aw-panel-muted:#111d19;--aw-border:#22352e;--aw-border-strong:#36564a;--aw-text:#e8f3ed;--aw-muted:#91a79b;--aw-dim:#6f8379;--aw-accent:#38e08f;--aw-accent-strong:#7af7bd;--aw-accent-soft:#38e08f21;--aw-cyan:#65d8ff;--aw-danger:#ff6b6b;--aw-success:#38e08f;--aw-warning:#f2c94c;--aw-shadow:0 28px 90px #00000073;--aw-glow:0 0 0 1px #38e08f14, 0 18px 60px #38e08f14;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{margin:calc(var(--spacing) * 0);background:linear-gradient(180deg, #38e08f14, transparent 24rem), radial-gradient(circle at 88% 8%, #65d8ff17, transparent 24rem), var(--aw-bg);color:var(--aw-text);overflow:hidden}button,input,select,textarea{font:inherit}button{min-height:calc(var(--spacing) * 8);justify-content:center;align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));border:1px solid var(--aw-border-strong);color:var(--aw-text);cursor:pointer;background:linear-gradient(#ffffff09,#ffffff04);display:inline-flex}button:hover,button:focus-visible{border-color:var(--aw-accent);color:var(--aw-accent-strong);outline:2px solid #0000;box-shadow:0 0 0 3px #38e08f1f}button.primary{color:var(--aw-accent-strong);background:linear-gradient(#38e08f42,#38e08f21);border-color:#38e08fbf}button.danger{color:#ffb3b3;border-color:#ff6b6bad}button:disabled{cursor:not-allowed;opacity:.48}.app-shell{grid-template-rows:auto minmax(0,1fr);height:100%;display:grid}.topbar{align-items:center;gap:calc(var(--spacing) * 4);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);border-bottom:1px solid var(--aw-border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#070b0ae0;grid-template-columns:minmax(220px,1fr) auto auto;display:grid}.identity{min-width:0}h1,h2,p{letter-spacing:0;margin:0}h1{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--aw-text)}h1:before{content:"▰";color:var(--aw-accent);margin-right:.55rem;font-size:.78em}h2{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:uppercase;color:var(--aw-muted)}.identity p,.status-strip{color:var(--aw-muted);font-size:13px;line-height:1.35}.identity p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.status-strip,.topbar-actions,.pane-heading,.modal-actions{align-items:center;gap:calc(var(--spacing) * 2);display:flex}.topbar-actions{justify-content:flex-end}.connection{min-width:calc(var(--spacing) * 24);padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);border:1px solid;border-radius:3.40282e38px;justify-content:center;display:inline-flex}.connection-connecting{color:var(--aw-warning);background:#f2c94c21}.connection-connected{color:var(--aw-success);background:#38e08f24}.connection-disconnected,.connection-error,.connection-closed{color:var(--aw-danger);background:#ff6b6b1f}.workspace{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);padding:calc(var(--spacing) * 3);grid-template-columns:minmax(230px,300px) minmax(380px,1fr) minmax(300px,440px);display:grid}.flows-pane,.details-pane,.log-pane,.help-panel,.work-panel{min-height:calc(var(--spacing) * 0);border-radius:var(--radius-lg);border:1px solid var(--aw-border);box-shadow:var(--aw-glow);background:linear-gradient(#0f1714f5,#0a100ef5);grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.details-pane{grid-template-rows:auto minmax(92px,.24fr) minmax(0,1fr);gap:10px}.split-panels{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);grid-template-columns:minmax(0,1fr) minmax(0,1fr);display:grid}.pane-heading{min-height:calc(var(--spacing) * 10);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);border-bottom:1px solid var(--aw-border);background:linear-gradient(#ffffff09,#ffffff03);justify-content:space-between}.flows-list{min-height:calc(var(--spacing) * 0);padding:calc(var(--spacing) * 2);overflow:auto}.flow-row{align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);border-style:var(--tw-border-style);width:100%;padding-inline:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 1.5);text-align:left;background-color:#0000;border-width:1px;border-color:#0000;grid-template-columns:20px minmax(0,1fr);min-height:36px;display:grid}.flow-row:hover,.flow-row:focus-visible{background:#38e08f14}.flow-row.selected{background:var(--aw-accent-soft);color:var(--aw-accent-strong);border-color:#38e08f9e}.flow-row.folder{font-weight:700}.flow-icon{color:var(--aw-dim);text-align:center}.flow-label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.flow-meta{text-overflow:ellipsis;white-space:nowrap;color:var(--aw-dim);grid-column:2;font-size:11px;overflow:hidden}.text-panel{margin:calc(var(--spacing) * 0);min-height:calc(var(--spacing) * 0);padding:calc(var(--spacing) * 3);overflow-wrap:anywhere;white-space:pre-wrap;color:#d7eadf;background:#070b0a6b;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;font-size:12px;line-height:1.5;overflow:auto}.text-panel.compact{border-bottom:1px solid var(--aw-border)}.log-output{color:#d8f7e7;background:linear-gradient(#38e08f09,#0000 8rem),#050806}.help-panel{z-index:6;width:min(520px,100vw - 24px);max-height:calc(100vh - 88px);box-shadow:var(--aw-shadow);position:absolute;top:72px;right:12px}.artifact-drawer{top:calc(var(--spacing) * 0);right:calc(var(--spacing) * 0);z-index:10;border-left:1px solid var(--aw-border-strong);width:min(1120px,100vw - 32px);height:100%;box-shadow:var(--aw-shadow);background:#0a100efa;grid-template-rows:auto auto minmax(0,1fr);display:grid;position:fixed}.artifact-drawer-header{justify-content:space-between;align-items:flex-start;gap:calc(var(--spacing) * 3);padding-inline:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);border-bottom:1px solid var(--aw-border);background:linear-gradient(#ffffff0a,#ffffff03);display:flex}.artifact-drawer-header p,.artifact-message,.artifact-empty,.artifact-row-main span,.artifact-selected p,.artifact-action-status{color:var(--aw-muted);font-size:13px}.artifact-message{border-bottom:1px solid var(--aw-border);padding:10px 14px}.artifact-drawer-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 0);grid-template-columns:minmax(300px,.42fr) minmax(420px,1fr);display:grid}.artifact-list-pane,.artifact-preview{min-height:calc(var(--spacing) * 0);grid-template-rows:auto minmax(0,1fr);display:grid}.artifact-list-pane{border-right:1px solid var(--aw-border)}.artifact-list{min-height:calc(var(--spacing) * 0);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);overflow:auto}.artifact-group{gap:calc(var(--spacing) * 2);padding-block:calc(var(--spacing) * 2);display:grid}.artifact-group h3{margin:calc(var(--spacing) * 0);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:uppercase;color:var(--aw-dim)}.artifact-row{align-items:center;gap:calc(var(--spacing) * 2);border-radius:var(--radius-md);padding:calc(var(--spacing) * 2);border:1px solid var(--aw-border);background:#070b0a6b;grid-template-columns:minmax(0,1fr) auto;display:grid}.artifact-row.selected{background:var(--aw-accent-soft);border-color:#38e08f9e}.artifact-row-main{min-height:calc(var(--spacing) * 0);justify-content:stretch;gap:calc(var(--spacing) * 1);border-style:var(--tw-border-style);padding:calc(var(--spacing) * 0);text-align:left;box-shadow:none;background-color:#0000;border-width:0;display:grid}.artifact-row-main:hover,.artifact-row-main:focus-visible{box-shadow:none}.artifact-row-main strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.artifact-row-meta{min-width:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 1);grid-template-columns:auto auto minmax(0,1fr);display:grid}.artifact-row-meta span{min-width:calc(var(--spacing) * 0);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.artifact-row-meta span:not(:last-child):after{content:"|";color:var(--aw-dim);margin-left:.25rem}.artifact-row-actions{align-items:center;gap:calc(var(--spacing) * 2);display:flex}.artifact-row-actions a,.artifact-action-link{color:var(--aw-cyan);font-size:12px;font-weight:700;text-decoration:none}.artifact-row-actions a:hover,.artifact-row-actions a:focus-visible,.artifact-action-link:hover,.artifact-action-link:focus-visible{color:var(--aw-accent-strong);text-decoration:underline}.artifact-preview{grid-template-rows:auto minmax(0,1fr)}.artifact-preview-header{gap:calc(var(--spacing) * 2);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);border-bottom:1px solid var(--aw-border);background:linear-gradient(#ffffff09,#ffffff03);display:grid}.artifact-selected{min-width:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 1);display:grid}.artifact-selected h2,.artifact-selected p{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.artifact-toolbar{align-items:center;gap:calc(var(--spacing) * 2);flex-wrap:wrap;display:flex}.artifact-action-link{min-height:calc(var(--spacing) * 8);border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 1.5);border:1px solid var(--aw-border-strong);background:linear-gradient(#ffffff09,#ffffff04);justify-content:center;align-items:center;display:inline-flex}.artifact-action-link.disabled{color:var(--aw-dim);cursor:not-allowed;opacity:.48;pointer-events:none;text-decoration:none}.artifact-action-status{min-height:18px}.artifact-preview-content{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);align-content:start;display:grid;overflow:auto}.artifact-rendered-markdown{gap:calc(var(--spacing) * 3);color:var(--aw-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.6;display:grid}.artifact-rendered-markdown h1,.artifact-rendered-markdown h2,.artifact-rendered-markdown h3,.artifact-rendered-markdown h4,.artifact-rendered-markdown h5,.artifact-rendered-markdown h6{color:var(--aw-text);text-transform:none;margin:0;font-weight:750}.artifact-rendered-markdown h1{font-size:22px}.artifact-rendered-markdown h1:before{content:none}.artifact-rendered-markdown h2{font-size:18px}.artifact-rendered-markdown h3{font-size:15px}.artifact-rendered-markdown p,.artifact-rendered-markdown ul,.artifact-rendered-markdown ol{margin:0}.artifact-rendered-markdown ul,.artifact-rendered-markdown ol{padding-left:1.35rem}.artifact-rendered-markdown a,.artifact-placeholder-actions a{color:var(--aw-cyan);font-weight:700}.artifact-rendered-markdown code,.artifact-rendered-markdown pre,.artifact-text-preview{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace}.artifact-rendered-markdown code{border:1px solid var(--aw-border);color:#d8f7e7;background:#65d8ff14;border-radius:4px;padding:.08rem .28rem}.artifact-rendered-markdown pre,.artifact-text-preview{margin:calc(var(--spacing) * 0);border-radius:var(--radius-md);padding:calc(var(--spacing) * 3);border:1px solid var(--aw-border);color:#d7eadf;overflow-wrap:anywhere;white-space:pre-wrap;background:#0307069e;font-size:12px;line-height:1.5;overflow:auto}.artifact-rendered-markdown pre code{background:0 0;border:0;padding:0}.artifact-rendered-markdown table{border-collapse:collapse;width:100%;font-size:13px}.artifact-rendered-markdown th,.artifact-rendered-markdown td{border:1px solid var(--aw-border);text-align:left;vertical-align:top;padding:6px 8px}.artifact-rendered-markdown th{color:var(--aw-accent-strong);background:#ffffff0d}.artifact-json-viewer{gap:calc(var(--spacing) * 3);display:grid}.artifact-preview-modes{align-items:center;gap:calc(var(--spacing) * 2);flex-wrap:wrap;display:flex}.artifact-preview-warning,.artifact-truncation{border-radius:var(--radius-md);padding-inline:calc(var(--spacing) * 3);padding-block:calc(var(--spacing) * 2);color:#ffe49a;background:#f2c94c1c;border:1px solid #f2c94c6b;font-size:13px}.artifact-kind-label{width:fit-content;padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 1);font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);--tw-tracking:var(--tracking-normal);letter-spacing:var(--tracking-normal);text-transform:uppercase;border:1px solid var(--aw-border-strong);color:var(--aw-cyan);background:#65d8ff17;border-radius:3.40282e38px;display:inline-flex}.artifact-placeholder{gap:calc(var(--spacing) * 3);border-radius:var(--radius-md);padding:calc(var(--spacing) * 3);border:1px dashed var(--aw-border-strong);background:#070b0a61;display:grid}.artifact-placeholder dl{gap:calc(var(--spacing) * 2);grid-template-columns:minmax(80px,auto) minmax(0,1fr);margin:0;display:grid}.artifact-placeholder dt{color:var(--aw-muted);font-weight:700}.artifact-placeholder dd{overflow-wrap:anywhere;margin:0}.artifact-placeholder-actions{gap:calc(var(--spacing) * 3);flex-wrap:wrap;display:flex}.artifact-empty{border-radius:var(--radius-md);padding:calc(var(--spacing) * 3);border:1px dashed var(--aw-border);background:#070b0a52}.modal-root:empty{display:none}.modal-root{inset:calc(var(--spacing) * 0);z-index:20;padding:calc(var(--spacing) * 5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#020504b8;place-items:center;display:grid;position:fixed}.modal{border-radius:var(--radius-lg);border:1px solid var(--aw-border-strong);background:var(--aw-panel);width:min(720px,100%);max-height:min(760px,100vh - 40px);box-shadow:var(--aw-shadow);grid-template-rows:auto minmax(0,1fr) auto;display:grid}.modal.form-flow-routing-editor{width:min(940px,100%)}.modal-header,.modal-body,.modal-footer{padding:12px 14px}.modal-header{border-bottom:1px solid var(--aw-border)}.modal-header p,.field-help,.field-option small,.modal-note{color:var(--aw-muted);font-size:13px}.modal-body{min-height:calc(var(--spacing) * 0);gap:calc(var(--spacing) * 3);display:grid;overflow:auto}.modal-footer{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 3);border-top:1px solid var(--aw-border);display:flex}.modal-actions{flex-wrap:wrap;justify-content:flex-end}.form-fields{gap:calc(var(--spacing) * 3);display:grid}.form-fields.route-fields{gap:0}.field-pair{align-items:flex-start;gap:calc(var(--spacing) * 4);padding-block:calc(var(--spacing) * 3);border-bottom:1px solid var(--aw-border);grid-template-columns:minmax(220px,.9fr) minmax(280px,1.1fr);display:grid}.field-pair:first-child{padding-top:0}.field-pair:last-child{border-bottom:0;padding-bottom:0}.field{gap:calc(var(--spacing) * 1.5);display:grid}.field label,.field-title{font-weight:700}.field input[type=text],.field textarea,.field select{min-height:calc(var(--spacing) * 9);border-radius:var(--radius-md);width:100%;padding-inline:calc(var(--spacing) * 2.5);padding-block:calc(var(--spacing) * 2);border:1px solid var(--aw-border-strong);color:var(--aw-text);background:#070b0a}.field input[type=text]:focus,.field textarea:focus,.field select:focus{border-color:var(--aw-accent);outline:2px solid #0000;box-shadow:0 0 0 3px #38e08f1f}.field textarea{resize:vertical}.check-row,.field-option{align-items:flex-start;gap:calc(var(--spacing) * 2);display:flex}.option-list{gap:calc(var(--spacing) * 1.5);display:grid}.error-text{color:var(--aw-danger);font-weight:700}::selection{color:var(--aw-text);background:#38e08f52}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#284137;border:2px solid #08100d;border-radius:999px}::-webkit-scrollbar-track{background:#08100d}@media (max-width:1080px){body{overflow:auto}.app-shell{height:auto;min-height:100%}.workspace{grid-template-rows:minmax(260px,42vh) minmax(320px,1fr);grid-template-columns:minmax(220px,.35fr) minmax(0,1fr)}.log-pane{grid-column:1/-1;min-height:320px}.artifact-drawer{width:min(960px,100vw - 18px)}.artifact-drawer-body{grid-template-columns:minmax(280px,.45fr) minmax(360px,1fr)}}@media (max-width:760px){.topbar{grid-template-columns:1fr;gap:10px}.status-strip,.topbar-actions{flex-wrap:wrap;justify-content:flex-start}.workspace,.split-panels{grid-template-columns:1fr}.workspace{grid-template-rows:260px 520px 340px}.artifact-drawer{border-left:0;border-top:1px solid var(--aw-border-strong);grid-template-rows:auto auto minmax(0,1fr);width:100vw;height:min(92vh,760px);top:auto;bottom:0}.artifact-drawer-header{align-items:flex-start}.artifact-drawer-body{grid-template-rows:minmax(190px,.42fr) minmax(260px,1fr);grid-template-columns:1fr}.artifact-list-pane{border-right:0;border-bottom:1px solid var(--aw-border)}.artifact-row{grid-template-columns:1fr}.artifact-row-actions{justify-content:flex-start}.artifact-row-meta{grid-template-columns:minmax(0,1fr)}.artifact-row-meta span:not(:last-child):after{content:"";margin-left:0}.artifact-selected h2,.artifact-selected p{white-space:normal;overflow-wrap:anywhere}.field-pair{grid-template-columns:1fr;gap:12px}}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-leading{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}

package/dist/interactive/web/static/styles.input.css

@@ -278,6 +278,331 @@ h2 {
   box-shadow: var(--aw-shadow);
 }
 
+.artifact-drawer {
+  @apply fixed right-0 top-0 z-10 grid h-full;
+  width: min(1120px, calc(100vw - 32px));
+  grid-template-rows: auto auto minmax(0, 1fr);
+  border-left: 1px solid var(--aw-border-strong);
+  background: rgba(10, 16, 14, 0.98);
+  box-shadow: var(--aw-shadow);
+}
+
+.artifact-drawer-header {
+  @apply flex items-start justify-between gap-3 px-4 py-3;
+  border-bottom: 1px solid var(--aw-border);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
+}
+
+.artifact-drawer-header p,
+.artifact-message,
+.artifact-empty,
+.artifact-row-main span,
+.artifact-selected p,
+.artifact-action-status {
+  color: var(--aw-muted);
+  font-size: 13px;
+}
+
+.artifact-message {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--aw-border);
+}
+
+.artifact-drawer-body {
+  @apply grid min-h-0 gap-0;
+  grid-template-columns: minmax(300px, 0.42fr) minmax(420px, 1fr);
+}
+
+.artifact-list-pane,
+.artifact-preview {
+  @apply grid min-h-0;
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.artifact-list-pane {
+  border-right: 1px solid var(--aw-border);
+}
+
+.artifact-list {
+  @apply min-h-0 overflow-auto px-3 py-2;
+}
+
+.artifact-group {
+  @apply grid gap-2 py-2;
+}
+
+.artifact-group h3 {
+  @apply m-0 text-xs font-bold uppercase tracking-normal;
+  color: var(--aw-dim);
+}
+
+.artifact-row {
+  @apply grid items-center gap-2 rounded-md p-2;
+  grid-template-columns: minmax(0, 1fr) auto;
+  border: 1px solid var(--aw-border);
+  background: rgba(7, 11, 10, 0.42);
+}
+
+.artifact-row.selected {
+  border-color: rgba(56, 224, 143, 0.62);
+  background: var(--aw-accent-soft);
+}
+
+.artifact-row-main {
+  @apply grid min-h-0 justify-stretch gap-1 border-0 bg-transparent p-0 text-left;
+  box-shadow: none;
+}
+
+.artifact-row-main:hover,
+.artifact-row-main:focus-visible {
+  box-shadow: none;
+}
+
+.artifact-row-main strong {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-row-meta {
+  @apply grid min-w-0 gap-1;
+  grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+.artifact-row-meta span {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-row-meta span:not(:last-child)::after {
+  content: "|";
+  margin-left: 0.25rem;
+  color: var(--aw-dim);
+}
+
+.artifact-row-actions {
+  @apply flex items-center gap-2;
+}
+
+.artifact-row-actions a,
+.artifact-action-link {
+  color: var(--aw-cyan);
+  font-size: 12px;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.artifact-row-actions a:hover,
+.artifact-row-actions a:focus-visible,
+.artifact-action-link:hover,
+.artifact-action-link:focus-visible {
+  color: var(--aw-accent-strong);
+  text-decoration: underline;
+}
+
+.artifact-preview {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
+.artifact-preview-header {
+  @apply grid gap-2 px-3 py-2;
+  border-bottom: 1px solid var(--aw-border);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
+}
+
+.artifact-selected {
+  @apply grid min-w-0 gap-1;
+}
+
+.artifact-selected h2,
+.artifact-selected p {
+  @apply overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.artifact-toolbar {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.artifact-action-link {
+  @apply inline-flex min-h-8 items-center justify-center rounded-md px-3 py-1.5;
+  border: 1px solid var(--aw-border-strong);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
+}
+
+.artifact-action-link.disabled {
+  color: var(--aw-dim);
+  cursor: not-allowed;
+  opacity: 0.48;
+  pointer-events: none;
+  text-decoration: none;
+}
+
+.artifact-action-status {
+  min-height: 18px;
+}
+
+.artifact-preview-content {
+  @apply grid min-h-0 gap-3 overflow-auto;
+  align-content: start;
+}
+
+.artifact-rendered-markdown {
+  @apply grid gap-3;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--aw-text);
+}
+
+.artifact-rendered-markdown h1,
+.artifact-rendered-markdown h2,
+.artifact-rendered-markdown h3,
+.artifact-rendered-markdown h4,
+.artifact-rendered-markdown h5,
+.artifact-rendered-markdown h6 {
+  margin: 0;
+  color: var(--aw-text);
+  font-weight: 750;
+  text-transform: none;
+}
+
+.artifact-rendered-markdown h1 {
+  font-size: 22px;
+}
+
+.artifact-rendered-markdown h1::before {
+  content: none;
+}
+
+.artifact-rendered-markdown h2 {
+  font-size: 18px;
+}
+
+.artifact-rendered-markdown h3 {
+  font-size: 15px;
+}
+
+.artifact-rendered-markdown p,
+.artifact-rendered-markdown ul,
+.artifact-rendered-markdown ol {
+  margin: 0;
+}
+
+.artifact-rendered-markdown ul,
+.artifact-rendered-markdown ol {
+  padding-left: 1.35rem;
+}
+
+.artifact-rendered-markdown a,
+.artifact-placeholder-actions a {
+  color: var(--aw-cyan);
+  font-weight: 700;
+}
+
+.artifact-rendered-markdown code,
+.artifact-rendered-markdown pre,
+.artifact-text-preview {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.artifact-rendered-markdown code {
+  border: 1px solid var(--aw-border);
+  border-radius: 4px;
+  background: rgba(101, 216, 255, 0.08);
+  padding: 0.08rem 0.28rem;
+  color: #d8f7e7;
+}
+
+.artifact-rendered-markdown pre,
+.artifact-text-preview {
+  @apply m-0 overflow-auto rounded-md p-3;
+  border: 1px solid var(--aw-border);
+  background: rgba(3, 7, 6, 0.62);
+  color: #d7eadf;
+  font-size: 12px;
+  line-height: 1.5;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.artifact-rendered-markdown pre code {
+  border: 0;
+  background: transparent;
+  padding: 0;
+}
+
+.artifact-rendered-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+.artifact-rendered-markdown th,
+.artifact-rendered-markdown td {
+  border: 1px solid var(--aw-border);
+  padding: 6px 8px;
+  text-align: left;
+  vertical-align: top;
+}
+
+.artifact-rendered-markdown th {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--aw-accent-strong);
+}
+
+.artifact-json-viewer {
+  @apply grid gap-3;
+}
+
+.artifact-preview-modes {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+.artifact-preview-warning,
+.artifact-truncation {
+  @apply rounded-md px-3 py-2;
+  border: 1px solid rgba(242, 201, 76, 0.42);
+  background: rgba(242, 201, 76, 0.11);
+  color: #ffe49a;
+  font-size: 13px;
+}
+
+.artifact-kind-label {
+  @apply inline-flex w-fit rounded-full px-2.5 py-1 text-xs font-bold uppercase tracking-normal;
+  border: 1px solid var(--aw-border-strong);
+  color: var(--aw-cyan);
+  background: rgba(101, 216, 255, 0.09);
+}
+
+.artifact-placeholder {
+  @apply grid gap-3 rounded-md p-3;
+  border: 1px dashed var(--aw-border-strong);
+  background: rgba(7, 11, 10, 0.38);
+}
+
+.artifact-placeholder dl {
+  @apply grid gap-2;
+  grid-template-columns: minmax(80px, auto) minmax(0, 1fr);
+  margin: 0;
+}
+
+.artifact-placeholder dt {
+  color: var(--aw-muted);
+  font-weight: 700;
+}
+
+.artifact-placeholder dd {
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.artifact-placeholder-actions {
+  @apply flex flex-wrap gap-3;
+}
+
+.artifact-empty {
+  @apply rounded-md p-3;
+  border: 1px dashed var(--aw-border);
+  background: rgba(7, 11, 10, 0.32);
+}
+
 .modal-root:empty {
   display: none;
 }
@@ -439,6 +764,14 @@ h2 {
     grid-column: 1 / -1;
     min-height: 320px;
   }
+
+  .artifact-drawer {
+    width: min(960px, calc(100vw - 18px));
+  }
+
+  .artifact-drawer-body {
+    grid-template-columns: minmax(280px, 0.45fr) minmax(360px, 1fr);
+  }
 }
 
 @media (max-width: 760px) {
@@ -462,6 +795,53 @@ h2 {
     grid-template-rows: 260px 520px 340px;
   }
 
+  .artifact-drawer {
+    top: auto;
+    bottom: 0;
+    height: min(92vh, 760px);
+    width: 100vw;
+    grid-template-rows: auto auto minmax(0, 1fr);
+    border-left: 0;
+    border-top: 1px solid var(--aw-border-strong);
+  }
+
+  .artifact-drawer-header {
+    align-items: flex-start;
+  }
+
+  .artifact-drawer-body {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(190px, 0.42fr) minmax(260px, 1fr);
+  }
+
+  .artifact-list-pane {
+    border-right: 0;
+    border-bottom: 1px solid var(--aw-border);
+  }
+
+  .artifact-row {
+    grid-template-columns: 1fr;
+  }
+
+  .artifact-row-actions {
+    justify-content: flex-start;
+  }
+
+  .artifact-row-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .artifact-row-meta span:not(:last-child)::after {
+    content: "";
+    margin-left: 0;
+  }
+
+  .artifact-selected h2,
+  .artifact-selected p {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
   .field-pair {
     grid-template-columns: 1fr;
     gap: 12px;