fix(desktop): preview perf + token counter wiring

[hqhq1025]

Summary

Two user-reported bugs from the v0.x feedback round:

A. Preview iframe was laggy. PreviewPane set key={previewHtml.length} on the iframe, which forced React to fully unmount and re-mount it whenever the HTML grew or shrank by even one character. During streaming and on every applyComment revision the entire document was re-parsed from scratch, scroll position was discarded, and the overlay script re-attached on each chunk. buildSrcdoc() (regex-heavy) also ran on every unrelated render (toast / theme / errors).

B. TopBar always showed $0.00 this week. The badge was hard-coded. The generate IPC already returned inputTokens / outputTokens / costUsd from @open-codesign/core, but the renderer store cast the result to { artifacts, message } and threw the rest away. There was no end-to-end wire.

Changes

• PreviewPane: drop the length-based key, memoize buildSrcdoc(previewHtml).
• Type the preload generate / applyComment returns as GenerateResponse.
• Store gains lastUsage and weekUsage; both applyGenerateSuccess and applyInlineComment now record per-call usage and accumulate it into the active ISO-week bucket.
• Persist weekUsage to localStorage under open-codesign:week-usage. Auto-resets when the ISO week rolls over (no migration). Matches existing theme persistence pattern; SQLite-backed history can absorb this later without schema churn.
• TopBar reads weekUsage.costUsd and shows lastUsage in the tooltip. New formatCostUsd shows 4 decimals for sub-cent values so the user sees a non-zero number after their first request.
• i18n updated (en + zh-CN) to drop the "coming soon" disclaimer.

Root causes

• Preview perf: key={previewHtml.length} is the smoking gun — it forced full iframe remounts on every char change in the HTML.
• Token counter: the IPC contract was complete, but the renderer-side reducer in applyGenerateSuccess only consumed artifacts + message, and ByokBadge never read store state.

Tests

• store.test.ts: usage payload accepted (full + missing-fields fallback), accumulator handles week rollover and clamps negative deltas. 5 new test cases.
• TopBar.test.ts: new — formatCostUsd covers zero / sub-cent / multi-cent paths.
• All 146 desktop vitest tests pass; full repo pnpm test green; pnpm typecheck clean; pnpm lint clean (0 errors, 7 pre-existing complexity warnings unchanged).

PRINCIPLES §5b

• Compatibility: green — IPC payload shape unchanged; store adds optional fields; localStorage key is new and bucket auto-resets.
• Upgradeability: green — WeekUsage.isoWeek carries the bucket key; future migration to SQLite is a one-shot read of localStorage.
• No bloat: green — no new deps; ~40 lines of helper code in store; one tiny memoization in PreviewPane.
• Elegance: green — single source of truth (weekUsage in store), no plumbing through preload beyond a typed return.

Known follow-ups

• Sandbox-runtime perf: if streaming preview still feels slow after this PR, the next layer is to swap the full-srcdoc swap for a contentDocument.body.innerHTML patch that preserves scroll. Out of scope here — needs the sandbox-runtime research thread to land first (docs/RESEARCH_QUEUE.md).
• Token persistence currently lives in localStorage. Once the SQLite history schema lands, migrate weekUsage into a usage_buckets table keyed by ISO week; accumulateWeekUsage is already pure and reusable.
• pi-ai providers that don't return usage will show $0.00; a chars/4 fallback estimator can be added behind a feature flag if users complain.

cc: do not merge until Codex bot review reports No findings.

[github-actions]

Findings

• [Major] Silent fallback on usage storage errors violates the "no silent fallbacks" constraint — localStorage parse/write failures are swallowed and replaced with zeroed state, which hides operational errors and can silently reset/lose displayed weekly spend (apps/desktop/src/renderer/src/store.ts:173, apps/desktop/src/renderer/src/store.ts:182)
  Suggested fix:

  function persistWeekUsage(usage: WeekUsage): string | null {
    if (typeof window === 'undefined') return null;
    try {
      window.localStorage.setItem(WEEK_USAGE_STORAGE_KEY, JSON.stringify(usage));
      return null;
    } catch (err) {
      return err instanceof Error ? err.message : 'Failed to persist weekly usage';
    }
  }
  
  // call site
  const persistError = persistWeekUsage(nextWeek);
  if (persistError) {
    get().pushToast({
      variant: 'error',
      title: tr('notifications.usagePersistFailed'),
      description: persistError,
    });
  }

• [Minor] New tooltip text is hardcoded in English, bypassing i18n and regressing zh-CN UI consistency (apps/desktop/src/renderer/src/components/TopBar.tsx:43)
  Suggested fix:

  tooltipParts.push(
    t('topbar.lastUsageTooltip', {
      input: lastUsage.inputTokens.toLocaleString(),
      output: lastUsage.outputTokens.toLocaleString(),
      cost: formatCostUsd(lastUsage.costUsd),
    }),
  );

Summary

• Review mode: initial
• 2 issues found in diff-added lines: one hard-constraint violation (silent fallback) and one localization regression.
• docs/VISION.md and docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

readStoredWeekUsage swallows parse/storage errors and silently resets to an empty bucket. This conflicts with the no-silent-fallback constraint and can hide data-loss conditions. Please surface an error (toast/throw with context) instead of silently returning fresh.

[github-actions]

This newly added tooltip segment is hardcoded English (Last: ... in / ... out) and bypasses i18n. Please move this to locale keys and interpolate values so zh-CN stays fully localized.

[github-actions]

Findings

• [Major] Silent fallback still present on weekly usage read failure — readStoredWeekUsage catches localStorage/JSON errors and returns a zeroed bucket, which can hide data-loss/corruption conditions and violates the “no silent fallbacks” constraint. Evidence: apps/desktop/src/renderer/src/store.ts:173.
  Suggested fix:

  } catch (err) {
    const msg = err instanceof Error ? err.message : 'Failed to read weekly usage';
    console.warn('[open-codesign] failed to read weekly usage:', msg);
    return { ...fresh, readError: msg };
  }
  
  // then surface once during init/sendPrompt:
  if (state.weekUsageReadError) {
    get().pushToast({ variant: 'error', title: tr('errors.storageFailed'), description: state.weekUsageReadError });
  }

• [Minor] Tooltip append is hardcoded English and bypasses i18n — added Last: ... in / ... out text is not localized, causing mixed-language UI in zh-CN. Evidence: apps/desktop/src/renderer/src/components/TopBar.tsx:43.
  Suggested fix:

  tooltipParts.push(
    t('topbar.lastUsageTooltip', {
      input: lastUsage.inputTokens.toLocaleString(),
      output: lastUsage.outputTokens.toLocaleString(),
      cost: formatCostUsd(lastUsage.costUsd),
    }),
  );

Summary

• Review mode: follow-up after new commits
• 2 issues found in diff-added lines: one hard-constraint violation (silent fallback on storage read) and one localization regression.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

readStoredWeekUsage still swallows read/parse errors and silently resets the usage bucket. That remains a no-silent-fallback violation.

Suggested fix:

} catch (err) {
  const msg = err instanceof Error ? err.message : "Failed to read weekly usage";
  console.warn("[open-codesign] failed to read weekly usage:", msg);
  get().pushToast({ variant: "error", title: tr("errors.storageFailed"), description: msg });
  return fresh;
}

[github-actions]

This tooltip segment is hardcoded English and bypasses i18n (Last: ... in / ... out).

Suggested fix:

tooltipParts.push(
  t(topbar.lastUsageTooltip, {
    input: lastUsage.inputTokens.toLocaleString(),
    output: lastUsage.outputTokens.toLocaleString(),
    cost: formatCostUsd(lastUsage.costUsd),
  }),
);

[github-actions]

Findings

• [Major] Silent fallback on weekly usage read masks storage/parse errors and violates the no-silent-fallback constraint, so data-loss/corruption conditions are hidden from users. Evidence apps/desktop/src/renderer/src/store.ts:173
  Suggested fix:

  } catch (err) {
    const message = err instanceof Error ? err.message : 'Unknown error';
    throw new Error(`Failed to load weekly usage from localStorage: ${message}`);
  }

• [Minor] New tooltip segment is hardcoded English (Last: ... in / ... out) and bypasses i18n, creating mixed-language UI in zh-CN. Evidence apps/desktop/src/renderer/src/components/TopBar.tsx:48
  Suggested fix:

  tooltipParts.push(
    t('topbar.lastUsageTooltip', {
      input: lastUsage.inputTokens.toLocaleString(),
      output: lastUsage.outputTokens.toLocaleString(),
      cost: formatCostUsd(lastUsage.costUsd),
    }),
  );

Summary

• Review mode: follow-up after new commits
• 2 issues found in latest diff-added/modified lines.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

[Major] Silent fallback still present: this catch returns a zeroed bucket and hides storage/parse failures. That violates the no-silent-fallback rule (errors must surface in UI or throw with context).

Suggested fix:

} catch (err) {
  const message = err instanceof Error ? err.message : 'Unknown error';
  throw new Error(`Failed to load weekly usage from localStorage: ${message}`);
}

[github-actions]

[Minor] This tooltip text is hardcoded English and bypasses i18n (Last: ... in / ... out), causing mixed-language UI in non-English locales.

Suggested fix:

tooltipParts.push(
  t('topbar.lastUsageTooltip', {
    input: lastUsage.inputTokens.toLocaleString(),
    output: lastUsage.outputTokens.toLocaleString(),
    cost: formatCostUsd(lastUsage.costUsd),
  }),
);

[github-actions]

Findings

• [Major] Silent fallback on weekly usage read still masks storage/parse errors and violates the no-silent-fallback constraint; corruption/availability issues are hidden instead of surfaced. Evidence apps/desktop/src/renderer/src/store.ts:244
  Suggested fix:

  function readStoredWeekUsage(now: Date): WeekUsage {
    const fresh: WeekUsage = {
      isoWeek: isoWeekKey(now),
      inputTokens: 0,
      outputTokens: 0,
      costUsd: 0,
    };
    if (typeof window === 'undefined') return fresh;
    const raw = window.localStorage.getItem(WEEK_USAGE_STORAGE_KEY);
    if (!raw) return fresh;
  
    let parsed: Partial<WeekUsage>;
    try {
      parsed = JSON.parse(raw) as Partial<WeekUsage>;
    } catch (err) {
      const msg = err instanceof Error ? err.message : String(err);
      throw new Error(`Failed to parse weekly usage from localStorage: ${msg}`);
    }
  
    if (
      typeof parsed.isoWeek !== 'string' ||
      typeof parsed.inputTokens !== 'number' ||
      typeof parsed.outputTokens !== 'number' ||
      typeof parsed.costUsd !== 'number'
    ) {
      throw new Error('Invalid weekly usage payload in localStorage');
    }
    if (parsed.isoWeek !== fresh.isoWeek) return fresh;
    return parsed as WeekUsage;
  }

• [Minor] Last-usage tooltip text is still hardcoded English and bypasses i18n, causing mixed-language UI in zh-CN. Evidence apps/desktop/src/renderer/src/components/TopBar.tsx:48
  Suggested fix:

  if (lastUsage) {
    tooltipParts.push(
      t('topbar.lastUsageTooltip', {
        input: lastUsage.inputTokens.toLocaleString(),
        output: lastUsage.outputTokens.toLocaleString(),
        cost: formatCostUsd(lastUsage.costUsd),
      }),
    );
  }

Summary

• Review mode: follow-up after new commits
• 2 issues found in latest diff-added/modified lines.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

[Major] This catch still silently falls back to a zeroed week bucket. That hides storage/parse failures and violates the no-silent-fallback rule.

Suggested fix:

} catch (err) {
  const msg = err instanceof Error ? err.message : String(err);
  throw new Error(`Failed to parse weekly usage from localStorage: ${msg}`);
}

[github-actions]

[Minor] Tooltip segment is hardcoded English (Last: ... in / ... out) and bypasses i18n, so zh-CN UI becomes mixed language.

Suggested fix:

tooltipParts.push(
  t('topbar.lastUsageTooltip', {
    input: lastUsage.inputTokens.toLocaleString(),
    output: lastUsage.outputTokens.toLocaleString(),
    cost: formatCostUsd(lastUsage.costUsd),
  }),
);

[github-actions]

Findings

• [Major] Non-finite usage values can corrupt weekly totals and persist silently — new usage parsing accepts any number (including NaN/Infinity), and storage validation also accepts non-finite numbers, so a bad provider/IPC payload can poison counters across sessions. Evidence apps/desktop/src/renderer/src/store.ts:379, apps/desktop/src/renderer/src/store.ts:293, apps/desktop/src/renderer/src/store.ts:230
  Suggested fix:

  function toFiniteNonNegative(value: unknown): number {
    return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : 0;
  }
  
  const usage: UsageSnapshot = {
    inputTokens: toFiniteNonNegative(result.inputTokens),
    outputTokens: toFiniteNonNegative(result.outputTokens),
    costUsd: toFiniteNonNegative(result.costUsd),
  };
  
  if (
    typeof parsed.isoWeek !== 'string' ||
    !Number.isFinite(parsed.inputTokens) ||
    !Number.isFinite(parsed.outputTokens) ||
    !Number.isFinite(parsed.costUsd)
  ) {
    warnReason = 'weekly usage entry has unexpected shape';
  }

Summary

• Review mode: follow-up after new commits
• 1 issue found in latest modified lines.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation). Suggest adding a Vitest case where usage fields are NaN/Infinity and asserting store values remain finite.

open-codesign Bot

[github-actions]

[Major] typeof ... === "number" accepts NaN/Infinity. That can persist corrupted weekly usage. Please normalize to finite non-negative values (e.g., Number.isFinite) before accumulating/persisting, and validate persisted payloads with Number.isFinite too.

[hqhq1025]

Addressed Codex [Major] on apps/desktop/src/renderer/src/store.ts:379 — usage values from the IPC payload (and rehydrated from localStorage) accepted any number, including NaN / Infinity / negatives, which would silently poison weekUsage totals across sessions.

Fix in 9a4f69d:

• New coerceUsageSnapshot() helper validates with Number.isFinite(v) && v >= 0 and reports rejected fields.
• Both parse-side call sites (applyGenerateSuccess, applyInlineComment) now use it; on rejection we console.warn + push an error toast (errors.weekUsageInvalid, en + zh-CN added) — matching the existing weekly-usage error UX rather than silently coercing to 0.
• Storage-load (readStoredWeekUsage) tightened with the same guard; routes through the existing surfaceWeekUsageReadFailure toast path.
• 3 new vitest cases cover NaN rejection, Infinity rejection, and finite-zero acceptance. All 232 desktop tests pass; lint warning count unchanged from baseline.

[github-actions]

Findings

• None.

Summary

• Review mode: follow-up after new commits
• No issues found in added/modified lines for the latest head commit.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.
• Residual risk: no Playwright coverage in this PR for iframe refresh behavior and week-usage persistence/reset UX.

Testing

• Not run (automation)

open-codesign Bot

[hqhq1025]

Rebased onto latest origin/main (HEAD d828162). Conflicts in PreviewPane.tsx (memoized srcDoc merged with new viewport/zoom/PhoneFrame logic) and store.ts (token usage tracking + NaN/Infinity guards merged with main's persistDesignState/loadDesigns wiring). pnpm typecheck, lint, and full test suite (578 tests) all green. Ready for re-review.

[github-actions]

Findings

• [Blocker] applyGenerateSuccess is called with wrong argument order in runGenerate, so successful generations can fail to finalize state updates (messages/preview/isGenerating/tokens) and may leave the UI stuck. Evidence apps/desktop/src/renderer/src/store.ts:667.
  Suggested fix:

  applyGenerateSuccess(
    set,
    get,
    generationId,
    payload.prompt,
    result as {
      artifacts: Array<{ type?: string; content: string }>;
      message: string;
      inputTokens?: number;
      outputTokens?: number;
      costUsd?: number;
    },
  );

Summary

• Review mode: follow-up after new commits
• 1 blocker found in modified lines that affects generation completion flow in the renderer store.
• docs/VISION.md: Not found in repo/docs.
• docs/PRINCIPLES.md: Not found in repo/docs.

Testing

• Not run (automation)

open-codesign Bot

[github-actions]

[Blocker] The callsite argument order is incorrect here (get, set, get, ...) for applyGenerateSuccess(set, get, generationId, prompt, result). This breaks success-path state finalization.

Suggested fix:

applyGenerateSuccess(
  set,
  get,
  generationId,
  payload.prompt,
  result as {
    artifacts: Array<{ type?: string; content: string }>;
    message: string;
    inputTokens?: number;
    outputTokens?: number;
    costUsd?: number;
  },
);