mirror of
https://github.com/fabro-sh/fabro.git
synced 2026-09-05 08:10:39 +00:00
## 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>
155 lines
4.1 KiB
TypeScript
155 lines
4.1 KiB
TypeScript
import { afterEach, describe, expect, mock, test } from "bun:test";
|
|
|
|
import {
|
|
ApiError,
|
|
apiData,
|
|
extractRequestId,
|
|
fetchAllPages,
|
|
generatedAxios,
|
|
stageArtifactDownloadUrl,
|
|
} from "./api-client";
|
|
|
|
afterEach(() => {
|
|
mock.restore();
|
|
delete (globalThis as { window?: unknown }).window;
|
|
});
|
|
|
|
function axiosFailure({
|
|
status,
|
|
statusText,
|
|
data,
|
|
headers = {},
|
|
}: {
|
|
status: number;
|
|
statusText?: string;
|
|
data?: unknown;
|
|
headers?: Record<string, string>;
|
|
}) {
|
|
return {
|
|
isAxiosError: true,
|
|
message: statusText ?? `HTTP ${status}`,
|
|
response: {
|
|
status,
|
|
statusText: statusText ?? "",
|
|
data,
|
|
headers,
|
|
},
|
|
};
|
|
}
|
|
|
|
describe("generated Axios adapter", () => {
|
|
test("uses same-origin requests with browser credentials", () => {
|
|
expect(generatedAxios.defaults.baseURL).toBe("");
|
|
expect(generatedAxios.defaults.withCredentials).toBe(true);
|
|
});
|
|
|
|
test("normalizes generated client failures into ApiError", async () => {
|
|
const body = {
|
|
errors: [{
|
|
status: "500",
|
|
title: "Internal",
|
|
detail: "Database is unavailable.",
|
|
request_id: "body-req",
|
|
}],
|
|
};
|
|
|
|
try {
|
|
await apiData(() =>
|
|
Promise.reject(
|
|
axiosFailure({
|
|
status: 500,
|
|
statusText: "Internal Server Error",
|
|
data: body,
|
|
headers: { "x-request-id": "header-req" },
|
|
}),
|
|
),
|
|
);
|
|
throw new Error("expected apiData to reject");
|
|
} catch (error) {
|
|
expect(error).toBeInstanceOf(ApiError);
|
|
expect(error).toMatchObject({
|
|
status: 500,
|
|
message: "Database is unavailable.",
|
|
requestId: "header-req",
|
|
body,
|
|
});
|
|
}
|
|
});
|
|
|
|
test("redirects normal authenticated 401 responses to login", async () => {
|
|
const location = { href: "" };
|
|
(globalThis as unknown as { window: { location: typeof location } }).window = {
|
|
location,
|
|
};
|
|
|
|
await expect(() =>
|
|
apiData(() => Promise.reject(axiosFailure({ status: 401 }))),
|
|
).toThrow(ApiError);
|
|
|
|
expect(location.href).toBe("/login");
|
|
});
|
|
|
|
test("can suppress login redirects for login and install calls", async () => {
|
|
const location = { href: "" };
|
|
(globalThis as unknown as { window: { location: typeof location } }).window = {
|
|
location,
|
|
};
|
|
|
|
await expect(() =>
|
|
apiData(
|
|
() => Promise.reject(axiosFailure({ status: 401 })),
|
|
{ redirectOnUnauthorized: false },
|
|
),
|
|
).toThrow(ApiError);
|
|
|
|
expect(location.href).toBe("");
|
|
});
|
|
});
|
|
|
|
describe("fetchAllPages", () => {
|
|
test("preserves first-page extras and stops at the page cap", async () => {
|
|
const warnMock = mock(() => {});
|
|
const originalWarn = console.warn;
|
|
console.warn = warnMock;
|
|
let calls = 0;
|
|
|
|
try {
|
|
const result = await fetchAllPages<{ id: string }, { columns: { id: string; name: string }[] }>(
|
|
"board runs",
|
|
async () => {
|
|
calls += 1;
|
|
return {
|
|
columns: [{ id: "running", name: "Running" }],
|
|
data: [{ id: `run-${calls}` }],
|
|
meta: { has_more: true },
|
|
};
|
|
},
|
|
);
|
|
|
|
expect(result.columns).toEqual([{ id: "running", name: "Running" }]);
|
|
expect(result.data).toHaveLength(50);
|
|
expect(result.meta.has_more).toBe(true);
|
|
expect(warnMock).toHaveBeenCalledTimes(1);
|
|
} finally {
|
|
console.warn = originalWarn;
|
|
}
|
|
});
|
|
});
|
|
|
|
describe("stageArtifactDownloadUrl", () => {
|
|
test("builds the escaped download href", () => {
|
|
expect(
|
|
stageArtifactDownloadUrl("run 1", "stage@1", "logs/output.txt", 2),
|
|
).toBe(
|
|
"/api/v1/runs/run%201/stages/stage%401/artifacts/download?filename=logs%2Foutput.txt&retry=2",
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("extractRequestId", () => {
|
|
test("supports top-level, error-level, and detail-embedded request ids", () => {
|
|
expect(extractRequestId({ request_id: "top" })).toBe("top");
|
|
expect(extractRequestId({ errors: [{ request_id: "nested" }] })).toBe("nested");
|
|
expect(extractRequestId({ errors: [{ detail: "Request ID: req-detail" }] })).toBe("req-detail");
|
|
});
|
|
});
|