@marimo-team/islands 0.25.3-dev266 → 0.25.3-dev268

package/src/components/chat/tool-call/tool-history-row.tsx

@@ -1,147 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import { BanIcon, CircleSlashIcon, Loader2, WrenchIcon } from "lucide-react";
-import React from "react";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { logNever } from "@/utils/assertNever";
-import { cn } from "@/utils/cn";
-import { formatToolName, type ToolApproval, type ToolState } from "./shared";
-import { ToolArgsRenderer } from "./tool-args";
-import { ResultRenderer } from "./tool-result";
-
-// States considered "inert" — they represent past or background work that the
-// user does not need to act on.
-export type HistoryState = Exclude<
-  ToolState,
-  "approval-requested" | "output-error"
->;
-
-const STATUS_LABEL: Record<HistoryState, string> = {
-  "input-streaming": "Generating",
-  "input-available": "Running",
-  "approval-responded": "Awaiting result",
-  "output-available": "Done",
-  "output-denied": "Denied",
-};
-
-const PENDING_STATES = new Set<HistoryState>([
-  "input-streaming",
-  "input-available",
-  "approval-responded",
-]);
-
-const StatusIcon: React.FC<{ state: HistoryState; interrupted: boolean }> = ({
-  state,
-  interrupted,
-}) => {
-  if (interrupted) {
-    return <CircleSlashIcon className="h-3 w-3 text-muted-foreground" />;
-  }
-  switch (state) {
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return <Loader2 className="h-3 w-3 animate-spin" />;
-    case "output-available":
-      return null;
-    case "output-denied":
-      return <BanIcon className="h-3 w-3 text-muted-foreground" />;
-    default:
-      logNever(state);
-      return <WrenchIcon className="h-3 w-3" />;
-  }
-};
-
-interface ToolHistoryRowProps {
-  toolName: string;
-  state: HistoryState;
-  input: unknown;
-  result?: unknown;
-  approval?: ToolApproval;
-  index?: number;
-  className?: string;
-  isActive?: boolean;
-}
-
-export const ToolHistoryRow: React.FC<ToolHistoryRowProps> = ({
-  toolName,
-  state,
-  input,
-  result,
-  approval,
-  index = 0,
-  className,
-  isActive = true,
-}) => {
-  const interrupted = !isActive && PENDING_STATES.has(state);
-  return (
-    <Accordion
-      key={`tool-${index}`}
-      type="single"
-      collapsible={true}
-      className={cn("w-full", className)}
-    >
-      <AccordionItem value="tool-call" className="border-0">
-        <AccordionTrigger className="h-auto pl-0 pr-2 py-1 gap-2 rounded text-xs font-normal text-muted-foreground hover:bg-(--slate-2) hover:text-foreground hover:no-underline">
-          <span className="flex items-center gap-1">
-            <StatusIcon state={state} interrupted={interrupted} />
-            {interrupted ? "Interrupted" : STATUS_LABEL[state]}:
-            <code className="font-mono text-xs">
-              {formatToolName(toolName)}
-            </code>
-          </span>
-        </AccordionTrigger>
-        <AccordionContent className="py-2 px-2">
-          <HistoryContent
-            state={state}
-            input={input}
-            result={result}
-            approval={approval}
-          />
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  );
-};
-
-const HistoryContent: React.FC<{
-  state: HistoryState;
-  input: unknown;
-  result?: unknown;
-  approval?: ToolApproval;
-}> = ({ state, input, result, approval }) => {
-  switch (state) {
-    case "input-streaming":
-    case "input-available":
-    case "approval-responded":
-      return <ToolArgsRenderer input={input} />;
-
-    case "output-available":
-      return (
-        <div className="space-y-3">
-          <ToolArgsRenderer input={input} />
-          {result != null && <ResultRenderer result={result} />}
-        </div>
-      );
-
-    case "output-denied":
-      return (
-        <div className="space-y-3">
-          <ToolArgsRenderer input={input} />
-          <div className="bg-muted/40 border border-border rounded-md p-3 text-xs text-muted-foreground leading-relaxed">
-            Tool execution was denied
-            {approval?.reason ? `: ${approval.reason}` : "."}
-          </div>
-        </div>
-      );
-
-    default:
-      logNever(state);
-      return null;
-  }
-};

package/src/components/icons/loading-ellipsis.tsx

@@ -1,46 +0,0 @@
-/* Copyright 2026 Marimo. All rights reserved. */
-
-import clsx from "clsx";
-import { Circle } from "lucide-react";
-import React from "react";
-
-interface LoadingEllipsisProps {
-  /** Extra Tailwind classes */
-  className?: string;
-  /** Diameter of each dot in pixels */
-  size?: number;
-  /** Tailwind gap utility between dots (e.g. "gap-1" or "gap-2") */
-  gap?: string;
-  /** Pulse cycle length in milliseconds */
-  durationMs?: number;
-}
-
-const LoadingEllipsis: React.FC<LoadingEllipsisProps> = ({
-  className,
-  size = 8,
-  gap = "gap-1",
-  durationMs = 1200,
-}) => {
-  const baseStyle: React.CSSProperties = {
-    animationDuration: `${durationMs}ms`,
-  };
-
-  return (
-    <div className={clsx("flex", gap, className)} aria-label="Loading">
-      {[0, 1, 2].map((i) => (
-        <Circle
-          key={i}
-          width={size}
-          height={size}
-          className="fill-current text-current animate-ellipsis-dot"
-          style={{
-            ...baseStyle,
-            animationDelay: `${(durationMs / 3) * i}ms`,
-          }}
-        />
-      ))}
-    </div>
-  );
-};
-
-export { LoadingEllipsis };