Merge pull request #17 from pawelhajduk:feature/vscode-settings

Add Settings panel and auto-open diff setting

Author: pawelhajduk

packages/ui/src/App.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { MainLayout } from '@/components/layout/MainLayout';
 import { VSCodeLayout } from '@/components/layout/VSCodeLayout';
 import { AgentManagerView } from '@/components/views/agent-manager';
+import { SettingsView } from '@/components/views/SettingsView';
 import { FireworksProvider } from '@/contexts/FireworksContext';
 import { Toaster } from '@/components/ui/sonner';
 import { MemoryDebugPanel } from '@/components/ui/MemoryDebugPanel';
@@ -230,9 +231,9 @@ function App({ apis }: AppProps) {
 
   // VS Code runtime - simplified layout without git/terminal views
   if (isVSCodeRuntime) {
-    // Check if this is the Agent Manager panel
+    // Check if this is a specialized panel
     const panelType = typeof window !== 'undefined' 
-      ? (window as { __OPENCHAMBER_PANEL_TYPE__?: 'chat' | 'agentManager' }).__OPENCHAMBER_PANEL_TYPE__ 
+      ? (window as { __OPENCHAMBER_PANEL_TYPE__?: 'chat' | 'agentManager' | 'settings' }).__OPENCHAMBER_PANEL_TYPE__ 
       : 'chat';
 
     if (panelType === 'agentManager') {
@@ -247,6 +248,19 @@ function App({ apis }: AppProps) {
         </ErrorBoundary>
       );
     }
+
+    if (panelType === 'settings') {
+      return (
+        <ErrorBoundary>
+          <RuntimeAPIProvider apis={apis}>
+            <div className="h-full text-foreground bg-background">
+              <SettingsView />
+              <Toaster />
+            </div>
+          </RuntimeAPIProvider>
+        </ErrorBoundary>
+      );
+    }
 
     return (
       <ErrorBoundary>

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -10,6 +10,7 @@ import { toolDisplayStyles } from '@/lib/typography';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useSessionStore } from '@/stores/useSessionStore';
+import { useUIStore } from '@/stores/useUIStore';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
 
@@ -1221,6 +1222,7 @@ const ToolExpandedContent: React.FC<ToolExpandedContentProps> = ({
 const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxTheme, isMobile, onContentChange, hasPrevTool = false, hasNextTool = false, isVSCode = false }) => {
     const state = part.state;
     const currentDirectory = useDirectoryStore((s) => s.currentDirectory);
+    const autoOpenDiff = useUIStore((s) => s.autoOpenDiff);
 
     const isTaskTool = part.tool.toLowerCase() === 'task';
 
@@ -1390,6 +1392,7 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
         const isNowCompleted = state.status === 'completed';
         previousStatusRef.current = state.status;
 
+        if (!autoOpenDiff) return;
         if (!isVSCode || !wasNotCompleted || !isNowCompleted) return;
         if (!isEditTool || !diffContent) return;
         if (!runtime?.editor?.openAIDiff) return;
@@ -1406,7 +1409,7 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
             diff: diffContent,
             label: `AI Edit: ${filePath.split('/').pop() || filePath}`,
         });
-    }, [state.status, isVSCode, isEditTool, diffContent, runtime, input, metadata, currentDirectory]);
+    }, [state.status, isVSCode, isEditTool, diffContent, runtime, input, metadata, currentDirectory, autoOpenDiff]);
 
     if (!isFinalized && !isTaskTool) {
         return null;

packages/ui/src/components/sections/openchamber/OpenChamberVisualSettings.tsx

@@ -75,7 +75,7 @@ const DIFF_VIEW_MODE_OPTIONS: Option<'single' | 'stacked'>[] = [
     },
 ];
 
-export type VisibleSetting = 'theme' | 'colorScheme' | 'fonts' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode';
+export type VisibleSetting = 'theme' | 'colorScheme' | 'fonts' | 'fontSize' | 'spacing' | 'cornerRadius' | 'inputBarOffset' | 'toolOutput' | 'diffLayout' | 'dotfiles' | 'reasoning' | 'queueMode' | 'autoOpenDiff';
 
 const COLOR_SCHEME_OPTIONS: Array<{ id: string; label: string; lightThemeId: string; darkThemeId: string }> = [
     { id: 'vercel', label: 'Vercel', lightThemeId: 'vercel-light', darkThemeId: 'vercel-dark' },
@@ -110,6 +110,8 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
     const setDiffLayoutPreference = useUIStore(state => state.setDiffLayoutPreference);
     const diffViewMode = useUIStore(state => state.diffViewMode);
     const setDiffViewMode = useUIStore(state => state.setDiffViewMode);
+    const autoOpenDiff = useUIStore(state => state.autoOpenDiff);
+    const setAutoOpenDiff = useUIStore(state => state.setAutoOpenDiff);
     const queueModeEnabled = useMessageQueueStore(state => state.queueModeEnabled);
     const setQueueMode = useMessageQueueStore(state => state.setQueueMode);
     const {
@@ -684,6 +686,25 @@ export const OpenChamberVisualSettings: React.FC<OpenChamberVisualSettingsProps>
                     </p>
                 </div>
             )}
+
+            {shouldShow('autoOpenDiff') && isVSCodeRuntime() && (
+                <div className="space-y-2">
+                    <label className="flex items-center gap-2 cursor-pointer">
+                        <input
+                            type="checkbox"
+                            className="h-3.5 w-3.5 accent-primary"
+                            checked={autoOpenDiff}
+                            onChange={(event) => setAutoOpenDiff(event.target.checked)}
+                        />
+                        <span className="typography-ui-header font-semibold text-foreground">
+                            Auto-open diff on file edit
+                        </span>
+                    </label>
+                    <p className="typography-meta text-muted-foreground pl-5">
+                        Automatically open VS Code diff view when AI edits a file.
+                    </p>
+                </div>
+            )}
         </div>
     );
 };

packages/ui/src/stores/useUIStore.ts

@@ -64,6 +64,7 @@ interface UIStore {
   diffFileLayout: Record<string, 'inline' | 'side-by-side'>;
   diffWrapLines: boolean;
   diffViewMode: 'single' | 'stacked';
+  autoOpenDiff: boolean;
   isTimelineDialogOpen: boolean;
   nativeNotificationsEnabled: boolean;
   notificationMode: 'always' | 'hidden-only';
@@ -115,6 +116,7 @@ interface UIStore {
   setDiffFileLayout: (filePath: string, mode: 'inline' | 'side-by-side') => void;
   setDiffWrapLines: (wrap: boolean) => void;
   setDiffViewMode: (mode: 'single' | 'stacked') => void;
+  setAutoOpenDiff: (value: boolean) => void;
   setMultiRunLauncherOpen: (open: boolean) => void;
   setTimelineDialogOpen: (open: boolean) => void;
   setNativeNotificationsEnabled: (value: boolean) => void;
@@ -169,6 +171,7 @@ export const useUIStore = create<UIStore>()(
         diffFileLayout: {},
         diffWrapLines: false,
         diffViewMode: 'single',
+        autoOpenDiff: true,
         isTimelineDialogOpen: false,
         nativeNotificationsEnabled: false,
         notificationMode: 'hidden-only',
@@ -434,6 +437,10 @@ export const useUIStore = create<UIStore>()(
         setDiffViewMode: (mode) => {
           set({ diffViewMode: mode });
         },
+
+        setAutoOpenDiff: (value) => {
+          set({ autoOpenDiff: value });
+        },
 
         setInputBarOffset: (offset) => {
           set({ inputBarOffset: offset });
@@ -580,6 +587,7 @@ export const useUIStore = create<UIStore>()(
           diffLayoutPreference: state.diffLayoutPreference,
           diffWrapLines: state.diffWrapLines,
           diffViewMode: state.diffViewMode,
+          autoOpenDiff: state.autoOpenDiff,
           nativeNotificationsEnabled: state.nativeNotificationsEnabled,
           notificationMode: state.notificationMode,
         })

packages/vscode/package.json

@@ -134,6 +134,12 @@
         "category": "OpenChamber",
         "title": "Settings",
         "icon": "$(settings-gear)"
+      },
+      {
+        "command": "openchamber.openSettings",
+        "category": "OpenChamber",
+        "title": "Open Settings in Editor",
+        "icon": "$(settings-gear)"
       }
     ],
     "submenus": [