Imouto

Ad-Hoc Cleanup Pass

Resolved 26 deferred code quality issues across the motivka embed and imouto standalone -- layout fixes, duplicate type consolidation, Zod validation on server loaders, colour token extraction, and tightened Python test assertions.

6 Phases
16 Tasks
2 Days

The Problem

After completing all 12 phases of the imouto project, I had accumulated 26 low-severity issues in an AD_HOC_TASKS.md file. Phase reviews kept surfacing them -- duplicated types, redundant server-side fetches, hardcoded magic values, layout padding inconsistencies -- and I kept deferring them to avoid blocking the primary build. Left alone, they would calcify into the kind of technical debt that makes every future change slower.

None of these were user-facing bugs. They were all internal quality issues: things that make the codebase harder to maintain, slower to understand, or more fragile during design system changes.

What I Built

I structured the cleanup into six phases, working from the motivka embed inward to the standalone app and then the Python pipeline.

Motivka layout polish (Phase 13)

The BackLink component on the detail page was sitting outside the PageSection wrapper, so it was missing the --page-padding-x variable. On the explorer page, the HeroSection with maxWidth="60rem" was competing with PageSection for centring control. Both were structural issues visible at narrow viewports.

Motivka component quality (Phase 14)

The motivka TaskDotStrip had three independent .filter() passes that I merged into a single .reduce(). I extracted a getAutomatabilityColourToken(level) helper to eliminate the duplicated fillColourToken() function. I added Zod schema validation at the load boundary for all three server loaders -- zod was installed as a new production dependency. The searchOccupations() function in data.ts had two filter passes that I merged into one.

Standalone refactors (Phases 15-17)

I mirrored the colour token extraction in the standalone, pulled the automatability sort order into a module-level constant, replaced a hardcoded rgba(0, 0, 0, 0.65) in .seg-label with a semantic token, and added a responsive media query for the dot strip legend below 480px. I moved FilterMode and LevelFilter types to types.ts, extracted a shared back-link component, and switched to async font loading with font-display:optional.

Python pipeline QA (Phase 18)

The OSCA source tests were using range-based assertions (len(occupations) > 1000) which would silently pass if the source format changed. I tightened them to exact counts so regressions produce deterministic failures.

Triage (Phase 19)

After the cleanup, I ran a stabilisation triage. Of 34 ad-hoc tasks reviewed, 30 were closed as addressed or stale. Four new tasks were generated: cache-control headers on server loaders, syncing motivka TaskProportionBar to use $derived pre-computation, standardising the FilterMode sentinel to lowercase, and delegating dot strip event handlers.

What is Next

Two items were explicitly deferred: extracting segmentWidth() to a shared utility (waiting for a second consumer) and runtime Zod validation in the standalone loaders (the standalone is fallback-only, effort is better spent on motivka). The HeroSection CtaButtonGroup import issue was closed as won't-fix -- the bundle reduction is near-zero and touching a shared motivka component for no gain adds cross-project risk.

Features Delivered

Phase 13 -- Motivka Layout Polish

  • Fixed BackLink outside PageSection on detail page
  • Resolved HeroSection vs PageSection competing max-width on explorer

Phase 14 -- Motivka Component Quality

  • Merged 3 filter passes into single reduce in TaskDotStrip
  • Extracted getAutomatabilityColourToken helper
  • Added Zod schema validation to all 3 server loaders
  • Merged double filter passes in searchOccupations

Phase 15 -- Standalone Component Refactors

  • Extracted colour token helper in standalone
  • Automatability sort order as module-level constant
  • Replaced hardcoded rgba with semantic token
  • Added responsive dot strip legend query

Phase 16 -- Standalone Utility Cleanups

  • task_counts null check and segmentWidth pre-computation
  • Standardised tap-target comments
  • Extracted .pill-button utility

Phase 17 -- Standalone Types and Structure

  • FilterMode and LevelFilter moved to types.ts
  • Extracted shared BackLink component
  • Async font loading with font-display:optional

Phase 18 -- Python Pipeline QA

  • Exact count assertions in test_osca_source.py

Key Decisions

  • Added Zod as new production dependency for structured error boundaries
  • Dropped HeroSection CtaButtonGroup fix -- near-zero bundle reduction, cross-project risk
  • Dropped global CSS injection fix -- only manifests in HMR dev mode, acceptable
  • Expanded colour token extraction to cover both standalone and motivka port