fabro/apps/fabro-web/app/hooks/use-install-effects.ts
fabro-sh-0530[bot] b196a97ac4
Introduce approved effect hooks and migrate direct useEffect calls (#425)
## Summary

Implements the React Effects Policy by creating the approved hook
surface in `hooks/effects.ts` and migrating a broad set of direct
`useEffect` calls across the codebase to either purpose-named hooks or
non-effect patterns.

### Plan Summary

- Add `hooks/effects.ts` exporting `useMountEffect`, `useInterval`,
`useTimeout`, `useDebouncedValue`, `useWindowEvent`, `useDocumentEvent`,
`useDocumentTitle`, `useMediaQuery`, `useLocationHash`, and
`useResizeObserver`
- Extract large imperative effects into purpose-named hooks:
`useTerminalSession`, `useFloatingTooltipMeasurements`,
`useAnnotatedRunGraphSvg`, `useInstallEffects`, and others
- Move install session fetch from a component effect into a SWR query
(`install-query.ts`)
- Replace `useEffect` + `useState` state-derivation patterns with
render-time computation or ref callbacks
- Replace `AskFabroLayoutProvider`/`useAskFabroLayout` context with a
prop callback

## What changed and why

**`hooks/effects.ts`** — the new approved primitive surface. All
internal `useEffect` calls here are intentional; the hooks expose the
*external system* they manage rather than leaking `useEffect` to
component code. `useMediaQuery` and `useLocationHash` use
`useSyncExternalStore` instead of effect + state.

**`useTerminalSession`** — the largest extraction. The 130-line
xterm/WebSocket/ResizeObserver setup block moves from
`terminal-view.tsx` into its own hook, which now owns the `terminalRef`,
`fitRef`, and `socketRef` that previously cluttered the component.
`TerminalConnectionError` and `ConnectionStatus` types are exported from
the hook.

**`useFloatingTooltipMeasurements`** — extracts the `useLayoutEffect` +
ResizeObserver + window resize listener out of `FloatingTooltip`. The
`FloatingTooltipSize` type moves with it so consumers don't need to
import from the component.

**`useInstallSessionQuery` + `useInstallEffects`** — the install session
fetch moves from a component effect to SWR (`install-query.ts`). The
three remaining install effects (token URL scrubbing, GitHub error URL
scrubbing, health-poll restart) move into
`hooks/use-install-effects.ts`. The root-redirect effect is replaced
with a render-time `<Navigate>` gate. The `SessionState` discriminant
now carries `token` so stale query results can be discarded without an
effect chain.

**`SelectionCheckbox`** — `useEffect` setting `input.indeterminate` is
replaced with a ref callback, which runs synchronously after the node is
attached and avoids a stale-frame flash.

**`event-debug.tsx`** — the manual `window.addEventListener("keydown",
...)` pattern is replaced with `useWindowEvent`, removing the
`react-doctor-disable` suppression comments.

**`run-waterfall.tsx`** — the local `useTickingNow` is deleted;
`RunWaterfall` now calls the shared `useTickingNow` from `lib/time` with
the new `active` parameter signature.

**`toast.test.tsx`** — `useEffect(() => onReady?.(api), ...)` in the
test helper is replaced with a direct call during render, which is valid
because `onReady` has no side effects that React cares about.

**`AskFabroSidebar`** — `setIsResizing` from the layout context is
replaced with an `onResizeActiveChange` prop, removing the
`useAskFabroLayout` call and the hidden context coupling from the
sidebar.


### Fabro Details

<details>
<summary>Ran 3 stages in 114m 5s for $95.71</summary>

| Stage | Duration | Cost | Retries |
|---|---|---|---|
| start | 0s | – | 0 |
| work | 103m 3s | $80.42 | 0 |
| audit | 10m 19s | $15.29 | 0 |
| **Total** | **114m 5s** | **$95.71** | **0** |

</details>

<details>
<summary>Ran <code>Goal.fabro</code> (4 nodes and 5 edges)</summary>

```dot
digraph Goal {
    graph [
        goal="Complete the user-provided goal",
        rankdir=LR,
        max_node_visits=30
    ]

    start [shape=Mdiamond, label="Start"]
    exit  [shape=Msquare, label="Exit"]

    work [
        label="Work",
        thread_id="goal",
        fidelity="full",
        max_visits=12,
        model="gpt-55",
        reasoning_effort="xhigh",
        prompt="@prompts/continue.md"
    ]

    audit [
        label="Completion Audit",
        thread_id="goal",
        fidelity="full",
        goal_gate=true,
        retry_target="work",
        output_schema="routing",
        output_retries=2,
        max_visits=12,
        model="gpt-55",
        reasoning_effort="xhigh",
        prompt="@prompts/audit.md"
    ]

    start -> work -> audit

    audit -> exit [label="Done", condition="outcome=succeeded"]
    audit -> work [label="Continue", condition="outcome=failed || preferred_label=Continue"]
    audit -> work [label="No clear verdict"]
}

```

</details>

⚒️ Generated with [Fabro](https://fabro.sh)

---------

Co-authored-by: Fabro <noreply@fabro.sh>
Co-authored-by: Bryan Helmkamp <bryan@brynary.com>
2026-05-27 10:37:29 -04:00

128 lines
4 KiB
TypeScript

import { useEffect, useRef, type Dispatch, type SetStateAction } from "react";
import {
type InstallFinishResponse,
persistInstallToken,
} from "../install-api";
import { shouldRedirectAfterHealthPoll } from "../install-flow";
import {
consumeInstallGithubErrorFromUrl,
consumeInstallTokenFromUrl,
shouldConsumeInstallGithubErrorForPath,
} from "../mode";
type InstallGithubCallbackAction =
| { type: "saveErrorChanged"; message: string | null };
type InstallRestartPollingAction =
| { type: "timedOutChanged"; timedOut: boolean };
/**
* Synchronizes install mode with the browser URL and sessionStorage. A token in
* the URL is persisted, promoted into React state, and scrubbed from history on
* mount; there is no resource to clean up.
*/
export function useInstallTokenFromUrl({
setInstallToken,
}: {
setInstallToken: Dispatch<SetStateAction<string | null>>;
}) {
useEffect(() => {
const { token, sanitizedUrl } = consumeInstallTokenFromUrl(window.location.href);
if (!token) return;
persistInstallToken(token);
setInstallToken(token);
window.history.replaceState(window.history.state, "", sanitizedUrl);
}, [setInstallToken]);
}
/**
* Synchronizes GitHub App callback errors from the browser URL into the install
* state machine. The error query parameter is scrubbed from history after it is
* consumed; there is no resource to clean up.
*/
export function useInstallGithubCallbackError({
dispatchInstall,
pathname,
}: {
dispatchInstall: (action: InstallGithubCallbackAction) => void;
pathname: string;
}) {
const consumedErrorPathRef = useRef<string | null>(null);
useEffect(() => {
if (shouldConsumeInstallGithubErrorForPath(pathname)) {
const { error, sanitizedUrl } = consumeInstallGithubErrorFromUrl(window.location.href);
if (error) {
consumedErrorPathRef.current = pathname;
dispatchInstall({ type: "saveErrorChanged", message: error });
window.history.replaceState(window.history.state, "", sanitizedUrl);
return;
}
if (consumedErrorPathRef.current === pathname) {
return;
}
}
consumedErrorPathRef.current = null;
dispatchInstall({ type: "saveErrorChanged", message: null });
}, [dispatchInstall, pathname]);
}
/**
* Synchronizes install finishing with browser timers, fetch health polling, and
* `window.location`. The deadline timer, polling interval, and in-flight fetch
* are cancelled when finishing stops or the component unmounts.
*/
export function useInstallRestartHealthPolling({
dispatchInstall,
finishState,
}: {
dispatchInstall: (action: InstallRestartPollingAction) => void;
finishState: InstallFinishResponse | null;
}) {
useEffect(() => {
if (!finishState) return;
dispatchInstall({ type: "timedOutChanged", timedOut: false });
const deadline = window.setTimeout(() => {
dispatchInstall({ type: "timedOutChanged", timedOut: true });
}, 30_000);
const controller = new AbortController();
let inFlight = false;
const poll = async () => {
if (inFlight || controller.signal.aborted) return;
inFlight = true;
try {
const response = await fetch("/health", { signal: controller.signal });
const body = response.ok
? ((await response.json()) as { mode?: string })
: undefined;
if (
shouldRedirectAfterHealthPoll({
kind: "response",
ok: response.ok,
mode: body?.mode,
})
) {
window.location.href = finishState.restart_url;
}
} catch {
if (controller.signal.aborted) return;
if (shouldRedirectAfterHealthPoll({ kind: "error" })) {
window.location.href = finishState.restart_url;
}
} finally {
inFlight = false;
}
};
const interval = window.setInterval(poll, 2_000);
return () => {
controller.abort();
window.clearTimeout(deadline);
window.clearInterval(interval);
};
}, [dispatchInstall, finishState]);
}