my-durable 0.0.0-stage → 0.0.2

package/apps/dpi-playground/apps/dpi-playground-fe/src/jobs.css

@@ -0,0 +1,655 @@
+/* Durable jobs (run cards in the chat, the job list in Tasks), the task tree, and the context bar. */
+
+/* ------------------------------------------------------------------ run card */
+
+.job-run {
+  min-width: 0;
+  margin: 14px 0 6px;
+  border: 1px solid #5a3a3e;
+  border-left: 4px solid var(--accent);
+  background: linear-gradient(180deg, #2a1b1d, #221617);
+  border-radius: 9px;
+  padding: 16px 18px 14px;
+  color: var(--fg);
+}
+.job-run.is-completed {
+  border-left-color: var(--ok);
+}
+.job-run.is-waiting {
+  border-left-color: var(--warn);
+}
+.job-run.is-failed,
+.job-run.is-declined,
+.job-run.is-aborted {
+  border-left-color: #8d6a6d;
+}
+.job-run-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.job-run-icon {
+  display: grid;
+  place-items: center;
+  width: 40px;
+  height: 40px;
+  flex: none;
+  border-radius: 9px;
+  background: #3d2629;
+  color: var(--accent);
+}
+.job-run-titles {
+  min-width: 0;
+  flex: 1;
+}
+.job-run-titles h3 {
+  margin: 2px 0 0;
+  font-family: var(--font-title);
+  font-size: 19px;
+  font-weight: 750;
+}
+.job-run-eyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 12px;
+  font-size: 16px;
+  letter-spacing: 1.2px;
+  color: var(--secondary);
+}
+.job-run-repeat {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  letter-spacing: 0;
+  color: var(--fg);
+}
+.job-run-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  flex: none;
+  padding: 4px 9px;
+  border-radius: 5px;
+  background: #352728;
+  font-size: 16px;
+}
+.job-run-status i {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.job-run-status.running {
+  color: var(--accent);
+}
+.job-run-status.running i {
+  animation: pulse 1.5s infinite;
+}
+.job-run-status.waiting {
+  color: var(--warn);
+}
+.job-run-status.completed {
+  color: var(--ok);
+}
+.job-run-about {
+  margin: 12px 0 8px;
+  font-size: 16px;
+  line-height: 1.55;
+}
+.job-run-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 14px;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--secondary);
+}
+.job-run-input,
+.job-run-resumed {
+  color: var(--fg);
+}
+.job-run-resumed {
+  color: var(--warn);
+}
+
+/* The phase stepper wraps onto new lines instead of scrolling. */
+.job-stepper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 0;
+  list-style: none;
+  margin: 16px 0 12px;
+  padding: 0;
+}
+.job-stepper li {
+  display: inline-flex;
+  align-items: center;
+}
+.job-stepper li:not(:last-child)::after {
+  content: "→";
+  margin: 0 8px;
+  color: #8d6a6d;
+}
+.job-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 4px 11px 4px 4px;
+  border: 1px solid #4a3638;
+  border-radius: 999px;
+  background: #241819;
+  font-size: 16px;
+}
+.job-step-dot {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: #3a2a2c;
+  font-family: var(--font-mono);
+  font-size: 15px;
+}
+.ph-done .job-chip {
+  border-color: #3f6b52;
+}
+.ph-done .job-step-dot {
+  background: #24543a;
+  color: #b9f2cf;
+}
+.ph-running .job-chip {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px #ff899722;
+}
+.ph-running .job-step-dot {
+  background: #5a2a31;
+  color: var(--accent);
+}
+.ph-waiting .job-chip {
+  border-color: var(--warn);
+  box-shadow: 0 0 0 3px #f2c94c22;
+}
+.ph-waiting .job-step-dot {
+  background: #574719;
+  color: var(--warn);
+}
+.ph-failed .job-chip,
+.ph-aborted .job-chip {
+  border-color: #8d4a52;
+}
+.job-stepper .ph-skipped {
+  opacity: 0.55;
+}
+.job-step-progress {
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+
+.job-phases {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 6px;
+}
+.job-phase {
+  border: 1px solid #3c2b2d;
+  border-radius: 7px;
+  background: #1f1415;
+}
+.job-phase.ph-running {
+  border-color: #6a3a41;
+}
+.job-phase.ph-waiting {
+  border-color: #6b5a24;
+}
+.job-phase.ph-skipped,
+.job-phase.ph-pending {
+  opacity: 0.7;
+}
+.job-phase > summary {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  padding: 9px 12px;
+  list-style: none;
+  cursor: pointer;
+  font-size: 16px;
+}
+.job-phase summary::-webkit-details-marker {
+  display: none;
+}
+.job-phase-n {
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+.job-phase-summary {
+  flex: 1;
+  min-width: 160px;
+  color: #e6d7d8;
+}
+.job-phase-time {
+  margin-left: auto;
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+.job-phase-about,
+.job-phase-empty {
+  margin: 0;
+  padding: 0 12px 8px 34px;
+  font-size: 16px;
+  color: var(--secondary);
+}
+.job-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0 12px 10px 34px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 5px;
+}
+.job-steps > li {
+  display: block;
+  font-size: 16px;
+}
+.job-steps summary,
+.job-step-line {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  list-style: none;
+}
+.job-steps summary {
+  cursor: pointer;
+}
+.job-steps summary::after {
+  content: "⌄";
+  margin-left: 2px;
+  color: var(--secondary);
+}
+.job-steps details[open] summary::after {
+  content: "⌃";
+}
+.job-steps code {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  background: #2c1e20;
+  border-radius: 4px;
+  padding: 1px 6px;
+}
+.job-steps .k-tool code {
+  flex: none;
+  border: 1px solid #5a3a3e;
+}
+.job-step-kind {
+  color: var(--secondary);
+}
+.job-steps .k-tool .job-step-kind,
+.job-steps .k-agent .job-step-kind {
+  color: var(--accent);
+}
+.job-step-text {
+  min-width: 0;
+  color: var(--fg);
+}
+.job-step-args {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+.job-step-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+.job-steps .st-done .job-step-state svg {
+  color: var(--ok);
+}
+.job-steps .st-error .job-step-state svg {
+  color: #ff8997;
+}
+.job-steps .st-waiting .job-step-state svg {
+  color: var(--warn);
+}
+.job-steps pre {
+  margin: 4px 0 2px 25px;
+  padding: 7px 9px;
+  max-height: 180px;
+  overflow: auto;
+  white-space: pre-wrap;
+  background: #180f10;
+  border-radius: 5px;
+  font-size: 16px;
+  color: #e6d7d8;
+}
+.job-step-link {
+  margin: 2px 0 0 25px;
+}
+
+.job-approval {
+  margin-top: 12px;
+  padding: 12px 14px;
+  border: 1px solid #8a7330;
+  background: #2c2514;
+  border-radius: 8px;
+}
+.job-approval > div:first-child {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--warn);
+}
+.job-approval p {
+  margin: 6px 0 10px;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.job-approval-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.job-run-foot {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 14px;
+  margin-top: 12px;
+  padding-top: 10px;
+  border-top: 1px solid #3c2b2d;
+  font-size: 16px;
+  color: var(--secondary);
+}
+.job-run-foot span {
+  flex: 1;
+  min-width: 220px;
+}
+
+/* ------------------------------------------------------------------ Tasks tab */
+
+.job-def {
+  margin-top: 12px;
+  padding: 13px;
+  border: 1px solid #453536;
+  border-radius: 8px;
+  background: #241819;
+}
+.job-def-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.job-def-head svg {
+  color: var(--accent);
+}
+.job-def-head strong {
+  margin-right: auto;
+  font-size: 16px;
+}
+.job-def p {
+  margin: 8px 0;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.job-chain {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 4px;
+  list-style: none;
+  margin: 8px 0;
+  padding: 0;
+}
+.job-chain li {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 9px 3px 3px;
+  border: 1px solid #4a3638;
+  border-radius: 999px;
+  font-size: 16px;
+}
+.job-chain li span {
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3a2a2c;
+  font-family: var(--font-mono);
+  font-size: 14px;
+}
+.job-chain li:not(:last-child)::after {
+  content: "→";
+  margin-left: 4px;
+  color: #8d6a6d;
+}
+.job-def-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+.job-def-meta code {
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--secondary);
+  overflow-wrap: anywhere;
+}
+.job-def-last {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
+  margin-top: 10px;
+  font-size: 16px;
+}
+.job-def-last .text-button {
+  margin-top: 0;
+}
+.job-def-run {
+  margin-top: 12px;
+}
+
+.task-tree {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: grid;
+  gap: 4px;
+}
+.task-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  padding: 7px 10px;
+  margin-left: calc(var(--depth) * 18px);
+  border: 1px solid #3c2b2d;
+  border-left: 3px solid #5a3a3e;
+  border-radius: 6px;
+  background: #211617;
+  font-size: 16px;
+}
+.task-row[data-task-kind="pi.tool"] {
+  border-left-color: var(--accent);
+}
+.task-row[data-task-kind^="demo.job."] {
+  border-left-color: var(--warn);
+}
+.task-row small {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 16px;
+  color: var(--secondary);
+}
+.task-row .text-button {
+  margin-top: 0;
+}
+.task-phase {
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+
+/* ------------------------------------------------------------------ context bar */
+
+.context-section {
+  margin-top: 18px;
+}
+.context-numbers {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 6px 8px;
+  font-size: 16px;
+}
+.context-numbers strong {
+  font-family: var(--font-title);
+  font-size: 22px;
+}
+.context-pct {
+  font-family: var(--font-mono);
+  color: var(--secondary);
+}
+.context-compacting {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  color: var(--warn);
+}
+.context-compacting i {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: pulse 1.2s infinite;
+}
+.context-bar {
+  position: relative;
+  height: 14px;
+  margin: 40px 0 44px;
+  border-radius: 7px;
+  background: #2d2122;
+  border: 1px solid #453536;
+  touch-action: none;
+}
+.context-bar.off .context-marker {
+  opacity: 0.45;
+}
+.context-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  border-radius: 7px 0 0 7px;
+  background: linear-gradient(90deg, #8a3a45, var(--accent));
+  transition: width 0.3s;
+}
+.context-fill.hot {
+  background: linear-gradient(90deg, #8a3a45, var(--warn));
+}
+.context-reserve {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 0 7px 7px 0;
+  background: repeating-linear-gradient(135deg, #ffffff10 0 5px, transparent 5px 10px);
+  border-left: 1px solid #8d6a6d;
+}
+.context-marker {
+  position: absolute;
+  top: -7px;
+  width: 4px;
+  height: 26px;
+  padding: 0;
+  margin-left: -2px;
+  border-radius: 2px;
+  background: var(--warn);
+  cursor: ew-resize;
+  touch-action: none;
+}
+.context-marker::before {
+  content: "";
+  position: absolute;
+  inset: -4px -10px;
+}
+.context-marker.wait {
+  background: var(--fg);
+}
+.context-marker-label {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-size: 16px;
+  font-family: var(--font-mono);
+  color: var(--warn);
+  pointer-events: none;
+}
+.context-marker.auto .context-marker-label {
+  bottom: calc(100% + 4px);
+}
+.context-marker.wait .context-marker-label {
+  top: calc(100% + 4px);
+  color: var(--fg);
+}
+/* Labels near either end grow inward so they stay inside the panel. */
+.context-marker.label-start .context-marker-label {
+  left: -2px;
+  transform: none;
+}
+.context-marker.label-end .context-marker-label {
+  left: auto;
+  right: -2px;
+  transform: none;
+}
+.context-hint {
+  margin: 0 0 10px;
+}
+.context-details-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  color: var(--warn);
+  font-size: 16px;
+  letter-spacing: 0;
+}
+.compaction-modal p {
+  margin: 0 0 12px;
+  font-size: 16px;
+  line-height: 1.6;
+}
+.modal .context-toggle {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-top: 6px;
+}
+.modal .context-toggle input {
+  width: auto;
+  padding: 0;
+}
+.context-toggle {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
+  font-size: 16px;
+}
+.context-toggle small {
+  width: 100%;
+  font-size: 16px;
+  color: var(--secondary);
+}

package/apps/dpi-playground/apps/dpi-playground-fe/src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import { ui } from "./client/store";
+import { barePairHome, readPairHandoff } from "./client/pair-handoff";
+import "./style.css";
+import "./network.css";
+import "./jobs.css";
+import "./extensions.css";
+const url = new URL(window.location.href);
+if (/^\/pair\/?$/.test(url.pathname)) {
+  const handoff = readPairHandoff(url);
+  if (handoff) {
+    url.search = "";
+    url.hash = "";
+    window.history.replaceState(window.history.state, "", url);
+    ui.dialog = { kind: "pair", handoff };
+  } else {
+    // bare /pair: no handoff to resume — do not re-open the wizard or mint a fresh code
+    window.history.replaceState(window.history.state, "", barePairHome(url));
+  }
+}
+createApp(App).mount("#app");