stagent 0.9.3 → 0.9.5

package/src/components/chat/chat-message-markdown.tsx

@@ -1,14 +1,62 @@
 "use client";
 
-import { memo, useState, useCallback } from "react";
+import { memo, useMemo, useState, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { Check, Copy } from "lucide-react";
+import { Check, Copy, ImageIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { ScreenshotLightbox } from "@/components/shared/screenshot-lightbox";
+import type { ScreenshotAttachment } from "@/lib/chat/types";
 import type { Components } from "react-markdown";
 
 interface ChatMessageMarkdownProps {
   content: string;
+  attachments?: ScreenshotAttachment[];
+}
+
+function InlineScreenshot({ attachment }: { attachment: ScreenshotAttachment }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button
+        type="button"
+        className="relative rounded-lg overflow-hidden border border-border hover:border-primary transition-colors cursor-pointer group my-3 block w-full"
+        onClick={() => setOpen(true)}
+      >
+        <img
+          src={attachment.thumbnailUrl}
+          alt={`Screenshot ${attachment.width}×${attachment.height}`}
+          className="object-contain w-full"
+          style={{ maxHeight: 400 }}
+          loading="lazy"
+          onError={(e) => {
+            const img = e.currentTarget;
+            if (!img.src.includes(attachment.originalUrl)) {
+              img.src = attachment.originalUrl;
+            } else {
+              img.style.display = "none";
+              img.parentElement?.classList.add("bg-muted");
+            }
+          }}
+        />
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+          <ImageIcon className="h-5 w-5 text-white opacity-0 group-hover:opacity-70 transition-opacity" />
+        </div>
+        <span className="absolute bottom-1 right-1 text-[9px] bg-black/50 text-white px-1.5 py-0.5 rounded">
+          {attachment.width}×{attachment.height}
+        </span>
+      </button>
+      {open && (
+        <ScreenshotLightbox
+          open={open}
+          onClose={() => setOpen(false)}
+          imageUrl={attachment.originalUrl}
+          width={attachment.width}
+          height={attachment.height}
+        />
+      )}
+    </>
+  );
 }
 
 function CodeBlock({
@@ -119,10 +167,37 @@ const components: Components = {
 
 export const ChatMessageMarkdown = memo(function ChatMessageMarkdown({
   content,
+  attachments,
 }: ChatMessageMarkdownProps) {
+  // Resolve markdown img refs back to their full attachment record so the
+  // inline thumbnail can open the lightbox at the original resolution.
+  const attachmentBySrc = useMemo(() => {
+    const map = new Map<string, ScreenshotAttachment>();
+    for (const att of attachments ?? []) {
+      map.set(att.thumbnailUrl, att);
+      map.set(att.originalUrl, att);
+    }
+    return map;
+  }, [attachments]);
+
+  const componentsWithImg: Components = useMemo(
+    () => ({
+      ...components,
+      img: ({ src, alt }) => {
+        const key = typeof src === "string" ? src : "";
+        const att = attachmentBySrc.get(key);
+        if (att) {
+          return <InlineScreenshot attachment={att} />;
+        }
+        return <img src={key} alt={alt ?? ""} className="max-w-full rounded my-2" />;
+      },
+    }),
+    [attachmentBySrc]
+  );
+
   return (
     <div className="prose-chat">
-      <ReactMarkdown remarkPlugins={[remarkGfm]} components={components}>
+      <ReactMarkdown remarkPlugins={[remarkGfm]} components={componentsWithImg}>
         {content}
       </ReactMarkdown>
     </div>

package/src/components/chat/chat-message.tsx

@@ -117,7 +117,10 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
         ) : (
           <div className="text-sm">
             {message.content ? (
-              <ChatMessageMarkdown content={message.content} />
+              <ChatMessageMarkdown
+                content={message.content}
+                attachments={attachments}
+              />
             ) : isStreaming ? (
               <span className="text-muted-foreground text-xs animate-pulse">
                 {(() => {
@@ -128,9 +131,14 @@ export function ChatMessage({ message, isStreaming, conversationId, onStatusChan
                 })()}
               </span>
             ) : null}
-            {attachments.length > 0 && (
-              <ScreenshotGallery attachments={attachments} />
-            )}
+            {/* Legacy fallback: messages saved before inline screenshot rendering
+                stored attachments in metadata but never embedded markdown image
+                refs in `content`. Detect that case and show the trailing gallery
+                so historical conversations don't lose their visuals. */}
+            {attachments.length > 0 &&
+              !attachments.some((att) =>
+                message.content?.includes(`](${att.thumbnailUrl})`)
+              ) && <ScreenshotGallery attachments={attachments} />}
             {isStreaming && message.content && (
               <span className="inline-block w-0.5 h-4 bg-foreground animate-pulse ml-0.5 align-text-bottom" />
             )}

package/src/components/settings/cloud-account-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { User, LogOut, Mail, CheckCircle2 } from "lucide-react";
 import { toast } from "sonner";
 import {
@@ -47,21 +47,23 @@ export function CloudAccountSection() {
     toast.success("Signed out");
   }
 
-  // Handle auth callback URL params
-  if (typeof window !== "undefined") {
+  // Handle auth callback URL params — must be in useEffect, not during render
+  useEffect(() => {
     const params = new URLSearchParams(window.location.search);
-    if (params.get("auth") === "success" && !loading) {
+    const authParam = params.get("auth");
+    if (!authParam || loading) return;
+
+    if (authParam === "success") {
       toast.success("Signed in successfully");
-      const url = new URL(window.location.href);
-      url.searchParams.delete("auth");
-      window.history.replaceState({}, "", url.toString());
-    } else if (params.get("auth") === "error") {
+    } else if (authParam === "error") {
       toast.error("Sign-in failed — try again");
-      const url = new URL(window.location.href);
-      url.searchParams.delete("auth");
-      window.history.replaceState({}, "", url.toString());
     }
-  }
+
+    // Clean up URL
+    const url = new URL(window.location.href);
+    url.searchParams.delete("auth");
+    window.history.replaceState({}, "", url.toString());
+  }, [loading]);
 
   if (loading) {
     return (

package/src/components/workflows/error-timeline.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+interface TimelineEvent {
+  timestamp: string;
+  event: string;
+  severity: "success" | "warning" | "error";
+  details: string;
+}
+
+interface ErrorTimelineProps {
+  events: TimelineEvent[];
+}
+
+const severityColor: Record<TimelineEvent["severity"], string> = {
+  success: "bg-green-500",
+  warning: "bg-amber-500",
+  error: "bg-red-500",
+};
+
+function formatRelativeTime(firstMs: number, currentMs: number): string {
+  const diffMs = currentMs - firstMs;
+  if (diffMs < 1000) return "+0s";
+  const totalSeconds = Math.floor(diffMs / 1000);
+  if (totalSeconds < 60) return `+${totalSeconds}s`;
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `+${minutes}m ${seconds}s`;
+}
+
+function formatEventLabel(event: string): string {
+  return event
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function ErrorTimeline({ events }: ErrorTimelineProps) {
+  if (events.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground py-4">
+        No timeline events found.
+      </p>
+    );
+  }
+
+  const firstTimestamp = new Date(events[0].timestamp).getTime();
+
+  return (
+    <div className="relative pl-6">
+      {/* Vertical line */}
+      <div className="absolute left-[5px] top-1 bottom-1 w-0.5 bg-border" />
+
+      <div className="space-y-4">
+        {events.map((event, index) => {
+          const currentMs = new Date(event.timestamp).getTime();
+          const relTime = formatRelativeTime(firstTimestamp, currentMs);
+
+          return (
+            <div key={index} className="relative flex items-start gap-3">
+              {/* Dot */}
+              <div
+                className={`absolute -left-6 top-1 h-3 w-3 rounded-full border-2 border-background ${severityColor[event.severity]}`}
+              />
+
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium text-foreground">
+                    {formatEventLabel(event.event)}
+                  </span>
+                  <span className="text-xs text-muted-foreground font-mono">
+                    {relTime}
+                  </span>
+                </div>
+                <p className="text-xs text-muted-foreground mt-0.5 break-words">
+                  {event.details}
+                </p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/components/workflows/step-live-metrics.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Wrench, Clock, Coins, Hash } from "lucide-react";
+
+interface StepLiveMetricsProps {
+  taskId: string;
+  budgetCapUsd: number;
+}
+
+interface MetricsState {
+  tokens: number;
+  costUsd: number;
+  currentTool: string | null;
+  turnNumber: number;
+  startedAt: number;
+  elapsed: string;
+}
+
+function formatElapsed(ms: number): string {
+  const totalSeconds = Math.floor(ms / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  if (minutes > 0) return `${minutes}m ${seconds}s`;
+  return `${seconds}s`;
+}
+
+export function StepLiveMetrics({ taskId, budgetCapUsd }: StepLiveMetricsProps) {
+  const [metrics, setMetrics] = useState<MetricsState>({
+    tokens: 0,
+    costUsd: 0,
+    currentTool: null,
+    turnNumber: 0,
+    startedAt: Date.now(),
+    elapsed: "0s",
+  });
+  const [connected, setConnected] = useState(false);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  // Elapsed time ticker
+  useEffect(() => {
+    timerRef.current = setInterval(() => {
+      setMetrics((prev) => ({
+        ...prev,
+        elapsed: formatElapsed(Date.now() - prev.startedAt),
+      }));
+    }, 1000);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, []);
+
+  // SSE subscription
+  useEffect(() => {
+    const params = new URLSearchParams({ taskId });
+    const es = new EventSource(`/api/logs/stream?${params}`);
+    eventSourceRef.current = es;
+
+    es.onopen = () => setConnected(true);
+    es.onerror = () => setConnected(false);
+
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        const eventType: string = data.event ?? "";
+        const payload = data.payload ? JSON.parse(data.payload) : {};
+
+        if (eventType === "tool_start" || eventType === "tool_use") {
+          setMetrics((prev) => ({
+            ...prev,
+            currentTool: payload.toolName ?? payload.tool ?? prev.currentTool,
+            turnNumber: prev.turnNumber + 1,
+          }));
+        }
+
+        if (eventType === "content_block_delta" || eventType === "token_usage") {
+          const tokenDelta = payload.tokens ?? payload.inputTokens ?? 0;
+          const costDelta = payload.costUsd ?? 0;
+          setMetrics((prev) => ({
+            ...prev,
+            tokens: prev.tokens + tokenDelta,
+            costUsd: prev.costUsd + costDelta,
+          }));
+        }
+
+        if (eventType === "completed" || eventType === "step_completed") {
+          setMetrics((prev) => ({
+            ...prev,
+            currentTool: null,
+          }));
+          if (timerRef.current) clearInterval(timerRef.current);
+        }
+      } catch {
+        // Ignore malformed events
+      }
+    };
+
+    return () => {
+      es.close();
+      eventSourceRef.current = null;
+    };
+  }, [taskId]);
+
+  const costPercent = budgetCapUsd > 0 ? Math.min((metrics.costUsd / budgetCapUsd) * 100, 100) : 0;
+
+  return (
+    <div className="grid grid-cols-2 gap-3">
+      {/* Tokens tile */}
+      <div className="rounded-lg border bg-white p-3 shadow-sm">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Hash className="h-3.5 w-3.5" />
+          Tokens
+        </div>
+        <div className="mt-1 font-mono text-lg font-semibold">
+          {metrics.tokens.toLocaleString()}
+        </div>
+        <div className="text-xs text-muted-foreground">tokens</div>
+      </div>
+
+      {/* Cost tile */}
+      <div className="rounded-lg border bg-white p-3 shadow-sm">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Coins className="h-3.5 w-3.5" />
+          Cost
+        </div>
+        <div className="mt-1 font-mono text-lg font-semibold">
+          ${metrics.costUsd.toFixed(2)}
+        </div>
+        <div className="mt-1">
+          <div className="h-1.5 w-full rounded-full bg-[oklch(0.92_0_0)]">
+            <div
+              className="h-1.5 rounded-full bg-[oklch(0.6_0.15_250)] transition-all duration-300"
+              style={{ width: `${costPercent}%` }}
+            />
+          </div>
+          <div className="mt-0.5 text-xs text-muted-foreground">
+            of ${budgetCapUsd.toFixed(2)} cap
+          </div>
+        </div>
+      </div>
+
+      {/* Current Tool tile */}
+      <div className="rounded-lg border bg-white p-3 shadow-sm">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Wrench className="h-3.5 w-3.5" />
+          Current Tool
+        </div>
+        <div className="mt-1 truncate font-mono text-lg font-semibold">
+          {metrics.currentTool ?? "\u2014"}
+        </div>
+        <div className="text-xs text-muted-foreground">
+          turn {metrics.turnNumber}
+        </div>
+      </div>
+
+      {/* Elapsed tile */}
+      <div className="rounded-lg border bg-white p-3 shadow-sm">
+        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <Clock className="h-3.5 w-3.5" />
+          Elapsed
+        </div>
+        <div className="mt-1 font-mono text-lg font-semibold">
+          {metrics.elapsed}
+        </div>
+        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+          {connected ? (
+            <>
+              <span className="inline-block h-1.5 w-1.5 rounded-full bg-[oklch(0.65_0.15_145)]" />
+              live
+            </>
+          ) : (
+            <>
+              <span className="inline-block h-1.5 w-1.5 rounded-full bg-[oklch(0.8_0_0)]" />
+              disconnected
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/workflows/step-progress-bar.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+type StepStatus =
+  | "pending"
+  | "running"
+  | "completed"
+  | "failed"
+  | "waiting_approval"
+  | "waiting_dependencies";
+
+interface StepProgressBarProps {
+  steps: Array<{
+    stepId: string;
+    name: string;
+    status: StepStatus;
+  }>;
+}
+
+const statusClasses: Record<StepStatus, string> = {
+  completed: "bg-[oklch(0.65_0.15_145)] text-white",
+  running: "bg-[oklch(0.6_0.15_250)] text-white animate-pulse",
+  failed: "bg-[oklch(0.6_0.2_25)] text-white",
+  pending: "bg-[oklch(0.8_0_0)] text-[oklch(0.4_0_0)]",
+  waiting_approval: "bg-[oklch(0.7_0.15_80)] text-white",
+  waiting_dependencies: "bg-[oklch(0.7_0.15_80)] text-white",
+};
+
+const lineColor = (status: StepStatus): string => {
+  if (status === "completed") return "bg-[oklch(0.65_0.15_145)]";
+  return "bg-[oklch(0.85_0_0)]";
+};
+
+export function StepProgressBar({ steps }: StepProgressBarProps) {
+  if (steps.length === 0) return null;
+
+  return (
+    <div className="w-full overflow-x-auto">
+      <div className="flex items-start min-w-max px-2 py-3">
+        {steps.map((step, index) => (
+          <div key={step.stepId} className="flex items-start">
+            {/* Step circle + label */}
+            <div className="flex flex-col items-center gap-1.5">
+              <div
+                className={cn(
+                  "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold",
+                  statusClasses[step.status]
+                )}
+              >
+                {index + 1}
+              </div>
+              <span
+                className="max-w-[72px] truncate text-center text-xs text-muted-foreground"
+                title={step.name}
+              >
+                {step.name}
+              </span>
+            </div>
+
+            {/* Connecting line */}
+            {index < steps.length - 1 && (
+              <div className="flex items-center pt-4">
+                <div
+                  className={cn(
+                    "mx-1 h-0.5 w-10",
+                    lineColor(step.status)
+                  )}
+                />
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}