stagent 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stagent",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "AI Business Operating System — run your business with AI agents. Local-first, multi-provider, governed.",
   "keywords": [
     "ai",

package/src/app/globals.css

@@ -810,6 +810,12 @@ body {
 .book-callout-lesson .book-callout-icon { color: oklch(0.55 0.20 300); }
 .book-callout-lesson .book-callout-title { color: oklch(0.45 0.16 300); }
 
+.book-callout-case-study {
+  border-left-color: oklch(0.62 0.16 55);
+  background: oklch(0.62 0.16 55 / 0.05);
+}
+.book-callout-case-study .book-callout-icon { color: oklch(0.62 0.16 55); }
+.book-callout-case-study .book-callout-title { color: oklch(0.50 0.12 55); }
 
 /* callout body inline code */
 .book-callout-body code {
@@ -821,6 +827,7 @@ body {
 [data-book-theme="sepia"] .book-callout-warning { background: oklch(0.65 0.18 75 / 0.08); }
 [data-book-theme="sepia"] .book-callout-info { background: oklch(0.55 0.20 260 / 0.08); }
 [data-book-theme="sepia"] .book-callout-lesson { background: oklch(0.55 0.20 300 / 0.08); }
+[data-book-theme="sepia"] .book-callout-case-study { background: oklch(0.62 0.16 55 / 0.08); }
 [data-book-theme="sepia"] .book-callout-body code { background: oklch(0 0 0 / 0.06); }
 
 /* dark callout overrides */
@@ -848,6 +855,11 @@ body {
 [data-book-theme="dark"] .book-callout-lesson .book-callout-icon { color: oklch(0.70 0.18 300); }
 [data-book-theme="dark"] .book-callout-lesson .book-callout-title { color: oklch(0.75 0.14 300); }
 
+[data-book-theme="dark"] .book-callout-case-study {
+  background: oklch(0.62 0.16 55 / 0.10);
+}
+[data-book-theme="dark"] .book-callout-case-study .book-callout-icon { color: oklch(0.75 0.16 55); }
+[data-book-theme="dark"] .book-callout-case-study .book-callout-title { color: oklch(0.80 0.12 55); }
 
 [data-book-theme="dark"] .book-callout-body code { background: oklch(1 0 0 / 0.10); }
 
@@ -860,6 +872,8 @@ body {
 .dark .book-callout-info .book-callout-title { color: oklch(0.75 0.14 260); }
 .dark .book-callout-lesson .book-callout-icon { color: oklch(0.70 0.18 300); }
 .dark .book-callout-lesson .book-callout-title { color: oklch(0.75 0.14 300); }
+.dark .book-callout-case-study .book-callout-icon { color: oklch(0.75 0.16 55); }
+.dark .book-callout-case-study .book-callout-title { color: oklch(0.80 0.12 55); }
 .dark .book-callout-body code { background: oklch(1 0 0 / 0.10); }
 
 /* ─── Book Interactive Blocks ─── */

package/src/components/book/book-reader.tsx

@@ -5,6 +5,7 @@ import {
   BookOpen,
   BookmarkPlus,
   BookmarkMinus,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   List,
@@ -87,6 +88,7 @@ export function BookReader({ chapters: CHAPTERS }: { chapters: BookChapter[] })
   const [tocOpen, setTocOpen] = useState(false);
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [tocTab, setTocTab] = useState<"chapters" | "bookmarks">("chapters");
+  const [collapsedParts, setCollapsedParts] = useState<Set<number>>(new Set());
   const [activePath, setActivePath] = useState<string | null>(null);
   const [recommendedPath, setRecommendedPath] = useState<string | null>(null);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -160,6 +162,31 @@ export function BookReader({ chapters: CHAPTERS }: { chapters: BookChapter[] })
     }
   }, []);
 
+  const togglePart = useCallback((partNumber: number) => {
+    setCollapsedParts((prev) => {
+      const next = new Set(prev);
+      if (next.has(partNumber)) {
+        next.delete(partNumber);
+      } else {
+        next.add(partNumber);
+      }
+      return next;
+    });
+  }, []);
+
+  // Auto-expand the current chapter's part so it's always visible in TOC
+  useEffect(() => {
+    const currentPart = currentChapter.part.number;
+    setCollapsedParts((prev) => {
+      if (prev.has(currentPart)) {
+        const next = new Set(prev);
+        next.delete(currentPart);
+        return next;
+      }
+      return prev;
+    });
+  }, [currentChapter]);
+
   // Track scroll progress
   useEffect(() => {
     const el = contentRef.current;
@@ -431,15 +458,38 @@ export function BookReader({ chapters: CHAPTERS }: { chapters: BookChapter[] })
                       onSelectPath={handlePathChange}
                     />
 
-                    {PARTS.map((part) => (
+                    {PARTS.map((part) => {
+                      const isPartOpen = !collapsedParts.has(part.number);
+                      return (
                       <div key={part.number}>
-                        <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
-                          Part {part.number}: {part.title}
-                        </p>
-                        <p className="text-xs text-muted-foreground mb-3">
-                          {part.description}
-                        </p>
-                        <div className="space-y-1">
+                        <button
+                          onClick={() => togglePart(part.number)}
+                          className="flex w-full items-center justify-between gap-2 text-left cursor-pointer group"
+                          aria-expanded={isPartOpen}
+                        >
+                          <div>
+                            <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                              Part {part.number}: {part.title}
+                            </p>
+                            <p className="text-xs text-muted-foreground mt-0.5">
+                              {part.description}
+                            </p>
+                          </div>
+                          <ChevronDown
+                            className={cn(
+                              "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-300 ease-in-out",
+                              isPartOpen && "rotate-180"
+                            )}
+                          />
+                        </button>
+                        <div
+                          className={cn(
+                            "grid transition-[grid-template-rows] duration-300 ease-in-out",
+                            isPartOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+                          )}
+                        >
+                          <div className="overflow-hidden">
+                        <div className="space-y-1 pt-2">
                           {(chaptersByPart.get(part.number) ?? []).map((ch) => {
                             const chProgress = progress[ch.id]?.progress ?? 0;
                             const chPct = Math.round(chProgress * 100);
@@ -488,8 +538,11 @@ export function BookReader({ chapters: CHAPTERS }: { chapters: BookChapter[] })
                             );
                           })}
                         </div>
+                          </div>
+                        </div>
                       </div>
-                    ))}
+                      );
+                    })}
                   </div>
                 ) : (
                   <div className="space-y-1">

package/src/components/book/content-blocks.tsx

@@ -8,6 +8,7 @@ import {
   AlertTriangle,
   BookOpen,
   PenLine,
+  Building2,
   ArrowRight,
   ChevronDown,
   Copy,
@@ -203,6 +204,10 @@ const calloutConfig = {
     icon: PenLine,
     className: "book-callout-authors-note",
   },
+  "case-study": {
+    icon: Building2,
+    className: "book-callout-case-study",
+  },
 };
 
 function CalloutBlockView({
@@ -213,7 +218,7 @@ function CalloutBlockView({
   imageAlt,
   defaultCollapsed,
 }: {
-  variant: "tip" | "warning" | "info" | "lesson" | "authors-note";
+  variant: "tip" | "warning" | "info" | "lesson" | "authors-note" | "case-study";
   title?: string;
   markdown: string;
   imageSrc?: string;

package/src/components/tables/table-cell-editor.tsx

@@ -206,7 +206,7 @@ export function CellDisplay({ column, value, onToggleBoolean }: CellDisplayProps
       return (
         <a
           href={`mailto:${value}`}
-          className="text-sm text-primary underline underline-offset-2 hover:text-primary/80"
+          className="text-sm text-primary underline underline-offset-2 hover:text-primary/80 truncate max-w-[200px] block"
           onClick={(e) => e.stopPropagation()}
         >
           {String(value)}
@@ -215,12 +215,12 @@ export function CellDisplay({ column, value, onToggleBoolean }: CellDisplayProps
 
     case "computed":
       return (
-        <span className="text-sm text-muted-foreground italic">
+        <span className="text-sm text-muted-foreground italic truncate max-w-[200px] block">
           {String(value)}
         </span>
       );
 
     default:
-      return <span className="text-sm">{String(value)}</span>;
+      return <span className="text-sm truncate max-w-[200px] block">{String(value)}</span>;
   }
 }

package/src/components/tables/table-row-sheet.tsx

@@ -0,0 +1,271 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetFooter,
+} from "@/components/ui/sheet";
+import { toast } from "sonner";
+import { TableRelationCombobox } from "./table-relation-combobox";
+import type { ColumnDef } from "@/lib/tables/types";
+
+interface ParsedRow {
+  id: string;
+  data: Record<string, unknown>;
+  position: number;
+  createdBy: string | null;
+}
+
+interface TableRowSheetProps {
+  tableId: string;
+  columns: ColumnDef[];
+  row: ParsedRow;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onRowUpdated: (rowId: string, data: Record<string, unknown>) => void;
+}
+
+export function TableRowSheet({
+  tableId,
+  columns,
+  row,
+  open,
+  onOpenChange,
+  onRowUpdated,
+}: TableRowSheetProps) {
+  const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [saving, setSaving] = useState(false);
+
+  // Reset form data when sheet opens or row changes
+  useEffect(() => {
+    if (open) {
+      setFormData({ ...row.data });
+    }
+  }, [open, row.id, row.data]);
+
+  const setField = (name: string, value: unknown) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      // Exclude computed columns from the payload
+      const payload: Record<string, unknown> = {};
+      for (const col of columns) {
+        if (col.dataType !== "computed") {
+          payload[col.name] = formData[col.name] ?? null;
+        }
+      }
+
+      const res = await fetch(`/api/tables/${tableId}/rows/${row.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ data: payload }),
+      });
+
+      if (!res.ok) {
+        toast.error("Failed to save row");
+        return;
+      }
+
+      onRowUpdated(row.id, { ...formData, ...payload });
+      onOpenChange(false);
+      toast.success("Row updated");
+    } catch {
+      toast.error("Failed to save row");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const sortedColumns = [...columns].sort((a, b) => a.position - b.position);
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[480px] sm:max-w-[480px] flex flex-col">
+        <SheetHeader>
+          <SheetTitle>Edit Row</SheetTitle>
+        </SheetHeader>
+        <div className="px-6 pb-6 space-y-4 overflow-y-auto flex-1">
+          {sortedColumns.map((col) => (
+            <RowField
+              key={col.name}
+              column={col}
+              value={formData[col.name]}
+              onChange={(v) => setField(col.name, v)}
+            />
+          ))}
+        </div>
+        <SheetFooter className="px-6">
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave} disabled={saving}>
+            {saving ? "Saving..." : "Save"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// ── Per-field renderer ──────────────────────────────────────────────────
+
+interface RowFieldProps {
+  column: ColumnDef;
+  value: unknown;
+  onChange: (value: unknown) => void;
+}
+
+function RowField({ column, value, onChange }: RowFieldProps) {
+  const strValue = value == null ? "" : String(value);
+
+  return (
+    <div className="space-y-2">
+      <Label className="flex items-center gap-1.5">
+        {column.displayName}
+        {column.required && <span className="text-destructive">*</span>}
+      </Label>
+      {renderInput(column, value, strValue, onChange)}
+    </div>
+  );
+}
+
+function renderInput(
+  column: ColumnDef,
+  value: unknown,
+  strValue: string,
+  onChange: (value: unknown) => void,
+) {
+  switch (column.dataType) {
+    case "text":
+      return (
+        <Textarea
+          rows={3}
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={`Enter ${column.displayName.toLowerCase()}...`}
+        />
+      );
+
+    case "number":
+      return (
+        <Input
+          type="number"
+          value={strValue}
+          onChange={(e) =>
+            onChange(e.target.value === "" ? null : Number(e.target.value))
+          }
+          placeholder="0"
+        />
+      );
+
+    case "date":
+      return (
+        <Input
+          type="date"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+
+    case "email":
+      return (
+        <Input
+          type="email"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="name@example.com"
+        />
+      );
+
+    case "url":
+      return (
+        <Input
+          type="url"
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://..."
+        />
+      );
+
+    case "boolean":
+      return (
+        <div className="flex items-center gap-2 pt-1">
+          <Switch
+            checked={!!value}
+            onCheckedChange={(checked) => onChange(checked)}
+          />
+          <span className="text-sm text-muted-foreground">
+            {value ? "Yes" : "No"}
+          </span>
+        </div>
+      );
+
+    case "select": {
+      const options = column.config?.options ?? [];
+      return (
+        <Select value={strValue} onValueChange={onChange}>
+          <SelectTrigger>
+            <SelectValue placeholder={`Select ${column.displayName.toLowerCase()}...`} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((opt) => (
+              <SelectItem key={opt} value={opt}>
+                {opt}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      );
+    }
+
+    case "relation": {
+      const targetId = column.config?.targetTableId;
+      const dispCol = column.config?.displayColumn ?? "name";
+      if (!targetId) return <Input disabled value="No target table configured" />;
+      return (
+        <TableRelationCombobox
+          targetTableId={targetId}
+          displayColumn={dispCol}
+          value={strValue || null}
+          onChange={(v) => onChange(v)}
+        />
+      );
+    }
+
+    case "computed":
+      return (
+        <Input
+          disabled
+          value={strValue}
+          className="text-muted-foreground italic"
+        />
+      );
+
+    default:
+      return (
+        <Input
+          value={strValue}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={`Enter ${column.displayName.toLowerCase()}...`}
+        />
+      );
+  }
+}