@iloveagents/foundry-web-ui 0.1.0

package/src/components/surface-card.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithoutRef } from "react";
+
+import { cn } from "@iloveagents/foundry-web-primitives";
+
+const surfaceCardVariants = cva("border border-border shadow-sm", {
+  variants: {
+    tone: {
+      default: "bg-card",
+      subtle: "bg-background/80",
+      muted: "bg-muted/10",
+      empty: "border-dashed bg-muted/10 text-sm text-muted-foreground",
+    },
+    radius: {
+      md: "rounded-xl",
+      lg: "rounded-[1.5rem]",
+      xl: "rounded-[2rem]",
+    },
+    padding: {
+      sm: "p-4",
+      md: "p-5",
+      lg: "p-6",
+      xl: "p-7",
+    },
+  },
+  defaultVariants: {
+    tone: "default",
+    radius: "lg",
+    padding: "md",
+  },
+});
+
+export function SurfaceCard({
+  className,
+  tone,
+  radius,
+  padding,
+  ...props
+}: ComponentPropsWithoutRef<"div"> & VariantProps<typeof surfaceCardVariants>) {
+  return (
+    <div className={cn(surfaceCardVariants({ tone, radius, padding }), className)} {...props} />
+  );
+}
+
+export { surfaceCardVariants };

package/src/components/theme-runtime-provider.tsx

@@ -0,0 +1,93 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import type { ThemeMode } from "../lib/theme-store.ts";
+import {
+  resolveThemeRuntime,
+  type ResolvedThemeRuntime,
+  type ThemeLayer,
+} from "../lib/theme-runtime.ts";
+
+const ThemeRuntimeContext = createContext<ResolvedThemeRuntime | null>(null);
+
+export function ThemeRuntimeProvider({
+  layers,
+  mode,
+  children,
+}: {
+  layers: ThemeLayer[];
+  mode: ThemeMode;
+  children: ReactNode;
+}) {
+  const fallback = useRef<ResolvedThemeRuntime>(resolveThemeRuntime([], "system"));
+  const [systemPrefersDark, setSystemPrefersDark] = useState(() =>
+    typeof window !== "undefined"
+      ? window.matchMedia("(prefers-color-scheme: dark)").matches
+      : false,
+  );
+
+  useEffect(() => {
+    if (mode !== "system" || typeof window === "undefined") return;
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (event: MediaQueryListEvent) => {
+      setSystemPrefersDark(event.matches);
+    };
+    setSystemPrefersDark(media.matches);
+    media.addEventListener("change", handleChange);
+    return () => media.removeEventListener("change", handleChange);
+  }, [mode]);
+
+  const runtime = useMemo(() => {
+    try {
+      const next = resolveThemeRuntime(layers, mode);
+      fallback.current = next;
+      return next;
+    } catch {
+      return fallback.current;
+    }
+  }, [layers, mode, systemPrefersDark]);
+
+  return <ThemeRuntimeContext.Provider value={runtime}>{children}</ThemeRuntimeContext.Provider>;
+}
+
+export function useThemeRuntime(): ResolvedThemeRuntime {
+  return useContext(ThemeRuntimeContext) ?? resolveThemeRuntime([], "system");
+}
+
+export function ThemeScope({
+  children,
+  className,
+  style,
+}: {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}) {
+  const runtime = useThemeRuntime();
+  return (
+    <div
+      className={className}
+      style={{ ...runtime.variables, fontFamily: "var(--font-body)", ...style }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function ThemeDocumentMetadata() {
+  const runtime = useThemeRuntime();
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.title = runtime.branding.appTitle || runtime.branding.appName || "LastSpace.ai";
+  }, [runtime.branding.appName, runtime.branding.appTitle]);
+
+  return null;
+}

package/src/components/theme-toggle.tsx

@@ -0,0 +1,27 @@
+import { type FC } from "react";
+import { Sun, Moon, Monitor } from "lucide-react";
+import { TooltipIconButton } from "./tooltip-icon-button.tsx";
+import { useThemeStore, type ThemeMode } from "../lib/theme-store.ts";
+
+const icons: Record<ThemeMode, typeof Sun> = {
+  light: Sun,
+  dark: Moon,
+  system: Monitor,
+};
+
+const labels: Record<ThemeMode, string> = {
+  light: "Light mode",
+  dark: "Dark mode",
+  system: "System theme",
+};
+
+export const ThemeToggle: FC = () => {
+  const { mode, cycle } = useThemeStore();
+  const Icon = icons[mode];
+
+  return (
+    <TooltipIconButton tooltip={labels[mode]} size="icon" onClick={cycle}>
+      <Icon className="size-4 text-primary" />
+    </TooltipIconButton>
+  );
+};

package/src/components/tool-call-card.tsx

@@ -0,0 +1,126 @@
+import { Loader2, CheckCircle2, XCircle, AlertCircle, ChevronDown } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../ui/collapsible.tsx";
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+export type ToolCallStatus =
+  | { type: "running" }
+  | { type: "complete" }
+  | { type: "incomplete"; reason?: string }
+  | { type: "requires-action"; reason?: string };
+
+interface ToolCallCardProps {
+  icon?: ReactNode;
+  title: string;
+  description?: string;
+  status: ToolCallStatus;
+  action?: {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+  children?: ReactNode;
+  className?: string;
+}
+
+export function ToolCallCard({
+  icon,
+  title,
+  description,
+  status,
+  action,
+  children,
+  className,
+}: ToolCallCardProps) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const isSuccess = status.type === "complete";
+  const isError = status.type === "incomplete" && status.reason === "error";
+  const isRunning = status.type === "running";
+  const requiresAction = status.type === "requires-action";
+
+  return (
+    <Collapsible open={isOpen} onOpenChange={setIsOpen} className={className}>
+      <div
+        className={cn(
+          "flex items-start gap-3 p-3 rounded-lg border",
+          "bg-muted/50 text-sm transition-colors",
+          isSuccess && "border-primary/30 bg-primary/5",
+          isError && "border-destructive/30 bg-destructive/5",
+          requiresAction && "border-primary/30 bg-primary/5",
+        )}
+      >
+        {/* Status Icon */}
+        <div className="flex-shrink-0 mt-0.5">
+          {isRunning && <Loader2 className="size-4 text-primary animate-spin" />}
+          {isSuccess && <CheckCircle2 className="size-4 text-primary" />}
+          {isError && <XCircle className="size-4 text-destructive" />}
+          {requiresAction && <AlertCircle className="size-4 text-primary" />}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            {icon && <span className="text-muted-foreground">{icon}</span>}
+            <span className="font-medium text-foreground">{title}</span>
+
+            {/* Spacer pushes action + chevron to the right */}
+            <div className="ml-auto flex items-center gap-1.5">
+              {/* Quick action — always visible in header row */}
+              {action && !isRunning && (
+                <button
+                  type="button"
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                  className={cn(
+                    "h-6 px-2.5 text-xs font-medium rounded-md",
+                    "border border-primary/30 text-primary",
+                    "hover:bg-primary/10 transition-colors",
+                    "disabled:opacity-50 disabled:pointer-events-none",
+                  )}
+                >
+                  {action.label}
+                </button>
+              )}
+
+              {/* Expand toggle — only if there are details to show */}
+              {children && (
+                <CollapsibleTrigger asChild>
+                  <button
+                    type="button"
+                    className="p-0.5 hover:bg-muted rounded transition-colors"
+                    aria-label="Toggle details"
+                  >
+                    <ChevronDown
+                      className={cn(
+                        "size-4 text-muted-foreground transition-transform",
+                        isOpen && "rotate-180",
+                      )}
+                    />
+                  </button>
+                </CollapsibleTrigger>
+              )}
+            </div>
+          </div>
+
+          {description && (
+            <div className={cn("text-xs mt-0.5", isError ? "text-destructive" : "text-primary")}>
+              {description}
+            </div>
+          )}
+
+          {children && (
+            <CollapsibleContent>
+              <div className="mt-2">{children}</div>
+            </CollapsibleContent>
+          )}
+        </div>
+      </div>
+    </Collapsible>
+  );
+}

package/src/components/tool-fallback.tsx

@@ -0,0 +1,169 @@
+import { ToolCallCard, type ToolCallStatus } from "./tool-call-card.tsx";
+import { Wrench } from "lucide-react";
+
+export const ToolFallback = (props: Record<string, unknown>) => {
+  const { toolName, args, result, part } = props as {
+    toolName: string;
+    args: Record<string, unknown>;
+    result: unknown;
+    part: { status?: { type: string } };
+  };
+  const rawStatus =
+    (part?.status as { type: string }) || (props.status as { type: string });
+
+  // Tool results that *describe* a failure (Python ``@tool`` raises an
+  // exception → agent-framework serializes it as an error string;
+  // FastMCP returns ``{isError: true, content: [...]}``; our own tools
+  // sometimes return a plain ``"Error: ..."`` string) arrive here with
+  // ``status.type === "complete"`` because the tool-call round-trip
+  // succeeded from the transport's point of view. Without sniffing
+  // the payload we'd render "Execution complete" in green for a red
+  // condition — exactly what the user called out. Normalize to the
+  // ``incomplete + reason: "error"`` state the card knows how to
+  // show in red with an X-circle.
+  const isErrorResult = _detectErrorResult(result);
+  const status: ToolCallStatus = isErrorResult
+    ? { type: "incomplete", reason: "error" }
+    : (rawStatus as ToolCallStatus);
+
+  let description = "";
+  if (status.type === "running") {
+    description = `Executing ${toolName}...`;
+  } else if (status.type === "incomplete" && status.reason === "error") {
+    description = _extractErrorMessage(result) ?? "Execution failed";
+  } else if (status.type === "complete") {
+    description = result ? "Execution complete" : "Completed";
+  } else if (status.type === "requires-action") {
+    description = "Waiting for execution...";
+  }
+
+  return (
+    <ToolCallCard
+      icon={<Wrench className="size-3.5" />}
+      title={formatToolName(toolName)}
+      description={description}
+      status={status}
+      className="w-full"
+    >
+      {args && Object.keys(args).length > 0 && (
+        <div className="text-muted-foreground text-xs space-y-1">
+          {Object.entries(args).map(([key, value]) => (
+            <div key={key}>
+              <span className="font-medium">{key}:</span>{" "}
+              <span className="font-mono">{formatValue(value)}</span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {(status.type === "complete" ||
+        (status.type === "incomplete" && status.reason === "error")) &&
+        result != null && (
+          <div className="text-muted-foreground text-xs mt-2 pt-2 border-t border-border">
+            <div className="font-medium mb-1">
+              {status.type === "incomplete" ? "Error" : "Result"}:
+            </div>
+            <pre className="font-mono text-xs bg-muted p-2 rounded overflow-x-auto">
+              {formatResult(result as unknown)}
+            </pre>
+          </div>
+        )}
+    </ToolCallCard>
+  );
+};
+
+function formatToolName(toolName: string): string {
+  return toolName
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+function formatValue(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return JSON.stringify(value);
+}
+
+function formatResult(result: unknown): string {
+  if (typeof result === "string") return result;
+  return JSON.stringify(result, null, 2);
+}
+
+/**
+ * Heuristically detect a failed tool result. The agent-framework
+ * adapter flattens both plain-Python and MCP tool errors into the
+ * same ``result`` field without a dedicated error flag, so we have
+ * to sniff:
+ *
+ * - MCP canonical shape: ``{isError: true, content: [...]}``
+ * - Python ``@tool`` exception: a string starting with ``"Error:"``
+ *   (agent-framework's default serialization — see
+ *   ``agent_framework/_tools.py::_serialize_tool_exception``).
+ * - Structured error objects: ``{error: "..."}`` or
+ *   ``{error: {message: "..."}}`` — what FastMCP's ``ToolError``
+ *   (re-)raises produce.
+ *
+ * Keep this narrow. A substring match on ``"Error"`` would false-
+ * positive on legitimate results ("…contains the word Error in a
+ * heading…"), so anchor patterns to prefix / explicit fields only.
+ */
+export function _detectErrorResult(result: unknown): boolean {
+  if (result == null) return false;
+  if (typeof result === "string") {
+    // Python tools: "Error: <message>" (agent-framework default).
+    return /^\s*Error:\s/.test(result);
+  }
+  if (typeof result === "object") {
+    const obj = result as Record<string, unknown>;
+    // MCP Streamable-HTTP canonical shape.
+    if (obj.isError === true) return true;
+    // FastMCP ToolError + some of our hand-rolled paths.
+    if (typeof obj.error === "string" && obj.error.length > 0) return true;
+    if (
+      obj.error &&
+      typeof obj.error === "object" &&
+      typeof (obj.error as Record<string, unknown>).message === "string"
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Pull a user-readable one-liner out of an error result so the card
+ * header shows *why* it failed rather than the generic "Execution
+ * failed". Matches the shapes enumerated in ``detectErrorResult``.
+ */
+export function _extractErrorMessage(result: unknown): string | null {
+  if (typeof result === "string") {
+    // Strip the "Error: " prefix so the header isn't redundant.
+    const m = /^\s*Error:\s*(.*)$/s.exec(result);
+    return m ? m[1].trim() || "Execution failed" : null;
+  }
+  if (result && typeof result === "object") {
+    const obj = result as Record<string, unknown>;
+    if (typeof obj.error === "string") return obj.error;
+    if (
+      obj.error &&
+      typeof obj.error === "object" &&
+      typeof (obj.error as Record<string, unknown>).message === "string"
+    ) {
+      return (obj.error as Record<string, unknown>).message as string;
+    }
+    if (Array.isArray(obj.content)) {
+      // MCP error: content[].text usually carries the human message.
+      for (const item of obj.content) {
+        if (
+          item &&
+          typeof item === "object" &&
+          typeof (item as Record<string, unknown>).text === "string"
+        ) {
+          return (item as Record<string, unknown>).text as string;
+        }
+      }
+    }
+  }
+  return null;
+}

package/src/components/tool-panel-layout.tsx

@@ -0,0 +1,36 @@
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useToolPanelStore } from "../lib/tool-panel-store.ts";
+import { ToolPanel } from "./tool-panel.tsx";
+
+/**
+ * Layout wrapper that adjusts main content when tool panel is open.
+ * - Narrow screens (< 1280px): Full-screen overlay, chat hidden
+ * - Wide screens (>= 1280px): Side-by-side layout, chat shifts left
+ */
+interface ToolPanelLayoutProps {
+  children: React.ReactNode;
+}
+
+export function ToolPanelLayout({ children }: ToolPanelLayoutProps) {
+  const isOpen = useToolPanelStore((state) => state.isOpen);
+  const panelWidth = useToolPanelStore((state) => state.panelWidth);
+  const useOverlay = useToolPanelStore((state) => state.useOverlay);
+
+  return (
+    <div className="relative h-full flex-1 min-w-0 overflow-hidden">
+      <div
+        className={cn(
+          "h-full flex flex-col transition-all duration-300 ease-in-out",
+          useOverlay && isOpen && "hidden",
+        )}
+        style={{
+          width: isOpen && !useOverlay ? `calc(100% - ${panelWidth}px)` : "100%",
+        }}
+      >
+        {children}
+      </div>
+
+      <ToolPanel />
+    </div>
+  );
+}