@pi-harness/pi-harness 0.1.59 → 0.1.61

package/apps/web/src/style.css

@@ -496,7 +496,7 @@ button:disabled {
   @apply [flex:1];
 }
 .run-indicator {
-  @apply [display:flex] [align-items:center] [gap:6px] [flex:none] [color:var(--color-muted)] [font:10.5px_var(--font-mono)];
+  @apply [display:flex] [min-width:0] [max-width:min(52vw,_560px)] [align-items:center] [gap:6px] [flex:none] [padding:4px_5px_4px_8px] [border:1px_solid_rgba(53,_101,_197,_0.18)] [border-radius:8px] [background:var(--color-blue-soft)] [color:var(--color-muted)] [font:10.5px_var(--font-mono)];
 }
 .run-indicator .run-dot {
   @apply [width:6px] [height:6px] [border-radius:50%] [background:var(--color-green)] [animation:var(--animate-pulse-soft)];
@@ -505,11 +505,53 @@ button:disabled {
   @apply [white-space:nowrap];
 }
 .run-indicator button {
-  @apply [padding:2px_8px] [border:1px_solid_rgba(236,_19,_19,_0.24)] [border-radius:6px] [color:var(--color-red)] [font-size:11px];
+  @apply [flex:none] [padding:2px_8px] [border:1px_solid_rgba(236,_19,_19,_0.24)] [border-radius:6px] [background:var(--color-surface)] [color:var(--color-red)] [font-size:11px];
 }
 .run-indicator.running .run-dot {
   @apply [background:var(--color-blue)];
 }
+.run-indicator .run-phase {
+  @apply [color:var(--color-ink)] [font-weight:600];
+}
+.run-indicator .run-clock {
+  @apply [padding:1px_5px] [border-radius:4px] [background:rgba(255,_255,_255,_0.72)] [color:var(--color-blue)] [font-variant-numeric:tabular-nums];
+}
+.run-indicator .run-activity {
+  @apply [min-width:0] [overflow:hidden] [color:var(--color-muted)] [text-overflow:ellipsis];
+}
+.run-indicator.quiet,
+.run-indicator.connecting,
+.run-indicator.reconnecting {
+  @apply [border-color:rgba(180,_83,_9,_0.22)] [background:var(--color-amber-soft)];
+}
+.run-indicator.quiet .run-dot,
+.run-indicator.connecting .run-dot,
+.run-indicator.reconnecting .run-dot {
+  @apply [background:var(--color-amber)];
+}
+.run-indicator.quiet .run-clock,
+.run-indicator.connecting .run-clock,
+.run-indicator.reconnecting .run-clock {
+  @apply [color:var(--color-amber)];
+}
+.run-indicator.disconnected,
+.run-indicator.offline {
+  @apply [border-color:rgba(236,_19,_19,_0.22)] [background:var(--color-red-soft)];
+}
+.run-indicator.disconnected .run-dot,
+.run-indicator.offline .run-dot {
+  @apply [background:var(--color-red)] [animation:none];
+}
+.run-indicator.disconnected .run-clock,
+.run-indicator.offline .run-clock {
+  @apply [color:var(--color-red)];
+}
+.run-indicator button:hover {
+  @apply [background:var(--color-red)] [color:var(--color-inverse)];
+}
+.run-indicator button:focus-visible {
+  @apply [outline:2px_solid_var(--color-red)] [outline-offset:2px];
+}
 .view-tabs {
   @apply [display:flex] [gap:2px] [padding:2px] [border-radius:8px] [background:var(--color-soft)];
 }
@@ -664,6 +706,27 @@ button:disabled {
 .streaming-placeholder {
   @apply [display:flex] [align-items:center] [gap:8px] [color:var(--color-muted)] [font-size:12px];
 }
+.streaming-turn.quiet,
+.streaming-turn.connecting,
+.streaming-turn.reconnecting {
+  @apply [padding-left:12px] [border-left:2px_solid_var(--color-amber)];
+}
+.streaming-turn.disconnected,
+.streaming-turn.offline {
+  @apply [padding-left:12px] [border-left:2px_solid_var(--color-red)];
+}
+.streaming-activity {
+  @apply [width:fit-content] [margin-top:8px] [padding:3px_7px] [border-radius:5px] [background:var(--color-soft)] [color:var(--color-muted)] [font:10.5px_var(--font-mono)];
+}
+.streaming-activity.quiet,
+.streaming-activity.connecting,
+.streaming-activity.reconnecting {
+  @apply [background:var(--color-amber-soft)] [color:var(--color-amber)];
+}
+.streaming-activity.disconnected,
+.streaming-activity.offline {
+  @apply [background:var(--color-red-soft)] [color:var(--color-red)];
+}
 @keyframes spin-smooth {
   to {
     transform: rotate(360deg);
@@ -1751,6 +1814,18 @@ button:disabled {
   .main-header {
     @apply [gap:7px] [padding:0_10px];
   }
+  .main-header:has(.run-indicator) .active-heading,
+  .main-header:has(.run-indicator) .header-spacer,
+  .main-header:has(.run-indicator) .header-divider,
+  .main-header:has(.run-indicator) .details-toggle {
+    @apply [display:none];
+  }
+  .main-header:has(.run-indicator) .run-indicator {
+    @apply [max-width:none] [flex-wrap:nowrap] [margin-right:auto];
+  }
+  .main-header:has(.run-indicator) .run-activity {
+    @apply [display:none];
+  }
   .active-heading small {
     @apply [max-width:180px];
   }
@@ -1761,6 +1836,12 @@ button:disabled {
   .view-tabs {
     @apply [margin-left:auto];
   }
+  .run-indicator {
+    @apply [max-width:46vw] [flex-wrap:wrap] [gap-x:5px] [gap-y:1px];
+  }
+  .run-indicator .run-activity {
+    @apply [order:3] [basis:100%] [padding-left:12px] [font-size:9.5px];
+  }
   .composer-hint {
     @apply [display:none];
   }
@@ -1853,7 +1934,9 @@ button:disabled {
 @media (prefers-reduced-motion: reduce) {
   .session-dot.running,
   .run-indicator .run-dot,
-  .initial-loading > span {
+  .initial-loading > span,
+  .streaming-spinner,
+  .reasoning-head::after {
     @apply [animation:none];
   }
 }

package/node_modules/@pi-harness/api-gateway/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;;;;mBAmyBlC,OAAO;;AAHxB,wBA47CE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;;;;mBAmzBlC,OAAO;;AAHxB,wBAo9CE"}

package/node_modules/@pi-harness/api-gateway/dist/index.js

@@ -78,9 +78,16 @@ function jsonSafe(value, seen = new WeakSet()) {
 }
 // A plugin that contributes tools only joins on the next start, so the console remembers what it installed until then. That memory is about one particular process, and the console cannot tell a restart from a reconnect on its own, so the identity of this process rides along with the status it already polls.
 const PROCESS_STARTED_AT = new Date(Date.now() - Math.round(process.uptime() * 1000)).toISOString();
-function createStatus(services, events) {
+function createStatus(services, events, runActivity) {
     const activeModel = services.runtime.session.model ?? services.models.model;
     const cwd = activeCwd(services);
+    const currentRun = services.runtime.session.isStreaming && runActivity?.sessionId === services.runtime.session.sessionId
+        ? {
+            startedAt: new Date(runActivity.startedAt).toISOString(),
+            lastActivityAt: new Date(runActivity.lastActivityAt).toISOString(),
+            phase: runActivity.phase,
+        }
+        : undefined;
     return {
         processStartedAt: PROCESS_STARTED_AT,
         status: services.runtime.session.isStreaming ? "running" : "ready",
@@ -92,6 +99,7 @@ function createStatus(services, events) {
         cwd,
         agentDir: services.launch.agentDir,
         plugins: services.loader ? [...services.loader.entries()].filter((entry) => !entry.disabled).map((entry) => entry.options.name) : [],
+        ...(currentRun === undefined ? {} : { run: currentRun }),
     };
 }
 function activeCwd(services) {
@@ -725,6 +733,15 @@ export default {
         let busy = false;
         const events = [];
         const eventClients = new Set();
+        const initialRunAt = Date.now();
+        let runActivity = services.runtime.session.isStreaming
+            ? {
+                sessionId: services.runtime.session.sessionId,
+                startedAt: initialRunAt,
+                lastActivityAt: initialRunAt,
+                phase: "starting",
+            }
+            : undefined;
         // Pi puts a wall-clock on a message payload and nowhere else, so a tool call has no time of its own and nothing downstream can recover when the harness saw it. The gateway is the one place that sees every event as it happens, so it stamps each one on arrival, and pairs a tool call's two events to record how long the call took.
         // The stamp is written onto the event rather than onto a copy: a copy would give every event a new identity, and the serializer's cycle detection reads identity, so a self-referential event would serialize one level deeper on every hop.
         const toolCallStartedAt = new Map();
@@ -750,6 +767,26 @@ export default {
         };
         const handleEvent = (rawEvent) => {
             const event = stampEvent(rawEvent);
+            const sessionId = services.runtime.session.sessionId;
+            if (event.type === "agent_settled") {
+                runActivity = undefined;
+            }
+            else if (event.type === "agent_start") {
+                runActivity = { sessionId, startedAt: event.receivedAt, lastActivityAt: event.receivedAt, phase: "starting" };
+            }
+            else if (runActivity?.sessionId === sessionId || services.runtime.session.isStreaming) {
+                const startedAt = runActivity?.sessionId === sessionId ? runActivity.startedAt : event.receivedAt;
+                let phase = runActivity?.sessionId === sessionId ? runActivity.phase : "starting";
+                if (event.type === "message_update") {
+                    if (event.assistantMessageEvent.type === "thinking_delta")
+                        phase = "thinking";
+                    if (event.assistantMessageEvent.type === "text_delta")
+                        phase = "responding";
+                }
+                if (event.type === "tool_execution_start" || event.type === "tool_execution_update" || event.type === "tool_execution_end")
+                    phase = "tool";
+                runActivity = { sessionId, startedAt, lastActivityAt: event.receivedAt, phase };
+            }
             // Streaming deltas reach clients live over SSE and each one carries the whole partial message, so only durable events are retained for snapshots.
             if (event.type !== "message_update") {
                 events.push(event);
@@ -770,7 +807,7 @@ export default {
         const disposeStatus = services.webServer.register({
             path: "/api/status",
             handler(_request, response) {
-                sendJson(response, 200, createStatus(services, events));
+                sendJson(response, 200, createStatus(services, events, runActivity));
             },
         });
         const disposeConfig = services.webServer.register({