stagent 0.1.10 → 0.1.12

package/src/components/shared/light-markdown.tsx

@@ -0,0 +1,134 @@
+import { type ReactNode } from "react";
+
+interface LightMarkdownProps {
+  content: string;
+  className?: string;
+  maxHeight?: string;
+  lineClamp?: number;
+  textSize?: "xs" | "sm";
+  stripBracketTags?: boolean;
+}
+
+/**
+ * Lightweight markdown renderer for short agent output.
+ * Handles: headers, bullet lists, paragraphs, **bold**, `code`.
+ * For full markdown (tables, code fences, GFM), use ReactMarkdown instead.
+ */
+export function LightMarkdown({
+  content,
+  className = "",
+  maxHeight,
+  lineClamp,
+  textSize = "xs",
+  stripBracketTags = false,
+}: LightMarkdownProps) {
+  const sizeClass = textSize === "sm" ? "text-sm" : "text-xs";
+
+  const blocks = content.split(/\n{2,}/);
+
+  const rendered = blocks.map((block, i) => {
+    let text = block.trim();
+    if (!text) return null;
+
+    if (stripBracketTags) {
+      text = text.replace(/\s*\[.*?\]\s*/g, " ").trim();
+    }
+
+    // Header: ### Title
+    const headerMatch = text.match(/^(#{1,4})\s+(.+)/);
+    if (headerMatch) {
+      return (
+        <p key={i} className="font-semibold text-foreground">
+          {formatInline(headerMatch[2])}
+        </p>
+      );
+    }
+
+    // Bullet list: lines starting with - or *
+    const lines = text.split("\n");
+    const isList = lines.every(
+      (l) => /^\s*[-*]\s+/.test(l) || l.trim() === ""
+    );
+    if (isList && lines.some((l) => /^\s*[-*]\s+/.test(l))) {
+      return (
+        <ul key={i} className="list-disc pl-4 space-y-0.5 text-muted-foreground">
+          {lines
+            .filter((l) => /^\s*[-*]\s+/.test(l))
+            .map((l, j) => (
+              <li key={j}>{formatInline(l.replace(/^\s*[-*]\s+/, ""))}</li>
+            ))}
+        </ul>
+      );
+    }
+
+    // Paragraph
+    return (
+      <p key={i} className="leading-relaxed text-muted-foreground">
+        {formatInline(text)}
+      </p>
+    );
+  });
+
+  // Overflow / clamp styles
+  let containerClass = `${sizeClass} space-y-2 ${className}`;
+  const style: React.CSSProperties = {};
+
+  if (lineClamp) {
+    // Approximate: each "line" ~1.25rem at text-xs, ~1.5rem at text-sm
+    const lineHeight = textSize === "sm" ? 1.5 : 1.25;
+    style.maxHeight = `${lineClamp * lineHeight}rem`;
+    style.overflow = "hidden";
+  } else if (maxHeight) {
+    containerClass += ` ${maxHeight} overflow-auto`;
+  }
+
+  return (
+    <div className={containerClass} style={style}>
+      {rendered}
+    </div>
+  );
+}
+
+/** Format inline **bold** and `code` spans */
+function formatInline(text: string): ReactNode {
+  // Split on **bold** and `code` patterns
+  const parts: ReactNode[] = [];
+  const regex = /(\*\*(.+?)\*\*|`([^`]+)`)/g;
+  let lastIndex = 0;
+  let match: RegExpExecArray | null;
+
+  while ((match = regex.exec(text)) !== null) {
+    // Text before the match
+    if (match.index > lastIndex) {
+      parts.push(text.slice(lastIndex, match.index));
+    }
+
+    if (match[2]) {
+      // **bold**
+      parts.push(
+        <strong key={match.index} className="font-semibold text-foreground">
+          {match[2]}
+        </strong>
+      );
+    } else if (match[3]) {
+      // `code`
+      parts.push(
+        <code
+          key={match.index}
+          className="rounded bg-muted px-1 py-0.5 font-mono text-[0.85em]"
+        >
+          {match[3]}
+        </code>
+      );
+    }
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Remaining text
+  if (lastIndex < text.length) {
+    parts.push(text.slice(lastIndex));
+  }
+
+  return parts.length === 1 ? parts[0] : parts;
+}

package/src/components/workflows/loop-status-view.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import {
   CheckCircle,
   Circle,
@@ -233,10 +234,13 @@ export function LoopStatusView({
                         <p className="text-xs text-destructive">{iter.error}</p>
                       )}
                       {iter.result && (
-                        <p className="text-xs text-muted-foreground whitespace-pre-wrap line-clamp-6">
-                          {iter.result.slice(0, 1000)}
-                          {iter.result.length > 1000 ? "..." : ""}
-                        </p>
+                        <LightMarkdown
+                          content={
+                            iter.result.slice(0, 1000) +
+                            (iter.result.length > 1000 ? "..." : "")
+                          }
+                          lineClamp={6}
+                        />
                       )}
                       {iter.taskId && (
                         <a

package/src/components/workflows/workflow-status-view.tsx

@@ -25,6 +25,7 @@ import { toast } from "sonner";
 import { workflowStatusVariant, patternLabels } from "@/lib/constants/status-colors";
 import { LoopStatusView } from "./loop-status-view";
 import { ConfirmDialog } from "@/components/shared/confirm-dialog";
+import { LightMarkdown } from "@/components/shared/light-markdown";
 import { SwarmDashboard } from "./swarm-dashboard";
 import type { LoopState, LoopConfig, SwarmConfig } from "@/lib/workflows/types";
 
@@ -363,9 +364,11 @@ export function WorkflowStatusView({ workflowId }: WorkflowStatusViewProps) {
                                 </p>
                               )}
                               {step.state.result && step.state.status === "completed" && (
-                                <p className="mt-2 text-xs text-muted-foreground line-clamp-4">
-                                  {step.state.result.slice(0, 260)}
-                                </p>
+                                <LightMarkdown
+                                  content={step.state.result.slice(0, 500)}
+                                  lineClamp={4}
+                                  className="mt-2"
+                                />
                               )}
                             </div>
                           </div>
@@ -409,9 +412,11 @@ export function WorkflowStatusView({ workflowId }: WorkflowStatusViewProps) {
                             )}
                             {synthesisStep.state.result &&
                               synthesisStep.state.status === "completed" && (
-                                <p className="mt-2 text-xs text-muted-foreground line-clamp-4">
-                                  {synthesisStep.state.result.slice(0, 260)}
-                                </p>
+                                <LightMarkdown
+                                  content={synthesisStep.state.result.slice(0, 500)}
+                                  lineClamp={4}
+                                  className="mt-2"
+                                />
                               )}
                           </div>
                         </div>
@@ -448,9 +453,11 @@ export function WorkflowStatusView({ workflowId }: WorkflowStatusViewProps) {
                           </p>
                         )}
                         {step.state.result && step.state.status === "completed" && (
-                          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
-                            {step.state.result.slice(0, 200)}
-                          </p>
+                          <LightMarkdown
+                            content={step.state.result.slice(0, 500)}
+                            lineClamp={2}
+                            className="mt-1"
+                          />
                         )}
                       </div>
                     </div>

package/src/lib/agents/__tests__/claude-agent.test.ts

@@ -315,12 +315,17 @@ describe("executeClaudeTask", () => {
 
     await executeClaudeTask("task-1");
 
-    // query prompt should include output instructions and fall back to the title
+    // F1: prompt contains only user task text (title fallback); system instructions in systemPrompt
     expect(mockQuery).toHaveBeenCalledWith(
       expect.objectContaining({
-        prompt: "Write outputs to /tmp/stagent-outputs/task-1\n\nTest Task",
+        prompt: "Test Task",
       })
     );
+    // System instructions (including output instructions) are in the systemPrompt option
+    const callOptions = mockQuery.mock.calls[0][0].options;
+    expect(callOptions.systemPrompt).toBeDefined();
+    expect(callOptions.maxTurns).toBeDefined();
+    expect(callOptions.maxBudgetUsd).toBeDefined();
   });
 });