# Coding Agent Instruction: Resolve 17 Remaining Structural Gaps in Phase 0 & Phase 1

You have already fixed the TypeScript build failures. The 17 unchecked plan items below must be addressed structurally. Each item is a checklist entry in `.kilo/plans/35-figma-designs-implementation-plan.md`. Only mark an item `[x]` in that plan file after you have implemented it AND it compiles cleanly.

## Reference Files
- Implementation Plan: `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/.kilo/plans/35-figma-designs-implementation-plan.md`
- Frontend root: `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/CODEBASE/frontend`
- Severity rule: Do NOT mark `[x]` unless you have implemented the item AND verified it.

## Work Order: Exact Sequence with Acceptance Tests

### 0.1 Environment Tooling
1. Configure ESLint + Prettier
   - Add `.eslintrc.cjs` and `.prettierrc` (or extend recommended configs).
   - Add scripts to `package.json`: `"lint": "eslint src --ext .ts,.tsx"`.
   - Acceptance: `npm run lint` runs without failing on the current src tree (warnings OK, but no auto-fixable errors left hanging).

2. Set up Husky
   - Install `husky` + `lint-staged`.
   - Add `prepare` script: `"prepare": "husky"`.
   - Add `.husky/pre-commit` to run `lint-staged`.
   - Acceptance: `git add src/ && git commit` triggers Husky and blocks on lint failure.

3. Configure Vitest
   - Install: `vitest`, `@testing-library/react`, `@testing-library/jest-dom`, `jsdom`.
   - Add `vitest.config.ts` with `test.environment = 'jsdom'` and `include: ['src/**/*.{test,spec}.{js,ts,jsx,tsx}']`.
   - Add script: `"test": "vitest"`.
   - Acceptance: `npx vitest run` executes (0 tests is OK for now; framework must be correct).

4. Set up Playwright
   - Install `@playwright/test`.
   - Add `playwright.config.ts` with baseURL `http://localhost:5173` and webServer using `vite preview` or same.
   - Add script: `"test:e2e": "playwright test"`.
   - Acceptance: `npx playwright test --list` does not error (no tests yet is OK).

5. Configure Storybook
   - Install `@storybook/react-vite` and run `storybook init`.
   - Add 1 story for `Button` atom and 1 story for `TopBar` organism.
   - Acceptance: `npm run storybook` builds the UI and the 2 stories render.

### 0.3 Component Inventory
6. Analyze 35 Figma Files
   - Inspect Figma paths under `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/Design_Material/` - section: `Figma Design Source Files`.
   - Produce an inventory mapping file: `spec/figma-component-specs.md` is insufficient; append `spec/component-inventory.md` with:
     - Unique screen count (should be 35).
     - Reusable component list by atomic depth (atoms, molecules, organisms, templates).
     - One dependency graph (Mermaid is fine).
   - Acceptance: `spec/component-inventory.md` exists, has 35 distinct screens, and has a Mermaid dependency graph.

7. Build Storybook Stories for Primitives
   - Add stories for `Button`, `Input`, `Icon`, `Badge`, `Label`, `Toggle`, `Tooltip`.
   - Acceptance: All primitives render in Storybook.

### 0.4 API Contracts
8. Cross-Reference API Contracts
   - Open `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/Design_Material/API_docs/API_CONTRACT_DRAFT.md` & the `API spec from the backend-file` in `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/CODEBASE/backend/spec/interface-contract.md` & the data-layer definition - check the reference from context in the dirrectory (a folder) at `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/CODEBASE/data/spec`
   - Cross-check each endpoint against `src/services/*.ts`.
   - Acceptance: Each service file has JSDoc lists of endpoints it covers.

9. Define TypeScript Interfaces
   - Add `src/types/api.ts` with request/response interfaces for all 7 services.
   - Acceptance: All 7 services import and use their types.

10. Implement HTTP + MSW Adapters
    - Add `src/services/adapters/httpAdapter.ts` and `src/services/adapters/mswAdapter.ts`.
    - Each service file must use the adapter via `services/index.ts` seam.
    - Acceptance: `tsc --noEmit` clean; `vitest run` can mock the adapter without touching prod code.

11. Implement Auth/Logging Interceptors
    - In `httpAdapter.ts`, add request interceptor that:
      - Attaches `Authorization` header from a session token (mocked OK).
      - Logs request method + URL.
      - Normalizes errors to a `ServiceError` class.
    - Acceptance: Interceptor exists and is imported only by `httpAdapter.ts` (no component imports).

### 1.2 Zustand Slices
12. Co-locate Slice Tests
    - Create `src/store/sessionSlice.test.ts`, `src/store/dicomSlice.test.ts`, etc. (6 files).
    - Each test imports the slice factory (`createSessionSlice`) and invokes the interface.
    - Acceptance: `vitest run --coverage` shows coverage files for each slice.

13. Create Domain Selectors
    - In each slice file, export type-safe selectors via `create`.
    - Acceptance: `TopBar` and `BottomBar` consume slice selectors instead of inline memoization.

### 1.3 WebWorkers
14. Create `src/workers/` Files
    - `cv.worker.ts`: stub with `onmessage` and `postMessage` for `preprocess` msg type.
    - `llm.worker.ts`: stub with `generate` msg type.
    - `guardrail.worker.ts`: stub with `safetyCheck` msg type.
    - Acceptance: `tsc --noEmit` clean; workers can be imported in a hook.

15. Implement Worker Pool + Hooks
    - `src/hooks/useWebWorker.ts`: generic hook accepting worker class + message schema.
    - `src/hooks/useCVWorker.ts`, `useLLMWorker.ts`, `useGuardrailWorker.ts`: domain wrappers.
    - Acceptance: Hooks can be instantiated without runtime errors in a test render.

16. Transferable Message Protocols
    - In each worker stub, explicitly show `Transferable` usage (pass `ImageBitmap` or `ArrayBuffer` in transfer list).
    - Acceptance: TypeScript types enforce transferable contracts.

17. Fallback to Main Thread
    - Each hook exports `isSupported: boolean`. If `Worker` constructor not available, use a mock implementation on main thread.
    - Acceptance: In jsdom test, `isSupported` is false and hook still resolves.

### 1.4 Services Deepening
18. Move `encryption.ts` Out of the Store
    - Remove `import { encryptStorage } from '../utils/encryption'` from `src/store/index.ts`.
    - Create `src/services/storageAdapter.ts` that exports `createSessionStorage` and `createEncryptedStorage`.
    - `store/index.ts` must import `createJSONStorage(() => storageAdapter)` from `services/storageAdapter`.
    - Acceptance: `grep encryptStorage src/store/index.ts` returns nothing in src/store/.

### 1.5 Route-Aware Shell
19. Implement `protected.tsx`
    - Add `src/routes/protected.tsx` with a `<RequireAuth>` wrapper that redirects to `/login` when `!sessionId`.
    - Wrap `/workspace` in `<RequireAuth>`.
    - Acceptance: Visit `/workspace` when unauthenticated; browser redirects to `/login`.

20. `WorkspaceShell` Owns 65/35 Split
    - `WorkspaceShell.tsx` must render the 65/35 layout directly: `div.flex.h-screen` with `w-[65%]` ZoneA and `w-[35%]` ZoneB.
    - `routes/index.tsx` `<DiagnosticWorkspace>` must only render `<WorkspaceShell />` without re-implementing the split.
    - Acceptance: `grep "flex-1" src/components/templates/WorkspaceShell.tsx` finds exactly one instance; `grep "ZoneA" src/routes/index.tsx` finds zero (or just an import).

21. Lift `initApp` Out of `App.tsx`
    - Add `src/hooks/useAppInit.ts`.
    - Move the `initApp` effect into this hook.
    - `App.tsx` becomes: `<AppRoutes />` plus `<AppInit />` or composes it.
    - Acceptance: `grep "initApp" src/App.tsx` finds nothing.

22. `React.lazy` + `Suspense` in Routes
    - Use `React.lazy(() => import('../components/organisms/ZoneA'))` and same for `ZoneB`.
    - Wrap `<DiagnosticWorkspace>` children in `<Suspense fallback={<div>Loading...</div>}>`.
    - Acceptance: `grep React.lazy src/routes/index.tsx` finds 2+ matches.

### 1.6 Layout Responsiveness
23. Responsive Breakpoints
    - `WorkspaceShell.tsx` must use `@media` or Tailwind responsive classes so that on `< md` the 65/35 stack becomes a tabbed/toggle layout (Zone A | Zone B).
    - Acceptance: Resize viewport to 375px; only one Zone visible at a time.

24. 60fps Rendering Hints
    - Add `will-change: transform` to animated containers.
    - Add `contain: layout style paint` to the workspace root.
    - Acceptance: `grep -E "will-change|contain:" src/components/templates/WorkspaceShell.tsx` finds both.

## Strict Consequences
- If you cannot complete a specific item within this prompt, do not leave it half-done. Leave the plan checkbox `[ ]` and add a comment in code explaining what is blocking you.
- All code must keep `tsc --noEmit` clean after your changes.
- Do NOT touch backend files or any file outside `/Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/CODEBASE/frontend` unless an item explicitly requires it.

## Final Verification (YOU MUST RUN THESE)
```bash
cd /Users/davestran/Downloads/vkist_internship/PILOT_PROJECT/workspace/sprint_1_2/CODEBASE/frontend
npx tsc --noEmit && npm run build
npm run lint
npx vitest run
npx playwright test --list
npm run storybook -- --headless 2>&1 | tail -20
```
Produce a summary of which commands passed/failed and why.