msk_admin/Lumina-MSK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1f5e71b46a2565b8f736c8bee3187de672619a61
Lumina-MSK/session_memory/26_Jun_26/CODING-AGENT-INSTRUCTION-PHASE0-PHASE1.md

9.2 KiB
Raw Blame History

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

  1. 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.

  2. 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

  1. 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.

  2. 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.

  3. 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.

  4. 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

  1. 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.

  2. 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

  1. 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.

  2. 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.

  3. Transferable Message Protocols

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

  4. 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

  1. 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

  1. 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.

  2. 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).

  3. 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.

  4. 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

  1. 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.

  2. 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)

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.