Tool call chip

TS

import { … } from "@fungi.computer/caps/components/tool-call-chip";

Hero

TSX

import { ToolCallChip } from "@fungi.computer/caps/components/tool-call-chip";

export default function Hero() {
  const startedAt = Date.now() - 340;
  return (
    <ToolCallChip
      name="read_spore_log"
      state="done"
      startedAt={startedAt}
      finishedAt={startedAt + 340}
    />
  );
}

States

TSX

import { ToolCallChip } from "@fungi.computer/caps/components/tool-call-chip";

export default function States() {
  const startedAt = Date.now() - 1_400;
  return (
    <div className="flex flex-wrap gap-sm">
      <ToolCallChip name="search_notes" state="running" startedAt={startedAt} />
      <ToolCallChip
        name="read_file"
        state="done"
        startedAt={startedAt}
        finishedAt={startedAt + 500}
      />
      <ToolCallChip
        name="write_file"
        state="failed"
        startedAt={startedAt}
        finishedAt={startedAt + 900}
        onRetry={() => undefined}
      />
    </div>
  );
}

Retry

TSX

import type { ActivityState } from "@fungi.computer/caps/components/activity-line";
import { ToolCallChip } from "@fungi.computer/caps/components/tool-call-chip";
import { useState } from "react";

export default function Retry() {
  const [state, setState] = useState<ActivityState>("failed");
  const [startedAt, setStartedAt] = useState(() => Date.now() - 900);
  const [finishedAt, setFinishedAt] = useState(() => Date.now());
  const retry = () => {
    setStartedAt(Date.now());
    setFinishedAt(Date.now());
    setState("running");
    window.setTimeout(() => {
      setFinishedAt(Date.now());
      setState("done");
    }, 1_000);
  };
  return (
    <ToolCallChip
      name="write_file"
      state={state}
      startedAt={startedAt}
      finishedAt={state === "running" ? undefined : finishedAt}
      onRetry={retry}
    />
  );
}