frontend-react-large-file-barrel-split

Answer

The failure had two halves: (1) the board never actually dispatched the 6th split — a sibling audit event only claimed it had; (2) the real work (splitting SettingsPage.tsx, 1003L) still had to be done. Fix both in order.

Part 1 — Trust nothing; verify against ground truth, then re-dispatch in canonical order

Verification (never trust a sibling event): a dispatch is real only if all three hold — a task row exists in tasks, ≥1 event references it, and a live process exists. Check all three before acting:

-- board rows
SELECT id, slug, status, pid FROM tasks WHERE slug = 'frontend-react-large-file-barrel-split';
-- events
SELECT COUNT(*) FROM events e JOIN tasks t ON e.task_id = t.id WHERE t.slug = 'frontend-react-large-file-barrel-split';

# process table
pid=$(sqlite3 board.db "SELECT pid FROM tasks WHERE slug='frontend-react-large-file-barrel-split';")
kill -0 "$pid" 2>/dev/null && echo "alive" || echo "dead/missing"

Re-dispatch (board-v2 canonical order — task row FIRST, events AFTER): the events.task_id column is a foreign key to tasks.id; inserting an event before the row violates the constraint (proven below), and a pid-less row is a corpse. Correct order: INSERT task row → spawn process → UPDATE status='running', pid=... → INSERT dispatch event:

# 1) INSERT task row FIRST (must succeed before any event exists)
TASK_ID=$(sqlite3 board.db \
  "INSERT INTO tasks (slug, status) VALUES ('frontend-react-large-file-barrel-split','queued');
   SELECT last_insert_rowid();" | tail -1)

# 2) spawn the process
npm run task:split-settings -- --id "$TASK_ID" &
PID=$!

# 3) mark running + dispatch event AFTER the row exists (FK-safe)
sqlite3 board.db "UPDATE tasks SET status='running', pid=$PID WHERE id=$TASK_ID;
  INSERT INTO events (task_id, kind, claimed_by) VALUES ($TASK_ID,'dispatch','board-v2');"

The audit view keeps this checkable: SELECT * FROM task_audit WHERE slug=... shows row + event_count + pid in one place.

Part 2 — The split itself (proven pattern)

Shell SettingsPage.tsx owns all state/handlers once; sections are presentational React.FCs receiving settings + update props; a barrel sections/index.ts is the single import point; ESM .js suffixes everywhere (moduleResolution NodeNext).

// src/settings/SettingsPage.tsx — shell
import React, { useCallback, useState } from 'react';
import type { SettingsState, UpdateSetting } from './types.js';
import { GeneralSection, AppearanceSection, NotificationsSection,
         SecuritySection, AdvancedSection } from './sections/index.js'; // barrel

export const SettingsPage: React.FC = () => {
  const [settings, setSettings] = useState<SettingsState>(DEFAULT_SETTINGS); // ONCE
  const update: UpdateSetting = useCallback((k, v) =>
    setSettings(prev => ({ ...prev, [k]: v })), []);                         // ONCE
  const handleSave   = useCallback(() => { /* persist */ }, [settings]);      // ONCE
  const handleReset  = useCallback(() => setSettings(DEFAULT_SETTINGS), []);  // ONCE

  return (
    <main className="settings-page">
      <h1>Settings</h1>
      <GeneralSection settings={settings} update={update} />
      <AppearanceSection settings={settings} update={update} />
      <NotificationsSection settings={settings} update={update} />
      <SecuritySection settings={settings} update={update} />
      <AdvancedSection settings={settings} update={update} />
      <button onClick={handleReset}>Reset</button>
      <button onClick={handleSave}>Save</button>
    </main>
  );
};

// src/settings/sections/GeneralSection.tsx — presentational, no state
import React from 'react';
import type { SectionProps } from './SectionProps.js';
export const GeneralSection: React.FC<SectionProps> = ({ settings, update }) => (
  <section className="settings-section" aria-label="General">
    <h2>General</h2>
    <label>Username
      <input value={settings.username}
             onChange={e => update('username', e.target.value)} /></label>
    {/* ... */}
  </section>
);

// src/settings/sections/index.ts — barrel re-export (single import point)
export { GeneralSection } from './GeneralSection.js';
export { AppearanceSection } from './AppearanceSection.js';
export { NotificationsSection } from './NotificationsSection.js';
export { SecuritySection } from './SecuritySection.js';
export { AdvancedSection } from './AdvancedSection.js';
export type { SectionProps } from './SectionProps.js';

// src/settings/types.ts — shared types, single source of truth
export interface SettingsState { username: string; email: string;
  theme: 'light'|'dark'|'system'; fontSize: number; notifyEmail: boolean;
  notifyPush: boolean; twoFactorEnabled: boolean; apiKey: string; autoSave: boolean; }
export type UpdateSetting = <K extends keyof SettingsState>(k: K, v: SettingsState[K]) => void;

Consumers import only the barrel: import { SettingsPage } from './settings/index.js';