fix: restore tweak updates and extend timeout default

Author: Sun-sunshine06

apps/desktop/src/main/preferences-ipc.test.ts

@@ -39,7 +39,7 @@ describe('readPersisted()', () => {
     readFileMock.mockRejectedValueOnce(notFound);
 
     const result = await readPersisted();
-    expect(result).toEqual({ updateChannel: 'stable', generationTimeoutSec: 600 });
+    expect(result).toEqual({ updateChannel: 'stable', generationTimeoutSec: 1200 });
   });
 
   it('honors XDG_CONFIG_HOME when computing the persisted file path', async () => {
@@ -70,12 +70,12 @@ describe('readPersisted()', () => {
     expect((err as CodesignError).code).toBe('PREFERENCES_READ_FAILED');
   });
 
-  it('migrates schemaVersion 1 with legacy 120s timeout to the 600s default', async () => {
+  it('migrates schemaVersion 1 with legacy 120s timeout to the 1200s default', async () => {
     readFileMock.mockResolvedValueOnce(
       JSON.stringify({ schemaVersion: 1, updateChannel: 'stable', generationTimeoutSec: 120 }),
     );
     const result = await readPersisted();
-    expect(result.generationTimeoutSec).toBe(600);
+    expect(result.generationTimeoutSec).toBe(1200);
   });
 
   it('preserves user-chosen non-legacy timeout across the v1 → v2 migration', async () => {
@@ -86,11 +86,19 @@ describe('readPersisted()', () => {
     expect(result.generationTimeoutSec).toBe(300);
   });
 
-  it('respects an explicit 120s when schema is already v2 (user chose it post-migration)', async () => {
+  it('migrates schemaVersion 2 with the old 600s default to 1200s', async () => {
     readFileMock.mockResolvedValueOnce(
-      JSON.stringify({ schemaVersion: 2, updateChannel: 'stable', generationTimeoutSec: 120 }),
+      JSON.stringify({ schemaVersion: 2, updateChannel: 'stable', generationTimeoutSec: 600 }),
     );
     const result = await readPersisted();
-    expect(result.generationTimeoutSec).toBe(120);
+    expect(result.generationTimeoutSec).toBe(1200);
+  });
+
+  it('respects an explicit 600s when schema is already v3 (user chose it post-migration)', async () => {
+    readFileMock.mockResolvedValueOnce(
+      JSON.stringify({ schemaVersion: 3, updateChannel: 'stable', generationTimeoutSec: 600 }),
+    );
+    const result = await readPersisted();
+    expect(result.generationTimeoutSec).toBe(600);
   });
 });

apps/desktop/src/main/preferences-ipc.ts

@@ -17,11 +17,14 @@ import { getLogger } from './logger';
 
 const logger = getLogger('preferences-ipc');
 
-const SCHEMA_VERSION = 2;
+const SCHEMA_VERSION = 3;
 // v1 → v2: raise the abandoned 120s timeout default (which aborted real
 // agentic runs mid-loop) to 600s. Values that happen to equal the old
 // default are treated as unmigrated defaults, not user intent.
-const LEGACY_DEFAULT_TIMEOUT_SEC = 120;
+const V1_DEFAULT_TIMEOUT_SEC = 120;
+// v2 -> v3: 600s still clips slower long-form multi-turn runs, so the default
+// moves to 1200s.
+const V2_DEFAULT_TIMEOUT_SEC = 600;
 
 function prefsFile(): string {
   return join(configDir(), 'preferences.json');
@@ -41,11 +44,10 @@ interface PreferencesFile extends Preferences {
 const DEFAULTS: Preferences = {
   updateChannel: 'stable',
   // Agentic runs do multiple LLM turns + tool executions + file writes, so
-  // 120s (Workstream B Phase 1 single-turn budget) was too tight and aborted
-  // real runs mid-loop. 600s (10 min) covers a typical multi-turn design
-  // generation with a slow coproxy. Users on fast endpoints can lower this
+  // 120s was too tight and 600s still clips slower long-form runs. Default to
+  // 1200s (20 min); users on fast endpoints can lower this
   // in Settings → Advanced.
-  generationTimeoutSec: 600,
+  generationTimeoutSec: 1200,
 };
 
 export async function readPersisted(): Promise<Preferences> {
@@ -59,9 +61,11 @@ export async function readPersisted(): Promise<Preferences> {
         ? parsed.generationTimeoutSec
         : DEFAULTS.generationTimeoutSec;
     const migratedTimeout =
-      persistedSchema < SCHEMA_VERSION && rawTimeout === LEGACY_DEFAULT_TIMEOUT_SEC
+      persistedSchema < 2 && rawTimeout === V1_DEFAULT_TIMEOUT_SEC
         ? DEFAULTS.generationTimeoutSec
-        : rawTimeout;
+        : persistedSchema < 3 && rawTimeout === V2_DEFAULT_TIMEOUT_SEC
+          ? DEFAULTS.generationTimeoutSec
+          : rawTimeout;
     return {
       updateChannel:
         parsed.updateChannel === 'stable' || parsed.updateChannel === 'beta'

apps/desktop/src/renderer/src/components/PreviewPane.test.ts

@@ -5,6 +5,7 @@ import {
   isTrustedPreviewMessageSource,
   postModeToPreviewWindow,
   scaleRectForZoom,
+  stablePreviewSourceKey,
 } from './PreviewPane';
 
 describe('isTrustedPreviewMessageSource', () => {
@@ -43,6 +44,27 @@ describe('scaleRectForZoom', () => {
   });
 });
 
+describe('stablePreviewSourceKey', () => {
+  it('masks EDITMODE and TWEAK_SCHEMA spans for JSX artifacts', () => {
+    const source = `const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"accent":"#000"}/*EDITMODE-END*/;
+const TWEAK_SCHEMA = /*TWEAK-SCHEMA-BEGIN*/{"accent":{"kind":"color"}}/*TWEAK-SCHEMA-END*/;
+function App(){ return <div />; }`;
+
+    const key = stablePreviewSourceKey(source);
+
+    expect(key).toContain('/*EDITMODE-BEGIN*/__STABLE__/*EDITMODE-END*/');
+    expect(key).toContain('/*TWEAK-SCHEMA-BEGIN*/__STABLE__/*TWEAK-SCHEMA-END*/');
+    expect(key).not.toContain('{"accent":"#000"}');
+  });
+
+  it('keeps full HTML documents unstable so token changes force a reload', () => {
+    const source =
+      '<!doctype html><html><body><script>const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{"accent":"#000"}/*EDITMODE-END*/;</script></body></html>';
+
+    expect(stablePreviewSourceKey(source)).toBe(source);
+  });
+});
+
 describe('handlePreviewMessage trust boundary', () => {
   function makeHandlers() {
     return {

apps/desktop/src/renderer/src/components/PreviewPane.tsx

@@ -69,6 +69,22 @@ export function scaleRectForZoom(
   };
 }
 
+export function stablePreviewSourceKey(source: string): string {
+  const head = source.trimStart().slice(0, 2048).toLowerCase();
+  // Full HTML documents do not get the JSX tweaks bridge injected, so token
+  // changes must invalidate srcdoc and force a reload to take effect.
+  if (head.startsWith('<!doctype') || head.startsWith('<html')) return source;
+  return source
+    .replace(
+      /\/\*\s*EDITMODE-BEGIN\s*\*\/[\s\S]*?\/\*\s*EDITMODE-END\s*\*\//g,
+      '/*EDITMODE-BEGIN*/__STABLE__/*EDITMODE-END*/',
+    )
+    .replace(
+      /\/\*\s*TWEAK-SCHEMA-BEGIN\s*\*\/[\s\S]*?\/\*\s*TWEAK-SCHEMA-END\s*\*\//g,
+      '/*TWEAK-SCHEMA-BEGIN*/__STABLE__/*TWEAK-SCHEMA-END*/',
+    );
+}
+
 export type AllowedPreviewMessageType = 'ELEMENT_SELECTED' | 'IFRAME_ERROR';
 
 export interface PreviewMessageHandlers {
@@ -145,17 +161,7 @@ function PreviewSlot({
   registerIframe,
   onIframeError,
 }: PreviewSlotProps) {
-  const srcDocStableKey = useMemo(() => {
-    return html
-      .replace(
-        /\/\*\s*EDITMODE-BEGIN\s*\*\/[\s\S]*?\/\*\s*EDITMODE-END\s*\*\//g,
-        '/*EDITMODE-BEGIN*/__STABLE__/*EDITMODE-END*/',
-      )
-      .replace(
-        /\/\*\s*TWEAK-SCHEMA-BEGIN\s*\*\/[\s\S]*?\/\*\s*TWEAK-SCHEMA-END\s*\*\//g,
-        '/*TWEAK-SCHEMA-BEGIN*/__STABLE__/*TWEAK-SCHEMA-END*/',
-      );
-  }, [html]);
+  const srcDocStableKey = useMemo(() => stablePreviewSourceKey(html), [html]);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: srcDocStableKey is the intentional dependency. html flows through naturally because the factory closes over it and re-runs whenever the stable key flips, which is exactly when structural changes (anything outside EDITMODE / TWEAK_SCHEMA markers) are present.
   const srcDoc = useMemo(() => buildSrcdoc(html), [srcDocStableKey]);

apps/desktop/src/renderer/src/components/TweakPanel.tsx

@@ -15,9 +15,15 @@ type TokenValue = unknown;
 type Tokens = Record<string, TokenValue>;
 
 const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+const CSS_COLOR_RE =
+  /^(#([0-9a-f]{3}|[0-9a-f]{6})|(rgb|rgba|hsl|hsla|hwb|lab|lch|oklab|oklch)\([^)]*\)|color\([^)]*\)|[a-z]+)$/i;
 
 function isColorString(value: unknown): value is string {
-  return typeof value === 'string' && HEX_RE.test(value);
+  return typeof value === 'string' && CSS_COLOR_RE.test(value.trim());
+}
+
+function isNativeColorInputValue(value: string): boolean {
+  return HEX_RE.test(value.trim());
 }
 
 function humanize(key: string): string {
@@ -37,21 +43,30 @@ function ColorSwatch({
   onChange: (next: string) => void;
   pickColorLabel: string;
 }) {
+  const canPickNatively = isNativeColorInputValue(value);
   return (
     <div className="flex items-center gap-[var(--space-2)]">
-      <label className="relative inline-flex h-[28px] w-[28px] shrink-0 cursor-pointer overflow-hidden rounded-[var(--radius-sm)] shadow-[var(--shadow-inset-soft)] transition-transform duration-[var(--duration-faster)] hover:scale-[1.04] active:scale-[var(--scale-press-down)]">
+      <label
+        className={`relative inline-flex h-[28px] w-[28px] shrink-0 overflow-hidden rounded-[var(--radius-sm)] shadow-[var(--shadow-inset-soft)] transition-transform duration-[var(--duration-faster)] ${
+          canPickNatively
+            ? 'cursor-pointer hover:scale-[1.04] active:scale-[var(--scale-press-down)]'
+            : 'cursor-default'
+        }`}
+      >
         <span
           className="block h-full w-full"
           style={{ backgroundColor: value }}
           aria-hidden="true"
         />
-        <input
-          type="color"
-          value={value}
-          onChange={(e) => onChange(e.target.value)}
-          className="absolute inset-0 cursor-pointer opacity-0"
-          aria-label={pickColorLabel}
-        />
+        {canPickNatively ? (
+          <input
+            type="color"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            className="absolute inset-0 cursor-pointer opacity-0"
+            aria-label={pickColorLabel}
+          />
+        ) : null}
       </label>
       <input
         type="text"