chore(deps): React 18 → 19 (react + react-dom + types) with JSX namespace fix

apps/desktop/package.json

@@ -31,15 +31,15 @@
     "@tauri-apps/plugin-process": "^2.3.1",
     "@tauri-apps/plugin-shell": "^2.0.0",
     "@tauri-apps/plugin-updater": "^2.0.0",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.62.1",
     "@tauri-apps/cli": "^2.0.0",
     "@types/node": "^22.10.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.3.0",
     "typescript": "^5.7.0",
     "vite": "^5.4.0",

apps/desktop/src/App.tsx

@@ -2,7 +2,7 @@
 // Spec: docs/VISUAL_DESIGN.html
 // Milestone: 0.1.2 — adds project-folder flow + inspector wiring + session refresh.
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, type JSX } from 'react';
 import { contextWindowFor } from '@deepcode/core/dist/providers/model-metadata.js';
 import { FilePanel } from './components/FilePanel.js';
 import { InspectorPanel } from './components/InspectorPanel.js';

apps/desktop/src/components/Badge.tsx

@@ -1,7 +1,7 @@
 // Status badge — three flavors per the design spec (#3 / #6).
 // .badge-ok / .badge-warn / .badge-err / .badge-info live in index.css.
 
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 
 export type BadgeKind = 'ok' | 'warn' | 'err' | 'info';
 

apps/desktop/src/components/BrandMark.tsx

@@ -2,6 +2,8 @@
 // Wraps the SVG path in the gradient .mark / .mark-lg container so the
 // shell can drop it in anywhere without per-instance styling.
 
+import type { JSX } from 'react';
+
 interface BrandMarkProps {
   /** 'sm' = 26 px (default, sidebar / pill); 'lg' = 64 px (onboarding hero). */
   size?: 'sm' | 'lg';

apps/desktop/src/components/Dropdown.tsx

@@ -6,7 +6,7 @@
 // positioned absolute below the trigger. Good enough for composer
 // dropdowns that don't need to escape clipping.
 
-import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useEffect, useRef, useState, type ReactNode, type JSX } from 'react';
 
 export interface DropdownOption<T extends string> {
   value: T;

apps/desktop/src/components/FilePanel.tsx

@@ -4,6 +4,7 @@
 // fetching (file reads + session snapshots via Tauri). Every interaction is a
 // callback so the component is unit-testable + previewable without a backend.
 
+import type { JSX } from 'react';
 import type { DiffLine, DiffMode, FileTab, FileView } from '../types/file-panel.js';
 
 interface FilePanelProps {

apps/desktop/src/components/InspectorPanel.tsx

@@ -10,7 +10,7 @@
 // component is purely presentational. Sections with no data show an honest
 // empty state rather than a placeholder — per HANDOFF: no fake sections.
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, type JSX } from 'react';
 import { contextWindowFor } from '@deepcode/core/dist/providers/model-metadata.js';
 import { projectName } from '../lib/project.js';
 import type { InspectorData, InspectorSection } from '../types/inspector.js';

apps/desktop/src/components/InspectorRail.tsx

@@ -7,6 +7,8 @@
 //   • ⚙ Settings  — the Settings shell (a main-area screen, not a right panel)
 // The active panel's icon is highlighted; clicking it again closes the panel.
 
+import type { JSX } from 'react';
+
 interface InspectorRailProps {
   /** Inspector panel is the visible right panel. */
   inspectorActive: boolean;

apps/desktop/src/components/Pill.tsx

@@ -1,7 +1,7 @@
 // Pill — small rounded chip for the chat header (connected · model · approval).
 // Optional leading dot for status indication (e.g. live connection).
 
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 
 interface PillProps {
   /** Show a leading mint dot. */

apps/desktop/src/components/PlusMenu.tsx

@@ -3,7 +3,7 @@
 // Sits absolute-positioned above the composer toolbar (opens upward so
 // it doesn't get clipped by the chat-stream above the composer).
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type JSX } from 'react';
 
 export interface PlusMenuItem {
   icon: string; // emoji or single-char icon

apps/desktop/src/components/ProjectPickerOverlay.tsx

@@ -3,7 +3,7 @@
 // path is persisted to settings.json#projectPath and threaded into
 // every agent.start as `cwd`.
 
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { BrandMark } from './BrandMark.js';
 import { pickFolder } from '../lib/tauri-api.js';
 

apps/desktop/src/components/Screen.tsx

@@ -6,7 +6,7 @@
 // Matches the design language: chat-main column, padded body, header
 // pinned at top. No 3-column shell — that's the App-level grid.
 
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 
 interface ScreenProps {
   title: string;

apps/desktop/src/components/SettingsLayout.tsx

@@ -9,7 +9,7 @@
 // Only screens that actually exist are listed — no dead links. (The spec's
 // Models / Hooks / Memory / Statusline items land with their screens later.)
 
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 import type { ScreenName } from '../types/screens.js';
 
 /** The screens that live inside the Settings shell, in nav order. */

apps/desktop/src/components/Sidebar.tsx

@@ -4,7 +4,7 @@
 // folder + a small switch-folder button. Below: sessions bucketed by
 // Today/Yesterday/Earlier per the spec note ①.
 
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, type JSX } from 'react';
 import { projectName } from '../lib/project.js';
 import {
   listSessions,

apps/desktop/src/components/ToolCard.tsx

@@ -8,7 +8,7 @@
 //   │ <body — output or diff>                       │  ← tc-body
 //   └──────────────────────────────────────────────┘
 
-import type { ReactNode } from 'react';
+import type { ReactNode, JSX } from 'react';
 import { Badge, type BadgeKind } from './Badge.js';
 
 interface ToolCardProps {

apps/desktop/src/components/UpdateBanner.tsx

@@ -2,7 +2,7 @@
 // downloaded a new release. Clicking Relaunch calls tauri-plugin-process.relaunch().
 // Spec: docs/VISUAL_DESIGN.html screen #11
 
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { relaunchNow } from '../lib/updater.js';
 import type { UpdateInfo } from '../types/global.js';
 

apps/desktop/src/preview-filepanel.tsx

@@ -5,7 +5,7 @@
 // Mounts FilePanel with mock fixtures + a working resize drag so the panel's
 // appearance can be screenshotted without the Tauri backend.
 
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { createRoot } from 'react-dom/client';
 import { FilePanel } from './components/FilePanel.js';
 import {

apps/desktop/src/screens/About.tsx

@@ -1,7 +1,7 @@
 // About screen — design-aligned per docs/VISUAL_DESIGN.html.
 // Brand mark + version + diagnostics + docs links.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import type { ConfigDiagnosticsResult } from '@deepcode/protocol';
 import { BrandMark } from '../components/BrandMark.js';
 import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';

apps/desktop/src/screens/MCPManager.tsx

@@ -1,7 +1,7 @@
 // MCP server manager — design-aligned per spec screen #15.
 // List / show status of MCP servers wired in settings.json#mcpServers.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import { Badge, type BadgeKind } from '../components/Badge.js';
 import { Card, Screen, SectionTitle } from '../components/Screen.js';
 

apps/desktop/src/screens/Onboarding.tsx

@@ -1,7 +1,7 @@
 // Onboarding screen — first-run flow capturing the DeepSeek API key.
 // Design spec: docs/VISUAL_DESIGN.html screen #2 (hero gradient + big mark).
 
-import { useState } from 'react';
+import { useState, type JSX } from 'react';
 import { BrandMark } from '../components/BrandMark.js';
 import { openUrl } from '../lib/tauri-api.js';
 

apps/desktop/src/screens/Permissions.tsx

@@ -2,7 +2,7 @@
 // View + edit settings.permissions rules. Save now actually persists
 // to ~/.deepcode/settings.json via saveSettingsFile.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import { Badge, type BadgeKind } from '../components/Badge.js';
 import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';
 import { loadSettingsFile, saveSettingsFile } from '../lib/tauri-api.js';

apps/desktop/src/screens/Plugins.tsx

@@ -3,7 +3,7 @@
 // enable/disable, install new ones. Install IPC still stubbed (P3
 // will wire installFromSpec).
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import { Badge, type BadgeKind } from '../components/Badge.js';
 import { Card, Screen } from '../components/Screen.js';
 import { loadSettingsFile, saveSettingsFile } from '../lib/tauri-api.js';

apps/desktop/src/screens/Repl.tsx

@@ -17,7 +17,7 @@
 // CSS class names (which now match the design tokens) and the addition
 // of richer tool-card rendering.
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, type JSX } from 'react';
 import {
   DEFAULT_KEYBINDINGS,
   VimState,

apps/desktop/src/screens/Sessions.tsx

@@ -1,7 +1,7 @@
 // Sessions list — design-aligned. Browse + filter + resume past
 // conversations. Per spec screen #5.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import { Card, Screen } from '../components/Screen.js';
 import { listSessions, type SessionMeta } from '../lib/tauri-api.js';
 

apps/desktop/src/screens/Settings.tsx

@@ -2,7 +2,7 @@
 // Top: JSON view (Monaco-lite). Bottom: flat key/value table. Both
 // reflect the live settings file. Save button writes back.
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState, type JSX } from 'react';
 import { Card, Row, Screen, SectionTitle } from '../components/Screen.js';
 import { loadProjectPath } from '../lib/project.js';
 import { getSettingsPath, loadSettingsFile, saveSettingsFile } from '../lib/tauri-api.js';

apps/desktop/src/screens/Skills.tsx

@@ -2,7 +2,7 @@
 // List available skills (built-in + user + project + plugin) + show the
 // SKILL.md body for inspection. Per spec screen #11.
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type JSX } from 'react';
 import { Badge, type BadgeKind } from '../components/Badge.js';
 import { Card, Screen } from '../components/Screen.js';