@shapeshift-labs/frontier-loom-ui 0.1.3 → 0.1.5

package/dist/public/styles.css

@@ -541,6 +541,7 @@ tr.risk-review td:first-child { color: var(--review); }
   padding: 2px 10px 12px;
 }
 .work-layout,
+.running-layout,
 .agent-work-layout,
 .action-layout,
 .performance-layout,
@@ -564,6 +565,173 @@ tr.risk-review td:first-child { color: var(--review); }
   overflow: auto;
   grid-template-rows: auto minmax(0, 1fr);
 }
+.running-layout {
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.running-filters {
+  min-width: 0;
+  display: grid;
+  gap: 8px;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: #0d0f10;
+  padding: 10px;
+}
+.running-filter-group {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 62px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+}
+.running-filter-group > span {
+  color: var(--muted);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1.9;
+  text-transform: uppercase;
+}
+.running-filter-group > div {
+  min-width: 0;
+  display: flex;
+  gap: 6px;
+  overflow-x: auto;
+  scrollbar-gutter: stable;
+}
+.running-filter {
+  flex: 0 0 auto;
+  max-width: 280px;
+  min-width: 0;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: #090a0b;
+  color: var(--muted);
+  padding: 5px 9px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  cursor: pointer;
+}
+.running-filter:hover,
+.running-filter:focus-visible {
+  border-color: var(--line-strong);
+  color: var(--text);
+}
+.running-filter:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.running-filter.active {
+  background: var(--surface-2);
+  border-color: var(--line-strong);
+  color: var(--text);
+}
+.running-graph-section {
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  overflow: hidden;
+}
+.running-graph-viewport {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-gutter: stable;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background:
+    linear-gradient(#101214 1px, transparent 1px),
+    linear-gradient(90deg, #101214 1px, transparent 1px),
+    #090a0b;
+  background-size: 28px 28px;
+}
+.running-graph-canvas {
+  position: relative;
+  min-width: 100%;
+  min-height: 100%;
+}
+.running-graph-svg {
+  position: absolute;
+  inset: 0;
+  display: block;
+  pointer-events: none;
+}
+.running-edge {
+  fill: none;
+  stroke: #37404a;
+  stroke-width: 2;
+  stroke-linecap: round;
+  opacity: .74;
+}
+.running-edge.good {
+  stroke: color-mix(in srgb, var(--good) 48%, #39414a);
+}
+.running-node {
+  position: absolute;
+  min-width: 0;
+  display: block;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #0d0f10;
+  color: var(--text);
+  padding: 11px 12px;
+  text-align: left;
+  box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
+}
+button.running-node {
+  cursor: pointer;
+}
+button.running-node:hover,
+button.running-node:focus-visible {
+  border-color: var(--line-strong);
+  background: #121518;
+}
+button.running-node:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.running-node.source,
+.running-node.lane,
+.running-node.agent {
+  border-color: color-mix(in srgb, var(--node-color, var(--line-strong)) 38%, var(--line));
+}
+.running-node.task.good {
+  border-color: color-mix(in srgb, var(--good) 36%, var(--line));
+}
+.running-node-inner {
+  min-width: 0;
+  height: 100%;
+  display: grid;
+  align-content: start;
+  gap: 5px;
+}
+.running-node-inner span {
+  color: var(--muted);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.running-node-inner b,
+.running-node-inner small,
+.running-node-inner em {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.running-node-inner b {
+  color: var(--text);
+  font-size: 14px;
+  line-height: 1.25;
+}
+.running-node-inner small,
+.running-node-inner em {
+  color: var(--muted);
+  font-size: 11px;
+  font-style: normal;
+  line-height: 1.3;
+}
 .goal-card {
   min-width: 0;
   display: grid;