stagent 0.10.0 → 0.11.1

package/src/components/chat/conversation-template-picker.tsx

@@ -0,0 +1,421 @@
+"use client";
+
+/**
+ * Conversation Template Picker — sliding sheet that lists workflow blueprints
+ * and, on selection, creates a new conversation pre-filled with the blueprint's
+ * rendered `chatPrompt` (falling back to step 1's `promptTemplate`).
+ *
+ * Transport: writes the rendered prompt into `sessionStorage` under
+ * `chat:prefill:<conversationId>` before navigating. The chat composer reads
+ * and removes it on mount. This keeps the conversation schema unchanged (no
+ * `drafts` column) and survives the client-side navigation without flicker.
+ */
+
+import { useEffect, useMemo, useState } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Input as TextInput } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ArrowLeft, Sparkles } from "lucide-react";
+import type {
+  WorkflowBlueprint,
+  BlueprintVariable,
+} from "@/lib/workflows/blueprints/types";
+import { renderBlueprintPrompt } from "@/lib/workflows/blueprints/render-prompt";
+import { useChatSession } from "./chat-session-provider";
+
+export const PREFILL_STORAGE_PREFIX = "chat:prefill:";
+export const PREFILL_PENDING_KEY = "chat:prefill:pending";
+
+export function prefillKey(conversationId: string): string {
+  return `${PREFILL_STORAGE_PREFIX}${conversationId}`;
+}
+
+interface ConversationTemplatePickerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ConversationTemplatePicker({
+  open,
+  onOpenChange,
+}: ConversationTemplatePickerProps) {
+  const { createConversation } = useChatSession();
+  const [blueprints, setBlueprints] = useState<WorkflowBlueprint[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [selected, setSelected] = useState<WorkflowBlueprint | null>(null);
+  const [paramValues, setParamValues] = useState<Record<string, unknown>>({});
+  const [creating, setCreating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch blueprints once the sheet is opened for the first time.
+  useEffect(() => {
+    if (!open || loaded) return;
+    let cancelled = false;
+    fetch("/api/blueprints")
+      .then((r) => (r.ok ? r.json() : []))
+      .then((data: WorkflowBlueprint[]) => {
+        if (!cancelled) setBlueprints(data);
+      })
+      .catch(() => {
+        if (!cancelled) setBlueprints([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoaded(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, loaded]);
+
+  // Reset transient state whenever the sheet closes.
+  useEffect(() => {
+    if (!open) {
+      setSelected(null);
+      setParamValues({});
+      setError(null);
+      setCreating(false);
+    }
+  }, [open]);
+
+  const canSubmit = useMemo(() => {
+    if (!selected) return false;
+    return selected.variables
+      .filter((v) => v.required)
+      .every((v) => {
+        const raw = paramValues[v.id];
+        if (v.type === "boolean") return raw !== undefined;
+        if (v.type === "number") return typeof raw === "number" && !isNaN(raw);
+        return typeof raw === "string" && raw.trim().length > 0;
+      });
+  }, [selected, paramValues]);
+
+  const handleSelect = (bp: WorkflowBlueprint) => {
+    // Initialize param values with blueprint defaults.
+    const initial: Record<string, unknown> = {};
+    for (const v of bp.variables) {
+      if (v.default !== undefined) initial[v.id] = v.default;
+    }
+    setParamValues(initial);
+    setSelected(bp);
+    setError(null);
+
+    // Zero-parameter blueprint: start immediately.
+    if (bp.variables.length === 0) {
+      void startConversation(bp, {});
+    }
+  };
+
+  async function startConversation(
+    bp: WorkflowBlueprint,
+    params: Record<string, unknown>
+  ) {
+    setCreating(true);
+    setError(null);
+    try {
+      const rendered = renderBlueprintPrompt(bp, params);
+
+      // Race-order: the provider's `createConversation` both POSTs AND
+      // activates the new conversation internally. That means by the time
+      // `createConversation` resolves, the chat composer has already mounted
+      // with the new `conversationId` and its hydration effect has already
+      // fired. So we MUST write the prefill *before* awaiting, using a
+      // non-id-keyed "pending" slot that the composer consumes on next
+      // activation. The input clears it after reading — one-shot semantics.
+      const hasPrefill = rendered.firstMessage.trim().length > 0;
+      if (hasPrefill) {
+        try {
+          window.sessionStorage.setItem(PREFILL_PENDING_KEY, rendered.firstMessage);
+        } catch {
+          // sessionStorage can throw in private modes. User still lands in
+          // a valid empty conversation — graceful degradation.
+        }
+      }
+
+      const id = await createConversation({
+        title: rendered.title || bp.name,
+      });
+      if (!id) {
+        // Clean up pending slot on failure so a later unrelated conversation
+        // doesn't accidentally consume it.
+        try {
+          window.sessionStorage.removeItem(PREFILL_PENDING_KEY);
+        } catch {}
+        throw new Error("Failed to create conversation");
+      }
+
+      onOpenChange(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to start conversation");
+      setCreating(false);
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-full sm:max-w-xl flex flex-col p-0">
+        <SheetHeader className="p-4 border-b border-border">
+          <SheetTitle className="flex items-center gap-2">
+            {selected && (
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6"
+                onClick={() => setSelected(null)}
+                aria-label="Back to blueprint list"
+              >
+                <ArrowLeft className="h-4 w-4" />
+              </Button>
+            )}
+            <Sparkles className="h-4 w-4 text-primary" />
+            {selected ? selected.name : "Start from template"}
+          </SheetTitle>
+          <SheetDescription>
+            {selected
+              ? selected.description
+              : "Pick a workflow blueprint. Its prompt will pre-fill the chat composer so you can edit before sending."}
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 pb-6 pt-4">
+          {!selected && (
+            <BlueprintList
+              blueprints={blueprints}
+              loaded={loaded}
+              onSelect={handleSelect}
+            />
+          )}
+          {selected && (
+            <ParameterForm
+              blueprint={selected}
+              values={paramValues}
+              onChange={setParamValues}
+            />
+          )}
+          {error && (
+            <p className="mt-4 text-sm text-destructive" role="alert">
+              {error}
+            </p>
+          )}
+        </div>
+
+        {selected && (
+          <div className="flex items-center justify-end gap-2 border-t border-border px-6 py-3">
+            <Button variant="ghost" onClick={() => setSelected(null)} disabled={creating}>
+              Back
+            </Button>
+            <Button
+              onClick={() => startConversation(selected, paramValues)}
+              disabled={!canSubmit || creating}
+            >
+              {creating ? "Starting…" : "Start conversation"}
+            </Button>
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ── Blueprint list ───────────────────────────────────────────────────────
+
+function BlueprintList({
+  blueprints,
+  loaded,
+  onSelect,
+}: {
+  blueprints: WorkflowBlueprint[];
+  loaded: boolean;
+  onSelect: (bp: WorkflowBlueprint) => void;
+}) {
+  if (!loaded) {
+    return (
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Skeleton key={i} className="h-20 w-full" />
+        ))}
+      </div>
+    );
+  }
+
+  if (blueprints.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground py-8 text-center">
+        No blueprints available.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      {blueprints.map((bp) => {
+        const previewSource =
+          bp.chatPrompt ?? bp.steps[0]?.promptTemplate ?? "";
+        const preview =
+          previewSource.length > 140
+            ? previewSource.slice(0, 140).trim() + "…"
+            : previewSource;
+        return (
+          <button
+            key={bp.id}
+            className="w-full text-left rounded-lg border border-border p-3 hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={() => onSelect(bp)}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-sm">{bp.name}</div>
+                <div className="text-xs text-muted-foreground mt-0.5">
+                  {bp.description}
+                </div>
+                {preview && (
+                  <div className="text-xs text-muted-foreground/80 mt-2 font-mono line-clamp-2">
+                    {preview}
+                  </div>
+                )}
+              </div>
+              <div className="flex flex-col items-end gap-1 shrink-0">
+                {bp.variables.length > 0 && (
+                  <Badge variant="secondary" className="text-xs">
+                    {bp.variables.length} param
+                    {bp.variables.length > 1 ? "s" : ""}
+                  </Badge>
+                )}
+                <Badge variant="outline" className="text-xs capitalize">
+                  {bp.domain}
+                </Badge>
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ── Parameter form ───────────────────────────────────────────────────────
+
+function ParameterForm({
+  blueprint,
+  values,
+  onChange,
+}: {
+  blueprint: WorkflowBlueprint;
+  values: Record<string, unknown>;
+  onChange: (next: Record<string, unknown>) => void;
+}) {
+  const setValue = (id: string, v: unknown) => onChange({ ...values, [id]: v });
+
+  if (blueprint.variables.length === 0) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        This blueprint has no parameters — starting a conversation now.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-5">
+      {blueprint.variables.map((variable) => (
+        <VariableInput
+          key={variable.id}
+          variable={variable}
+          value={values[variable.id]}
+          onChange={(v) => setValue(variable.id, v)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function VariableInput({
+  variable,
+  value,
+  onChange,
+}: {
+  variable: BlueprintVariable;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <Label>
+        {variable.label}
+        {variable.required && <span className="text-destructive ml-1">*</span>}
+      </Label>
+      {variable.description && (
+        <p className="text-xs text-muted-foreground">{variable.description}</p>
+      )}
+
+      {variable.type === "text" && (
+        <TextInput
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={variable.placeholder}
+        />
+      )}
+
+      {variable.type === "textarea" && (
+        <Textarea
+          value={String(value ?? "")}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={variable.placeholder}
+          rows={3}
+        />
+      )}
+
+      {variable.type === "number" && (
+        <TextInput
+          type="number"
+          value={value !== undefined && value !== null ? Number(value) : ""}
+          onChange={(e) =>
+            onChange(e.target.value ? Number(e.target.value) : undefined)
+          }
+          min={variable.min}
+          max={variable.max}
+        />
+      )}
+
+      {variable.type === "boolean" && (
+        <Switch
+          checked={Boolean(value)}
+          onCheckedChange={(checked) => onChange(checked)}
+        />
+      )}
+
+      {variable.type === "select" && variable.options && (
+        <Select
+          value={String(value ?? "")}
+          onValueChange={(v) => onChange(v)}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="Select…" />
+          </SelectTrigger>
+          <SelectContent>
+            {variable.options.map((opt) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )}
+    </div>
+  );
+}

package/src/components/chat/help-dialog.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+interface HelpDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function HelpDialog({ open, onOpenChange }: HelpDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Chat shortcuts</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-2 text-sm">
+          <Row k="/" v="Open actions / skills / tools menu" />
+          <Row k="@" v="Reference a project, task, document, or file" />
+          <Row k="⌘K" v="Open global command palette" />
+          <Row k="⌘/" v="Focus chat input and open slash menu" />
+          <Row k="⌘L" v="Clear conversation (new session)" />
+          <Row k="⌘⇧L" v="Clear conversation (browser fallback)" />
+          <Row k="⌘⏎" v="Send message" />
+          <Row k="↑ ↓" v="Navigate popover items" />
+          <Row k="Esc" v="Close popover" />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function Row({ k, v }: { k: string; v: string }) {
+  return (
+    <div className="flex items-start gap-3">
+      <kbd className="shrink-0 rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-xs">{k}</kbd>
+      <span className="text-muted-foreground">{v}</span>
+    </div>
+  );
+}

package/src/components/chat/skill-composition-conflict-dialog.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+/**
+ * SkillCompositionConflictDialog — surfaces conflict excerpts when the
+ * user tries to compose two skills whose directives diverge.
+ *
+ * Triggered by `chat-command-popover.tsx` when `activate_skill mode:"add"`
+ * returns `{ requiresConfirmation: true, conflicts: [...] }`. Confirming
+ * re-issues the same call with `force: true`.
+ *
+ * See `features/chat-composition-ui-v1.md`.
+ */
+
+import { AlertTriangle } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { SkillConflict } from "@/lib/chat/skill-conflict";
+
+interface SkillCompositionConflictDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Skill the user is trying to add (display label). */
+  newSkillName: string;
+  conflicts: SkillConflict[];
+  /** Called when user clicks "Add anyway" — issues the force:true retry. */
+  onConfirm: () => void;
+}
+
+export function SkillCompositionConflictDialog({
+  open,
+  onOpenChange,
+  newSkillName,
+  conflicts,
+  onConfirm,
+}: SkillCompositionConflictDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-4 w-4 text-amber-500" />
+            Conflict detected
+          </DialogTitle>
+          <DialogDescription>
+            Adding{" "}
+            <span className="font-mono text-foreground">{newSkillName}</span>{" "}
+            may conflict with {conflicts.length === 1 ? "an active skill" : "active skills"}.
+            Review the directives below and decide whether to add anyway.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="max-h-72 overflow-y-auto space-y-3 px-1">
+          {conflicts.map((c, idx) => (
+            <div
+              key={`${c.skillA}-${c.skillB}-${idx}`}
+              className="rounded-md border bg-muted/30 p-3 text-xs space-y-2"
+            >
+              <div className="text-muted-foreground">
+                Topic: <span className="font-mono text-foreground">{c.sharedTopic}</span>
+              </div>
+              <div>
+                <span className="font-semibold">{c.skillA}:</span>{" "}
+                <span className="italic">"{c.excerptA}"</span>
+              </div>
+              <div>
+                <span className="font-semibold">{c.skillB}:</span>{" "}
+                <span className="italic">"{c.excerptB}"</span>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              onConfirm();
+              onOpenChange(false);
+            }}
+          >
+            Add anyway
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/chat/skill-row.tsx

@@ -0,0 +1,147 @@
+"use client";
+import { Sparkles, Star, X } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { CommandItem } from "@/components/ui/command";
+import type { EnrichedSkill } from "@/lib/environment/skill-enrichment";
+import type { ReactNode } from "react";
+
+interface SkillRowProps {
+  skill: EnrichedSkill;
+  recommended?: boolean;
+  onSelect: () => void;
+  onDismissRecommendation?: () => void;
+  /** Whether this skill is currently active on the conversation. */
+  isActive?: boolean;
+  /** Optional "+ Add" / disabled "+ Add" button rendered to the right. */
+  addButton?: ReactNode;
+  /** Called when the user wants to deactivate this (active) skill. */
+  onDeactivate?: () => void;
+}
+
+function healthVariant(
+  h: EnrichedSkill["healthScore"]
+): "default" | "secondary" | "destructive" | "outline" {
+  if (h === "healthy") return "default";
+  if (h === "stale") return "outline";
+  if (h === "aging" || h === "broken") return "destructive";
+  return "secondary";
+}
+
+function syncLabel(s: EnrichedSkill["syncStatus"]): string {
+  switch (s) {
+    case "synced":
+      return "synced";
+    case "claude-only":
+      return "claude-only";
+    case "codex-only":
+      return "codex-only";
+    case "shared":
+      return "shared";
+  }
+}
+
+export function SkillRow({
+  skill,
+  recommended,
+  onSelect,
+  onDismissRecommendation,
+  isActive,
+  addButton,
+  onDeactivate,
+}: SkillRowProps) {
+  const syncHref =
+    skill.syncStatus !== "synced"
+      ? `/environment?skill=${encodeURIComponent(skill.name)}`
+      : null;
+
+  return (
+    <CommandItem
+      key={skill.id}
+      value={`${skill.name} ${skill.preview} ${skill.tool}`}
+      onSelect={onSelect}
+    >
+      <Sparkles className="h-4 w-4 shrink-0 text-muted-foreground" />
+      <div className="flex flex-col min-w-0 gap-0.5">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-sm font-medium">{skill.name}</span>
+          {isActive && (
+            <Badge variant="default" className="text-[10px] shrink-0">
+              active
+            </Badge>
+          )}
+          {recommended && (
+            <Star
+              className="h-3 w-3 shrink-0 fill-amber-500 text-amber-500"
+              aria-label="Recommended for this conversation"
+            />
+          )}
+          {recommended && onDismissRecommendation && (
+            <button
+              type="button"
+              aria-label="Dismiss recommendation"
+              className="rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              onClick={(e) => {
+                e.stopPropagation();
+                onDismissRecommendation();
+              }}
+            >
+              <X className="h-3 w-3" />
+            </button>
+          )}
+        </div>
+        <span className="truncate text-xs text-muted-foreground">
+          {skill.preview}
+        </span>
+        <div className="flex flex-wrap items-center gap-1 mt-0.5">
+          <Badge
+            variant={healthVariant(skill.healthScore)}
+            className="text-[10px]"
+          >
+            {skill.healthScore}
+          </Badge>
+          <Badge variant="outline" className="text-[10px]">
+            {syncLabel(skill.syncStatus)}
+          </Badge>
+          {skill.linkedProfileId && (
+            <Badge variant="secondary" className="text-[10px]">
+              {skill.linkedProfileId}
+            </Badge>
+          )}
+          <Badge variant="outline" className="text-[10px]">
+            {skill.scope}
+          </Badge>
+        </div>
+      </div>
+      {/* Right-side slot: either the env link or the Add/Deactivate button. */}
+      {isActive && onDeactivate ? (
+        <button
+          type="button"
+          aria-label={`Deactivate ${skill.name}`}
+          title="Deactivate skill"
+          className="ml-auto shrink-0 text-[10px] text-muted-foreground hover:text-foreground rounded px-1 py-0.5 hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          onMouseDown={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDeactivate();
+          }}
+        >
+          <X className="h-3 w-3" />
+        </button>
+      ) : addButton ? (
+        addButton
+      ) : syncHref ? (
+        <a
+          href={syncHref}
+          aria-label={`Open ${skill.name} in environment dashboard`}
+          className="ml-auto shrink-0 text-muted-foreground hover:text-foreground"
+          onClick={(e) => e.stopPropagation()}
+        >
+          ↗
+        </a>
+      ) : null}
+    </CommandItem>
+  );
+}