stagent 0.9.6 → 0.11.0

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>
+  );
+}

package/src/components/documents/document-browser.tsx

@@ -1,9 +1,8 @@
 "use client";
 
 import { useState, useCallback, useRef } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
@@ -11,7 +10,9 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { LayoutGrid, LayoutList, Upload, Trash2, Search } from "lucide-react";
+import { LayoutGrid, LayoutList, Upload, Trash2 } from "lucide-react";
+import { FilterInput } from "@/components/shared/filter-input";
+import { parseFilterInput, matchesClauses, type FilterClause } from "@/lib/filters/parse";
 import { toast } from "sonner";
 import { DocumentTable } from "./document-table";
 import { DocumentGrid } from "./document-grid";
@@ -30,7 +31,12 @@ export function DocumentBrowser({
 }: DocumentBrowserProps) {
   const [docs, setDocs] = useState(initialDocuments);
   const [view, setView] = useState<"table" | "grid">("table");
-  const [search, setSearch] = useState("");
+  const searchParams = useSearchParams();
+  const initialFilter = searchParams.get("filter") ?? "";
+  const initialParsed = parseFilterInput(initialFilter);
+  const [filterRaw, setFilterRaw] = useState(initialFilter);
+  const [rawQuery, setRawQuery] = useState(initialParsed.rawQuery);
+  const [clauses, setClauses] = useState<FilterClause[]>(initialParsed.clauses);
   const [statusFilter, setStatusFilter] = useState<string>("all");
   const [directionFilter, setDirectionFilter] = useState<string>("all");
   const [projectFilter, setProjectFilter] = useState<string>("all");
@@ -54,16 +60,20 @@ export function DocumentBrowser({
 
   const filtered = docs.filter((doc) => {
     if (
-      search &&
-      !doc.originalName.toLowerCase().includes(search.toLowerCase()) &&
-      !(doc.extractedText ?? "").toLowerCase().includes(search.toLowerCase())
+      rawQuery &&
+      !doc.originalName.toLowerCase().includes(rawQuery.toLowerCase()) &&
+      !(doc.extractedText ?? "").toLowerCase().includes(rawQuery.toLowerCase())
     ) {
       return false;
     }
     if (statusFilter !== "all" && doc.status !== statusFilter) return false;
     if (directionFilter !== "all" && doc.direction !== directionFilter) return false;
     if (projectFilter !== "all" && doc.projectId !== projectFilter) return false;
-    return true;
+    return matchesClauses(doc, clauses, {
+      status: (d, v) => (d.status ?? "").toLowerCase() === v.toLowerCase(),
+      direction: (d, v) => (d.direction ?? "").toLowerCase() === v.toLowerCase(),
+      type: (d, v) => (d.mimeType ?? "").toLowerCase().includes(v.toLowerCase()),
+    });
   });
 
   function toggleSelect(id: string) {
@@ -112,27 +122,35 @@ export function DocumentBrowser({
 
       <FilterBar
         activeCount={
-          (search ? 1 : 0) +
+          (filterRaw ? 1 : 0) +
           (statusFilter !== "all" ? 1 : 0) +
           (directionFilter !== "all" ? 1 : 0) +
           (projectFilter !== "all" ? 1 : 0)
         }
         onClear={() => {
-          setSearch("");
+          setFilterRaw("");
+          setRawQuery("");
+          setClauses([]);
           setStatusFilter("all");
           setDirectionFilter("all");
           setProjectFilter("all");
+          router.replace("?", { scroll: false });
         }}
       >
-        <div className="relative flex-1 min-w-[200px]">
-          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search by name or content..."
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="pl-9"
-          />
-        </div>
+        <FilterInput
+          value={filterRaw}
+          onChange={({ raw, clauses, rawQuery }) => {
+            setFilterRaw(raw);
+            setClauses(clauses);
+            setRawQuery(rawQuery);
+            const params = new URLSearchParams(searchParams.toString());
+            if (raw) params.set("filter", raw);
+            else params.delete("filter");
+            const query = params.toString();
+            router.replace(query ? `?${query}` : "?", { scroll: false });
+          }}
+          placeholder="Search or #status:ready #type:pdf …"
+        />
 
         <Select value={statusFilter} onValueChange={setStatusFilter}>
           <SelectTrigger className="w-[140px]">

package/src/components/instance/__tests__/instance-section.test.tsx

@@ -0,0 +1,125 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { InstanceSection } from "@/components/instance/instance-section";
+
+const { push } = vi.hoisted(() => ({
+  push: vi.fn(),
+}));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push }),
+}));
+
+describe("instance section", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("renders a single combined instance card for initialized instances", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/instance/config" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              devMode: false,
+              config: {
+                instanceId: "instance_123456789",
+                branchName: "instance/demo",
+                isPrivateInstance: true,
+                createdAt: 1712700000,
+              },
+              guardrails: {
+                prePushHookInstalled: true,
+                prePushHookVersion: "1",
+                pushRemoteBlocked: ["main"],
+                consentStatus: "enabled",
+                firstBootCompletedAt: 1712700000,
+              },
+              upgrade: {
+                lastPolledAt: 1712700000,
+                upgradeAvailable: true,
+                commitsBehind: 3,
+                lastSuccessfulUpgradeAt: 1712600000,
+                pollFailureCount: 0,
+                lastPollError: null,
+              },
+            }),
+          };
+        }
+
+        if (url === "/api/instance/upgrade/check" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({ ok: true }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+
+    render(<InstanceSection />);
+
+    expect(await screen.findByRole("button", { name: "Check" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Upgrade (3)" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Repair setup" })).toBeInTheDocument();
+    expect(screen.queryByText("Upgrade instance")).not.toBeInTheDocument();
+    expect(screen.queryByText("Advanced: re-run instance setup")).not.toBeInTheDocument();
+    expect(screen.queryByText("Blocked branches")).not.toBeInTheDocument();
+    expect(screen.queryByText("Pre-push hook")).not.toBeInTheDocument();
+  });
+
+  it("uses the shorter setup CTA when the instance is not initialized", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+        const url = String(input);
+        const method = init?.method ?? "GET";
+
+        if (url === "/api/instance/config" && method === "GET") {
+          return {
+            ok: true,
+            json: async () => ({
+              devMode: false,
+              config: null,
+              guardrails: null,
+              upgrade: null,
+            }),
+          };
+        }
+
+        if (url === "/api/instance/init" && method === "POST") {
+          return {
+            ok: true,
+            json: async () => ({ ok: true }),
+          };
+        }
+
+        throw new Error(`Unexpected fetch: ${method} ${url}`);
+      })
+    );
+
+    render(<InstanceSection />);
+
+    expect(await screen.findByRole("button", { name: "Run setup" })).toBeInTheDocument();
+    expect(
+      screen.getByText("Instance setup incomplete. Run setup to initialize this workspace.")
+    ).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Run setup" }));
+
+    await waitFor(() => {
+      expect(fetch).toHaveBeenCalledWith("/api/instance/init", { method: "POST" });
+    });
+  });
+});