Deduplicate formatBytes/formatSize utility functions across codebase

[kanweiwei]

The formatBytes / formatFileSize / formatSize utility function is duplicated 24 times across the codebase (verified 2026-09) instead of being imported from the canonical location.

Canonical location: web/lib/utils.ts exports formatBytes and formatSize

Duplicate locations include:

• web/utils/change-helpers.tsx — formatFileSize
• web/hooks/useMobileUpload.ts — formatFileSize
• web/storage/diagnostics.ts — formatBytes
• web/opfs/utils/opfs-utils.ts, web/opfs/utils/storage-utils.ts — formatBytes
• web/skills/skill-store.ts, web/skills/skill-resources.ts — formatBytes / formatSize
• web/services/stream-reader.service.ts — formatFileSize
• web/store/offline-queue.store.ts — formatFileSize
• web/agent/tools/formats/image/handler.ts — formatSize
• 12+ files under web/components/ (agent renderers, sync views, export dialogs...)

Note: web/components/agent/tool-renderers/PageScreenshotRenderer.tsx has a formatBytes(base64: string) that is semantically a different function — leave it alone.

What to do:

1. Pick a few files to start with (don't need to do all at once)
2. In each file, remove the local formatBytes/formatSize/formatFileSize function
3. Replace with import { formatBytes } from '@/lib/utils' (or formatSize)
4. Verify the behavior is the same (some variants differ slightly in decimal places — match the canonical version)
5. Run cd web && pnpm typecheck to confirm no errors

Skills needed: TypeScript, ability to refactor imports

Estimated time: 1-2 hours (can be done incrementally, a few files per PR)

[snakefood3232]

I’ll deduplicate those ~15 formatBytes/formatSize functions by importing from @/lib/utils. I’ll start with a few files, verify behavior matches the canonical version, and run typecheck. Can have a PR ready in a few hours—I regularly refactor TypeScript/React codebases.