cli-funnel-react 0.1.0

package/dist/funnel.css

@@ -0,0 +1,61 @@
+.cf {
+  --cf-bg: #fff;
+  --cf-fg: #17181a;
+  --cf-muted: #6a6f76;
+  --cf-line: #d9dce0;
+  --cf-accent: #1f5eff;
+  --cf-accent-fg: #fff;
+  --cf-danger: #b3261e;
+  --cf-radius: 8px;
+  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: var(--cf-fg);
+}
+@media (prefers-color-scheme: dark) {
+  .cf {
+    --cf-bg: #16181b;
+    --cf-fg: #eceef1;
+    --cf-muted: #9aa0a8;
+    --cf-line: #2c3036;
+    --cf-accent: #6d97ff;
+    --cf-accent-fg: #0b1020;
+    --cf-danger: #ff8a80;
+  }
+}
+.cf * { box-sizing: border-box; }
+.cf-mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
+.cf-picker { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.cf-field { display: grid; gap: 6px; align-content: start; border: 0; padding: 0; margin: 0; min-width: 0; }
+.cf-field > span, .cf-field > label, .cf-field > legend { font-weight: 600; font-size: 13px; }
+.cf-field small, .cf-check small, .cf-option small { color: var(--cf-muted); font-size: 12px; }
+.cf select, .cf input:not([type]), .cf input[type="text"] {
+  width: 100%; min-height: 36px; padding: 6px 10px; color: inherit; background: var(--cf-bg);
+  border: 1px solid var(--cf-line); border-radius: var(--cf-radius);
+}
+.cf select:focus-visible, .cf input:focus-visible, .cf button:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
+.cf button {
+  min-height: 36px; padding: 6px 14px; white-space: nowrap; cursor: pointer; color: inherit;
+  background: var(--cf-bg); border: 1px solid var(--cf-line); border-radius: var(--cf-radius);
+}
+.cf button:hover:not(:disabled) { border-color: var(--cf-muted); }
+.cf button:disabled { opacity: 0.55; cursor: default; }
+.cf button.cf-primary { background: var(--cf-accent); color: var(--cf-accent-fg); border-color: transparent; }
+.cf-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+.cf-row > input { flex: 1 1 200px; }
+.cf-check { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; align-self: end; }
+.cf-check small { grid-column: 2; }
+.cf-access { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
+.cf-access legend { grid-column: 1 / -1; margin-bottom: 4px; }
+.cf-option { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; padding: 10px 12px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); cursor: pointer; }
+.cf-option small { grid-column: 2; }
+.cf-option.cf-on { border-color: var(--cf-accent); box-shadow: inset 0 0 0 1px var(--cf-accent); }
+.cf-browser { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); }
+.cf-crumb { color: var(--cf-muted); overflow-wrap: anywhere; }
+.cf-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; overflow: auto; }
+.cf-list button { min-height: 30px; padding: 3px 10px; }
+.cf-error { color: var(--cf-danger); }
+.cf-login { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--cf-line); border-radius: 12px; }
+.cf-login header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.cf-login h3, .cf-login p { margin: 0; }
+.cf-approval { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--cf-accent); border-radius: var(--cf-radius); }
+.cf-approval pre { margin: 0; max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
+.cf-folder { grid-column: 1 / -1; }

package/dist/index.d.ts

@@ -0,0 +1,124 @@
+import { FunnelClient, Selection, ModelInfo, ProviderOverview, AuthStatus, LoginEvent, FunnelEvent, Usage, ApprovalRequest, ApprovalDecision } from 'cli-funnel/client';
+import * as react from 'react';
+
+type SelectionField = keyof Selection;
+/** Loads installed providers and their login state. */
+declare function useProviders(client: FunnelClient): {
+    providers: ProviderOverview[];
+    loading: boolean;
+    error: string | undefined;
+    refresh: () => Promise<void>;
+};
+/**
+ * Holds a Selection and keeps it valid. Change the provider and the model, effort, context,
+ * fast and access fall back to values that provider supports. `locked` fields never change.
+ */
+declare function useSelection(client: FunnelClient, opts?: {
+    defaults?: Partial<Selection>;
+    locked?: Partial<Selection>;
+    /** Chooses the model and effort to start from when the provider changes, for example the cheapest one. */
+    pick?: (provider: Selection["provider"], models: ModelInfo[]) => {
+        model?: string;
+        effort?: string;
+    } | undefined;
+}): {
+    providers: ProviderOverview[];
+    models: ModelInfo[];
+    overview: ProviderOverview | undefined;
+    model: ModelInfo | undefined;
+    selection: Partial<Selection>;
+    /** A full Selection once provider, model, folder and access are all set. */
+    value: Selection | undefined;
+    set: (patch: Partial<Selection>) => void;
+    loading: boolean;
+    error: string | undefined;
+    refresh: () => Promise<void>;
+};
+/** Sign-in, sign-out and one-click update for one provider. */
+declare function useAuth(client: FunnelClient, provider: Selection["provider"], onChange?: () => void): {
+    status: AuthStatus | undefined;
+    events: LoginEvent[];
+    busy: "login" | "logout" | "update" | undefined;
+    message: string | undefined;
+    login: () => Promise<void>;
+    sendCode: (code: string) => "" | Promise<{
+        ok: boolean;
+    }> | undefined;
+    cancel: () => void;
+    logout: () => Promise<void>;
+    update: () => Promise<void>;
+    refresh: () => Promise<void>;
+};
+/** Runs prompts and exposes streaming text, tool calls and pending approvals. */
+declare function useRun(client: FunnelClient): {
+    text: string;
+    events: FunnelEvent[];
+    result: {
+        text: string;
+        sessionId: string | undefined;
+        model: string | undefined;
+        usage: Usage | undefined;
+        finishReason: string | undefined;
+        toolCalls: {
+            id: string;
+            name: string;
+            input?: unknown;
+            error?: string;
+        }[];
+    };
+    approvals: ApprovalRequest[];
+    status: "error" | "done" | "idle" | "running";
+    error: string | undefined;
+    /** The conversation `send` will continue, or undefined when the next run starts fresh. */
+    session: {
+        id: string;
+        provider: string;
+        cwd: string;
+    } | undefined;
+    /** Same as `session?.id`. */
+    sessionId: string | undefined;
+    send: (prompt: string, selection: Selection) => Promise<void>;
+    approve: (id: string, decision: ApprovalDecision) => Promise<void>;
+    cancel: () => void | undefined;
+    newConversation: () => void;
+};
+
+interface FunnelPickerProps {
+    client: FunnelClient;
+    /** Starting values. The user can change them. */
+    defaults?: Partial<Selection>;
+    /** Fixed values. These fields are hidden and always applied. Use it to hardcode a choice. */
+    locked?: Partial<Selection>;
+    /** Called whenever the selection changes. `undefined` until provider, model, folder and access are all set. */
+    onChange?: (selection: Selection | undefined) => void;
+    className?: string;
+}
+type SelectionState = ReturnType<typeof useSelection>;
+declare function FunnelPicker({ client, defaults, locked, onChange, className }: FunnelPickerProps): react.JSX.Element;
+/** The picker markup on top of a `useSelection` state you own. Use it when other parts of your UI need the same state. */
+declare function FunnelPickerView({ client, state: s, locked, className }: {
+    client: FunnelClient;
+    state: SelectionState;
+    locked?: Partial<Selection>;
+    className?: string;
+}): react.JSX.Element;
+
+interface FunnelLoginProps {
+    client: FunnelClient;
+    provider: ProviderOverview;
+    /** Called after sign-in, sign-out or update so the parent can refresh its provider list. */
+    onChange?: () => void;
+    className?: string;
+}
+/** Status, sign-in, sign-out and one-click CLI update for one provider. */
+declare function FunnelLogin({ client, provider, onChange, className }: FunnelLoginProps): react.JSX.Element;
+
+interface ApprovalPromptProps {
+    request: ApprovalRequest;
+    onDecide: (id: string, decision: ApprovalDecision) => void;
+    className?: string;
+}
+/** The approve button for supervised runs. Render one per entry in `useRun().approvals`. */
+declare function ApprovalPrompt({ request, onDecide, className }: ApprovalPromptProps): react.JSX.Element;
+
+export { ApprovalPrompt, type ApprovalPromptProps, FunnelLogin, type FunnelLoginProps, FunnelPicker, type FunnelPickerProps, FunnelPickerView, type SelectionField, type SelectionState, useAuth, useProviders, useRun, useSelection };

package/dist/index.js

@@ -0,0 +1,421 @@
+// src/hooks.ts
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+function useProviders(client) {
+  const [providers, setProviders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const refresh = useCallback(async () => {
+    try {
+      setProviders(await client.providers());
+      setError(void 0);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setLoading(false);
+    }
+  }, [client]);
+  useEffect(() => void refresh(), [refresh]);
+  return { providers, loading, error, refresh };
+}
+function useSelection(client, opts = {}) {
+  const { providers, loading: loadingProviders, error, refresh } = useProviders(client);
+  const [loaded, setLoaded] = useState();
+  const [draft, setDraft] = useState({ ...opts.defaults, ...opts.locked });
+  const locked = opts.locked ?? {};
+  const providerId = draft.provider ?? providers.find((p) => p.installation.installed && p.auth?.loggedIn)?.id ?? providers.find((p) => p.installation.installed)?.id;
+  const overview = providers.find((p) => p.id === providerId);
+  const models = useMemo(() => loaded && loaded.provider === providerId ? loaded.models : [], [loaded, providerId]);
+  useEffect(() => {
+    if (!providerId) return;
+    let live = true;
+    client.models(providerId).then((m) => live && setLoaded({ provider: providerId, models: m }), () => live && setLoaded({ provider: providerId, models: [] }));
+    return () => {
+      live = false;
+    };
+  }, [client, providerId]);
+  const selection = useMemo(() => {
+    if (!providerId || !overview) return { ...draft, ...locked };
+    const cap = overview.capabilities;
+    const picked = opts.pick?.(providerId, models);
+    const model = models.find((m) => m.id === draft.model) ?? models.find((m) => m.id === picked?.model) ?? models[0];
+    const pickedEffort = model?.id === picked?.model && model?.efforts.some((e) => e.id === picked?.effort) ? picked?.effort : void 0;
+    const effort = model?.efforts.some((e) => e.id === draft.effort) ? draft.effort : pickedEffort ?? model?.defaultEffort ?? model?.efforts[0]?.id;
+    const contextWindow = model?.contextWindows.includes(draft.contextWindow ?? -1) ? draft.contextWindow : model?.defaultContextWindow ?? model?.contextWindows[0];
+    const access = cap.access.includes(draft.access) ? draft.access : cap.access[0];
+    return {
+      provider: providerId,
+      model: model?.id,
+      effort: cap.effort ? effort : void 0,
+      contextWindow: cap.contextWindow ? contextWindow : void 0,
+      fast: cap.fast && model?.fast ? !!draft.fast : void 0,
+      cwd: draft.cwd,
+      access,
+      ...locked
+    };
+  }, [draft, models, overview, providerId, locked, opts.pick]);
+  const set = useCallback(
+    (patch) => setDraft((d) => {
+      const switching = patch.provider !== void 0 && patch.provider !== d.provider;
+      return { ...d, ...switching ? { model: void 0, effort: void 0, contextWindow: void 0, fast: void 0 } : {}, ...patch };
+    }),
+    []
+  );
+  const complete = !!(selection.provider && selection.model && selection.cwd && selection.access);
+  return {
+    providers,
+    models,
+    overview,
+    model: models.find((m) => m.id === selection.model),
+    selection,
+    /** A full Selection once provider, model, folder and access are all set. */
+    value: complete ? selection : void 0,
+    set,
+    loading: loadingProviders,
+    error,
+    refresh
+  };
+}
+function useAuth(client, provider, onChange) {
+  const [status, setStatus] = useState();
+  const [events, setEvents] = useState([]);
+  const [busy, setBusy] = useState();
+  const [message, setMessage] = useState();
+  const loginId = useRef(void 0);
+  const abort = useRef(void 0);
+  const refresh = useCallback(async () => {
+    setStatus(await client.authStatus(provider).catch(() => ({ loggedIn: false })));
+  }, [client, provider]);
+  useEffect(() => void refresh(), [refresh]);
+  const login = useCallback(async () => {
+    setBusy("login");
+    setEvents([]);
+    abort.current = new AbortController();
+    try {
+      for await (const e of client.login(provider, abort.current.signal)) {
+        if (e.type === "login") loginId.current = e.loginId;
+        else setEvents((prev) => [...prev, e]);
+      }
+    } catch (e) {
+      setEvents((prev) => [...prev, { type: "error", message: e instanceof Error ? e.message : String(e) }]);
+    } finally {
+      setBusy(void 0);
+      await refresh();
+      onChange?.();
+    }
+  }, [client, provider, refresh, onChange]);
+  const sendCode = useCallback((code) => loginId.current && client.sendLoginCode(loginId.current, code), [client]);
+  const cancel = useCallback(() => {
+    if (loginId.current) void client.cancelLogin(loginId.current);
+    abort.current?.abort();
+  }, [client]);
+  const logout = useCallback(async () => {
+    setBusy("logout");
+    try {
+      await client.logout(provider);
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : String(e));
+    }
+    setBusy(void 0);
+    await refresh();
+    onChange?.();
+  }, [client, provider, refresh, onChange]);
+  const update = useCallback(async () => {
+    setBusy("update");
+    try {
+      const r = await client.update(provider);
+      setMessage(r.changed ? `Updated ${r.from} to ${r.to}` : `Already up to date${r.to ? ` (${r.to})` : ""}`);
+    } catch (e) {
+      setMessage(e instanceof Error ? e.message : String(e));
+    }
+    setBusy(void 0);
+    onChange?.();
+  }, [client, provider, onChange]);
+  return { status, events, busy, message, login, sendCode, cancel, logout, update, refresh };
+}
+function useRun(client) {
+  const [text, setText] = useState("");
+  const [events, setEvents] = useState([]);
+  const [approvals, setApprovals] = useState([]);
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState();
+  const [session, setSession] = useState();
+  const runId = useRef(void 0);
+  const abort = useRef(void 0);
+  const send = useCallback(
+    async (prompt, selection) => {
+      abort.current = new AbortController();
+      setText("");
+      setEvents([]);
+      setApprovals([]);
+      setError(void 0);
+      setStatus("running");
+      try {
+        const resume = session && session.provider === selection.provider && session.cwd === selection.cwd ? session.id : void 0;
+        for await (const e of client.run({ prompt, selection, sessionId: resume }, abort.current.signal)) {
+          if (e.type === "run") {
+            runId.current = e.runId;
+            continue;
+          }
+          setEvents((prev) => [...prev, e]);
+          if (e.type === "text.delta") setText((t) => t + e.text);
+          else if (e.type === "session") setSession({ id: e.sessionId, provider: selection.provider, cwd: selection.cwd });
+          else if (e.type === "approval.request") setApprovals((a) => [...a, e.request]);
+          else if (e.type === "error") {
+            setError(e.message);
+            setStatus("error");
+          }
+        }
+        setStatus((s) => s === "error" ? s : "done");
+      } catch (e) {
+        if (!abort.current.signal.aborted) {
+          setError(e instanceof Error ? e.message : String(e));
+          setStatus("error");
+        } else setStatus("done");
+      }
+    },
+    [client, session]
+  );
+  const approve = useCallback(
+    async (id, decision) => {
+      setApprovals((a) => a.filter((r) => r.id !== id));
+      if (runId.current) await client.approve(runId.current, id, decision);
+    },
+    [client]
+  );
+  const result = useMemo(() => {
+    const out = { text: "", sessionId: void 0, model: void 0, usage: void 0, finishReason: void 0, toolCalls: [] };
+    for (const e of events) {
+      if (e.type === "session") {
+        out.sessionId = e.sessionId;
+        out.model = e.model ?? out.model;
+      } else if (e.type === "text.delta") out.text += e.text;
+      else if (e.type === "tool.start") out.toolCalls.push({ id: e.id, name: e.name, input: e.input });
+      else if (e.type === "tool.end") {
+        const call = out.toolCalls.find((c) => c.id === e.id);
+        if (call && e.error) call.error = e.error;
+      } else if (e.type === "usage") out.usage = e.usage;
+      else if (e.type === "done") out.finishReason = e.finishReason;
+    }
+    return out;
+  }, [events]);
+  const cancel = useCallback(() => abort.current?.abort(), []);
+  const reset = useCallback(() => setSession(void 0), []);
+  return {
+    text,
+    events,
+    result,
+    approvals,
+    status,
+    error,
+    /** The conversation `send` will continue, or undefined when the next run starts fresh. */
+    session,
+    /** Same as `session?.id`. */
+    sessionId: session?.id,
+    send,
+    approve,
+    cancel,
+    newConversation: reset
+  };
+}
+
+// src/FunnelPicker.tsx
+import { useEffect as useEffect2, useId, useState as useState2 } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ACCESS_LABELS = {
+  supervised: { label: "Supervised", hint: "Asks before every action" },
+  "accept-edits": { label: "Accept edits", hint: "Edits files freely, asks for the rest" },
+  auto: { label: "Auto", hint: "A classifier approves safe actions" },
+  full: { label: "Full access", hint: "Runs anything without asking" }
+};
+var fmtTokens = (n) => n >= 1e6 ? `${n / 1e6}M` : `${n / 1e3}k`;
+function FunnelPicker({ client, defaults, locked, onChange, className }) {
+  const s = useSelection(client, { defaults, locked });
+  useEffect2(() => onChange?.(s.value), [s.value && JSON.stringify(s.value)]);
+  return /* @__PURE__ */ jsx(FunnelPickerView, { client, state: s, locked, className });
+}
+function FunnelPickerView({ client, state: s, locked, className }) {
+  const id = useId();
+  const { selection, model, overview } = s;
+  const cap = overview?.capabilities;
+  if (s.loading) return /* @__PURE__ */ jsx("div", { className: `cf ${className ?? ""}`, children: "Loading providers\u2026" });
+  if (s.error) return /* @__PURE__ */ jsx("div", { className: `cf cf-error ${className ?? ""}`, children: s.error });
+  const installed = s.providers.filter((p) => p.installation.installed);
+  const show = (k) => !(locked && k in locked);
+  return /* @__PURE__ */ jsxs("div", { className: `cf cf-picker ${className ?? ""}`, children: [
+    show("provider") && /* @__PURE__ */ jsxs("label", { className: "cf-field", children: [
+      /* @__PURE__ */ jsx("span", { children: "Provider" }),
+      /* @__PURE__ */ jsx("select", { value: selection.provider ?? "", onChange: (e) => s.set({ provider: e.target.value }), children: installed.map((p) => /* @__PURE__ */ jsxs("option", { value: p.id, children: [
+        p.displayName,
+        p.auth?.loggedIn ? "" : " (signed out)"
+      ] }, p.id)) }),
+      installed.length === 0 && /* @__PURE__ */ jsx("small", { children: "No supported CLI found. Run \u201Ccli-funnel doctor\u201D." })
+    ] }),
+    show("model") && /* @__PURE__ */ jsxs("label", { className: "cf-field", children: [
+      /* @__PURE__ */ jsx("span", { children: "Model" }),
+      /* @__PURE__ */ jsx("select", { value: selection.model ?? "", onChange: (e) => s.set({ model: e.target.value }), children: s.models.map((m) => /* @__PURE__ */ jsx("option", { value: m.id, children: m.name }, m.id)) }),
+      selection.model && /* @__PURE__ */ jsx("small", { className: "cf-mono", children: selection.model })
+    ] }),
+    cap?.effort && model && model.efforts.length > 0 && show("effort") && /* @__PURE__ */ jsxs("label", { className: "cf-field", children: [
+      /* @__PURE__ */ jsx("span", { children: "Reasoning" }),
+      /* @__PURE__ */ jsx("select", { value: selection.effort ?? "", onChange: (e) => s.set({ effort: e.target.value }), children: model.efforts.map((e) => /* @__PURE__ */ jsx("option", { value: e.id, children: e.label }, e.id)) })
+    ] }),
+    cap?.contextWindow && model && model.contextWindows.length > 0 && show("contextWindow") && /* @__PURE__ */ jsxs("label", { className: "cf-field", children: [
+      /* @__PURE__ */ jsx("span", { children: "Context window" }),
+      /* @__PURE__ */ jsx("select", { value: selection.contextWindow ?? "", onChange: (e) => s.set({ contextWindow: Number(e.target.value) }), children: model.contextWindows.map((c) => /* @__PURE__ */ jsxs("option", { value: c, children: [
+        fmtTokens(c),
+        " tokens"
+      ] }, c)) })
+    ] }),
+    cap?.fast && model?.fast && show("fast") && /* @__PURE__ */ jsxs("label", { className: "cf-check", children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: !!selection.fast, onChange: (e) => s.set({ fast: e.target.checked }) }),
+      /* @__PURE__ */ jsx("span", { children: "Fast mode" }),
+      /* @__PURE__ */ jsx("small", { children: "Quicker output, uses your quota faster" })
+    ] }),
+    show("cwd") && /* @__PURE__ */ jsx(FolderField, { client, value: selection.cwd, onChange: (cwd) => s.set({ cwd }), labelId: id }),
+    cap && show("access") && /* @__PURE__ */ jsxs("fieldset", { className: "cf-field cf-access", children: [
+      /* @__PURE__ */ jsx("legend", { children: "Machine access" }),
+      cap.access.map((a) => /* @__PURE__ */ jsxs("label", { className: selection.access === a ? "cf-option cf-on" : "cf-option", children: [
+        /* @__PURE__ */ jsx("input", { type: "radio", name: `${id}-access`, checked: selection.access === a, onChange: () => s.set({ access: a }) }),
+        /* @__PURE__ */ jsx("span", { children: ACCESS_LABELS[a].label }),
+        /* @__PURE__ */ jsx("small", { children: ACCESS_LABELS[a].hint })
+      ] }, a))
+    ] })
+  ] });
+}
+function FolderField({ client, value, onChange, labelId }) {
+  const [open, setOpen] = useState2(false);
+  const [listing, setListing] = useState2();
+  const [err, setErr] = useState2();
+  const load = (path) => client.listDirs(path).then(
+    (l) => {
+      setListing(l);
+      setErr(void 0);
+    },
+    (e) => setErr(e instanceof Error ? e.message : String(e))
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "cf-field cf-folder", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: `${labelId}-cwd`, children: "Project folder" }),
+    /* @__PURE__ */ jsxs("div", { className: "cf-row", children: [
+      /* @__PURE__ */ jsx("input", { id: `${labelId}-cwd`, className: "cf-mono", value: value ?? "", placeholder: "/path/to/project", onChange: (e) => onChange(e.target.value) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setOpen((o) => !o);
+            if (!open) void load(value);
+          },
+          children: "Browse"
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "cf-browser", role: "listbox", "aria-label": "Folders", children: [
+      err && /* @__PURE__ */ jsx("small", { className: "cf-error", children: err }),
+      listing && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "cf-crumb cf-mono", children: listing.path }),
+        /* @__PURE__ */ jsxs("div", { className: "cf-list", children: [
+          listing.parent && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => load(listing.parent), children: ".." }),
+          listing.dirs.map((d) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => load(`${listing.path}/${d}`), children: d }, d))
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "cf-primary",
+            onClick: () => {
+              onChange(listing.path);
+              setOpen(false);
+            },
+            children: "Use this folder"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/FunnelLogin.tsx
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FunnelLogin({ client, provider, onChange, className }) {
+  const a = useAuth(client, provider.id, onChange);
+  const [code, setCode] = useState3("");
+  const install = provider.installation;
+  const url = [...a.events].reverse().find((e) => e.type === "open-url");
+  const prompt = [...a.events].reverse().find((e) => e.type === "code-prompt");
+  const terminal = a.events.find((e) => e.type === "needs-terminal");
+  const failure = [...a.events].reverse().find((e) => e.type === "error");
+  return /* @__PURE__ */ jsxs2("section", { className: `cf cf-login ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs2("header", { children: [
+      /* @__PURE__ */ jsx2("h3", { children: provider.displayName }),
+      /* @__PURE__ */ jsx2("span", { className: "cf-mono", children: install.installed ? install.version ?? "installed" : "not installed" })
+    ] }),
+    !install.installed ? /* @__PURE__ */ jsxs2("p", { children: [
+      "Install the ",
+      provider.displayName,
+      " CLI, then reload."
+    ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      /* @__PURE__ */ jsxs2("p", { children: [
+        a.status?.loggedIn ? `Signed in${a.status.account ? ` as ${a.status.account}` : ""}${a.status.plan ? `, ${a.status.plan} plan` : ""}.` : "Signed out.",
+        install.withinTestedRange === false && " This CLI version is newer or older than the tested range."
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "cf-row", children: [
+        a.status?.loggedIn ? /* @__PURE__ */ jsx2("button", { type: "button", onClick: a.logout, disabled: !!a.busy, children: "Sign out" }) : /* @__PURE__ */ jsx2("button", { type: "button", className: "cf-primary", onClick: a.login, disabled: a.busy === "login", children: a.busy === "login" ? "Waiting for sign-in\u2026" : "Sign in" }),
+        /* @__PURE__ */ jsx2("button", { type: "button", onClick: a.update, disabled: !!a.busy, children: a.busy === "update" ? "Updating\u2026" : "Update CLI" }),
+        a.busy === "login" && /* @__PURE__ */ jsx2("button", { type: "button", onClick: a.cancel, children: "Cancel" })
+      ] })
+    ] }),
+    url?.type === "open-url" && /* @__PURE__ */ jsxs2("p", { children: [
+      "Open ",
+      /* @__PURE__ */ jsx2("a", { href: url.url, target: "_blank", rel: "noreferrer", children: "the sign-in page" }),
+      " if it did not open on its own."
+    ] }),
+    prompt?.type === "code-prompt" && /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        className: "cf-row",
+        onSubmit: (e) => {
+          e.preventDefault();
+          void a.sendCode(code);
+          setCode("");
+        },
+        children: [
+          /* @__PURE__ */ jsx2("input", { value: code, onChange: (e) => setCode(e.target.value), placeholder: "Paste the code", "aria-label": "Sign-in code" }),
+          /* @__PURE__ */ jsx2("button", { type: "submit", children: "Submit" })
+        ]
+      }
+    ),
+    terminal?.type === "needs-terminal" && /* @__PURE__ */ jsxs2("p", { children: [
+      "This provider signs in from a terminal. Run ",
+      /* @__PURE__ */ jsx2("code", { className: "cf-mono", children: terminal.command.join(" ") }),
+      ", then come back."
+    ] }),
+    failure?.type === "error" && /* @__PURE__ */ jsx2("p", { className: "cf-error", children: failure.message }),
+    a.message && /* @__PURE__ */ jsx2("p", { children: a.message })
+  ] });
+}
+
+// src/ApprovalPrompt.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ApprovalPrompt({ request, onDecide, className }) {
+  const detail = typeof request.input === "string" ? request.input : JSON.stringify(request.input, null, 2);
+  return /* @__PURE__ */ jsxs3("div", { className: `cf cf-approval ${className ?? ""}`, role: "alertdialog", "aria-label": `Approve ${request.tool}`, children: [
+    /* @__PURE__ */ jsx3("strong", { children: request.tool }),
+    request.description && /* @__PURE__ */ jsx3("p", { children: request.description }),
+    /* @__PURE__ */ jsx3("pre", { className: "cf-mono", children: detail }),
+    /* @__PURE__ */ jsxs3("div", { className: "cf-row", children: [
+      /* @__PURE__ */ jsx3("button", { type: "button", className: "cf-primary", onClick: () => onDecide(request.id, "allow"), children: "Allow" }),
+      /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => onDecide(request.id, "deny"), children: "Deny" })
+    ] })
+  ] });
+}
+export {
+  ApprovalPrompt,
+  FunnelLogin,
+  FunnelPicker,
+  FunnelPickerView,
+  useAuth,
+  useProviders,
+  useRun,
+  useSelection
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "cli-funnel-react",
+  "version": "0.1.0",
+  "description": "React hooks and components for cli-funnel: model picker, folder picker, access level, login and one-click update.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/funnel.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "peerDependencies": {
+    "cli-funnel": "^0.1.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "cli-funnel": "*"
+  },
+  "scripts": {
+    "build": "tsup && cp src/funnel.css dist/funnel.css",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SuperTost100/cli-funnel.git",
+    "directory": "packages/react"
+  },
+  "homepage": "https://github.com/SuperTost100/cli-funnel#readme",
+  "bugs": {
+    "url": "https://github.com/SuperTost100/cli-funnel/issues"
+  },
+  "keywords": [
+    "claude-code",
+    "codex",
+    "cursor-agent",
+    "antigravity",
+    "react",
+    "ai"
+  ]
+}