chore: upgrade all dependencies to latest versions

CLAUDE.md

@@ -0,0 +1,40 @@
+# Dory - Claude Code Guidelines
+
+## Project Structure
+
+- Monorepo managed by Yarn 4 (Berry) workspaces
+- `apps/web` — Next.js web app (main product)
+- `apps/admin` — Next.js admin panel
+- `apps/electron` — Electron desktop app
+- `packages/auth-core` — Shared auth package
+
+## Package Manager
+
+- **Yarn 4** — use `yarn` commands, NOT `npm` or `pnpm`
+- `yarn workspace <name> <cmd>` to run workspace-specific commands
+- `yarn install` to install dependencies
+- `yarn workspace web typecheck` to check types
+
+## shadcn/ui
+
+- Components live in `apps/web/registry/new-york-v4/ui/`
+- Chart demos live in `apps/web/registry/new-york-v4/charts/`
+- **To add/update components**: `yarn dlx shadcn@latest add <component-name> --overwrite`
+- **To update multiple**: `yarn dlx shadcn@latest add comp1 comp2 comp3 --overwrite`
+- shadcn CLI may pin dependency versions (remove `^`) or change versions — review `package.json` after running
+- shadcn CLI installs to default path; if components are in a custom directory, you may need to move files after
+
+## Dependency Upgrades
+
+- Use `npx npm-check-updates --workspaces` to check for outdated dependencies across all workspaces
+- Use `yarn npm audit` to check for known vulnerabilities
+- For TypeScript major upgrades: run `npx @andrewbranch/ts5to6 --fixBaseUrl <tsconfig>` and `--fixRootDir <tsconfig>` to verify config compatibility
+- When upgrading packages that have shadcn wrappers (recharts, react-day-picker, react-resizable-panels), update via `yarn dlx shadcn@latest add <component> --overwrite` to get compatible wrapper code
+- Always run `yarn workspace web typecheck` after upgrades to catch breaking changes
+- Prefer `^` prefix for dependency versions in package.json
+
+## Code Style
+
+- All git commits, PR titles, and branch names must be in **English**
+- TypeScript strict mode is enabled across all workspaces
+- ESLint with flat config (`eslint.config.mjs`)

apps/admin/package.json

@@ -12,18 +12,18 @@
   },
   "dependencies": {
     "@dory/auth-core": "0.1.0",
-    "next": "^16.1.7",
-    "next-intl": "^4.0.2",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "next": "^16.2.2",
+    "next-intl": "^4.9.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@types/node": "^24.3.1",
+    "@types/node": "^25.5.0",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.5.3",
-    "typescript": "^5.9.2"
+    "eslint": "^10.1.0",
+    "eslint-config-next": "^16.2.2",
+    "typescript": "^6.0.2"
   }
 }

apps/electron/package.json

@@ -19,16 +19,16 @@
         "electron:build:apple:unsigned": "yarn run electron:standalone && yarn run compile && CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder --config electron-builder.mjs --mac --dir"
     },
     "devDependencies": {
-        "@types/node": "^24.3.1",
-        "electron": "39.8.4",
-        "electron-builder": "^25.1.8",
+        "@types/node": "^25.5.0",
+        "electron": "^41.1.1",
+        "electron-builder": "^26.8.1",
         "electron-notarize": "^1.2.2",
-        "typescript": "^5.9.3"
+        "typescript": "^6.0.2"
     },
     "dependencies": {
-        "dotenv": "^17.2.3",
+        "dotenv": "^17.4.0",
         "electron-log": "^5.4.3",
-        "electron-store": "^9.0.0",
-        "electron-updater": "^6.6.2"
+        "electron-store": "^11.0.2",
+        "electron-updater": "^6.8.3"
     }
 }

apps/web/app/(app)/[organization]/[connectionId]/explorer/components/explorer-layout.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, type ReactNode } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
 import { useParams, useRouter } from 'next/navigation';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { Panel, Group, Separator } from 'react-resizable-panels';
 
 import { buildExplorerDatabasePath, buildExplorerListPath, buildExplorerObjectPath, buildExplorerSchemaPath } from '@/lib/explorer/build-path';
 import { resolveExplorerRoute } from '@/lib/explorer/routing';
@@ -139,8 +139,8 @@ export function ExplorerLayout({ defaultLayout = [25, 85], children }: ExplorerL
 
     return (
         <main className="relative h-full w-full">
-            <PanelGroup direction="horizontal" autoSaveId="sql-console-horizontal" onLayout={onLayout}>
-                <Panel defaultSize={horizontalLayout[0]} minSize={15} maxSize={40}>
+            <Group orientation="horizontal" id="explorer-horizontal" defaultLayout={{ sidebar: horizontalLayout[0], content: horizontalLayout[1] }} onLayoutChanged={onLayout}>
+                <Panel id="sidebar" minSize="15%" maxSize="40%">
                     <div className="flex h-full min-h-0 flex-col bg-card">
                         <ExplorerSidebar
                             catalogName={catalog}
@@ -157,12 +157,12 @@ export function ExplorerLayout({ defaultLayout = [25, 85], children }: ExplorerL
                     </div>
                 </Panel>
 
-                <PanelResizeHandle className="w-1.5 bg-border transition-colors data-[resize-handle-active=true]:bg-foreground/30" />
+                <Separator className="w-1.5 bg-border transition-colors" />
 
-                <Panel defaultSize={horizontalLayout[1]} minSize={40}>
+                <Panel id="content" minSize="40%">
                     <div className="flex h-full min-h-0 flex-col">{children}</div>
                 </Panel>
-            </PanelGroup>
+            </Group>
         </main>
     );
 }

apps/web/app/(app)/[organization]/[connectionId]/explorer/hooks/use-layout.tsx

@@ -1,20 +1,22 @@
 'use client';
 
 import { useCallback } from 'react';
+import type { Layout } from 'react-resizable-panels';
 
 const HORIZONTAL_LAYOUT_COOKIE = 'data-explorer-panels:layout';
 const DEFAULT_HORIZONTAL_LAYOUT = [33, 67] as const;
 
 export function useDataExplorerLayout(defaultLayout: number[] | undefined) {
     const normalizedLayout = defaultLayout ?? DEFAULT_HORIZONTAL_LAYOUT;
 
-    const onLayout = useCallback((sizes: number[]) => {
+    const onLayout = useCallback((layout: Layout) => {
+        const sizes = [layout['sidebar'] ?? normalizedLayout[0], layout['content'] ?? normalizedLayout[1]];
         try {
             document.cookie = `${HORIZONTAL_LAYOUT_COOKIE}=${JSON.stringify(sizes)}; path=/; max-age=31536000`;
         } catch {
             // ignore cookie failures
         }
-    }, []);
+    }, [normalizedLayout]);
 
     return {
         normalizedLayout,

apps/web/app/(app)/[organization]/[connectionId]/sql-console/client.tsx

@@ -2,7 +2,7 @@
 
 import React, { Activity, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator as PanelSeparator, type Layout } from 'react-resizable-panels';
 import { Sparkles } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -195,7 +195,8 @@ export default function SQLConsoleClient({
         }
     }, [chatWidth, normalizedChatWidth, setChatWidth]);
 
-    const handleLayoutChange = (next: number[]) => {
+    const handleLayoutChange = (layout: Layout) => {
+        const next = [layout['left-panel'] ?? horizontalLayout[0], layout['middle-panel'] ?? horizontalLayout[1]];
         onLayoutFromHook?.(next);
     };
 
@@ -293,12 +294,12 @@ export default function SQLConsoleClient({
 
     return (
         <main className="relative h-full w-full">
-            <PanelGroup direction="horizontal" autoSaveId="sql-console-horizontal" onLayout={handleLayoutChange}>
+            <Group orientation="horizontal" id="sql-console-horizontal" defaultLayout={{ 'left-panel': horizontalLayout[0], 'middle-panel': horizontalLayout[1] }} onLayoutChanged={handleLayoutChange}>
                 {/* Left */}
                 <Panel
-                    defaultSize={horizontalLayout[0]}
-                    minSize={INITIAL_LAYOUT.horizontal.leftPanel.min}
-                    maxSize={INITIAL_LAYOUT.horizontal.leftPanel.max}
+                    id="left-panel"
+                    minSize={`${INITIAL_LAYOUT.horizontal.leftPanel.min}%`}
+                    maxSize={`${INITIAL_LAYOUT.horizontal.leftPanel.max}%`}
                 >
                     <div className="flex flex-col h-full min-h-0 bg-card">
                         <Tabs defaultValue="tables" className="flex-1 min-h-0">
@@ -325,10 +326,10 @@ export default function SQLConsoleClient({
                     </div>
                 </Panel>
 
-                <PanelResizeHandle className="w-1.5 bg-border data-[resize-handle-active=true]:bg-foreground/30 transition-colors" />
+                <PanelSeparator className="w-1.5 bg-border transition-colors" />
 
                 {/* Middle */}
-                <Panel minSize={INITIAL_LAYOUT.horizontal.middlePanel.min} defaultSize={horizontalLayout[1]}>
+                <Panel id="middle-panel" minSize={`${INITIAL_LAYOUT.horizontal.middlePanel.min}%`}>
                     <div className="flex h-full flex-col">
                         {isLoading || tabs.length === 0 ? (
                             <SQLTabEmpty addTab={addTab} disabled={isLoading} />
@@ -395,7 +396,7 @@ export default function SQLConsoleClient({
                         )}
                     </div>
                 </Panel>
-            </PanelGroup>
+            </Group>
 
             <div className="absolute right-0 bottom-0 z-20 flex" style={{ top: isLoading || tabs.length === 0 ? 0 : `${tabHeaderHeight}px` }}>
                 <div className="flex h-full w-10 flex-col items-center gap-2 border-l bg-background/95 py-3 shadow-xl backdrop-blur">

apps/web/app/(app)/[organization]/[connectionId]/sql-console/components/copilot-modes/sql-mode.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator, type Layout } from 'react-resizable-panels';
 import { Check, ChevronDown, Loader2, Play, Save, Square } from 'lucide-react';
 import { usePathname, useSearchParams } from 'next/navigation';
 
@@ -153,16 +153,16 @@ export function SqlMode({
 
     return (
         <div className="flex flex-1 flex-col min-h-0 mr-10">
-            <PanelGroup
+            <Group
                 key={showChatbot ? 'sql-with-copilot' : 'sql-without-copilot'}
-                direction="horizontal"
+                orientation="horizontal"
                 className="h-full min-h-0"
-                onLayout={sizes => {
-                    const [, copilotSize] = sizes;
-                    if (copilotSize > 5) setChatWidth(copilotSize);
+                onLayoutChange={(layout: Layout) => {
+                    const copilotSize = layout['copilot-panel'];
+                    if (copilotSize !== undefined && copilotSize > 5) setChatWidth(copilotSize);
                 }}
             >
-                <Panel defaultSize={showChatbot ? 100 - chatWidth : 100} minSize={40} order={1} className="min-h-0">
+                <Panel id="main-panel" defaultSize={`${showChatbot ? 100 - chatWidth : 100}%`} minSize="40%" className="min-h-0">
                     <div className="flex h-full flex-col min-h-0">
                         <div className="flex items-center gap-2 p-2 border-b shrink-0">
                             <div className="flex items-center">
@@ -214,31 +214,31 @@ export function SqlMode({
                             )}
                         </div>
 
-                        <PanelGroup direction="vertical" autoSaveId="sql-editor-v" className="h-full min-h-0">
-                            <Panel defaultSize={25} minSize={15} className="min-h-0">
+                        <Group orientation="vertical" className="h-full min-h-0">
+                            <Panel id="editor-panel" defaultSize="25%" minSize="15%" className="min-h-0">
                                 <div className="flex flex-col h-full border-b min-h-0">
                                     <SQLEditor ref={editorRef} activeTab={activeTab} updateTab={updateTab} onRunQuery={handleRunQuery} />
                                 </div>
                             </Panel>
 
-                            <PanelResizeHandle className="h-1.5 bg-border data-[resize-handle-active=true]:bg-foreground/30 transition-colors" />
+                            <Separator className="h-1.5 bg-border transition-colors" />
 
-                            <Panel minSize={25} className="min-h-0">
+                            <Panel id="result-panel" minSize="25%" className="min-h-0">
                                 <div className="flex h-full flex-col min-h-0">
                                     <ResultTable />
                                 </div>
                             </Panel>
-                        </PanelGroup>
+                        </Group>
                     </div>
                 </Panel>
 
-                <PanelResizeHandle className={['w-1.5 bg-border data-[resize-handle-active=true]:bg-foreground/30 transition-colors', showChatbot ? '' : 'hidden'].join(' ')} />
+                <Separator className={['w-1.5 bg-border transition-colors', showChatbot ? '' : 'hidden'].join(' ')} />
 
                 <Panel
-                    defaultSize={showChatbot ? chatWidth : 0}
-                    minSize={showChatbot ? 30 : 0}
-                    order={2}
-                    className="min-h-0" // ✅
+                    id="copilot-panel"
+                    defaultSize={`${showChatbot ? chatWidth : 0}%`}
+                    minSize={`${showChatbot ? 30 : 0}%`}
+                    className="min-h-0"
                 >
                     {showChatbot ? (
                         <div className="flex h-full flex-col min-h-0 border-l bg-card">
@@ -255,7 +255,7 @@ export function SqlMode({
                         </div>
                     ) : null}
                 </Panel>
-            </PanelGroup>
+            </Group>
             <SaveSqlDialog open={saveDialogOpen} onOpenChange={setSaveDialogOpen} defaultTitle={defaultSaveTitle} getSqlText={getSqlText} onSaved={fetchSavedQueries} />
             <AuthLinkSheet open={authSheetOpen} onOpenChange={setAuthSheetOpen} callbackURL={callbackURL} />
         </div>

apps/web/app/(app)/[organization]/[connectionId]/sql-console/components/copilot-modes/table-mode.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { PanelGroup, Panel, PanelResizeHandle } from 'react-resizable-panels';
+import { Group, Panel, Separator, type Layout } from 'react-resizable-panels';
 
 import TableBrowser from '../../../../components/table-browser/table-browser';
 import CopilotPanel from '../copilot-panel';
@@ -25,34 +25,34 @@ export function TableMode({
     return (
 
         <div className="flex flex-1 flex-col min-h-0 mr-10">
-            <PanelGroup
+            <Group
                 key={showChatbot ? 'table-with-copilot' : 'table-without-copilot'}
-                direction="horizontal"
+                orientation="horizontal"
                 className="h-full min-h-0"
-                onLayout={sizes => {
-                    const [, copilotSize] = sizes;
-                    if (copilotSize > 5) setChatWidth(copilotSize);
+                onLayoutChange={(layout: Layout) => {
+                    const copilotSize = layout['copilot-panel'];
+                    if (copilotSize !== undefined && copilotSize > 5) setChatWidth(copilotSize);
                 }}
             >
-                <Panel defaultSize={showChatbot ? 100 - chatWidth : 100} minSize={40} order={1} className="min-h-0">
+                <Panel id="main-panel" defaultSize={`${showChatbot ? 100 - chatWidth : 100}%`} minSize="40%" className="min-h-0">
                     <div className="flex h-full flex-col min-h-0">
                         <div className="flex-1 min-h-0 overflow-auto">
                             <TableBrowser activeTab={activeTab} updateTab={updateTab} />
                         </div>
                     </div>
                 </Panel>
 
-                <PanelResizeHandle
+                <Separator
                     className={[
-                        'w-1.5 bg-border data-[resize-handle-active=true]:bg-foreground/30 transition-colors',
+                        'w-1.5 bg-border transition-colors',
                         showChatbot ? '' : 'hidden',
                     ].join(' ')}
                 />
 
                 <Panel
-                    defaultSize={showChatbot ? chatWidth : 0}
-                    minSize={showChatbot ? 15 : 0}
-                    order={2}
+                    id="copilot-panel"
+                    defaultSize={`${showChatbot ? chatWidth : 0}%`}
+                    minSize={`${showChatbot ? 15 : 0}%`}
                     className="min-h-0"
                 >
                     {showChatbot ? (
@@ -69,7 +69,7 @@ export function TableMode({
                         </div>
                     ) : null}
                 </Panel>
-            </PanelGroup>
+            </Group>
         </div>
     );
 }

apps/web/app/(app)/[organization]/[connectionId]/sql-console/components/result-table/components/charts/chart-canvas.tsx

@@ -431,7 +431,7 @@ export function ChartCanvas(props: {
                                     className="cursor-pointer"
                                     onClick={(data, _index, event) =>
                                         handleDatumClick(
-                                            ((data as { payload?: Record<string, unknown> } | undefined)?.payload ?? (data as Record<string, unknown> | undefined)),
+                                            ((data as unknown as { payload?: Record<string, unknown> } | undefined)?.payload ?? (data as unknown as Record<string, unknown> | undefined)),
                                             ALL_SERIES_KEY,
                                             'Value',
                                             Boolean((event as React.MouseEvent<SVGElement> | undefined)?.shiftKey),
@@ -493,7 +493,7 @@ export function ChartCanvas(props: {
     );
 }
 
-function ScatterTooltipContent(props: React.ComponentProps<typeof ChartTooltipContent> & { yAxisLabel: string }) {
+function ScatterTooltipContent(props: React.ComponentProps<typeof ChartTooltipContent> & { yAxisLabel: string; active?: boolean; payload?: Array<{ payload?: Record<string, unknown> }> }) {
     const { active, payload, yAxisLabel } = props;
     if (!active || !payload?.length) {
         return null;
@@ -518,7 +518,7 @@ function ScatterTooltipContent(props: React.ComponentProps<typeof ChartTooltipCo
     );
 }
 
-function ChartFilterTooltipContent(props: React.ComponentProps<typeof ChartTooltipContent> & { filterEnabled?: boolean; chartConfig: ChartConfig; xAxisLabel: string; yAxisLabel: string }) {
+function ChartFilterTooltipContent(props: React.ComponentProps<typeof ChartTooltipContent> & { filterEnabled?: boolean; chartConfig: ChartConfig; xAxisLabel: string; yAxisLabel: string; active?: boolean; payload?: Array<Record<string, unknown>> }) {
     const { filterEnabled, chartConfig, xAxisLabel, yAxisLabel } = props;
     if (!props.active || !props.payload?.length) {
         return null;

apps/web/lib/registry.ts

@@ -1,5 +1,5 @@
 import { Index } from "@/__registry__"
-import { registryItemSchema } from "shadcn/registry"
+import { registryItemSchema } from "shadcn/schema"
 
 const memoizedIndex: typeof Index = Object.fromEntries(
   Object.entries(Index).map(([style, items]) => [style, { ...items }])