UI Component Library

/** @jsxImportSource react */
import { useState } from "react";
import { createGatewayReactRoot, useGatewayActions, useGatewayRuns } from "smthrs/gateway-react";
import { RunEventLog, RunTree, WorkflowUiShell } from "smthrs/gateway-ui";
import {
  Button,
  Card,
  CardHeader,
  CardTitle,
  EmptyState,
  Input,
  RowButton,
  SmithersUiStyles,
  StatusPill,
} from "smthrs/ui";

function App() {
  const [prompt, setPrompt] = useState("");
  const [runId, setRunId] = useState<string>();
  const runs = useGatewayRuns({ filter: { workflow: "triage", limit: 20 } });
  const actions = useGatewayActions();
  const activeRunId = runId ?? runs.data?.[0]?.runId;

  return (
    <WorkflowUiShell title="Triage">
      <SmithersUiStyles />
      <Card>
        <CardHeader>
          <CardTitle>Launch</CardTitle>
        </CardHeader>
        <div style={{ display: "flex", gap: 8 }}>
          <Input
            style={{ flex: 1 }}
            value={prompt}
            onChange={(e) => setPrompt(e.currentTarget.value)}
            placeholder="Optional prompt..."
          />
          <Button onClick={() => void actions.launchRun({ workflow: "triage", input: { prompt } })}>
            Start
          </Button>
        </div>
      </Card>
      {(runs.data ?? []).length === 0 ? (
        <EmptyState title="No runs yet" description="Launch one to see it here." />
      ) : (
        (runs.data ?? []).map((r) => (
          <RowButton key={r.runId} active={r.runId === activeRunId} onClick={() => setRunId(r.runId)}>
            <span className="mono">{r.runId.slice(0, 8)}</span>
            <StatusPill status={r.status} />
          </RowButton>
        ))
      )}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
        <RunTree runId={activeRunId} />
        <RunEventLog runId={activeRunId} style={{ height: 280 }} />
      </div>
    </WorkflowUiShell>
  );
}

createGatewayReactRoot(<App />);