cursedbelt 2.8.0 → 3.0.1

package/src/react/studios/SystemUtilityShell.tsx

@@ -1,788 +0,0 @@
-/**
- * SystemUtility (`system`) presentation shell (04 §5d) — the dashboard widget
- * board, the calendar, the notifications inbox, and the utility drawer.
- *
- * Two things here are deliberate and easy to get wrong:
- *
- * **The dashboard is the canonical `Slot` host.** `DashboardWidget` fills are
- * contributed by OTHER engines (the media widget, the todo widget, the fleet
- * widget), and the whole point of Slot & Fill is that this shell imports none of
- * them. It hands `Slot` the fills and the claims and renders whatever survives
- * the feature ∧ permission filter — including nothing.
- *
- * **The notification rows are the WIRE's rows**, not cwip's richer
- * `AppNotification`. `/api/system/notifications` returns `{id, title, body?,
- * done}` and supports exactly one action (mark done). Adapting to
- * `NotificationInbox` would mean inventing `severity`, `read`, `createdAt` and
- * two actions the server does not have — a UI that lies about its backend. When
- * the notification repository grows those columns (04 §3), the inbox component
- * is the drop-in and this list goes away.
- */
-import { useMemo, useState } from 'react';
-import type { SubscriptionCadence } from '../../server/mixins/services';
-import { Button } from '../components/Button';
-import { AddRow } from './AddRow';
-import { EmptyState } from '../components/EmptyState';
-import { AutoGrowTextarea } from '../components/AutoGrowTextarea';
-import { Input } from '../components/Input';
-import { MonthGrid } from '../components/calendar/MonthGrid';
-import { ScrollArea } from '../components/ScrollArea';
-import { cn } from '../lib/cn';
-import { Slot } from '../slots/Slot';
-import { availableSurfaces, SYSTEM_SURFACES, SYSTEM_TOOLS, type StudioSurface } from './featureGate';
-import { Stopwatch } from './Stopwatch';
-import { StudioNav } from './StudioNav';
-import { SelectField } from '../components/SelectField';
-import type {
-  BudgetSurfaceState,
-  SubscriptionSurfaceState,
-  SystemCalendarEvent,
-  SystemUtilityShellProps,
-  TimeOffSurfaceState,
-} from './types';
-
-/** Keyed on `effectiveFeaturesHash` for the 02 §6.1 clean-remount-on-toggle rule. */
-export function SystemUtilityShell(props: SystemUtilityShellProps) {
-  return <SystemUtilityBody key={props.instance.effectiveFeaturesHash} {...props} />;
-}
-
-function SystemUtilityBody({
-  instance,
-  claims,
-  view,
-  onSelectView,
-  fills = [],
-  events = [],
-  notifications = [],
-  onMarkNotificationDone,
-  month,
-  onMonthChange,
-  onSendHttp,
-  httpResult,
-  httpSending,
-  timeOff,
-  budgets,
-  subscriptions,
-  loading,
-  className,
-}: SystemUtilityShellProps) {
-  const surfaces = useMemo(
-    () => availableSurfaces(SYSTEM_SURFACES, instance.effective, claims?.permissions ?? []),
-    [instance.effective, claims],
-  );
-  const tools = useMemo(
-    () => availableSurfaces(SYSTEM_TOOLS, instance.effective, claims?.permissions ?? []),
-    [instance.effective, claims],
-  );
-
-  const [fallbackView, setFallbackView] = useState<string | undefined>(undefined);
-  const requested = view ?? fallbackView;
-  const active: StudioSurface | undefined = surfaces.find((s) => s.id === requested) ?? surfaces[0];
-
-  const select = (next: string): void => {
-    setFallbackView(next);
-    onSelectView?.(next);
-  };
-
-  if (surfaces.length === 0)
-    return <EmptyState title='No SystemUtility surfaces enabled' description='Every system feature is off for this instance.' />;
-
-  return (
-    <section
-      data-cc-studio='system'
-      data-cc-instance={instance.id}
-      className={cn('flex min-h-0 min-w-0 flex-col gap-3', className)}
-    >
-      <StudioNav
-        title={instance.title}
-        surfaces={surfaces}
-        activeId={active?.id}
-        onSelect={select}
-        label='SystemUtility surfaces'
-      />
-
-      <div className='min-h-0 min-w-0 flex-1' data-cc-surface={active?.id}>
-        {active?.id === 'dashboard' ? (
-          <div data-cc-dashboard='' className='grid gap-3 sm:grid-cols-2 xl:grid-cols-3'>
-            <Slot
-              id='DashboardWidget'
-              fills={fills}
-              claims={claims}
-              empty={<EmptyState compact title='No widgets' description='No engine contributed a dashboard widget for this session.' />}
-            />
-          </div>
-        ) : null}
-
-        {active?.id === 'calendar' ? (
-          <CalendarBoard events={events} month={month} onMonthChange={onMonthChange} />
-        ) : null}
-
-        {active?.id === 'notifications' ? (
-          <NotificationList
-            rows={notifications}
-            loading={loading}
-            onMarkDone={onMarkNotificationDone}
-          />
-        ) : null}
-
-        {active?.id === 'time-off' && timeOff ? <TimeOffPanel state={timeOff} loading={loading} /> : null}
-
-        {active?.id === 'budgets' && budgets ? <BudgetsPanel state={budgets} loading={loading} /> : null}
-
-        {active?.id === 'subscriptions' && subscriptions ? (
-          <SubscriptionsPanel state={subscriptions} loading={loading} />
-        ) : null}
-
-        {active?.id === 'utilities' ? (
-          <UtilityDrawer
-            tools={tools}
-            onSendHttp={onSendHttp}
-            httpResult={httpResult}
-            httpSending={httpSending}
-          />
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-/* ------------------------------------------------------------- calendar */
-
-/** Local day key for an ISO timestamp — the key `MonthGrid` cells carry. */
-const dayKeyOf = (iso: string): string => {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) return '';
-  const month = `${date.getMonth() + 1}`.padStart(2, '0');
-  const day = `${date.getDate()}`.padStart(2, '0');
-  return `${date.getFullYear()}-${month}-${day}`;
-};
-
-function CalendarBoard({
-  events,
-  month,
-  onMonthChange,
-}: {
-  events: readonly SystemCalendarEvent[];
-  month?: Date;
-  onMonthChange?: (month: Date) => void;
-}) {
-  const [localMonth, setLocalMonth] = useState<Date>(() => month ?? new Date());
-  const shown = month ?? localMonth;
-
-  const byDay = useMemo(() => {
-    const index = new Map<string, SystemCalendarEvent[]>();
-    for (const event of events) {
-      const key = dayKeyOf(event.startsAt);
-      if (!key) continue;
-      const bucket = index.get(key);
-      if (bucket) bucket.push(event);
-      else index.set(key, [event]);
-    }
-    return index;
-  }, [events]);
-
-  const step = (delta: number): void => {
-    const next = new Date(shown.getFullYear(), shown.getMonth() + delta, 1);
-    setLocalMonth(next);
-    onMonthChange?.(next);
-  };
-
-  return (
-    <div data-cc-calendar='' className='flex min-h-0 flex-col gap-2'>
-      <div className='flex items-center justify-between gap-2'>
-        <Button variant='tertiary' size='sm' tooltip='Show the previous month' onClick={() => step(-1)}>
-          ←
-        </Button>
-        <span className='font-medium text-foreground text-sm'>
-          {shown.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
-        </span>
-        <Button variant='tertiary' size='sm' tooltip='Show the next month' onClick={() => step(1)}>
-          →
-        </Button>
-      </div>
-      <MonthGrid
-        monthDate={shown}
-        renderDay={({ dayKey }) => {
-          const day = byDay.get(dayKey);
-          if (!day?.length) return null;
-          return (
-            <ul className='flex flex-col gap-0.5'>
-              {day.map((event) => (
-                <li
-                  key={event.id}
-                  data-cc-event={event.id}
-                  className='truncate rounded-sm bg-muted px-1 text-foreground text-xs'
-                >
-                  {event.title}
-                </li>
-              ))}
-            </ul>
-          );
-        }}
-      />
-    </div>
-  );
-}
-
-/* -------------------------------------------------------- notifications */
-
-function NotificationList({
-  rows,
-  loading,
-  onMarkDone,
-}: {
-  rows: readonly { id: string; title: string; body?: string; done: boolean }[];
-  loading?: boolean;
-  onMarkDone?: (id: string) => void;
-}) {
-  if (rows.length === 0)
-    return <EmptyState compact title={loading ? 'Loading…' : 'Inbox zero'} />;
-
-  return (
-    <ScrollArea className='h-full'>
-      <ul data-cc-notifications='' className='flex flex-col gap-1 pr-2'>
-        {rows.map((row) => (
-          <li
-            key={row.id}
-            data-cc-notification={row.id}
-            data-cc-done={row.done ? 'true' : 'false'}
-            className='flex items-start justify-between gap-3 rounded-md border border-border px-3 py-2'
-          >
-            <span className='flex min-w-0 flex-col'>
-              <span className={cn('truncate text-sm', row.done ? 'text-muted-foreground line-through' : 'text-foreground')}>
-                {row.title}
-              </span>
-              {row.body ? <span className='truncate text-muted-foreground text-xs'>{row.body}</span> : null}
-            </span>
-            {row.done ? null : (
-              <Button
-                variant='tertiary'
-                size='sm'
-                tooltip={`Mark "${row.title}" done`}
-                onClick={() => onMarkDone?.(row.id)}
-              >
-                Done
-              </Button>
-            )}
-          </li>
-        ))}
-      </ul>
-    </ScrollArea>
-  );
-}
-
-/* -------------------------------------------------------------- time off */
-
-/** Integer cents → a display string. Money is cents everywhere; no float ever
- * touches an amount, so the formatting happens here and only here. */
-export const formatCents = (cents: number, currency = 'USD'): string =>
-  `${(cents / 100).toFixed(2)} ${currency}`;
-
-/** Cents parsed from a decimal string, or null when it is not a real amount. */
-export const parseCents = (text: string): number | null => {
-  const parsed = Number(text);
-  return Number.isFinite(parsed) ? Math.round(parsed * 100) : null;
-};
-
-function TimeOffPanel({ state, loading }: { state: TimeOffSurfaceState; loading?: boolean }) {
-  const [policyId, setPolicyId] = useState('');
-  const [days, setDays] = useState('1');
-
-  return (
-    <ScrollArea className='h-full' space='none'>
-      <div data-cc-timeoff='' className='flex flex-col gap-4 pr-2'>
-        <section className='flex flex-col gap-2'>
-          <h3 className='font-medium text-foreground text-sm'>
-            Balance
-            <span className='ml-2 tabular-nums text-muted-foreground' data-cc-balance={state.balance}>
-              {state.balance} day(s)
-            </span>
-          </h3>
-          {state.onCreatePolicy ? (
-            <AddRow
-              label='New policy'
-              placeholder='Policy title'
-              onSubmit={(title) => state.onCreatePolicy?.({ title })}
-            />
-          ) : null}
-          <ul className='flex flex-col gap-0.5 text-sm'>
-            {state.policies.map((policy) => (
-              <li key={policy.id} data-cc-policy={policy.id} className='text-foreground'>
-                {policy.title}
-                <span className='text-muted-foreground'> · {policy.accrualDays} day(s) accrued</span>
-              </li>
-            ))}
-          </ul>
-          {state.policies.length === 0 ? <EmptyState compact title={loading ? 'Loading…' : 'No policies'} /> : null}
-        </section>
-
-        <section className='flex flex-col gap-2'>
-          <h3 className='font-medium text-foreground text-sm'>Requests</h3>
-          {state.onCreateRequest ? (
-            <AddRow
-              label='New request'
-              placeholder='YYYY-MM-DD'
-              onSubmit={(startsOn) =>
-                state.onCreateRequest?.({
-                  policyId: policyId === '' ? undefined : policyId,
-                  startsOn,
-                  // A single-day request is the overwhelmingly common case; a
-                  // range picker is a later refinement, not a gate on reaching
-                  // the vertical at all.
-                  endsOn: startsOn,
-                  days: Number(days) || 1,
-                })
-              }
-            >
-              {/* guardrails-ignore choice-needs-empty-state: the "No policy" row is always
-                  first, so this never opens empty. */}
-              <SelectField
-                value={policyId}
-                onValueChange={setPolicyId}
-                options={[
-                  { value: '', label: 'No policy' },
-                  ...state.policies.map((policy) => ({ value: policy.id, label: policy.title })),
-                ]}
-                aria-label='Policy'
-                size='sm'
-              />
-              <Input
-                value={days}
-                onChange={(event) => setDays(event.target.value)}
-                aria-label='Days'
-                size='sm'
-                className='w-20'
-              />
-            </AddRow>
-          ) : null}
-          <ul className='flex flex-col gap-1'>
-            {state.requests.map((request) => (
-              <li
-                key={request.id}
-                data-cc-request={request.id}
-                data-cc-status={request.status}
-                className='flex items-center justify-between gap-2 rounded-md border border-border px-3 py-2 text-sm'
-              >
-                <span className='min-w-0 truncate text-foreground'>
-                  {request.startsOn} → {request.endsOn} · {request.days} day(s)
-                  <span className='ml-2 text-muted-foreground'>{request.status}</span>
-                </span>
-                {state.onDecide && request.status === 'pending' ? (
-                  <span className='flex shrink-0 gap-1'>
-                    <Button
-                      variant='secondary'
-                      size='sm'
-                      tooltip='Approve this request'
-                      data-cc-action='approve'
-                      loading={state.decidingId === request.id}
-                      onClick={() => state.onDecide?.(request.id, 'approve')}
-                    >
-                      Approve
-                    </Button>
-                    <Button
-                      variant='tertiary'
-                      size='sm'
-                      tooltip='Deny this request'
-                      data-cc-action='deny'
-                      onClick={() => state.onDecide?.(request.id, 'deny')}
-                    >
-                      Deny
-                    </Button>
-                  </span>
-                ) : null}
-              </li>
-            ))}
-          </ul>
-          {state.requests.length === 0 ? <EmptyState compact title={loading ? 'Loading…' : 'No requests'} /> : null}
-        </section>
-
-        <section className='flex flex-col gap-1'>
-          <h3 className='font-medium text-foreground text-sm'>Ledger</h3>
-          <ul className='flex flex-col gap-0.5 text-sm' data-cc-ledger=''>
-            {state.ledger.map((entry) => (
-              <li key={entry.id} className='text-foreground'>
-                <span className='tabular-nums'>{entry.deltaDays > 0 ? `+${entry.deltaDays}` : entry.deltaDays}</span>
-                <span className='ml-2 text-muted-foreground'>{entry.reason}</span>
-              </li>
-            ))}
-          </ul>
-          {state.ledger.length === 0 ? <p className='text-muted-foreground text-sm'>No movements yet.</p> : null}
-        </section>
-      </div>
-    </ScrollArea>
-  );
-}
-
-/* --------------------------------------------------------------- budgets */
-
-function BudgetsPanel({ state, loading }: { state: BudgetSurfaceState; loading?: boolean }) {
-  const [amount, setAmount] = useState('');
-  const active = state.budgets.find((budget) => budget.id === state.activeBudgetId) ?? null;
-  // Spend is folded from the entries the panel already holds rather than fetched
-  // from `/spend`: the same rows are on screen, so a second read could only
-  // disagree with them.
-  const spent = useMemo(() => state.entries.reduce((total, entry) => total + entry.amountCents, 0), [state.entries]);
-
-  return (
-    <div data-cc-budgets='' className='flex min-h-0 gap-3'>
-      <div className='flex w-56 shrink-0 flex-col gap-2 border-border border-r pr-2'>
-        <ul className='flex flex-col gap-0.5'>
-          {state.budgets.map((budget) => (
-            <li key={budget.id}>
-              <Button
-                variant={budget.id === state.activeBudgetId ? 'secondary' : 'ghost'}
-                size='sm'
-                tooltip={`Open ${budget.title}`}
-                className='w-full justify-start'
-                data-cc-budget={budget.id}
-                aria-current={budget.id === state.activeBudgetId ? 'true' : undefined}
-                onClick={() => state.onSelectBudget?.(budget.id)}
-              >
-                <span className='truncate'>{budget.title}</span>
-              </Button>
-            </li>
-          ))}
-        </ul>
-        {state.budgets.length === 0 ? <EmptyState compact title={loading ? 'Loading…' : 'No budgets'} /> : null}
-        {state.onCreateBudget ? (
-          <AddRow
-            label='New budget'
-            placeholder='Budget title'
-            onSubmit={(title) => {
-              const cents = parseCents(amount);
-              if (cents === null) return false;
-              state.onCreateBudget?.({ title, amountCents: cents });
-              setAmount('');
-            }}
-          >
-            <Input
-              value={amount}
-              onChange={(event) => setAmount(event.target.value)}
-              aria-label='Budget amount'
-              placeholder='0.00'
-              size='sm'
-              className='w-24'
-            />
-          </AddRow>
-        ) : null}
-      </div>
-
-      <div className='min-w-0 flex-1'>
-        {active === null ? (
-          <EmptyState compact title='Pick a budget' />
-        ) : (
-          <ScrollArea className='h-full' space='none'>
-            <div className='flex flex-col gap-2 pr-2'>
-              <h3 className='font-medium text-foreground text-sm'>
-                {active.title}
-                <span
-                  className={cn('ml-2 tabular-nums', spent > active.amountCents ? 'text-destructive' : 'text-muted-foreground')}
-                  data-cc-spend={spent}
-                >
-                  {formatCents(spent, active.currency)} of {formatCents(active.amountCents, active.currency)}
-                </span>
-              </h3>
-              <EntryAdder onCreate={state.onCreateEntry} />
-              <ul className='flex flex-col gap-1 text-sm'>
-                {state.entries.map((entry) => (
-                  <li
-                    key={entry.id}
-                    data-cc-entry={entry.id}
-                    className='flex items-center justify-between gap-2 rounded-md border border-border px-3 py-1.5'
-                  >
-                    <span className='min-w-0 truncate text-foreground'>
-                      {entry.occurredOn}
-                      <span className='ml-2 tabular-nums'>{formatCents(entry.amountCents, active.currency)}</span>
-                      {entry.note ? <span className='ml-2 text-muted-foreground'>{entry.note}</span> : null}
-                    </span>
-                    {state.onRemoveEntry ? (
-                      <Button
-                        variant='ghost'
-                        size='sm'
-                        tooltip='Delete this entry'
-                        data-cc-action='delete-entry'
-                        onClick={() => state.onRemoveEntry?.(entry.id)}
-                      >
-                        ✕
-                      </Button>
-                    ) : null}
-                  </li>
-                ))}
-              </ul>
-              {state.entries.length === 0 ? <EmptyState compact title='No entries yet' /> : null}
-            </div>
-          </ScrollArea>
-        )}
-      </div>
-    </div>
-  );
-}
-
-function EntryAdder({ onCreate }: { onCreate?: BudgetSurfaceState['onCreateEntry'] }) {
-  const [amount, setAmount] = useState('');
-  if (!onCreate) return null;
-  return (
-    <AddRow
-      label='New entry'
-      placeholder='YYYY-MM-DD'
-      onSubmit={(occurredOn) => {
-        const cents = parseCents(amount);
-        // A non-numeric amount is not "zero" — it is an unfinished form, and
-        // silently booking 0.00 against a budget is worse than doing nothing.
-        // Returning `false` keeps the typed date so only the amount needs fixing.
-        if (cents === null) return false;
-        onCreate({ occurredOn, amountCents: cents });
-        setAmount('');
-      }}
-    >
-      <Input
-        value={amount}
-        onChange={(event) => setAmount(event.target.value)}
-        aria-label='Entry amount'
-        placeholder='0.00'
-        size='sm'
-        className='w-24'
-      />
-    </AddRow>
-  );
-}
-
-/* --------------------------------------------------------- subscriptions */
-
-function SubscriptionsPanel({ state, loading }: { state: SubscriptionSurfaceState; loading?: boolean }) {
-  const [amount, setAmount] = useState('');
-  const [cadence, setCadence] = useState<SubscriptionCadence>('monthly');
-
-  return (
-    <ScrollArea className='h-full' space='none'>
-      <div data-cc-subscriptions='' className='flex flex-col gap-2 pr-2'>
-        <div className='flex flex-wrap items-center gap-2'>
-          {state.onCreate ? (
-            <AddRow
-              label='New subscription'
-              placeholder='Subscription title'
-              onSubmit={(title) => {
-                const cents = parseCents(amount);
-                if (cents === null) return false;
-                state.onCreate?.({ title, amountCents: cents, cadence });
-                setAmount('');
-              }}
-            >
-              <Input
-                value={amount}
-                onChange={(event) => setAmount(event.target.value)}
-                aria-label='Subscription amount'
-                placeholder='0.00'
-                size='sm'
-                className='w-24'
-              />
-              <SelectField
-                value={cadence}
-                onValueChange={(next) => setCadence(next as SubscriptionCadence)}
-                options={[
-                  { value: 'weekly', label: 'weekly' },
-                  { value: 'monthly', label: 'monthly' },
-                  { value: 'yearly', label: 'yearly' },
-                ]}
-                aria-label='Cadence'
-                size='sm'
-              />
-            </AddRow>
-          ) : null}
-          {state.onToggleCancelled ? (
-            <Button
-              variant='tertiary'
-              size='sm'
-              tooltip='Show or hide cancelled subscriptions'
-              data-cc-action='toggle-cancelled'
-              onClick={() => state.onToggleCancelled?.(!state.includeCancelled)}
-            >
-              {state.includeCancelled ? 'Hide cancelled' : 'Show cancelled'}
-            </Button>
-          ) : null}
-        </div>
-
-        <ul className='flex flex-col gap-1 text-sm'>
-          {state.subscriptions.map((subscription) => (
-            <li
-              key={subscription.id}
-              data-cc-subscription={subscription.id}
-              data-cc-cancelled={subscription.cancelledAt ? 'true' : 'false'}
-              className='flex items-center justify-between gap-2 rounded-md border border-border px-3 py-2'
-            >
-              <span className='min-w-0 truncate text-foreground'>
-                {subscription.title}
-                <span className='ml-2 tabular-nums text-muted-foreground'>
-                  {formatCents(subscription.amountCents, subscription.currency)} / {subscription.cadence}
-                </span>
-                {subscription.nextDueOn ? (
-                  <span className='ml-2 text-muted-foreground'>due {subscription.nextDueOn}</span>
-                ) : null}
-              </span>
-              {/* Cancel is idempotent server-side, but a cancelled row still hides
-                  the control: a second cancel is a typed 404, and offering it
-                  would advertise an action whose only outcome is an error. */}
-              {state.onCancel && !subscription.cancelledAt ? (
-                <Button
-                  variant='tertiary'
-                  size='sm'
-                  tooltip={`Cancel ${subscription.title}`}
-                  data-cc-action='cancel-subscription'
-                  loading={state.cancellingId === subscription.id}
-                  onClick={() => state.onCancel?.(subscription.id)}
-                >
-                  Cancel
-                </Button>
-              ) : null}
-            </li>
-          ))}
-        </ul>
-        {state.subscriptions.length === 0 ? (
-          <EmptyState compact title={loading ? 'Loading…' : 'No subscriptions'} />
-        ) : null}
-      </div>
-    </ScrollArea>
-  );
-}
-
-/* ------------------------------------------------------------ utilities */
-
-function UtilityDrawer({
-  tools,
-  onSendHttp,
-  httpResult,
-  httpSending,
-}: {
-  tools: readonly StudioSurface[];
-  onSendHttp?: (spec: { url: string; method: string }) => void;
-  httpResult?: { status: number; body: string } | null;
-  httpSending?: boolean;
-}) {
-  const has = (id: string): boolean => tools.some((tool) => tool.id === id);
-
-  if (tools.length === 0)
-    return <EmptyState compact title='No utilities enabled' description='Turn on stopwatch, formatLab, lineFilter or httpClient for this instance.' />;
-
-  return (
-    <div data-cc-utilities='' className='flex flex-col gap-4'>
-      {has('stopwatch') ? <Stopwatch /> : null}
-      {has('formatLab') ? <FormatLab /> : null}
-      {has('lineFilter') ? <LineFilter /> : null}
-      {has('httpClient') ? (
-        <RequestBuilder onSend={onSendHttp} result={httpResult} sending={httpSending} />
-      ) : null}
-    </div>
-  );
-}
-
-/** JSON pretty-printer — a pure client tool, no route behind it. */
-function FormatLab() {
-  const [text, setText] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  const format = (): void => {
-    try {
-      setText(JSON.stringify(JSON.parse(text), null, 2));
-      setError(null);
-    } catch (cause) {
-      setError(cause instanceof Error ? cause.message : 'Not valid JSON');
-    }
-  };
-
-  return (
-    <section data-cc-tool='formatLab' className='flex flex-col gap-2'>
-      <h3 className='font-medium text-foreground text-sm'>Format lab</h3>
-      <AutoGrowTextarea
-        value={text}
-        onChange={(event) => setText(event.target.value)}
-        aria-label='JSON to format'
-        className='font-mono text-xs'
-      />
-      <div className='flex items-center gap-2'>
-        <Button variant='secondary' size='sm' tooltip='Pretty-print the JSON above' onClick={format}>
-          Format JSON
-        </Button>
-        {error ? <span className='text-destructive text-xs'>{error}</span> : null}
-      </div>
-    </section>
-  );
-}
-
-/** Line filter — include/exclude over pasted text. Pure client, no route. */
-function LineFilter() {
-  const [text, setText] = useState('');
-  const [needle, setNeedle] = useState('');
-  const lines = useMemo(
-    () => (needle ? text.split('\n').filter((line) => line.includes(needle)) : text.split('\n')),
-    [text, needle],
-  );
-
-  return (
-    <section data-cc-tool='lineFilter' className='flex flex-col gap-2'>
-      <h3 className='font-medium text-foreground text-sm'>Line filter</h3>
-      <AutoGrowTextarea
-        value={text}
-        onChange={(event) => setText(event.target.value)}
-        aria-label='Lines to filter'
-        className='font-mono text-xs'
-      />
-      <Input
-        value={needle}
-        onChange={(event) => setNeedle(event.target.value)}
-        aria-label='Contains'
-        placeholder='contains…'
-      />
-      <p className='text-muted-foreground text-xs' data-cc-line-count={lines.filter(Boolean).length}>
-        {lines.filter(Boolean).length} matching line(s)
-      </p>
-    </section>
-  );
-}
-
-/**
- * The Request Builder. The send is SERVER-side by design (02 §1.5): the pinned
- * CSP would block a browser call to an arbitrary host, and the route re-applies
- * the fail-closed SSRF guard before any impl runs.
- */
-function RequestBuilder({
-  onSend,
-  result,
-  sending,
-}: {
-  onSend?: (spec: { url: string; method: string }) => void;
-  result?: { status: number; body: string } | null;
-  sending?: boolean;
-}) {
-  const [url, setUrl] = useState('');
-
-  return (
-    <section data-cc-tool='httpClient' className='flex flex-col gap-2'>
-      <h3 className='font-medium text-foreground text-sm'>Request builder</h3>
-      <Input
-        value={url}
-        onChange={(event) => setUrl(event.target.value)}
-        aria-label='Request URL'
-        placeholder='https://example.com/api'
-      />
-      <div className='flex items-center gap-2'>
-        <Button
-          variant='secondary'
-          size='sm'
-          tooltip='Send this request from the server'
-          loading={sending}
-          onClick={() => onSend?.({ url, method: 'GET' })}
-        >
-          Send
-        </Button>
-        {result ? (
-          <span className='text-muted-foreground text-xs tabular-nums' data-cc-http-status={result.status}>
-            {result.status}
-          </span>
-        ) : null}
-      </div>
-      {result?.body ? (
-        <pre className='max-h-40 rounded-md bg-muted p-2 text-xs'>{result.body.slice(0, 2000)}</pre>
-      ) : null}
-    </section>
-  );
-}