From f21ef61677d272c17d0978f48a0e7beac87bd031 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sat, 14 Dec 2024 21:19:49 -0800
Subject: [PATCH 01/21] .js fix

---
 CONTRIBUTING.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 144b7130..b6ba189a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -8,7 +8,7 @@ There are a few ways to contribute:
 - 💡 Make suggestions in our [Discord](https://discord.gg/RSNjgaugJs).
 - ⭐️ If you want to build your AI tool into Void, feel free to get in touch! It's very easy to extend Void, and the UX you create will be much more natural than a VSCode Extension.
 
-Most of Void's code lives in `src/vs/workbench/contrib/void/browser/` and `src/vs/platform/void/`. 
+Most of Void's code lives in `src/vs/workbench/contrib/void/browser/` and `src/vs/platform/void/`.
 
 
 
@@ -75,6 +75,7 @@ Alternatively, if you want to build Void from the terminal, instead of pressing
 - Make sure you follow the prerequisite steps.
 - Make sure you have the same NodeJS version as `.nvmrc`.
 - If you make any React changes, you must re-run `npm run buildreact` and re-build.
+- If you get `"TypeError: Failed to fetch dynamically imported module: vscode-file://vscode-app/.../workbench.desktop.main.js", source: file:///.../bootstrap-window.js`, make sure all imports end with `.js`.
 - If you have any questions, feel free to [submit an issue](https://github.com/voideditor/void/issues/new). For building questions, you can also refer to VSCode's full [How to Contribute](https://github.com/microsoft/vscode/wiki/How-to-Contribute) page.
 
 
@@ -101,7 +102,7 @@ We don't usually recommend bundling. Instead, you should probably just build. If
 
 # Guidelines
 
-We're always glad to talk about new ideas, help you get set up, and make sure your changes align with our vision for the project! Feel free to shoot Mat or Andrew a message, or start chatting with us in the `#contributing` channel of our [Discord](https://discord.gg/RSNjgaugJs). 
+We're always glad to talk about new ideas, help you get set up, and make sure your changes align with our vision for the project! Feel free to shoot Mat or Andrew a message, or start chatting with us in the `#contributing` channel of our [Discord](https://discord.gg/RSNjgaugJs).
 
 
 ## Submitting a Pull Request

From 7dda4bdc08de604769ba4f542cd81fcbc06af5b3 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 15 Dec 2024 00:30:21 -0800
Subject: [PATCH 02/21] add editor pane

---
 .../void/browser/void.contribution.ts         |  15 +++
 .../platform/void/common/void.contribution.ts |  11 --
 .../contrib/void/browser/findDiffs.ts         |   2 +-
 .../{util/diffLines.tsx => diff/index.tsx}    |   0
 .../browser/react/src/sidebar-tsx/Sidebar.tsx |  20 +--
 .../react/src/sidebar-tsx/SidebarChat.tsx     |   4 +-
 .../browser/react/src/sidebar-tsx/index.tsx   |   6 +
 .../browser/react/src/sidebar-tsx/inputs.tsx  |   8 +-
 .../react/src/util/mountFnGenerator.tsx       |   2 +-
 .../void/browser/react/src/util/services.tsx  |   3 +-
 .../ModelSelectionSettings.tsx                |   2 +-
 .../VoidProviderSettings.tsx                  |   4 +-
 .../src/void-settings-tsx/VoidSettings.tsx    |  13 ++
 .../react/src/void-settings-tsx/index.tsx     |   6 +
 .../contrib/void/browser/react/tsup.config.js |   5 +-
 .../contrib/void/browser/reactServices.ts     |  51 ++++++++
 .../contrib/void/browser/registerActions.ts   |  36 +++---
 .../contrib/void/browser/registerSidebar.ts   |  73 +++--------
 .../contrib/void/browser/void.contribution.ts |   3 +
 .../void/browser/voidSettingsEditorPane.ts    | 116 ++++++++++++++++++
 src/vs/workbench/workbench.common.main.ts     |   2 +-
 21 files changed, 265 insertions(+), 117 deletions(-)
 create mode 100644 src/vs/platform/void/browser/void.contribution.ts
 delete mode 100644 src/vs/platform/void/common/void.contribution.ts
 rename src/vs/workbench/contrib/void/browser/react/src/{util/diffLines.tsx => diff/index.tsx} (100%)
 create mode 100644 src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/index.tsx
 rename src/vs/workbench/contrib/void/browser/react/src/{sidebar-tsx => void-settings-tsx}/ModelSelectionSettings.tsx (98%)
 rename src/vs/workbench/contrib/void/browser/react/src/{sidebar-tsx => void-settings-tsx}/VoidProviderSettings.tsx (96%)
 create mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx
 create mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
 create mode 100644 src/vs/workbench/contrib/void/browser/reactServices.ts
 create mode 100644 src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts

diff --git a/src/vs/platform/void/browser/void.contribution.ts b/src/vs/platform/void/browser/void.contribution.ts
new file mode 100644
index 00000000..5209680d
--- /dev/null
+++ b/src/vs/platform/void/browser/void.contribution.ts
@@ -0,0 +1,15 @@
+
+
+// ---------- common ----------
+
+// llmMessage
+import '../common/llmMessageService.js'
+
+// voidConfig
+import '../common/voidConfigService.js'
+
+// refreshModel
+import '../common/refreshModelService.js'
+
+// metrics
+import '../common/metricsService.js'
diff --git a/src/vs/platform/void/common/void.contribution.ts b/src/vs/platform/void/common/void.contribution.ts
deleted file mode 100644
index 2e12fb9c..00000000
--- a/src/vs/platform/void/common/void.contribution.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// llmMessage
-import './llmMessageService.js'
-
-// voidConfig
-import './voidConfigService.js'
-
-// refreshModel
-import './refreshModelService.js'
-
-// metrics
-import './metricsService.js'
diff --git a/src/vs/workbench/contrib/void/browser/findDiffs.ts b/src/vs/workbench/contrib/void/browser/findDiffs.ts
index 32b893e4..60643e32 100644
--- a/src/vs/workbench/contrib/void/browser/findDiffs.ts
+++ b/src/vs/workbench/contrib/void/browser/findDiffs.ts
@@ -3,7 +3,7 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { diffLines } from './react/out/util/diffLines.js'
+import { diffLines } from './react/out/diff/index.js'
 
 export type ComputedDiff = {
 	type: 'edit';
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/diffLines.tsx b/src/vs/workbench/contrib/void/browser/react/src/diff/index.tsx
similarity index 100%
rename from src/vs/workbench/contrib/void/browser/react/src/util/diffLines.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/diff/index.tsx
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index d605e2d8..e4714679 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -15,11 +15,11 @@ import { useSidebarState } from '../util/services.js';
 import '../styles.css'
 import { SidebarThreadSelector } from './SidebarThreadSelector.js';
 import { SidebarChat } from './SidebarChat.js';
-import { ModelSelectionSettings } from './ModelSelectionSettings.js';
-import { VoidProviderSettings } from './VoidProviderSettings.js';
+import { ModelSelectionSettings } from '../void-settings-tsx/ModelSelectionSettings.js';
+import { VoidProviderSettings } from '../void-settings-tsx/VoidProviderSettings.js';
 import ErrorBoundary from './ErrorBoundary.js';
 
-const Sidebar = () => {
+export const Sidebar = () => {
 	const sidebarState = useSidebarState()
 	const { isHistoryOpen, currentTab: tab } = sidebarState
 
@@ -43,16 +43,6 @@ const Sidebar = () => {
 				<ErrorBoundary>
 					<SidebarChat />
 				</ErrorBoundary>
-
-				<ErrorBoundary>
-					<ModelSelectionSettings />
-				</ErrorBoundary>
-			</div>
-
-			<div className={`${tab === 'settings' ? '' : 'hidden'}`}>
-				<ErrorBoundary>
-					<VoidProviderSettings />
-				</ErrorBoundary>
 			</div>
 
 		</div>
@@ -61,7 +51,3 @@ const Sidebar = () => {
 
 }
 
-
-const mountFn = mountFnGenerator(Sidebar)
-export default mountFn
-
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index f45c0e9c..13ee1b6c 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -22,7 +22,7 @@ import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platf
 import { getCmdKey } from '../../../getCmdKey.js'
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { VoidInputBox } from './inputs.js';
-import { ModelSelectionOfFeature } from './ModelSelectionSettings.js';
+import { ModelSelectionOfFeature } from '../void-settings-tsx/ModelSelectionSettings.js';
 
 
 const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
@@ -202,7 +202,7 @@ const ChatBubble = ({ chatMessage }: {
 	}
 
 	return <div className={`${role === 'user' ? 'text-right' : 'text-left'}`}>
-		<div className={`inline-block p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full`}>
+		<div className={`inline-block p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full overflow-auto`}>
 			{chatbubbleContents}
 		</div>
 	</div>
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/index.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/index.tsx
new file mode 100644
index 00000000..a174f0ad
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/index.tsx
@@ -0,0 +1,6 @@
+import { mountFnGenerator } from '../util/mountFnGenerator.js'
+import { Sidebar } from './Sidebar.js'
+
+export const mountSidebar = mountFnGenerator(Sidebar)
+
+
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
index 896762fe..017ed131 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
@@ -5,9 +5,9 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useService } from '../util/services.js';
-import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
-import { defaultCheckboxStyles, defaultInputBoxStyles, defaultSelectBoxStyles, defaultToggleStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
-import { SelectBox, unthemedSelectBoxStyles } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
+import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
+import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
+import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
 
 
@@ -125,7 +125,7 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 				instance.render(containerRef.current)
 
 			disposables.push(
-				instance.onDidSelect(e => { onChangeSelection(options[e.index].value ); })
+				instance.onDidSelect(e => { onChangeSelection(options[e.index].value); })
 			)
 
 			if (onCreateInstance) {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
index d6b24f8c..56524b60 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
@@ -5,8 +5,8 @@
 
 import React, { useEffect, useState } from 'react';
 import * as ReactDOM from 'react-dom/client'
-import { ReactServicesType, VoidSidebarState } from '../../../registerSidebar.js';
 import { _registerServices } from './services.js';
+import { ReactServicesType } from '../../../reactServices.js';
 
 
 export const mountFnGenerator = (Component: React.FC) => (rootElement: HTMLElement, services: ReactServicesType) => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
index 975f5be6..25fb80f3 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
@@ -4,11 +4,12 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { useState, useEffect } from 'react'
-import { VoidSidebarState, ReactServicesType } from '../../../registerSidebar.js'
+import { VoidSidebarState } from '../../../registerSidebar.js'
 import { ThreadsState } from '../../../registerThreads.js'
 import { SettingsOfProvider } from '../../../../../../../platform/void/common/voidConfigTypes.js'
 import { RefreshModelState } from '../../../../../../../platform/void/common/refreshModelService.js'
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js'
+import { ReactServicesType } from '../../../reactServices.js'
 
 
 // normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
similarity index 98%
rename from src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
index c7f61fdf..e13f0aea 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
@@ -7,7 +7,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import { FeatureName, featureNames, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidConfigTypes.js'
 import { dummyModelData } from '../../../../../../../platform/void/common/voidConfigModelDefaults.js'
 import { useConfigState, useRefreshModelState, useService } from '../util/services.js'
-import { VoidSelectBox } from './inputs.js'
+import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
similarity index 96%
rename from src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
index f85cc74e..33a1b95c 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/VoidProviderSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
@@ -5,10 +5,10 @@
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames, featureNames, SettingsOfProvider, SettingName, defaultVoidProviderState } from '../../../../../../../platform/void/common/voidConfigTypes.js'
-import { VoidInputBox } from './inputs.js'
+import { VoidInputBox } from '../sidebar-tsx/inputs.js'
 import { useConfigState, useService } from '../util/services.js'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
-import ErrorBoundary from './ErrorBoundary.js'
+import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
 
 
 const Setting = ({ providerName, settingName }: { providerName: ProviderName, settingName: SettingName }) => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx
new file mode 100644
index 00000000..ecf60499
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx
@@ -0,0 +1,13 @@
+import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
+import { VoidProviderSettings } from './VoidProviderSettings.js'
+
+
+export const VoidSettings = () => {
+	return <>
+		<ErrorBoundary>
+			<VoidProviderSettings />
+		</ErrorBoundary>
+	</>
+}
+
+
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
new file mode 100644
index 00000000..ee89ffab
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
@@ -0,0 +1,6 @@
+import { mountFnGenerator } from '../util/mountFnGenerator.js'
+import { VoidSettings } from './VoidSettings.js'
+
+export const mountVoidSettings = mountFnGenerator(VoidSettings)
+
+
diff --git a/src/vs/workbench/contrib/void/browser/react/tsup.config.js b/src/vs/workbench/contrib/void/browser/react/tsup.config.js
index c190a71e..5e0df9c0 100644
--- a/src/vs/workbench/contrib/void/browser/react/tsup.config.js
+++ b/src/vs/workbench/contrib/void/browser/react/tsup.config.js
@@ -7,8 +7,9 @@ import { defineConfig } from 'tsup'
 
 export default defineConfig({
 	entry: [
-		'./src2/sidebar-tsx/Sidebar.tsx',
-		'./src2/util/diffLines.tsx',
+		'./src2/sidebar-tsx/index.tsx',
+		'./src2/void-settings-tsx/index.tsx',
+		'./src2/diff/index.tsx',
 	],
 	outDir: './out',
 	format: ['esm'],
diff --git a/src/vs/workbench/contrib/void/browser/reactServices.ts b/src/vs/workbench/contrib/void/browser/reactServices.ts
new file mode 100644
index 00000000..e465ca93
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/reactServices.ts
@@ -0,0 +1,51 @@
+import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
+import { IModelService } from '../../../../editor/common/services/model.js';
+import { IClipboardService } from '../../../../platform/clipboard/common/clipboardService.js';
+import { IContextViewService, IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
+import { IFileService } from '../../../../platform/files/common/files.js';
+import { IHoverService } from '../../../../platform/hover/browser/hover.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { ILLMMessageService } from '../../../../platform/void/common/llmMessageService.js';
+import { IRefreshModelService } from '../../../../platform/void/common/refreshModelService.js';
+import { IVoidConfigStateService } from '../../../../platform/void/common/voidConfigService.js';
+import { IInlineDiffsService } from './registerInlineDiffs.js';
+import { IVoidSidebarStateService } from './registerSidebar.js';
+import { IThreadHistoryService } from './registerThreads.js';
+
+export type ReactServicesType = {
+	sidebarStateService: IVoidSidebarStateService;
+	configStateService: IVoidConfigStateService;
+	threadsStateService: IThreadHistoryService;
+	fileService: IFileService;
+	modelService: IModelService;
+	inlineDiffService: IInlineDiffsService;
+	llmMessageService: ILLMMessageService;
+	clipboardService: IClipboardService;
+	refreshModelService: IRefreshModelService;
+
+	themeService: IThemeService,
+	hoverService: IHoverService,
+
+	contextViewService: IContextViewService;
+	contextMenuService: IContextMenuService;
+}
+
+
+export const getReactServices = (accessor: ServicesAccessor): ReactServicesType => {
+	return {
+		configStateService: accessor.get(IVoidConfigStateService),
+		sidebarStateService: accessor.get(IVoidSidebarStateService),
+		threadsStateService: accessor.get(IThreadHistoryService),
+		fileService: accessor.get(IFileService),
+		modelService: accessor.get(IModelService),
+		inlineDiffService: accessor.get(IInlineDiffsService),
+		llmMessageService: accessor.get(ILLMMessageService),
+		clipboardService: accessor.get(IClipboardService),
+		themeService: accessor.get(IThemeService),
+		hoverService: accessor.get(IHoverService),
+		refreshModelService: accessor.get(IRefreshModelService),
+		contextViewService: accessor.get(IContextViewService),
+		contextMenuService: accessor.get(IContextMenuService),
+	}
+}
+
diff --git a/src/vs/workbench/contrib/void/browser/registerActions.ts b/src/vs/workbench/contrib/void/browser/registerActions.ts
index d46f6bb4..ee6fcdef 100644
--- a/src/vs/workbench/contrib/void/browser/registerActions.ts
+++ b/src/vs/workbench/contrib/void/browser/registerActions.ts
@@ -150,23 +150,23 @@ registerAction2(class extends Action2 {
 	}
 })
 
-// Settings (API config) menu button
-registerAction2(class extends Action2 {
-	constructor() {
-		super({
-			id: 'void.viewSettings',
-			title: 'Void Settings',
-			icon: { id: 'settings-gear' },
-			menu: [{ id: MenuId.ViewTitle, group: 'navigation', when: ContextKeyExpr.equals('view', VOID_VIEW_ID), }]
-		});
-	}
-	async run(accessor: ServicesAccessor): Promise<void> {
-		const stateService = accessor.get(IVoidSidebarStateService)
-		const metricsService = accessor.get(IMetricsService)
+// // Settings (API config) menu button
+// registerAction2(class extends Action2 {
+// 	constructor() {
+// 		super({
+// 			id: 'void.viewSettings',
+// 			title: 'Void Settings',
+// 			icon: { id: 'settings-gear' },
+// 			menu: [{ id: MenuId.ViewTitle, group: 'navigation', when: ContextKeyExpr.equals('view', VOID_VIEW_ID), }]
+// 		});
+// 	}
+// 	async run(accessor: ServicesAccessor): Promise<void> {
+// 		const stateService = accessor.get(IVoidSidebarStateService)
+// 		const metricsService = accessor.get(IMetricsService)
 
-		metricsService.capture('Chat Navigation', { type: 'Settings' })
+// 		metricsService.capture('Chat Navigation', { type: 'Settings' })
 
-		stateService.setState({ isHistoryOpen: false, currentTab: stateService.state.currentTab === 'settings' ? 'chat' : 'settings' })
-		stateService.fireBlurChat()
-	}
-})
+// 		stateService.setState({ isHistoryOpen: false, currentTab: stateService.state.currentTab === 'settings' ? 'chat' : 'settings' })
+// 		stateService.fireBlurChat()
+// 	}
+// })
diff --git a/src/vs/workbench/contrib/void/browser/registerSidebar.ts b/src/vs/workbench/contrib/void/browser/registerSidebar.ts
index 2c7104cf..6bed1eee 100644
--- a/src/vs/workbench/contrib/void/browser/registerSidebar.ts
+++ b/src/vs/workbench/contrib/void/browser/registerSidebar.ts
@@ -18,7 +18,7 @@ import * as nls from '../../../../nls.js';
 import { ViewPaneContainer } from '../../../browser/parts/views/viewPaneContainer.js';
 
 import { SyncDescriptor } from '../../../../platform/instantiation/common/descriptors.js';
-import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
+// import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
 
 
 import { IViewPaneOptions, ViewPane } from '../../../browser/parts/views/viewPane.js';
@@ -27,51 +27,26 @@ import { IContextKeyService } from '../../../../platform/contextkey/common/conte
 import { createDecorator, IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
 import { Disposable, IDisposable } from '../../../../base/common/lifecycle.js';
 import { Emitter, Event } from '../../../../base/common/event.js';
-import { IThreadHistoryService } from './registerThreads.js';
 import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
-import { IContextMenuService, IContextViewService } from '../../../../platform/contextview/browser/contextView.js';
+import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
 import { IKeybindingService } from '../../../../platform/keybinding/common/keybinding.js';
 import { IOpenerService } from '../../../../platform/opener/common/opener.js';
 import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
 import { IHoverService } from '../../../../platform/hover/browser/hover.js';
 
-import mountFn from './react/out/sidebar-tsx/Sidebar.js';
+import { mountSidebar } from './react/out/sidebar-tsx/index.js';
 
-import { IVoidConfigStateService } from '../../../../platform/void/common/voidConfigService.js';
-import { IFileService } from '../../../../platform/files/common/files.js';
-import { IInlineDiffsService } from './registerInlineDiffs.js';
-import { IModelService } from '../../../../editor/common/services/model.js';
-import { ILLMMessageService } from '../../../../platform/void/common/llmMessageService.js';
-import { IClipboardService } from '../../../../platform/clipboard/common/clipboardService.js';
 import { IViewsService } from '../../../services/views/common/viewsService.js';
 import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
-import { IRefreshModelService } from '../../../../platform/void/common/refreshModelService.js';
+import { getReactServices } from './reactServices.js';
 
 
 // compare against search.contribution.ts and debug.contribution.ts, scm.contribution.ts (source control)
 
 export type VoidSidebarState = {
 	isHistoryOpen: boolean;
-	currentTab: 'chat' | 'settings';
-}
-
-export type ReactServicesType = {
-	sidebarStateService: IVoidSidebarStateService;
-	configStateService: IVoidConfigStateService;
-	threadsStateService: IThreadHistoryService;
-	fileService: IFileService;
-	modelService: IModelService;
-	inlineDiffService: IInlineDiffsService;
-	llmMessageService: ILLMMessageService;
-	clipboardService: IClipboardService;
-	refreshModelService: IRefreshModelService;
-
-	themeService: IThemeService,
-	hoverService: IHoverService,
-
-	contextViewService: IContextViewService;
-	contextMenuService: IContextMenuService;
+	currentTab: 'chat';
 }
 
 // ---------- Define viewpane ----------
@@ -104,24 +79,10 @@ class VoidSidebarViewPane extends ViewPane {
 
 		// gets set immediately
 		this.instantiationService.invokeFunction(accessor => {
-			const services: ReactServicesType = {
-				configStateService: accessor.get(IVoidConfigStateService),
-				sidebarStateService: accessor.get(IVoidSidebarStateService),
-				threadsStateService: accessor.get(IThreadHistoryService),
-				fileService: accessor.get(IFileService),
-				modelService: accessor.get(IModelService),
-				inlineDiffService: accessor.get(IInlineDiffsService),
-				llmMessageService: accessor.get(ILLMMessageService),
-				clipboardService: accessor.get(IClipboardService),
-				themeService: accessor.get(IThemeService),
-				hoverService: accessor.get(IHoverService),
-				refreshModelService: accessor.get(IRefreshModelService),
-				contextViewService: accessor.get(IContextViewService),
-				contextMenuService: accessor.get(IContextMenuService),
-			}
+			const services = getReactServices(accessor)
 
 			// mount react
-			const disposables: IDisposable[] | undefined = mountFn(parent, services);
+			const disposables: IDisposable[] | undefined = mountSidebar(parent, services);
 			disposables?.forEach(d => this._register(d))
 		});
 	}
@@ -143,12 +104,12 @@ export const VOID_VIEW_ID = VOID_VIEW_CONTAINER_ID // simplicity
 const viewContainerRegistry = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry);
 const viewContainer = viewContainerRegistry.registerViewContainer({
 	id: VOID_VIEW_CONTAINER_ID,
-	title: nls.localize2('void', 'Void Chat'), // this is used to say "Void" (Ctrl + L)
+	title: nls.localize2('void chat', 'Void Chat'), // this is used to say "Void" (Ctrl + L)
 	ctorDescriptor: new SyncDescriptor(ViewPaneContainer, [VOID_VIEW_CONTAINER_ID, { mergeViewWithContainerWhenSingleView: true }]),
 	hideIfEmpty: false,
 	// icon: voidViewIcon,
 	order: 1,
-}, ViewContainerLocation.AuxiliaryBar, { doNotRegisterOpenCommand: true, });
+}, ViewContainerLocation.AuxiliaryBar, { doNotRegisterOpenCommand: true, isDefault: true });
 
 
 
@@ -158,17 +119,17 @@ viewsRegistry.registerViews([{
 	id: VOID_VIEW_ID,
 	hideByDefault: false, // start open
 	// containerIcon: voidViewIcon,
-	name: nls.localize2('void chat', "Chat"), // this says ... : CHAT
+	name: nls.localize2('chat', 'Chat'), // this says ... : CHAT
 	ctorDescriptor: new SyncDescriptor(VoidSidebarViewPane),
 	canToggleVisibility: false,
 	canMoveView: true,
-	openCommandActionDescriptor: {
-		id: viewContainer.id,
-		keybindings: {
-			primary: KeyMod.CtrlCmd | KeyCode.KeyL,
-		},
-		order: 1
-	},
+	// openCommandActionDescriptor: {
+	// 	id: viewContainer.id,
+	// 	keybindings: {
+	// 		primary: KeyMod.CtrlCmd | KeyCode.KeyL,
+	// 	},
+	// 	order: 1
+	// },
 }], viewContainer);
 
 
diff --git a/src/vs/workbench/contrib/void/browser/void.contribution.ts b/src/vs/workbench/contrib/void/browser/void.contribution.ts
index 2dde5f70..dbb6f0ab 100644
--- a/src/vs/workbench/contrib/void/browser/void.contribution.ts
+++ b/src/vs/workbench/contrib/void/browser/void.contribution.ts
@@ -20,3 +20,6 @@ import './registerAutocomplete.js'
 
 // register css
 import './media/void.css'
+
+// settings pane
+import './voidSettingsEditorPane.js'
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts
new file mode 100644
index 00000000..cb5f4732
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts
@@ -0,0 +1,116 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Glass Devtools, Inc. All rights reserved.
+ *  Void Editor additions licensed under the AGPL 3.0 License.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { EditorInput } from '../../../common/editor/editorInput.js';
+import * as nls from '../../../../nls.js';
+import { EditorExtensions } from '../../../common/editor.js';
+import { EditorPane } from '../../../browser/parts/editor/editorPane.js';
+import { IEditorGroup } from '../../../services/editor/common/editorGroupsService.js';
+import { ITelemetryService } from '../../../../platform/telemetry/common/telemetry.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { IStorageService } from '../../../../platform/storage/common/storage.js';
+import { Dimension } from '../../../../base/browser/dom.js';
+import { EditorPaneDescriptor, IEditorPaneRegistry } from '../../../browser/editor.js';
+import { SyncDescriptor } from '../../../../platform/instantiation/common/descriptors.js';
+import { Action2, registerAction2 } from '../../../../platform/actions/common/actions.js';
+import { KeybindingWeight } from '../../../../platform/keybinding/common/keybindingsRegistry.js';
+import { Registry } from '../../../../platform/registry/common/platform.js';
+import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
+import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
+import { IEditorService } from '../../../services/editor/common/editorService.js';
+import { URI } from '../../../../base/common/uri.js';
+import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextkey.js';
+
+
+import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
+import { getReactServices } from './reactServices.js';
+
+
+// refer to preferences.contribution.ts keybindings editor
+
+export class VoidEditorInput extends EditorInput {
+
+	static readonly ID: string = 'workbench.input.void.settings';
+
+	readonly resource = URI.from({
+		scheme: 'void-editor-settings',
+		path: 'void-settings'  // Give it a unique path
+	});
+
+	constructor() {
+		super();
+	}
+
+	override get typeId(): string {
+		return VoidEditorInput.ID;
+	}
+
+	override getName(): string {
+		return nls.localize('voidSettingsInputsName', "Void Settings");
+	}
+
+}
+
+
+class MyCustomPane extends EditorPane {
+	static readonly ID = 'workbench.test.myCustomPane';
+
+	constructor(
+		group: IEditorGroup,
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService themeService: IThemeService,
+		@IStorageService storageService: IStorageService,
+		@IInstantiationService private readonly instantiationService: IInstantiationService
+	) {
+		super(MyCustomPane.ID, group, telemetryService, themeService, storageService);
+	}
+
+	protected createEditor(container: HTMLElement): void {
+
+		this.instantiationService.invokeFunction(accessor => {
+			const services = getReactServices(accessor)
+			mountVoidSettings(container, services);
+		})
+	}
+
+	layout(dimension: Dimension): void {
+		const container = this.getContainer();
+		if (!container) return;
+
+		container.style.width = `${dimension.width}px`;
+		container.style.height = `${dimension.height}px`;
+	}
+}
+
+
+
+Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
+	EditorPaneDescriptor.create(MyCustomPane, MyCustomPane.ID, nls.localize('MyCustomPane', "CustomPane")),
+	[new SyncDescriptor(VoidEditorInput)]
+);
+
+
+// Register the action
+registerAction2(class extends Action2 {
+	constructor() {
+		super({
+			id: 'workbench.action.openVoidEditor',
+			title: 'Open Void Settings',
+			keybinding: {
+				when: ContextKeyExpr.true(),
+				primary: KeyMod.CtrlCmd | KeyCode.KeyE,
+				weight: KeybindingWeight.WorkbenchContrib
+			}
+		});
+	}
+	async run(accessor: ServicesAccessor): Promise<void> {
+		const editorService = accessor.get(IEditorService);
+		const instantiationService = accessor.get(IInstantiationService);
+		const input = instantiationService.createInstance(VoidEditorInput);
+		await editorService.openEditor(input);
+	}
+});
+
diff --git a/src/vs/workbench/workbench.common.main.ts b/src/vs/workbench/workbench.common.main.ts
index e1ea851c..36bd6ad4 100644
--- a/src/vs/workbench/workbench.common.main.ts
+++ b/src/vs/workbench/workbench.common.main.ts
@@ -17,7 +17,7 @@ import './browser/workbench.contribution.js';
 //#region --- Void
 // Void added this:
 import './contrib/void/browser/void.contribution.js';
-import '../platform/void/common/void.contribution.js';
+import '../platform/void/browser/void.contribution.js';
 //#endregion
 
 

From 0589a2a5ece6d88c4c891251d244c3172bc898b0 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 15 Dec 2024 01:11:07 -0800
Subject: [PATCH 03/21] remove maxtokens

---
 .../void/common/voidConfigModelDefaults.ts    | 58 ------------
 .../platform/void/common/voidConfigTypes.ts   | 94 +++++++++++++++----
 .../electron-main/llmMessage/anthropic.ts     |  7 +-
 .../void/electron-main/llmMessage/groq.ts     |  3 +-
 .../void/electron-main/llmMessage/ollama.ts   |  3 +-
 .../void/electron-main/llmMessage/openai.ts   |  8 +-
 .../void/electron-main/llmMessage/util.ts     | 14 ---
 .../ModelSelectionSettings.tsx                |  2 +-
 8 files changed, 88 insertions(+), 101 deletions(-)
 delete mode 100644 src/vs/platform/void/common/voidConfigModelDefaults.ts
 delete mode 100644 src/vs/platform/void/electron-main/llmMessage/util.ts

diff --git a/src/vs/platform/void/common/voidConfigModelDefaults.ts b/src/vs/platform/void/common/voidConfigModelDefaults.ts
deleted file mode 100644
index 8d2fc0f2..00000000
--- a/src/vs/platform/void/common/voidConfigModelDefaults.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-
-
-export const defaultAnthropicModels = [
-	'claude-3-5-sonnet-20240620',
-	// 'claude-3-opus-20240229',
-	// 'claude-3-sonnet-20240229',
-	// 'claude-3-haiku-20240307'
-]
-
-
-export const defaultOpenAIModels = [
-	'o1-preview',
-	'o1-mini',
-	'gpt-4o',
-	'gpt-4o-mini',
-	// 'gpt-4o-2024-05-13',
-	// 'gpt-4o-2024-08-06',
-	// 'gpt-4o-mini-2024-07-18',
-	// 'gpt-4-turbo',
-	// 'gpt-4-turbo-2024-04-09',
-	// 'gpt-4-turbo-preview',
-	// 'gpt-4-0125-preview',
-	// 'gpt-4-1106-preview',
-	// 'gpt-4',
-	// 'gpt-4-0613',
-	// 'gpt-3.5-turbo-0125',
-	// 'gpt-3.5-turbo',
-	// 'gpt-3.5-turbo-1106',
-]
-
-
-
-export const defaultGroqModels = [
-	"mixtral-8x7b-32768",
-	"llama2-70b-4096",
-	"gemma-7b-it"
-]
-
-
-export const defaultGeminiModels = [
-	'gemini-1.5-flash',
-	'gemini-1.5-pro',
-	'gemini-1.5-flash-8b',
-	'gemini-1.0-pro'
-]
-
-
-
-
-
-export const dummyModelData = {
-	anthropic: ['claude 3.5'],
-	openAI: ['gpt 4o'],
-	ollama: ['llama 3.2', 'codestral'],
-	openRouter: ['qwen 2.5'],
-}
-
-
diff --git a/src/vs/platform/void/common/voidConfigTypes.ts b/src/vs/platform/void/common/voidConfigTypes.ts
index cdd3e18f..5415af4b 100644
--- a/src/vs/platform/void/common/voidConfigTypes.ts
+++ b/src/vs/platform/void/common/voidConfigTypes.ts
@@ -4,7 +4,84 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { defaultAnthropicModels, defaultGeminiModels, defaultGroqModels, defaultOpenAIModels } from './voidConfigModelDefaults.js'
+
+// https://docs.anthropic.com/en/docs/about-claude/models
+export const defaultAnthropicModels = [
+	'claude-3-5-sonnet-20241022',
+	'claude-3-5-haiku-20241022',
+	'claude-3-opus-20240229',
+	'claude-3-sonnet-20240229',
+	// 'claude-3-haiku-20240307',
+]
+
+
+export const defaultOpenAIModels = [
+	'o1-preview',
+	'o1-mini',
+	'gpt-4o',
+	'gpt-4o-mini',
+	// 'gpt-4o-2024-05-13',
+	// 'gpt-4o-2024-08-06',
+	// 'gpt-4o-mini-2024-07-18',
+	// 'gpt-4-turbo',
+	// 'gpt-4-turbo-2024-04-09',
+	// 'gpt-4-turbo-preview',
+	// 'gpt-4-0125-preview',
+	// 'gpt-4-1106-preview',
+	// 'gpt-4',
+	// 'gpt-4-0613',
+	// 'gpt-3.5-turbo-0125',
+	// 'gpt-3.5-turbo',
+	// 'gpt-3.5-turbo-1106',
+]
+
+
+
+export const defaultGroqModels = [
+	"mixtral-8x7b-32768",
+	"llama2-70b-4096",
+	"gemma-7b-it"
+]
+
+
+export const defaultGeminiModels = [
+	'gemini-1.5-flash',
+	'gemini-1.5-pro',
+	'gemini-1.5-flash-8b',
+	'gemini-1.0-pro'
+]
+
+
+
+// export const parseMaxTokensStr = (maxTokensStr: string) => {
+// 	// parse the string but only if the full string is a valid number, eg parseInt('100abc') should return NaN
+// 	const int = isNaN(Number(maxTokensStr)) ? undefined : parseInt(maxTokensStr)
+// 	if (Number.isNaN(int))
+// 		return undefined
+// 	return int
+// }
+
+
+
+
+export const anthropicMaxPossibleTokens = (modelName: string) => {
+	if (modelName === 'claude-3-5-sonnet-20241022'
+		|| modelName === 'claude-3-5-haiku-20241022')
+		return 8192
+	if (modelName === 'claude-3-opus-20240229'
+		|| modelName === 'claude-3-sonnet-20240229'
+		|| modelName === 'claude-3-haiku-20240307')
+		return 4096
+	return 1024 // return a reasonably small number if they're using a different model
+}
+
+
+export const dummyModelData = {
+	anthropic: ['claude 3.5'],
+	openAI: ['gpt 4o'],
+	ollama: ['llama 3.2', 'codestral'],
+	openRouter: ['qwen 2.5'],
+}
 
 
 
@@ -74,7 +151,6 @@ export type SettingsOfProvider = {
 		&
 		{
 			enabled: string, // 'true' | 'false'
-			maxTokens: string,
 
 			models: string[], // if null, user can type in any string as a model
 		})
@@ -137,13 +213,6 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 					: '(never)',
 		}
 	}
-	else if (settingName === 'maxTokens') {
-		return {
-			title: 'Max Tokens',
-			type: 'number',
-			placeholder: '1024',
-		}
-	}
 	else if (settingName === 'enabled') {
 		return {
 			title: 'Enabled?',
@@ -170,43 +239,36 @@ export const defaultVoidProviderState: SettingsOfProvider = {
 		...voidProviderDefaults.anthropic,
 		...voidInitModelOptions.anthropic,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	openAI: {
 		...voidProviderDefaults.openAI,
 		...voidInitModelOptions.openAI,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	ollama: {
 		...voidProviderDefaults.ollama,
 		...voidInitModelOptions.ollama,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	openRouter: {
 		...voidProviderDefaults.openRouter,
 		...voidInitModelOptions.openRouter,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	openAICompatible: {
 		...voidProviderDefaults.openAICompatible,
 		...voidInitModelOptions.openAICompatible,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	gemini: {
 		...voidProviderDefaults.gemini,
 		...voidInitModelOptions.gemini,
 		enabled: 'false',
-		maxTokens: '',
 	},
 	groq: {
 		...voidProviderDefaults.groq,
 		...voidInitModelOptions.groq,
 		enabled: 'false',
-		maxTokens: '',
 	}
 }
 
diff --git a/src/vs/platform/void/electron-main/llmMessage/anthropic.ts b/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
index 86282282..964047b2 100644
--- a/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
+++ b/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
@@ -4,9 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 import Anthropic from '@anthropic-ai/sdk';
-import { parseMaxTokensStr } from './util.js';
 import { _InternalSendLLMMessageFnType } from '../../common/llmMessageTypes.js';
-import { displayInfoOfSettingName } from '../../common/voidConfigTypes.js';
+import { anthropicMaxPossibleTokens } from '../../common/voidConfigTypes.js';
 
 // Anthropic
 type LLMMessageAnthropic = {
@@ -17,9 +16,9 @@ export const sendAnthropicMsg: _InternalSendLLMMessageFnType = ({ messages, onTe
 
 	const thisConfig = settingsOfProvider.anthropic
 
-	const maxTokens = parseMaxTokensStr(thisConfig.maxTokens)
+	const maxTokens = anthropicMaxPossibleTokens(modelName)
 	if (maxTokens === undefined) {
-		onError({ message: `Please set a value for ${displayInfoOfSettingName('anthropic', 'maxTokens').title}.`, fullError: null })
+		onError({ message: `Please set a value for Max Tokens.`, fullError: null })
 		return
 	}
 
diff --git a/src/vs/platform/void/electron-main/llmMessage/groq.ts b/src/vs/platform/void/electron-main/llmMessage/groq.ts
index 5ab59211..1b5918a7 100644
--- a/src/vs/platform/void/electron-main/llmMessage/groq.ts
+++ b/src/vs/platform/void/electron-main/llmMessage/groq.ts
@@ -5,7 +5,6 @@
 
 import Groq from 'groq-sdk';
 import { _InternalSendLLMMessageFnType } from '../../common/llmMessageTypes.js';
-import { parseMaxTokensStr } from './util.js';
 
 // Groq
 export const sendGroqMsg: _InternalSendLLMMessageFnType = async ({ messages, onText, onFinalMessage, onError, settingsOfProvider, modelName, _setAborter }) => {
@@ -24,7 +23,7 @@ export const sendGroqMsg: _InternalSendLLMMessageFnType = async ({ messages, onT
 			model: modelName,
 			stream: true,
 			temperature: 0.7,
-			max_tokens: parseMaxTokensStr(thisConfig.maxTokens),
+			// max_tokens: parseMaxTokensStr(thisConfig.maxTokens),
 		})
 		.then(async response => {
 			_setAborter(() => response.controller.abort())
diff --git a/src/vs/platform/void/electron-main/llmMessage/ollama.ts b/src/vs/platform/void/electron-main/llmMessage/ollama.ts
index ba04e117..03cf29dc 100644
--- a/src/vs/platform/void/electron-main/llmMessage/ollama.ts
+++ b/src/vs/platform/void/electron-main/llmMessage/ollama.ts
@@ -5,7 +5,6 @@
 
 import { Ollama } from 'ollama';
 import { _InternalOllamaListFnType, _InternalSendLLMMessageFnType, ModelResponse } from '../../common/llmMessageTypes.js';
-import { parseMaxTokensStr } from './util.js';
 
 export const ollamaList: _InternalOllamaListFnType = async ({ onSuccess: onSuccess_, onError: onError_, settingsOfProvider }) => {
 
@@ -49,7 +48,7 @@ export const sendOllamaMsg: _InternalSendLLMMessageFnType = ({ messages, onText,
 		model: modelName,
 		messages: messages,
 		stream: true,
-		options: { num_predict: parseMaxTokensStr(thisConfig.maxTokens) } // this is max_tokens
+		// options: { num_predict: parseMaxTokensStr(thisConfig.maxTokens) } // this is max_tokens
 	})
 		.then(async stream => {
 			_setAborter(() => stream.abort())
diff --git a/src/vs/platform/void/electron-main/llmMessage/openai.ts b/src/vs/platform/void/electron-main/llmMessage/openai.ts
index 3b8c3645..03eb7761 100644
--- a/src/vs/platform/void/electron-main/llmMessage/openai.ts
+++ b/src/vs/platform/void/electron-main/llmMessage/openai.ts
@@ -5,7 +5,7 @@
 
 import OpenAI from 'openai';
 import { _InternalSendLLMMessageFnType } from '../../common/llmMessageTypes.js';
-import { parseMaxTokensStr } from './util.js';
+// import { parseMaxTokensStr } from './util.js';
 
 
 // OpenAI, OpenRouter, OpenAICompatible
@@ -20,7 +20,7 @@ export const sendOpenAIMsg: _InternalSendLLMMessageFnType = ({ messages, onText,
 	if (providerName === 'openAI') {
 		const thisConfig = settingsOfProvider.openAI
 		openai = new OpenAI({ apiKey: thisConfig.apiKey, dangerouslyAllowBrowser: true });
-		options = { model: modelName, messages: messages, stream: true, max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens) }
+		options = { model: modelName, messages: messages, stream: true, /*max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens)*/ }
 	}
 	else if (providerName === 'openRouter') {
 		const thisConfig = settingsOfProvider.openRouter
@@ -31,12 +31,12 @@ export const sendOpenAIMsg: _InternalSendLLMMessageFnType = ({ messages, onText,
 				'X-Title': 'Void Editor', // Optional. Shows in rankings on openrouter.ai.
 			},
 		});
-		options = { model: modelName, messages: messages, stream: true, max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens) }
+		options = { model: modelName, messages: messages, stream: true, /*max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens)*/ }
 	}
 	else if (providerName === 'openAICompatible') {
 		const thisConfig = settingsOfProvider.openAICompatible
 		openai = new OpenAI({ baseURL: thisConfig.endpoint, apiKey: thisConfig.apiKey, dangerouslyAllowBrowser: true })
-		options = { model: modelName, messages: messages, stream: true, max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens) }
+		options = { model: modelName, messages: messages, stream: true, /*max_completion_tokens: parseMaxTokensStr(thisConfig.maxTokens)*/ }
 	}
 	else {
 		console.error(`sendOpenAIMsg: invalid providerName: ${providerName}`)
diff --git a/src/vs/platform/void/electron-main/llmMessage/util.ts b/src/vs/platform/void/electron-main/llmMessage/util.ts
deleted file mode 100644
index 988e4706..00000000
--- a/src/vs/platform/void/electron-main/llmMessage/util.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Glass Devtools, Inc. All rights reserved.
- *  Void Editor additions licensed under the AGPL 3.0 License.
- *--------------------------------------------------------------------------------------------*/
-
-export const parseMaxTokensStr = (maxTokensStr: string) => {
-	// parse the string but only if the full string is a valid number, eg parseInt('100abc') should return NaN
-	const int = isNaN(Number(maxTokensStr)) ? undefined : parseInt(maxTokensStr)
-	if (Number.isNaN(int))
-		return undefined
-	return int
-}
-
-
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
index e13f0aea..2e95d1ed 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
@@ -5,7 +5,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { FeatureName, featureNames, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidConfigTypes.js'
-import { dummyModelData } from '../../../../../../../platform/void/common/voidConfigModelDefaults.js'
+import { dummyModelData } from '../../../../../../../platform/void/common/voidConfigTypes.js'
 import { useConfigState, useRefreshModelState, useService } from '../util/services.js'
 import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'

From a42ff2d59a4cfa51762993a86bd8e30c3b559ee4 Mon Sep 17 00:00:00 2001
From: mp <mathewpareles@gmail.com>
Date: Sun, 15 Dec 2024 01:30:44 -0800
Subject: [PATCH 04/21] sidebar + ux

---
 .../browser/react/src/sidebar-tsx/Sidebar.tsx | 18 +++-
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 92 +++++++++++++++----
 .../void/browser/react/tailwind.config.js     | 49 +++++-----
 .../contrib/void/browser/registerActions.ts   | 13 ++-
 .../contrib/void/browser/registerThreads.ts   | 12 ++-
 5 files changed, 129 insertions(+), 55 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index e4714679..7725b16a 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -24,8 +24,8 @@ export const Sidebar = () => {
 	const { isHistoryOpen, currentTab: tab } = sidebarState
 
 	// className='@@void-scope'
-	return <div className='@@void-scope'>
-		<div className={`flex flex-col w-full px-2 py-2`}>
+	return <div className='@@void-scope w-full h-full'>
+		<div className={`flex flex-col px-2 py-2 w-full h-full`}>
 
 			{/* <span onClick={() => {
 				const tabs = ['chat', 'settings', 'threadSelector']
@@ -33,18 +33,28 @@ export const Sidebar = () => {
 				sidebarStateService.setState({ currentTab: tabs[(index + 1) % tabs.length] as any })
 			}}>clickme {tab}</span> */}
 
-			<div className={`mb-2 ${isHistoryOpen ? '' : 'hidden'}`}>
+			<div className={`mb-2 w-full h-full ${isHistoryOpen ? '' : 'hidden'}`}>
 				<ErrorBoundary>
 					<SidebarThreadSelector />
 				</ErrorBoundary>
 			</div>
 
-			<div className={`${tab === 'chat' ? '' : 'hidden'}`}>
+			<div className={`w-full h-full ${tab === 'chat' ? '' : 'hidden'}`}>
 				<ErrorBoundary>
 					<SidebarChat />
 				</ErrorBoundary>
+
+				{/* <ErrorBoundary>
+					<ModelSelectionSettings />
+				</ErrorBoundary> */}
 			</div>
 
+			{/* <div className={`w-full h-full ${tab === 'settings' ? '' : 'hidden'}`}>
+				<ErrorBoundary>
+					<VoidProviderSettings />
+				</ErrorBoundary>
+			</div> */}
+
 		</div>
 	</div>
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 13ee1b6c..92e44671 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -86,6 +86,52 @@ const IconSquare = ({ size, className = '' }: { size: number, className?: string
 };
 
 
+const ScrollToBottomContainer = ({ children, height, className }: { children: React.ReactNode, height: React.CSSProperties['height'], className?: string }) => {
+	const [isAtBottom, setIsAtBottom] = useState(true); // Start at bottom
+	const divRef = useRef<HTMLDivElement>(null);
+
+	const scrollToBottom = () => {
+		if (divRef.current) {
+			divRef.current.scrollTop = divRef.current.scrollHeight;
+		}
+	};
+
+	const onScroll = () => {
+		const div = divRef.current;
+		if (!div) return;
+
+		const isBottom = Math.abs(
+			div.scrollHeight - div.clientHeight - div.scrollTop
+		) < 1;
+
+		setIsAtBottom(isBottom);
+	};
+
+	// When children change (new messages added)
+	useEffect(() => {
+		if (isAtBottom) {
+			scrollToBottom();
+		}
+	}, [children, isAtBottom]); // Dependency on children to detect new messages
+
+	// Initial scroll to bottom
+	useEffect(() => {
+		scrollToBottom();
+	}, []);
+
+	return (
+		<div
+			ref={divRef}
+			onScroll={onScroll}
+			style={{ height: height }}
+			className={className}
+		>
+			{children}
+		</div>
+	);
+};
+
+
 // read files from VSCode
 const VSReadFile = async (modelService: IModelService, uri: URI): Promise<string | null> => {
 	const model = modelService.getModel(uri)
@@ -112,7 +158,7 @@ export const SelectedFiles = (
 
 	return (
 		!!selections && selections.length !== 0 && (
-			<div className='flex flex-wrap gap-4'>
+			<div className='flex flex-wrap gap-4 p-2'>
 				{selections.map((selection, i) => (
 					<Fragment key={i}>
 						{/* selected file summary */}
@@ -122,6 +168,7 @@ export const SelectedFiles = (
 									select-none
 									bg-vscode-badge-bg border border-vscode-button-border rounded-md
 									w-fit h-fit min-w-[80px] p-1
+									text-left
 							`}
 							onClick={() => {
 								setSelectionIsOpened(s => {
@@ -145,9 +192,11 @@ export const SelectedFiles = (
 							{/* X button */}
 							{type === 'staging' && // hoveredIdx === i
 								<span className='absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer bg-white rounded-full border border-vscode-input-border z-1'
-									onClick={() => {
+									onClick={(e) => {
+										e.stopPropagation();
 										if (type !== 'staging') return;
 										setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
+										setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
 									}}
 								>
 									<IconX size={16} className="p-[2px] stroke-[3]" />
@@ -252,7 +301,6 @@ export const SidebarChat = () => {
 	const isDisabled = !instructions.trim()
 	const formRef = useRef<HTMLFormElement | null>(null)
 
-
 	const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
 
 		e.preventDefault()
@@ -359,7 +407,10 @@ export const SidebarChat = () => {
 	const previousMessages = currentThread?.messages ?? []
 
 	return <>
-		<div className="overflow-x-hidden space-y-4">
+		<ScrollToBottomContainer
+			height={`calc(100%-${formRef.current?.height ?? 0}px)`}
+			className='overflow-x-hidden overflow-y-auto space-y-4'
+		>
 			{/* previous messages */}
 			{previousMessages.map((message, i) =>
 				<ChatBubble key={i} chatMessage={message} />
@@ -367,23 +418,22 @@ export const SidebarChat = () => {
 
 			{/* message stream */}
 			<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} />
-		</div>
+		</ScrollToBottomContainer>
 
 
 		{/* input box */}
 		<div // this div is used to position the input box properly
-			className={`right-0 left-0 m-2
-				${previousMessages.length === 0 ? '' : 'absolute bottom-0'}
-			`}
+			className={`right-0 left-0 m-2 z-[999] ${previousMessages.length > 0 ? 'absolute bottom-0' : ''}`}
 		>
 			<form
 				ref={formRef}
-				className={`flex flex-col gap-2 p-2 relative input text-left shrink-0
-				transition-all duration-200
-				rounded-md
-				bg-vscode-input-bg
-				border border-vscode-commandcenter-border hover:border-vscode-commandcenter-active-border
-			`}
+				className={`
+					flex flex-col gap-2 px-2 py-0.5 relative input text-left shrink-0
+					transition-all duration-200
+					rounded-md
+					bg-vscode-input-bg
+					border border-vscode-commandcenter-inactive-border focus-within:border-vscode-commandcenter-active-border hover:border-vscode-commandcenter-active-border
+				`}
 				onKeyDown={(e) => {
 					if (e.key === 'Enter' && !e.shiftKey) {
 						onSubmit(e)
@@ -434,19 +484,21 @@ export const SidebarChat = () => {
 					{isLoading ?
 						// stop button
 						<button
-							className="p-[5px] bg-white rounded-full cursor-pointer"
+							className={`size-[24px] rounded-full bg-white cursor-pointer`}
 							onClick={onAbort}
 							type='button'
 						>
-							<IconSquare size={24} className="stroke-[2]" />
+							<IconSquare size={16} className="stroke-[2]" />
 						</button>
 						:
 						// submit button (up arrow)
 						<button
-							className={`${isDisabled ? 'bg-vscode-disabled-fg cursor-not-allowed' : 'bg-white cursor-pointer'}
-							rounded-full
-							shrink-0 grow-0
-						`}
+							className={`size-[24px] rounded-full shrink-0 grow-0 cursor-pointer
+								${isDisabled ?
+									'bg-vscode-disabled-fg' // cursor-not-allowed
+									: 'bg-white' // cursor-pointer
+								}
+							`}
 							disabled={isDisabled}
 							type='submit'
 						>
diff --git a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
index 46a22c09..eb3f965f 100644
--- a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
+++ b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
@@ -38,31 +38,31 @@ module.exports = {
 					"input-bg": "var(--vscode-input-background)",
 					"input-border": "var(--vscode-input-border)",
 					"input-fg": "var(--vscode-input-foreground)",
-					"input-placeholder-fg": "input-var(--vscode-placeholderForeground)",
-					"input-active-bg": "inputOption-var(--vscode-activeBackground)",
-					"input-option-active-border": "inputOption-var(--vscode-activeBorder)",
-					"input-option-active-fg": "inputOption-var(--vscode-activeForeground)",
-					"input-option-hover-bg": "inputOption-var(--vscode-hoverBackground)",
-					"input-validation-error-bg": "inputValidation-var(--vscode-errorBackground)",
-					"input-validation-error-fg": "inputValidation-var(--vscode-errorForeground)",
-					"input-validation-error-border": "inputValidation-var(--vscode-errorBorder)",
-					"input-validation-info-bg": "inputValidation-var(--vscode-infoBackground)",
-					"input-validation-info-fg": "inputValidation-var(--vscode-infoForeground)",
-					"input-validation-info-border": "inputValidation-var(--vscode-infoBorder)",
-					"input-validation-warning-bg": "inputValidation-var(--vscode-warningBackground)",
-					"input-validation-warning-fg": "inputValidation-var(--vscode-warningForeground)",
-					"input-validation-warning-border": "inputValidation-var(--vscode-warningBorder)",
+					"input-placeholder-fg": "var(--vscode-placeholderForeground)",
+					"input-active-bg": "var(--vscode-activeBackground)",
+					"input-option-active-border": "var(--vscode-activeBorder)",
+					"input-option-active-fg": "var(--vscode-activeForeground)",
+					"input-option-hover-bg": "var(--vscode-hoverBackground)",
+					"input-validation-error-bg": "var(--vscode-errorBackground)",
+					"input-validation-error-fg": "var(--vscode-errorForeground)",
+					"input-validation-error-border": "var(--vscode-errorBorder)",
+					"input-validation-info-bg": "var(--vscode-infoBackground)",
+					"input-validation-info-fg": "var(--vscode-infoForeground)",
+					"input-validation-info-border": "var(--vscode-infoBorder)",
+					"input-validation-warning-bg": "var(--vscode-warningBackground)",
+					"input-validation-warning-fg": "var(--vscode-warningForeground)",
+					"input-validation-warning-border": "var(--vscode-warningBorder)",
 
 					// command center colors (the top bar)
-					"commandcenter-fg": "commandCenter.foreground",
-					"commandcenter-active-fg": "commandCenter.activeForeground",
-					"commandcenter-bg": "commandCenter.background",
-					"commandcenter-active-bg": "commandCenter.activeBackground",
-					"commandcenter-border": "commandCenter.border",
-					"commandcenter-inactive-fg": "commandCenter.inactiveForeground",
-					"commandcenter-inactive-border": "commandCenter.inactiveBorder",
-					"commandcenter-active-border": "commandCenter.activeBorder",
-					"commandcenter-debugging-bg": "commandCenter.debuggingBackground",
+					"commandcenter-fg": "var(--vscode-commandCenter-foreground)",
+					"commandcenter-active-fg": "var(--vscode-commandCenter-activeForeground)",
+					"commandcenter-bg": "var(--vscode-commandCenter-background)",
+					"commandcenter-active-bg": "var(--vscode-commandCenter-activeBackground)",
+					"commandcenter-border": "var(--vscode-commandCenter-border)",
+					"commandcenter-inactive-fg": "var(--vscode-commandCenter-inactiveForeground)",
+					"commandcenter-inactive-border": "var(--vscode-commandCenter-inactiveBorder)",
+					"commandcenter-active-border": "var(--vscode-commandCenter-activeBorder)",
+					"commandcenter-debugging-bg": "var(--vscode-commandCenter-debuggingBackground)",
 
 					// badge colors
 					"badge-fg": "var(--vscode-badge-foreground)",
@@ -84,7 +84,6 @@ module.exports = {
 					"checkbox-border": "var(--vscode-checkbox-border)",
 					"checkbox-select-bg": "var(--vscode-checkbox-selectBackground)",
 
-
 					// sidebar colors
 					"sidebar-bg": "var(--vscode-sideBar-background)",
 					"sidebar-fg": "var(--vscode-sideBar-foreground)",
@@ -101,7 +100,6 @@ module.exports = {
 					"sidebar-stickyscroll-border": "var(--vscode-sideBarStickyScroll-border)",
 					"sidebar-stickyscroll-shadow": "var(--vscode-sideBarStickyScroll-shadow)",
 
-
 					// other colors (these are partially complete)
 
 					// editor colors
@@ -113,7 +111,6 @@ module.exports = {
 					"editorwidget-bg": "var(--vscode-editorWidget-background)",
 					"editorwidget-border": "var(--vscode-editorWidget-border)",
 
-
 				},
 			},
 		},
diff --git a/src/vs/workbench/contrib/void/browser/registerActions.ts b/src/vs/workbench/contrib/void/browser/registerActions.ts
index ee6fcdef..16bb7600 100644
--- a/src/vs/workbench/contrib/void/browser/registerActions.ts
+++ b/src/vs/workbench/contrib/void/browser/registerActions.ts
@@ -83,9 +83,18 @@ registerAction2(class extends Action2 {
 		)
 
 		if (selectionRange) {
-			const selection: CodeStagingSelection = {
-				selectionStr: getContentInRange(model, selectionRange),
+
+			const selectionStr = getContentInRange(model, selectionRange)
+
+			const selection: CodeStagingSelection = selectionStr === null ? {
+				type: 'File',
 				fileURI: model.uri,
+				selectionStr: null,
+				range: null,
+			} : {
+				type: 'Selection',
+				fileURI: model.uri,
+				selectionStr: selectionStr,
 				range: selectionRange,
 			}
 
diff --git a/src/vs/workbench/contrib/void/browser/registerThreads.ts b/src/vs/workbench/contrib/void/browser/registerThreads.ts
index 797d1d23..d92e8942 100644
--- a/src/vs/workbench/contrib/void/browser/registerThreads.ts
+++ b/src/vs/workbench/contrib/void/browser/registerThreads.ts
@@ -22,9 +22,15 @@ export type CodeSelection = {
 
 // if selectionStr is null, it means to use the entire file at send time
 export type CodeStagingSelection = {
-	fileURI: URI;
-	selectionStr: string | null;
-	range: IRange;
+	type: 'Selection',
+	fileURI: URI,
+	selectionStr: string,
+	range: IRange
+} | {
+	type: 'File',
+	fileURI: URI,
+	selectionStr: null,
+	range: null
 }
 
 

From 8b25f80e9bf9628910e8cb2a8865a21ce0cd56a3 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 15 Dec 2024 20:43:08 -0800
Subject: [PATCH 05/21] model selection is accurate now, and lots of files
 moved to be more accurate

---
 .eslintrc.json                                |   1 +
 .../void/browser/void.contribution.ts         |   4 +-
 .../platform/void/common/llmMessageService.ts |  10 +-
 .../platform/void/common/llmMessageTypes.ts   |   2 +-
 .../void/common/refreshModelService.ts        |  14 +-
 .../platform/void/common/voidConfigService.ts | 137 -------------
 .../void/common/voidSettingsService.ts        | 191 ++++++++++++++++++
 ...oidConfigTypes.ts => voidSettingsTypes.ts} |  34 ++--
 .../electron-main/llmMessage/anthropic.ts     |   2 +-
 .../workbench/contrib/void/browser/.gitignore |   1 -
 ...Autocomplete.ts => autocompleteService.ts} |   0
 .../void/browser/{ => helpers}/findDiffs.ts   |   2 +-
 .../void/browser/{ => helpers}/getCmdKey.ts   |   2 +-
 .../browser/helpers/reactServicesHelper.ts    |  51 +++++
 ...erInlineDiffs.ts => inlineDiffsService.ts} |   4 +-
 .../browser/prompt/stringifySelections.ts     |   2 +-
 .../react/src/sidebar-tsx/SidebarChat.tsx     |   9 +-
 .../react/src/util/mountFnGenerator.tsx       |   2 +-
 .../void/browser/react/src/util/services.tsx  |  49 ++---
 .../ModelSelectionSettings.tsx                |  52 ++---
 .../VoidProviderSettings.tsx                  |  39 ++--
 .../contrib/void/browser/reactServices.ts     |  51 -----
 .../{registerActions.ts => sidebarActions.ts} |  13 +-
 .../void/browser/sidebarStateService.ts       |  84 ++++++++
 ...{registerSidebar.ts => sidebarViewPane.ts} |  88 +-------
 ...sterThreads.ts => threadHistoryService.ts} |   4 +-
 .../contrib/void/browser/void.contribution.ts |  16 +-
 ...tingsEditorPane.ts => voidSettingsPane.ts} |  36 ++--
 28 files changed, 462 insertions(+), 438 deletions(-)
 delete mode 100644 src/vs/platform/void/common/voidConfigService.ts
 create mode 100644 src/vs/platform/void/common/voidSettingsService.ts
 rename src/vs/platform/void/common/{voidConfigTypes.ts => voidSettingsTypes.ts} (91%)
 delete mode 100644 src/vs/workbench/contrib/void/browser/.gitignore
 rename src/vs/workbench/contrib/void/browser/{registerAutocomplete.ts => autocompleteService.ts} (100%)
 rename src/vs/workbench/contrib/void/browser/{ => helpers}/findDiffs.ts (99%)
 rename src/vs/workbench/contrib/void/browser/{ => helpers}/getCmdKey.ts (88%)
 create mode 100644 src/vs/workbench/contrib/void/browser/helpers/reactServicesHelper.ts
 rename src/vs/workbench/contrib/void/browser/{registerInlineDiffs.ts => inlineDiffsService.ts} (99%)
 delete mode 100644 src/vs/workbench/contrib/void/browser/reactServices.ts
 rename src/vs/workbench/contrib/void/browser/{registerActions.ts => sidebarActions.ts} (92%)
 create mode 100644 src/vs/workbench/contrib/void/browser/sidebarStateService.ts
 rename src/vs/workbench/contrib/void/browser/{registerSidebar.ts => sidebarViewPane.ts} (67%)
 rename src/vs/workbench/contrib/void/browser/{registerThreads.ts => threadHistoryService.ts} (98%)
 rename src/vs/workbench/contrib/void/browser/{voidSettingsEditorPane.ts => voidSettingsPane.ts} (84%)

diff --git a/.eslintrc.json b/.eslintrc.json
index 1edb79cf..16884e64 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -10,6 +10,7 @@
 		"jsdoc",
 		"header",
 		"local"
+		// "react" // Void
 	],
 	"rules": {
 		"constructor-super": "warn",
diff --git a/src/vs/platform/void/browser/void.contribution.ts b/src/vs/platform/void/browser/void.contribution.ts
index 5209680d..2d261ea3 100644
--- a/src/vs/platform/void/browser/void.contribution.ts
+++ b/src/vs/platform/void/browser/void.contribution.ts
@@ -5,8 +5,8 @@
 // llmMessage
 import '../common/llmMessageService.js'
 
-// voidConfig
-import '../common/voidConfigService.js'
+// voidSettings
+import '../common/voidSettingsService.js'
 
 // refreshModel
 import '../common/refreshModelService.js'
diff --git a/src/vs/platform/void/common/llmMessageService.ts b/src/vs/platform/void/common/llmMessageService.ts
index 967b5a9f..e0ec2b12 100644
--- a/src/vs/platform/void/common/llmMessageService.ts
+++ b/src/vs/platform/void/common/llmMessageService.ts
@@ -11,7 +11,7 @@ import { generateUuid } from '../../../base/common/uuid.js';
 import { createDecorator } from '../../instantiation/common/instantiation.js';
 import { Event } from '../../../base/common/event.js';
 import { Disposable } from '../../../base/common/lifecycle.js';
-import { IVoidConfigStateService } from './voidConfigService.js';
+import { IVoidSettingsService } from './voidSettingsService.js';
 // import { INotificationService } from '../../notification/common/notification.js';
 
 // calls channel to implement features
@@ -42,7 +42,7 @@ export class LLMMessageService extends Disposable implements ILLMMessageService
 
 	constructor(
 		@IMainProcessService private readonly mainProcessService: IMainProcessService, // used as a renderer (only usable on client side)
-		@IVoidConfigStateService private readonly voidConfigStateService: IVoidConfigStateService,
+		@IVoidSettingsService private readonly voidSettingsService: IVoidSettingsService,
 		// @INotificationService private readonly notificationService: INotificationService,
 	) {
 		super()
@@ -79,7 +79,7 @@ export class LLMMessageService extends Disposable implements ILLMMessageService
 		const { featureName } = proxyParams
 
 		// end early if no provider
-		const modelSelection = this.voidConfigStateService.state.modelSelectionOfFeature[featureName]
+		const modelSelection = this.voidSettingsService.state.modelSelectionOfFeature[featureName]
 		if (modelSelection === null) {
 			onError({ message: 'Please add a Provider in Settings!', fullError: null })
 			return null
@@ -92,7 +92,7 @@ export class LLMMessageService extends Disposable implements ILLMMessageService
 		this.onFinalMessageHooks_llm[requestId_] = onFinalMessage
 		this.onErrorHooks_llm[requestId_] = onError
 
-		const { settingsOfProvider } = this.voidConfigStateService.state
+		const { settingsOfProvider } = this.voidSettingsService.state
 
 		// params will be stripped of all its functions over the IPC channel
 		this.channel.call('sendLLMMessage', {
@@ -116,7 +116,7 @@ export class LLMMessageService extends Disposable implements ILLMMessageService
 	ollamaList = (params: ServiceOllamaListParams) => {
 		const { onSuccess, onError, ...proxyParams } = params
 
-		const { settingsOfProvider } = this.voidConfigStateService.state
+		const { settingsOfProvider } = this.voidSettingsService.state
 
 		// add state for request id
 		const requestId_ = generateUuid();
diff --git a/src/vs/platform/void/common/llmMessageTypes.ts b/src/vs/platform/void/common/llmMessageTypes.ts
index 3db5d595..b4e3c54b 100644
--- a/src/vs/platform/void/common/llmMessageTypes.ts
+++ b/src/vs/platform/void/common/llmMessageTypes.ts
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { IRange } from '../../../editor/common/core/range'
-import { ProviderName, SettingsOfProvider } from './voidConfigTypes'
+import { ProviderName, SettingsOfProvider } from './voidSettingsTypes.js'
 
 
 export type OnText = (p: { newText: string, fullText: string }) => void
diff --git a/src/vs/platform/void/common/refreshModelService.ts b/src/vs/platform/void/common/refreshModelService.ts
index a724d8ce..f1f0c575 100644
--- a/src/vs/platform/void/common/refreshModelService.ts
+++ b/src/vs/platform/void/common/refreshModelService.ts
@@ -5,7 +5,7 @@
 
 import { createDecorator } from '../../instantiation/common/instantiation.js';
 import { InstantiationType, registerSingleton } from '../../instantiation/common/extensions.js';
-import { IVoidConfigStateService } from './voidConfigService.js';
+import { IVoidSettingsService } from './voidSettingsService.js';
 import { ILLMMessageService } from './llmMessageService.js';
 import { Emitter, Event } from '../../../base/common/event.js';
 import { Disposable } from '../../../base/common/lifecycle.js';
@@ -38,7 +38,7 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 	readonly onDidChangeState: Event<void> = this._onDidChangeState.event; // this is primarily for use in react, so react can listen + update on state changes
 
 	constructor(
-		@IVoidConfigStateService private readonly voidConfigStateService: IVoidConfigStateService,
+		@IVoidSettingsService private readonly voidSettingsService: IVoidSettingsService,
 		@ILLMMessageService private readonly llmMessageService: ILLMMessageService,
 	) {
 		super()
@@ -46,11 +46,11 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 		// on mount, refresh ollama models
 		this.refreshOllamaModels()
 
-		// every time ollama.enabled changes, refresh ollama models
-		let relevantVals = () => [this.voidConfigStateService.state.settingsOfProvider.ollama.enabled, this.voidConfigStateService.state.settingsOfProvider.ollama.endpoint]
+		// every time ollama.enabled changes, refresh ollama models, like useEffect
+		let relevantVals = () => [this.voidSettingsService.state.settingsOfProvider.ollama.enabled, this.voidSettingsService.state.settingsOfProvider.ollama.endpoint]
 		let prevVals = relevantVals()
 		this._register(
-			this.voidConfigStateService.onDidChangeState(() => { // we might want to debounce this
+			this.voidSettingsService.onDidChangeState(() => { // we might want to debounce this
 				const newVals = relevantVals()
 				if (!eq(prevVals, newVals)) {
 					this.refreshOllamaModels()
@@ -75,7 +75,7 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 		this._cancelTimeout()
 
 		// if ollama is disabled, obivously done
-		if (this.voidConfigStateService.state.settingsOfProvider.ollama.enabled !== 'true') {
+		if (this.voidSettingsService.state.settingsOfProvider.ollama.enabled !== 'true') {
 			this._setState('done')
 			return
 		}
@@ -85,7 +85,7 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 
 		this.llmMessageService.ollamaList({
 			onSuccess: ({ models }) => {
-				this.voidConfigStateService.setSettingOfProvider('ollama', 'models', models.map(model => model.name))
+				this.voidSettingsService.setSettingOfProvider('ollama', 'models', models.map(model => model.name))
 				this._setState('done')
 			},
 			onError: ({ error }) => {
diff --git a/src/vs/platform/void/common/voidConfigService.ts b/src/vs/platform/void/common/voidConfigService.ts
deleted file mode 100644
index 4b065f70..00000000
--- a/src/vs/platform/void/common/voidConfigService.ts
+++ /dev/null
@@ -1,137 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Glass Devtools, Inc. All rights reserved.
- *  Void Editor additions licensed under the AGPL 3.0 License.
- *--------------------------------------------------------------------------------------------*/
-
-import { Emitter, Event } from '../../../base/common/event.js';
-import { Disposable } from '../../../base/common/lifecycle.js';
-import { deepClone } from '../../../base/common/objects.js';
-import { IEncryptionService } from '../../encryption/common/encryptionService.js';
-import { registerSingleton, InstantiationType } from '../../instantiation/common/extensions.js';
-import { createDecorator } from '../../instantiation/common/instantiation.js';
-import { IStorageService, StorageScope, StorageTarget } from '../../storage/common/storage.js';
-import { defaultVoidProviderState, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName } from './voidConfigTypes.js';
-
-
-const STORAGE_KEY = 'void.voidConfigStateII'
-
-type SetSettingOfProviderFn = <S extends SettingName>(
-	providerName: ProviderName,
-	settingName: S,
-	newVal: SettingsOfProvider[ProviderName][S extends keyof SettingsOfProvider[ProviderName] ? S : never],
-) => Promise<void>;
-
-type SetModelSelectionOfFeature = <K extends FeatureName>(
-	featureName: K,
-	newVal: ModelSelectionOfFeature[K],
-) => Promise<void>;
-
-
-type VoidConfigState = {
-	readonly settingsOfProvider: SettingsOfProvider; // optionsOfProvider
-	readonly modelSelectionOfFeature: ModelSelectionOfFeature; // stateOfFeature
-}
-
-export interface IVoidConfigStateService {
-	readonly _serviceBrand: undefined;
-	readonly state: VoidConfigState;
-	onDidChangeState: Event<void>;
-	setSettingOfProvider: SetSettingOfProviderFn;
-	setModelSelectionOfFeature: SetModelSelectionOfFeature;
-}
-
-
-const defaultState = () => {
-	const d: VoidConfigState = {
-		settingsOfProvider: deepClone(defaultVoidProviderState),
-		modelSelectionOfFeature: { 'Ctrl+L': null, 'Ctrl+K': null, 'Autocomplete': null }
-	}
-	return d
-}
-
-
-export const IVoidConfigStateService = createDecorator<IVoidConfigStateService>('VoidConfigStateService');
-class VoidConfigService extends Disposable implements IVoidConfigStateService {
-	_serviceBrand: undefined;
-
-	private readonly _onDidChangeState = new Emitter<void>();
-	readonly onDidChangeState: Event<void> = this._onDidChangeState.event; // this is primarily for use in react, so react can listen + update on state changes
-
-	state: VoidConfigState;
-
-	constructor(
-		@IStorageService private readonly _storageService: IStorageService,
-		@IEncryptionService private readonly _encryptionService: IEncryptionService,
-		// could have used this, but it's clearer the way it is (+ slightly different eg StorageTarget.USER)
-		// @ISecretStorageService private readonly _secretStorageService: ISecretStorageService,
-	) {
-		super()
-
-		// at the start, we haven't read the partial config yet, but we need to set state to something
-		this.state = defaultState()
-
-		// read and update the actual state immediately
-		this._readVoidConfigState().then(voidConfigState => {
-			this._setState(voidConfigState)
-		})
-
-	}
-
-	private async _readVoidConfigState(): Promise<VoidConfigState> {
-		const encryptedPartialConfig = this._storageService.get(STORAGE_KEY, StorageScope.APPLICATION)
-
-		if (!encryptedPartialConfig)
-			return defaultState()
-
-		const voidConfigStateStr = await this._encryptionService.decrypt(encryptedPartialConfig)
-		return JSON.parse(voidConfigStateStr)
-	}
-
-
-	private async _storeVoidConfigState(voidConfigState: VoidConfigState) {
-		const encryptedVoidConfigStr = await this._encryptionService.encrypt(JSON.stringify(voidConfigState))
-		this._storageService.store(STORAGE_KEY, encryptedVoidConfigStr, StorageScope.APPLICATION, StorageTarget.USER);
-	}
-
-	setSettingOfProvider: SetSettingOfProviderFn = async (providerName, settingName, newVal) => {
-		const newState: VoidConfigState = {
-			...this.state,
-			settingsOfProvider: {
-				...this.state.settingsOfProvider,
-				[providerName]: {
-					...this.state.settingsOfProvider[providerName],
-					[settingName]: newVal,
-				}
-			},
-		}
-		// console.log('NEW STATE I', JSON.stringify(newState, null, 2))
-
-		await this._storeVoidConfigState(newState)
-		this._setState(newState)
-	}
-
-	setModelSelectionOfFeature: SetModelSelectionOfFeature = async (featureName, newVal) => {
-		const newState: VoidConfigState = {
-			...this.state,
-			modelSelectionOfFeature: {
-				...this.state.modelSelectionOfFeature,
-				[featureName]: newVal
-			}
-		}
-		// console.log('NEW STATE II', JSON.stringify(newState, null, 2))
-
-		await this._storeVoidConfigState(newState)
-		this._setState(newState)
-	}
-
-
-
-	// internal function to update state, should be called every time state changes
-	private async _setState(voidConfigState: VoidConfigState) {
-		this.state = voidConfigState
-		this._onDidChangeState.fire()
-	}
-
-}
-
-registerSingleton(IVoidConfigStateService, VoidConfigService, InstantiationType.Eager);
diff --git a/src/vs/platform/void/common/voidSettingsService.ts b/src/vs/platform/void/common/voidSettingsService.ts
new file mode 100644
index 00000000..6309213b
--- /dev/null
+++ b/src/vs/platform/void/common/voidSettingsService.ts
@@ -0,0 +1,191 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Glass Devtools, Inc. All rights reserved.
+ *  Void Editor additions licensed under the AGPL 3.0 License.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Emitter, Event } from '../../../base/common/event.js';
+import { Disposable } from '../../../base/common/lifecycle.js';
+import { deepClone } from '../../../base/common/objects.js';
+import { IEncryptionService } from '../../encryption/common/encryptionService.js';
+import { registerSingleton, InstantiationType } from '../../instantiation/common/extensions.js';
+import { createDecorator } from '../../instantiation/common/instantiation.js';
+import { IStorageService, StorageScope, StorageTarget } from '../../storage/common/storage.js';
+import { defaultSettingsOfProvider, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName, providerNames, ModelSelection, modelSelectionsEqual, featureNames } from './voidSettingsTypes.js';
+
+
+const STORAGE_KEY = 'void.voidConfigStateIV'
+
+type SetSettingOfProviderFn = <S extends SettingName>(
+	providerName: ProviderName,
+	settingName: S,
+	newVal: SettingsOfProvider[ProviderName][S extends keyof SettingsOfProvider[ProviderName] ? S : never],
+) => Promise<void>;
+
+type SetModelSelectionOfFeature = <K extends FeatureName>(
+	featureName: K,
+	newVal: ModelSelectionOfFeature[K],
+	options?: { doNotApplyEffects?: true }
+) => Promise<void>;
+
+
+
+type ModelOption = { text: string, value: ModelSelection }
+
+
+
+export type VoidSettingsState = {
+	readonly settingsOfProvider: SettingsOfProvider; // optionsOfProvider
+	readonly modelSelectionOfFeature: ModelSelectionOfFeature; // stateOfFeature
+
+	readonly _modelsList: ModelOption[] // computed based on the two above items
+}
+
+
+
+export interface IVoidSettingsService {
+	readonly _serviceBrand: undefined;
+	readonly state: VoidSettingsState;
+	onDidChangeState: Event<void>;
+	setSettingOfProvider: SetSettingOfProviderFn;
+	setModelSelectionOfFeature: SetModelSelectionOfFeature;
+}
+
+
+let _computeModelsList = (settingsOfProvider: SettingsOfProvider) => {
+	let modelsList: ModelOption[] = []
+	for (const providerName of providerNames) {
+		const providerConfig = settingsOfProvider[providerName]
+		if (providerConfig.enabled !== 'true') continue
+		providerConfig.models?.forEach(modelName => {
+			modelsList.push({ text: `${modelName} (${providerName})`, value: { providerName, modelName } })
+		})
+	}
+	return modelsList
+}
+
+
+const defaultState = () => {
+	const d: VoidSettingsState = {
+		settingsOfProvider: deepClone(defaultSettingsOfProvider),
+		modelSelectionOfFeature: { 'Ctrl+L': null, 'Ctrl+K': null, 'Autocomplete': null },
+		_modelsList: _computeModelsList(defaultSettingsOfProvider),
+	}
+	return d
+}
+
+
+export const IVoidSettingsService = createDecorator<IVoidSettingsService>('VoidSettingsService');
+class VoidSettingsService extends Disposable implements IVoidSettingsService {
+	_serviceBrand: undefined;
+
+	private readonly _onDidChangeState = new Emitter<void>();
+	readonly onDidChangeState: Event<void> = this._onDidChangeState.event; // this is primarily for use in react, so react can listen + update on state changes
+
+	state: VoidSettingsState;
+
+	constructor(
+		@IStorageService private readonly _storageService: IStorageService,
+		@IEncryptionService private readonly _encryptionService: IEncryptionService,
+		// could have used this, but it's clearer the way it is (+ slightly different eg StorageTarget.USER)
+		// @ISecretStorageService private readonly _secretStorageService: ISecretStorageService,
+	) {
+		super()
+
+		// at the start, we haven't read the partial config yet, but we need to set state to something
+		this.state = defaultState()
+
+		// read and update the actual state immediately
+		this._readState().then(s => {
+			this.state = s
+			this._onDidChangeState.fire()
+		})
+	}
+
+	private async _readState(): Promise<VoidSettingsState> {
+		const encryptedState = this._storageService.get(STORAGE_KEY, StorageScope.APPLICATION)
+
+		if (!encryptedState)
+			return defaultState()
+
+		const stateStr = await this._encryptionService.decrypt(encryptedState)
+		return JSON.parse(stateStr)
+	}
+
+
+	private async _storeState() {
+		const state = this.state
+		const encryptedState = await this._encryptionService.encrypt(JSON.stringify(state))
+		this._storageService.store(STORAGE_KEY, encryptedState, StorageScope.APPLICATION, StorageTarget.USER);
+	}
+
+	setSettingOfProvider: SetSettingOfProviderFn = async (providerName, settingName, newVal) => {
+
+		const newModelSelectionOfFeature = this.state.modelSelectionOfFeature
+
+		const newSettingsOfProvider = {
+			...this.state.settingsOfProvider,
+			[providerName]: {
+				...this.state.settingsOfProvider[providerName],
+				[settingName]: newVal,
+			}
+		}
+
+		// if changed models or enabled a provider, recompute models list
+		const modelsListChanged = settingName === 'models' || settingName === 'enabled'
+		const newModelsList = modelsListChanged ? _computeModelsList(newSettingsOfProvider) : this.state._modelsList
+
+		const newState: VoidSettingsState = {
+			modelSelectionOfFeature: newModelSelectionOfFeature,
+			settingsOfProvider: newSettingsOfProvider,
+			_modelsList: newModelsList,
+		}
+
+		// this must go above this.setanythingelse()
+		this.state = newState
+
+		// if the user-selected model is no longer in the list, update the selection for each feature that needs it to something relevant (the 0th model available, or null)
+		if (modelsListChanged) {
+			for (const featureName of featureNames) {
+
+				const currentSelection = newModelSelectionOfFeature[featureName]
+				const selnIdx = currentSelection === null ? -1 : newModelsList.findIndex(m => modelSelectionsEqual(m.value, currentSelection))
+
+				if (selnIdx === -1) {
+					if (newModelsList.length !== 0)
+						this.setModelSelectionOfFeature(featureName, newModelsList[0].value, { doNotApplyEffects: true })
+					else
+						this.setModelSelectionOfFeature(featureName, null, { doNotApplyEffects: true })
+				}
+			}
+		}
+
+		await this._storeState()
+		this._onDidChangeState.fire()
+	}
+
+
+	setModelSelectionOfFeature: SetModelSelectionOfFeature = async (featureName, newVal, options) => {
+		const newState: VoidSettingsState = {
+			...this.state,
+			modelSelectionOfFeature: {
+				...this.state.modelSelectionOfFeature,
+				[featureName]: newVal
+			}
+		}
+
+		this.state = newState
+
+		if (options?.doNotApplyEffects)
+			return
+		console.log('NEW STATE II', JSON.stringify(newState, null, 2))
+
+		await this._storeState()
+		this._onDidChangeState.fire()
+	}
+
+
+
+}
+
+
+registerSingleton(IVoidSettingsService, VoidSettingsService, InstantiationType.Eager);
diff --git a/src/vs/platform/void/common/voidConfigTypes.ts b/src/vs/platform/void/common/voidSettingsTypes.ts
similarity index 91%
rename from src/vs/platform/void/common/voidConfigTypes.ts
rename to src/vs/platform/void/common/voidSettingsTypes.ts
index 5415af4b..810e9651 100644
--- a/src/vs/platform/void/common/voidConfigTypes.ts
+++ b/src/vs/platform/void/common/voidSettingsTypes.ts
@@ -76,12 +76,12 @@ export const anthropicMaxPossibleTokens = (modelName: string) => {
 }
 
 
-export const dummyModelData = {
-	anthropic: ['claude 3.5'],
-	openAI: ['gpt 4o'],
-	ollama: ['llama 3.2', 'codestral'],
-	openRouter: ['qwen 2.5'],
-}
+// export const dummyModelData = {
+// 	anthropic: ['claude 3.5'],
+// 	openAI: ['gpt 4o'],
+// 	ollama: ['llama 3.2', 'codestral'],
+// 	openRouter: ['qwen 2.5'],
+// }
 
 
 
@@ -234,7 +234,7 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 
 
 // used when waiting and for a type reference
-export const defaultVoidProviderState: SettingsOfProvider = {
+export const defaultSettingsOfProvider: SettingsOfProvider = {
 	anthropic: {
 		...voidProviderDefaults.anthropic,
 		...voidInitModelOptions.anthropic,
@@ -273,21 +273,17 @@ export const defaultVoidProviderState: SettingsOfProvider = {
 }
 
 
+export type ModelSelection = { providerName: ProviderName, modelName: string }
+
+export const modelSelectionsEqual = (m1: ModelSelection, m2: ModelSelection) => {
+	return m1.modelName === m2.modelName && m1.providerName === m2.providerName
+}
 
 // this is a state
 export type ModelSelectionOfFeature = {
-	'Ctrl+L': {
-		providerName: ProviderName,
-		modelName: string,
-	} | null,
-	'Ctrl+K': {
-		providerName: ProviderName,
-		modelName: string,
-	} | null,
-	'Autocomplete': {
-		providerName: ProviderName,
-		modelName: string,
-	} | null,
+	'Ctrl+L': ModelSelection | null,
+	'Ctrl+K': ModelSelection | null,
+	'Autocomplete': ModelSelection | null,
 }
 export type FeatureName = keyof ModelSelectionOfFeature
 export const featureNames = ['Ctrl+L', 'Ctrl+K', 'Autocomplete'] as const
diff --git a/src/vs/platform/void/electron-main/llmMessage/anthropic.ts b/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
index 964047b2..19a4ddef 100644
--- a/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
+++ b/src/vs/platform/void/electron-main/llmMessage/anthropic.ts
@@ -5,7 +5,7 @@
 
 import Anthropic from '@anthropic-ai/sdk';
 import { _InternalSendLLMMessageFnType } from '../../common/llmMessageTypes.js';
-import { anthropicMaxPossibleTokens } from '../../common/voidConfigTypes.js';
+import { anthropicMaxPossibleTokens } from '../../common/voidSettingsTypes.js';
 
 // Anthropic
 type LLMMessageAnthropic = {
diff --git a/src/vs/workbench/contrib/void/browser/.gitignore b/src/vs/workbench/contrib/void/browser/.gitignore
deleted file mode 100644
index 897c5fc6..00000000
--- a/src/vs/workbench/contrib/void/browser/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-void-imports/
diff --git a/src/vs/workbench/contrib/void/browser/registerAutocomplete.ts b/src/vs/workbench/contrib/void/browser/autocompleteService.ts
similarity index 100%
rename from src/vs/workbench/contrib/void/browser/registerAutocomplete.ts
rename to src/vs/workbench/contrib/void/browser/autocompleteService.ts
diff --git a/src/vs/workbench/contrib/void/browser/findDiffs.ts b/src/vs/workbench/contrib/void/browser/helpers/findDiffs.ts
similarity index 99%
rename from src/vs/workbench/contrib/void/browser/findDiffs.ts
rename to src/vs/workbench/contrib/void/browser/helpers/findDiffs.ts
index 60643e32..8586a3ca 100644
--- a/src/vs/workbench/contrib/void/browser/findDiffs.ts
+++ b/src/vs/workbench/contrib/void/browser/helpers/findDiffs.ts
@@ -3,7 +3,7 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { diffLines } from './react/out/diff/index.js'
+import { diffLines } from '../react/out/diff/index.js'
 
 export type ComputedDiff = {
 	type: 'edit';
diff --git a/src/vs/workbench/contrib/void/browser/getCmdKey.ts b/src/vs/workbench/contrib/void/browser/helpers/getCmdKey.ts
similarity index 88%
rename from src/vs/workbench/contrib/void/browser/getCmdKey.ts
rename to src/vs/workbench/contrib/void/browser/helpers/getCmdKey.ts
index d2154068..fe520e42 100644
--- a/src/vs/workbench/contrib/void/browser/getCmdKey.ts
+++ b/src/vs/workbench/contrib/void/browser/helpers/getCmdKey.ts
@@ -3,7 +3,7 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { isMacintosh } from '../../../../base/common/platform.js';
+import { isMacintosh } from '../../../../../base/common/platform.js';
 
 // import { OperatingSystem, OS } from '../../../../base/common/platform.js';
 // OS === OperatingSystem.Macintosh
diff --git a/src/vs/workbench/contrib/void/browser/helpers/reactServicesHelper.ts b/src/vs/workbench/contrib/void/browser/helpers/reactServicesHelper.ts
new file mode 100644
index 00000000..3c043344
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/helpers/reactServicesHelper.ts
@@ -0,0 +1,51 @@
+import { ServicesAccessor } from '../../../../../editor/browser/editorExtensions.js';
+import { IModelService } from '../../../../../editor/common/services/model.js';
+import { IClipboardService } from '../../../../../platform/clipboard/common/clipboardService.js';
+import { IContextViewService, IContextMenuService } from '../../../../../platform/contextview/browser/contextView.js';
+import { IFileService } from '../../../../../platform/files/common/files.js';
+import { IHoverService } from '../../../../../platform/hover/browser/hover.js';
+import { IThemeService } from '../../../../../platform/theme/common/themeService.js';
+import { ILLMMessageService } from '../../../../../platform/void/common/llmMessageService.js';
+import { IRefreshModelService } from '../../../../../platform/void/common/refreshModelService.js';
+import { IVoidSettingsService } from '../../../../../platform/void/common/voidSettingsService.js';
+import { IInlineDiffsService } from '../inlineDiffsService.js';
+import { ISidebarStateService } from '../sidebarStateService.js';
+import { IThreadHistoryService } from '../threadHistoryService.js';
+
+export type ReactServicesType = {
+	sidebarStateService: ISidebarStateService;
+	settingsStateService: IVoidSettingsService;
+	threadsStateService: IThreadHistoryService;
+	fileService: IFileService;
+	modelService: IModelService;
+	inlineDiffService: IInlineDiffsService;
+	llmMessageService: ILLMMessageService;
+	clipboardService: IClipboardService;
+	refreshModelService: IRefreshModelService;
+
+	themeService: IThemeService,
+	hoverService: IHoverService,
+
+	contextViewService: IContextViewService;
+	contextMenuService: IContextMenuService;
+}
+
+
+export const getReactServices = (accessor: ServicesAccessor): ReactServicesType => {
+	return {
+		settingsStateService: accessor.get(IVoidSettingsService),
+		sidebarStateService: accessor.get(ISidebarStateService),
+		threadsStateService: accessor.get(IThreadHistoryService),
+		fileService: accessor.get(IFileService),
+		modelService: accessor.get(IModelService),
+		inlineDiffService: accessor.get(IInlineDiffsService),
+		llmMessageService: accessor.get(ILLMMessageService),
+		clipboardService: accessor.get(IClipboardService),
+		themeService: accessor.get(IThemeService),
+		hoverService: accessor.get(IHoverService),
+		refreshModelService: accessor.get(IRefreshModelService),
+		contextViewService: accessor.get(IContextViewService),
+		contextMenuService: accessor.get(IContextMenuService),
+	}
+}
+
diff --git a/src/vs/workbench/contrib/void/browser/registerInlineDiffs.ts b/src/vs/workbench/contrib/void/browser/inlineDiffsService.ts
similarity index 99%
rename from src/vs/workbench/contrib/void/browser/registerInlineDiffs.ts
rename to src/vs/workbench/contrib/void/browser/inlineDiffsService.ts
index cb4ae858..5d6c0c49 100644
--- a/src/vs/workbench/contrib/void/browser/registerInlineDiffs.ts
+++ b/src/vs/workbench/contrib/void/browser/inlineDiffsService.ts
@@ -11,9 +11,8 @@ import { ICodeEditor, IOverlayWidget, IViewZone } from '../../../../editor/brows
 // import { IUndoRedoService } from '../../../../platform/undoRedo/common/undoRedo.js';
 import { ICodeEditorService } from '../../../../editor/browser/services/codeEditorService.js';
 // import { throttle } from '../../../../base/common/decorators.js';
-// import { IVoidConfigStateService } from './registerConfig.js';
 import { writeFileWithDiffInstructions } from './prompt/systemPrompts.js';
-import { ComputedDiff, findDiffs } from './findDiffs.js';
+import { ComputedDiff, findDiffs } from './helpers/findDiffs.js';
 import { EndOfLinePreference, ITextModel } from '../../../../editor/common/model.js';
 import { IRange } from '../../../../editor/common/core/range.js';
 import { registerColor } from '../../../../platform/theme/common/colorUtils.js';
@@ -144,7 +143,6 @@ class InlineDiffsService extends Disposable implements IInlineDiffsService {
 
 	constructor(
 		// @IHistoryService private readonly _historyService: IHistoryService, // history service is the history of pressing alt left/right
-		// @IVoidConfigStateService private readonly _voidConfigStateService: IVoidConfigStateService,
 		@ICodeEditorService private readonly _editorService: ICodeEditorService,
 		@IModelService private readonly _modelService: IModelService,
 		@IUndoRedoService private readonly _undoRedoService: IUndoRedoService, // undoRedo service is the history of pressing ctrl+z
diff --git a/src/vs/workbench/contrib/void/browser/prompt/stringifySelections.ts b/src/vs/workbench/contrib/void/browser/prompt/stringifySelections.ts
index 17372ec9..e23ac6f4 100644
--- a/src/vs/workbench/contrib/void/browser/prompt/stringifySelections.ts
+++ b/src/vs/workbench/contrib/void/browser/prompt/stringifySelections.ts
@@ -3,7 +3,7 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import { CodeSelection } from '../registerThreads.js';
+import { CodeSelection } from '../threadHistoryService.js';
 
 export const stringifySelections = (selections: CodeSelection[]) => {
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 92e44671..b83d9ceb 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -6,10 +6,10 @@
 import React, { FormEvent, Fragment, useCallback, useEffect, useRef, useState } from 'react';
 
 
-import { useConfigState, useService, useSidebarState, useThreadsState } from '../util/services.js';
+import { useSettingsState, useService, useSidebarState, useThreadsState } from '../util/services.js';
 import { generateDiffInstructions } from '../../../prompt/systemPrompts.js';
 import { userInstructionsStr } from '../../../prompt/stringifySelections.js';
-import { ChatMessage, CodeSelection, CodeStagingSelection } from '../../../registerThreads.js';
+import { ChatMessage, CodeSelection, CodeStagingSelection } from '../../../threadHistoryService.js';
 
 import { BlockCode } from '../markdown/BlockCode.js';
 import { ChatMarkdownRender } from '../markdown/ChatMarkdownRender.js';
@@ -19,7 +19,7 @@ import { EndOfLinePreference } from '../../../../../../../editor/common/model.js
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
 import { ErrorDisplay } from './ErrorDisplay.js';
 import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
-import { getCmdKey } from '../../../getCmdKey.js'
+import { getCmdKey } from '../../../helpers/getCmdKey.js'
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { VoidInputBox } from './inputs.js';
 import { ModelSelectionOfFeature } from '../void-settings-tsx/ModelSelectionSettings.js';
@@ -277,9 +277,6 @@ export const SidebarChat = () => {
 		return () => disposables.forEach(d => d.dispose())
 	}, [sidebarStateService, inputBoxRef])
 
-	// config state
-	const voidConfigState = useConfigState()
-
 	// threads state
 	const threadsState = useThreadsState()
 	const threadsStateService = useService('threadsStateService')
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
index 56524b60..b4de1b6f 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
@@ -6,7 +6,7 @@
 import React, { useEffect, useState } from 'react';
 import * as ReactDOM from 'react-dom/client'
 import { _registerServices } from './services.js';
-import { ReactServicesType } from '../../../reactServices.js';
+import { ReactServicesType } from '../../../helpers/reactServicesHelper.js';
 
 
 export const mountFnGenerator = (Component: React.FC) => (rootElement: HTMLElement, services: ReactServicesType) => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
index 25fb80f3..70219c0b 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
@@ -4,35 +4,38 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { useState, useEffect } from 'react'
-import { VoidSidebarState } from '../../../registerSidebar.js'
-import { ThreadsState } from '../../../registerThreads.js'
-import { SettingsOfProvider } from '../../../../../../../platform/void/common/voidConfigTypes.js'
+import { ThreadsState } from '../../../threadHistoryService.js'
+import { SettingsOfProvider } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import { RefreshModelState } from '../../../../../../../platform/void/common/refreshModelService.js'
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js'
-import { ReactServicesType } from '../../../reactServices.js'
+import { ReactServicesType } from '../../../helpers/reactServicesHelper.js'
+import { VoidSidebarState } from '../../../sidebarStateService.js'
+import { VoidSettingsState } from '../../../../../../../platform/void/common/voidSettingsService.js'
 
 
 // normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes
 
 let services: ReactServicesType
 
-// even if React hasn't mounted yet, these variables are always updated to the latest state:
+// even if React hasn't mounted yet, the variables are always updated to the latest state.
+// React listens by adding a setState function to these listeners.
 let sidebarState: VoidSidebarState
-let threadsState: ThreadsState
-let settingsOfProvider: SettingsOfProvider
-let refreshModelState: RefreshModelState
-
-// React listens by adding a setState function to these:
 const sidebarStateListeners: Set<(s: VoidSidebarState) => void> = new Set()
+
+let threadsState: ThreadsState
 const threadsStateListeners: Set<(s: ThreadsState) => void> = new Set()
-const settingsOfProviderListeners: Set<(s: SettingsOfProvider) => void> = new Set()
+
+let settingsState: VoidSettingsState
+const settingsStateListeners: Set<(s: VoidSettingsState) => void> = new Set()
+
+let refreshModelState: RefreshModelState
 const refreshModelStateListeners: Set<(s: RefreshModelState) => void> = new Set()
 
+
+
 // must call this before you can use any of the hooks below
 // this should only be called ONCE! this is the only place you don't need to dispose onDidChange. If you use state.onDidChange anywhere else, make sure to dispose it!
-
 let wasCalled = false
-
 export const _registerServices = (services_: ReactServicesType) => {
 
 	const disposables: IDisposable[] = []
@@ -41,7 +44,7 @@ export const _registerServices = (services_: ReactServicesType) => {
 	wasCalled = true
 
 	services = services_
-	const { sidebarStateService, configStateService, threadsStateService, refreshModelService } = services
+	const { sidebarStateService, settingsStateService, threadsStateService, refreshModelService } = services
 
 	sidebarState = sidebarStateService.state
 	disposables.push(
@@ -59,11 +62,11 @@ export const _registerServices = (services_: ReactServicesType) => {
 		})
 	)
 
-	settingsOfProvider = configStateService.state.settingsOfProvider
+	settingsState = settingsStateService.state
 	disposables.push(
-		configStateService.onDidChangeState(() => {
-			settingsOfProvider = configStateService.state.settingsOfProvider
-			settingsOfProviderListeners.forEach(l => l(settingsOfProvider))
+		settingsStateService.onDidChangeState(() => {
+			settingsState = settingsStateService.state
+			settingsStateListeners.forEach(l => l(settingsState))
 		})
 	)
 
@@ -99,12 +102,12 @@ export const useSidebarState = () => {
 	return s
 }
 
-export const useConfigState = () => {
-	const [s, ss] = useState(settingsOfProvider)
+export const useSettingsState = () => {
+	const [s, ss] = useState(settingsState)
 	useEffect(() => {
-		ss(settingsOfProvider)
-		settingsOfProviderListeners.add(ss)
-		return () => { settingsOfProviderListeners.delete(ss) }
+		ss(settingsState)
+		settingsStateListeners.add(ss)
+		return () => { settingsStateListeners.delete(ss) }
 	}, [ss])
 	return s
 }
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
index 2e95d1ed..beefbc3c 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
@@ -4,66 +4,44 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { FeatureName, featureNames, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidConfigTypes.js'
-import { dummyModelData } from '../../../../../../../platform/void/common/voidConfigTypes.js'
-import { useConfigState, useRefreshModelState, useService } from '../util/services.js'
+import { FeatureName, featureNames, ModelSelection, modelSelectionsEqual, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
+import { useSettingsState, useRefreshModelState, useService } from '../util/services.js'
 import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
 
 
 export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureName }) => {
 
-	const voidConfigService = useService('configStateService')
-	const voidConfigState = useConfigState()
-
-	const modelOptions: { text: string, value: [string, string] }[] = []
-
-	for (const providerName of providerNames) {
-		const providerConfig = voidConfigState[providerName]
-		if (providerConfig.enabled !== 'true') continue
-		providerConfig.models?.forEach(model => {
-			modelOptions.push({ text: `${model} (${providerName})`, value: [providerName, model] })
-		})
-	}
-
-
-	const isDummy = modelOptions.length === 0
-	if (isDummy) {
-		for (const [providerName, models] of Object.entries(dummyModelData)) {
-			for (let model of models) {
-				modelOptions.push({ text: `${model} (${providerName})`, value: ['dummy', 'dummy'] })
-			}
-		}
-	}
+	const voidSettingsService = useService('settingsStateService')
+	const settingsState = useSettingsState()
 
 	let weChangedText = false
-
 	return <>
 		<h2>{featureName}</h2>
 		{
 			<VoidSelectBox
-				options={modelOptions}
-				onChangeSelection={useCallback((newVal: [string, string]) => {
-					if (isDummy) return // don't set state to the dummy value
+				options={settingsState._modelsList}
+				onChangeSelection={useCallback((newVal: ModelSelection) => {
 					if (weChangedText) return
 
-					voidConfigService.setModelSelectionOfFeature(featureName, { providerName: newVal[0] as ProviderName, modelName: newVal[1] })
-				}, [voidConfigService, featureName, isDummy])}
+					voidSettingsService.setModelSelectionOfFeature(featureName, newVal)
+				}, [voidSettingsService, featureName])}
 				// we are responsible for setting the initial state here. always sync instance when state changes.
 				onCreateInstance={useCallback((instance: SelectBox) => {
 					const syncInstance = () => {
-						const settingsAtProvider = voidConfigService.state.modelSelectionOfFeature[featureName]
-						const index = modelOptions.findIndex(v => v.value[0] === settingsAtProvider?.providerName && v.value[1] === settingsAtProvider?.modelName)
-						if (index !== -1) {
+						const modelsListRef = voidSettingsService.state._modelsList // as a ref
+						const settingsAtProvider = voidSettingsService.state.modelSelectionOfFeature[featureName]
+						const selectionIdx = settingsAtProvider === null ? -1 : modelsListRef.findIndex(v => modelSelectionsEqual(v.value, settingsAtProvider))
+						if (selectionIdx !== -1) {
 							weChangedText = true
-							instance.select(index)
+							instance.select(selectionIdx)
 							weChangedText = false
 						}
 					}
 					syncInstance()
-					const disposable = voidConfigService.onDidChangeState(syncInstance)
+					const disposable = voidSettingsService.onDidChangeState(syncInstance)
 					return [disposable]
-				}, [voidConfigService, modelOptions, featureName])}
+				}, [voidSettingsService, featureName])}
 			/>}
 
 	</>
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
index 33a1b95c..0b91bf93 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
@@ -4,9 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
-import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames, featureNames, SettingsOfProvider, SettingName, defaultVoidProviderState } from '../../../../../../../platform/void/common/voidConfigTypes.js'
+import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames, featureNames, SettingsOfProvider, SettingName, defaultSettingsOfProvider } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import { VoidInputBox } from '../sidebar-tsx/inputs.js'
-import { useConfigState, useService } from '../util/services.js'
+import { useSettingsState, useService } from '../util/services.js'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
 
@@ -14,41 +14,34 @@ import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
 const Setting = ({ providerName, settingName }: { providerName: ProviderName, settingName: SettingName }) => {
 
 	const { title, type, placeholder } = displayInfoOfSettingName(providerName, settingName)
-	const voidConfigService = useService('configStateService')
+	const voidSettingsService = useService('settingsStateService')
 
 
-	let weChangedText = false
+	let weChangedTextRef = false
 
 	return <><ErrorBoundary>
 		<label>{title}</label>
 		<VoidInputBox
 			placeholder={placeholder}
 			onChangeText={useCallback((newVal) => {
-				if (weChangedText) return
-
-				voidConfigService.setSettingOfProvider(providerName, settingName, newVal)
-				// if we just disabeld this provider, we should unselect all models that use it
-				if (settingName === 'enabled' && newVal !== 'true') {
-					for (let featureName of featureNames) {
-						if (voidConfigService.state.modelSelectionOfFeature[featureName]?.providerName === providerName)
-							voidConfigService.setModelSelectionOfFeature(featureName, null)
-					}
-				}
-			}, [voidConfigService, providerName, settingName])}
+				if (weChangedTextRef) return
+				voidSettingsService.setSettingOfProvider(providerName, settingName, newVal)
+			}, [voidSettingsService, providerName, settingName])}
 
 			// we are responsible for setting the initial value. always sync the instance whenever there's a change to state.
 			onCreateInstance={useCallback((instance: InputBox) => {
 				const syncInstance = () => {
-					const settingsAtProvider = voidConfigService.state.settingsOfProvider[providerName];
+					const settingsAtProvider = voidSettingsService.state.settingsOfProvider[providerName];
 					const stateVal = settingsAtProvider[settingName as keyof typeof settingsAtProvider]
-					weChangedText = true
+					// console.log('SYNCING TO', providerName, settingName, stateVal)
+					weChangedTextRef = true
 					instance.value = stateVal as string
-					weChangedText = false
+					weChangedTextRef = false
 				}
 				syncInstance()
-				const disposable = voidConfigService.onDidChangeState(syncInstance)
+				const disposable = voidSettingsService.onDidChangeState(syncInstance)
 				return [disposable]
-			}, [voidConfigService, providerName, settingName])}
+			}, [voidSettingsService, providerName, settingName])}
 			multiline={false}
 		/>
 	</ErrorBoundary></>
@@ -57,8 +50,8 @@ const Setting = ({ providerName, settingName }: { providerName: ProviderName, se
 
 
 const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
-	const voidConfigState = useConfigState()
-	const { models, ...others } = voidConfigState[providerName]
+	const voidSettingsState = useSettingsState()
+	const { models, ...others } = voidSettingsState.settingsOfProvider[providerName]
 
 	return <>
 		<h1 className='text-xl'>{titleOfProviderName(providerName)}</h1>
@@ -77,7 +70,5 @@ export const VoidProviderSettings = () => {
 		{providerNames.map(providerName =>
 			<SettingsForProvider key={providerName} providerName={providerName} />
 		)}
-
-
 	</>
 }
diff --git a/src/vs/workbench/contrib/void/browser/reactServices.ts b/src/vs/workbench/contrib/void/browser/reactServices.ts
deleted file mode 100644
index e465ca93..00000000
--- a/src/vs/workbench/contrib/void/browser/reactServices.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
-import { IModelService } from '../../../../editor/common/services/model.js';
-import { IClipboardService } from '../../../../platform/clipboard/common/clipboardService.js';
-import { IContextViewService, IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
-import { IFileService } from '../../../../platform/files/common/files.js';
-import { IHoverService } from '../../../../platform/hover/browser/hover.js';
-import { IThemeService } from '../../../../platform/theme/common/themeService.js';
-import { ILLMMessageService } from '../../../../platform/void/common/llmMessageService.js';
-import { IRefreshModelService } from '../../../../platform/void/common/refreshModelService.js';
-import { IVoidConfigStateService } from '../../../../platform/void/common/voidConfigService.js';
-import { IInlineDiffsService } from './registerInlineDiffs.js';
-import { IVoidSidebarStateService } from './registerSidebar.js';
-import { IThreadHistoryService } from './registerThreads.js';
-
-export type ReactServicesType = {
-	sidebarStateService: IVoidSidebarStateService;
-	configStateService: IVoidConfigStateService;
-	threadsStateService: IThreadHistoryService;
-	fileService: IFileService;
-	modelService: IModelService;
-	inlineDiffService: IInlineDiffsService;
-	llmMessageService: ILLMMessageService;
-	clipboardService: IClipboardService;
-	refreshModelService: IRefreshModelService;
-
-	themeService: IThemeService,
-	hoverService: IHoverService,
-
-	contextViewService: IContextViewService;
-	contextMenuService: IContextMenuService;
-}
-
-
-export const getReactServices = (accessor: ServicesAccessor): ReactServicesType => {
-	return {
-		configStateService: accessor.get(IVoidConfigStateService),
-		sidebarStateService: accessor.get(IVoidSidebarStateService),
-		threadsStateService: accessor.get(IThreadHistoryService),
-		fileService: accessor.get(IFileService),
-		modelService: accessor.get(IModelService),
-		inlineDiffService: accessor.get(IInlineDiffsService),
-		llmMessageService: accessor.get(ILLMMessageService),
-		clipboardService: accessor.get(IClipboardService),
-		themeService: accessor.get(IThemeService),
-		hoverService: accessor.get(IHoverService),
-		refreshModelService: accessor.get(IRefreshModelService),
-		contextViewService: accessor.get(IContextViewService),
-		contextMenuService: accessor.get(IContextMenuService),
-	}
-}
-
diff --git a/src/vs/workbench/contrib/void/browser/registerActions.ts b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
similarity index 92%
rename from src/vs/workbench/contrib/void/browser/registerActions.ts
rename to src/vs/workbench/contrib/void/browser/sidebarActions.ts
index 16bb7600..bc80596d 100644
--- a/src/vs/workbench/contrib/void/browser/registerActions.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
@@ -11,16 +11,16 @@ import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js
 
 import { KeybindingWeight } from '../../../../platform/keybinding/common/keybindingsRegistry.js';
 import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextkey.js';
-import { CodeStagingSelection, IThreadHistoryService } from './registerThreads.js';
+import { CodeStagingSelection, IThreadHistoryService } from './threadHistoryService.js';
 // import { IEditorService } from '../../../services/editor/common/editorService.js';
 
 import { IEditorService } from '../../../services/editor/common/editorService.js';
 import { ICodeEditorService } from '../../../../editor/browser/services/codeEditorService.js';
 import { IRange } from '../../../../editor/common/core/range.js';
 import { ITextModel } from '../../../../editor/common/model.js';
-import { IVoidSidebarStateService, VOID_VIEW_ID } from './registerSidebar.js';
+import { VOID_VIEW_ID } from './sidebarViewPane.js';
 import { IMetricsService } from '../../../../platform/void/common/metricsService.js';
-// import { IClipboardService } from '../../../../platform/clipboard/common/clipboardService.js';
+import { ISidebarStateService } from './sidebarStateService.js';
 
 
 // ---------- Register commands and keybindings ----------
@@ -61,7 +61,7 @@ registerAction2(class extends Action2 {
 		if (!model)
 			return
 
-		const stateService = accessor.get(IVoidSidebarStateService)
+		const stateService = accessor.get(ISidebarStateService)
 		const metricsService = accessor.get(IMetricsService)
 
 		metricsService.capture('Chat Navigation', { type: 'Ctrl+L' })
@@ -126,7 +126,7 @@ registerAction2(class extends Action2 {
 		});
 	}
 	async run(accessor: ServicesAccessor): Promise<void> {
-		const stateService = accessor.get(IVoidSidebarStateService)
+		const stateService = accessor.get(ISidebarStateService)
 		const metricsService = accessor.get(IMetricsService)
 
 		metricsService.capture('Chat Navigation', { type: 'New Chat' })
@@ -149,7 +149,7 @@ registerAction2(class extends Action2 {
 		});
 	}
 	async run(accessor: ServicesAccessor): Promise<void> {
-		const stateService = accessor.get(IVoidSidebarStateService)
+		const stateService = accessor.get(ISidebarStateService)
 		const metricsService = accessor.get(IMetricsService)
 
 		metricsService.capture('Chat Navigation', { type: 'History' })
@@ -159,7 +159,6 @@ registerAction2(class extends Action2 {
 	}
 })
 
-// // Settings (API config) menu button
 // registerAction2(class extends Action2 {
 // 	constructor() {
 // 		super({
diff --git a/src/vs/workbench/contrib/void/browser/sidebarStateService.ts b/src/vs/workbench/contrib/void/browser/sidebarStateService.ts
new file mode 100644
index 00000000..0cab1180
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/sidebarStateService.ts
@@ -0,0 +1,84 @@
+import { Emitter, Event } from '../../../../base/common/event.js';
+import { Disposable } from '../../../../base/common/lifecycle.js';
+import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
+import { createDecorator } from '../../../../platform/instantiation/common/instantiation.js';
+import { IViewsService } from '../../../services/views/common/viewsService.js';
+import { VOID_VIEW_CONTAINER_ID, VOID_VIEW_ID } from './sidebarViewPane.js';
+
+
+// service that manages sidebar's state
+export type VoidSidebarState = {
+	isHistoryOpen: boolean;
+	currentTab: 'chat';
+}
+
+export interface ISidebarStateService {
+	readonly _serviceBrand: undefined;
+
+	readonly state: VoidSidebarState; // readonly to the user
+	setState(newState: Partial<VoidSidebarState>): void;
+	onDidChangeState: Event<void>;
+
+	onDidFocusChat: Event<void>;
+	onDidBlurChat: Event<void>;
+	fireFocusChat(): void;
+	fireBlurChat(): void;
+
+	openSidebarView(): void;
+}
+
+export const ISidebarStateService = createDecorator<ISidebarStateService>('voidSidebarStateService');
+class VoidSidebarStateService extends Disposable implements ISidebarStateService {
+	_serviceBrand: undefined;
+
+	static readonly ID = 'voidSidebarStateService';
+
+	private readonly _onDidChangeState = new Emitter<void>();
+	readonly onDidChangeState: Event<void> = this._onDidChangeState.event;
+
+	private readonly _onFocusChat = new Emitter<void>();
+	readonly onDidFocusChat: Event<void> = this._onFocusChat.event;
+
+	private readonly _onBlurChat = new Emitter<void>();
+	readonly onDidBlurChat: Event<void> = this._onBlurChat.event;
+
+
+	// state
+	state: VoidSidebarState
+
+	constructor(
+		@IViewsService private readonly _viewsService: IViewsService,
+	) {
+		super()
+
+		// initial state
+		this.state = { isHistoryOpen: false, currentTab: 'chat', }
+	}
+
+
+	setState(newState: Partial<VoidSidebarState>) {
+		// make sure view is open if the tab changes
+		if ('currentTab' in newState) {
+			this.openSidebarView()
+		}
+
+		this.state = { ...this.state, ...newState }
+		this._onDidChangeState.fire()
+	}
+
+	fireFocusChat() {
+		this._onFocusChat.fire()
+	}
+
+	fireBlurChat() {
+		this._onBlurChat.fire()
+	}
+
+	openSidebarView() {
+		this._viewsService.openViewContainer(VOID_VIEW_CONTAINER_ID);
+		this._viewsService.openView(VOID_VIEW_ID);
+	}
+
+}
+
+registerSingleton(ISidebarStateService, VoidSidebarStateService, InstantiationType.Eager);
diff --git a/src/vs/workbench/contrib/void/browser/registerSidebar.ts b/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
similarity index 67%
rename from src/vs/workbench/contrib/void/browser/registerSidebar.ts
rename to src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
index 6bed1eee..8b778474 100644
--- a/src/vs/workbench/contrib/void/browser/registerSidebar.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
@@ -24,9 +24,8 @@ import { SyncDescriptor } from '../../../../platform/instantiation/common/descri
 import { IViewPaneOptions, ViewPane } from '../../../browser/parts/views/viewPane.js';
 
 import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
-import { createDecorator, IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
-import { Disposable, IDisposable } from '../../../../base/common/lifecycle.js';
-import { Emitter, Event } from '../../../../base/common/event.js';
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { IDisposable } from '../../../../base/common/lifecycle.js';
 import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
 import { IThemeService } from '../../../../platform/theme/common/themeService.js';
 import { IContextMenuService } from '../../../../platform/contextview/browser/contextView.js';
@@ -37,18 +36,11 @@ import { IHoverService } from '../../../../platform/hover/browser/hover.js';
 
 import { mountSidebar } from './react/out/sidebar-tsx/index.js';
 
-import { IViewsService } from '../../../services/views/common/viewsService.js';
-import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
-import { getReactServices } from './reactServices.js';
+import { getReactServices } from './helpers/reactServicesHelper.js';
 
 
 // compare against search.contribution.ts and debug.contribution.ts, scm.contribution.ts (source control)
 
-export type VoidSidebarState = {
-	isHistoryOpen: boolean;
-	currentTab: 'chat';
-}
-
 // ---------- Define viewpane ----------
 
 class VoidSidebarViewPane extends ViewPane {
@@ -132,77 +124,3 @@ viewsRegistry.registerViews([{
 	// },
 }], viewContainer);
 
-
-
-// ---------- Register service that manages sidebar's state ----------
-
-export interface IVoidSidebarStateService {
-	readonly _serviceBrand: undefined;
-
-	readonly state: VoidSidebarState; // readonly to the user
-	setState(newState: Partial<VoidSidebarState>): void;
-	onDidChangeState: Event<void>;
-
-	onDidFocusChat: Event<void>;
-	onDidBlurChat: Event<void>;
-	fireFocusChat(): void;
-	fireBlurChat(): void;
-
-	openSidebarView(): void;
-}
-
-export const IVoidSidebarStateService = createDecorator<IVoidSidebarStateService>('voidSidebarStateService');
-class VoidSidebarStateService extends Disposable implements IVoidSidebarStateService {
-	_serviceBrand: undefined;
-
-	static readonly ID = 'voidSidebarStateService';
-
-	private readonly _onDidChangeState = new Emitter<void>();
-	readonly onDidChangeState: Event<void> = this._onDidChangeState.event;
-
-	private readonly _onFocusChat = new Emitter<void>();
-	readonly onDidFocusChat: Event<void> = this._onFocusChat.event;
-
-	private readonly _onBlurChat = new Emitter<void>();
-	readonly onDidBlurChat: Event<void> = this._onBlurChat.event;
-
-
-	// state
-	state: VoidSidebarState
-
-	constructor(
-		@IViewsService private readonly _viewsService: IViewsService,
-	) {
-		super()
-
-		// initial state
-		this.state = { isHistoryOpen: false, currentTab: 'chat', }
-	}
-
-
-	setState(newState: Partial<VoidSidebarState>) {
-		// make sure view is open if the tab changes
-		if ('currentTab' in newState) {
-			this.openSidebarView()
-		}
-
-		this.state = { ...this.state, ...newState }
-		this._onDidChangeState.fire()
-	}
-
-	fireFocusChat() {
-		this._onFocusChat.fire()
-	}
-
-	fireBlurChat() {
-		this._onBlurChat.fire()
-	}
-
-	openSidebarView() {
-		this._viewsService.openViewContainer(VOID_VIEW_CONTAINER_ID);
-		this._viewsService.openView(VOID_VIEW_ID);
-	}
-
-}
-
-registerSingleton(IVoidSidebarStateService, VoidSidebarStateService, InstantiationType.Eager);
diff --git a/src/vs/workbench/contrib/void/browser/registerThreads.ts b/src/vs/workbench/contrib/void/browser/threadHistoryService.ts
similarity index 98%
rename from src/vs/workbench/contrib/void/browser/registerThreads.ts
rename to src/vs/workbench/contrib/void/browser/threadHistoryService.ts
index d92e8942..9d704c65 100644
--- a/src/vs/workbench/contrib/void/browser/registerThreads.ts
+++ b/src/vs/workbench/contrib/void/browser/threadHistoryService.ts
@@ -10,7 +10,7 @@ import { IStorageService, StorageScope, StorageTarget } from '../../../../platfo
 
 import { URI } from '../../../../base/common/uri.js';
 import { Emitter, Event } from '../../../../base/common/event.js';
-import { IAutocompleteService } from './registerAutocomplete.js';
+import { IAutocompleteService } from './autocompleteService.js';
 import { IRange } from '../../../../editor/common/core/range.js';
 
 export type CodeSelection = {
@@ -80,7 +80,7 @@ const newThreadObject = () => {
 	}
 }
 
-const THREAD_STORAGE_KEY = 'void.threadsHistory'
+const THREAD_STORAGE_KEY = 'void.threadHistory'
 
 export interface IThreadHistoryService {
 	readonly _serviceBrand: undefined;
diff --git a/src/vs/workbench/contrib/void/browser/void.contribution.ts b/src/vs/workbench/contrib/void/browser/void.contribution.ts
index dbb6f0ab..ee12a345 100644
--- a/src/vs/workbench/contrib/void/browser/void.contribution.ts
+++ b/src/vs/workbench/contrib/void/browser/void.contribution.ts
@@ -3,23 +3,23 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-// register keybinds
-import './registerActions.js'
 
 // register inline diffs
-import './registerInlineDiffs.js'
+import './inlineDiffsService.js'
 
-// register Sidebar chat
-import './registerSidebar.js'
+// register Sidebar pane, state, actions (keybinds, menus)
+import './sidebarActions.js'
+import './sidebarViewPane.js'
+import './sidebarStateService.js'
 
 // register Thread History
-import './registerThreads.js'
+import './threadHistoryService.js'
 
 // register Autocomplete
-import './registerAutocomplete.js'
+import './autocompleteService.js'
 
 // register css
 import './media/void.css'
 
 // settings pane
-import './voidSettingsEditorPane.js'
+import './voidSettingsPane.js'
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
similarity index 84%
rename from src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts
rename to src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index cb5f4732..3bf9f685 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsEditorPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -15,10 +15,8 @@ import { IStorageService } from '../../../../platform/storage/common/storage.js'
 import { Dimension } from '../../../../base/browser/dom.js';
 import { EditorPaneDescriptor, IEditorPaneRegistry } from '../../../browser/editor.js';
 import { SyncDescriptor } from '../../../../platform/instantiation/common/descriptors.js';
-import { Action2, registerAction2 } from '../../../../platform/actions/common/actions.js';
-import { KeybindingWeight } from '../../../../platform/keybinding/common/keybindingsRegistry.js';
+import { Action2, MenuId, registerAction2 } from '../../../../platform/actions/common/actions.js';
 import { Registry } from '../../../../platform/registry/common/platform.js';
-import { KeyCode, KeyMod } from '../../../../base/common/keyCodes.js';
 import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
 import { IEditorService } from '../../../services/editor/common/editorService.js';
 import { URI } from '../../../../base/common/uri.js';
@@ -26,12 +24,13 @@ import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextke
 
 
 import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
-import { getReactServices } from './reactServices.js';
+import { getReactServices } from './helpers/reactServicesHelper.js';
+import { Codicon } from '../../../../base/common/codicons.js';
 
 
 // refer to preferences.contribution.ts keybindings editor
 
-export class VoidEditorInput extends EditorInput {
+class VoidEditorInput extends EditorInput {
 
 	static readonly ID: string = 'workbench.input.void.settings';
 
@@ -93,17 +92,25 @@ Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane
 );
 
 
-// Register the action
+// Register the gear
 registerAction2(class extends Action2 {
 	constructor() {
 		super({
-			id: 'workbench.action.openVoidEditor',
-			title: 'Open Void Settings',
-			keybinding: {
-				when: ContextKeyExpr.true(),
-				primary: KeyMod.CtrlCmd | KeyCode.KeyE,
-				weight: KeybindingWeight.WorkbenchContrib
-			}
+			id: 'workbench.action.openVoidSettings',
+			title: nls.localize2('voidSettings', "Void: Settings"),
+			f1: true,
+			icon: Codicon.gear,
+			menu: [
+				{
+					id: MenuId.LayoutControlMenuSubmenu,
+					group: 'z_end',
+				},
+				{
+					id: MenuId.LayoutControlMenu,
+					when: ContextKeyExpr.equals('config.workbench.layoutControl.type', 'both'),
+					group: 'z_end'
+				}
+			]
 		});
 	}
 	async run(accessor: ServicesAccessor): Promise<void> {
@@ -112,5 +119,4 @@ registerAction2(class extends Action2 {
 		const input = instantiationService.createInstance(VoidEditorInput);
 		await editorService.openEditor(input);
 	}
-});
-
+})

From f6924df09be7210d4edf1a7620f6574436f74b69 Mon Sep 17 00:00:00 2001
From: mp <mathewpareles@gmail.com>
Date: Sun, 15 Dec 2024 20:52:39 -0800
Subject: [PATCH 06/21] Fix rerenders

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index b83d9ceb..8226db82 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -86,7 +86,7 @@ const IconSquare = ({ size, className = '' }: { size: number, className?: string
 };
 
 
-const ScrollToBottomContainer = ({ children, height, className }: { children: React.ReactNode, height: React.CSSProperties['height'], className?: string }) => {
+const ScrollToBottomContainer = ({ children, className, style }: { children: React.ReactNode, className?: string, style?: React.CSSProperties }) => {
 	const [isAtBottom, setIsAtBottom] = useState(true); // Start at bottom
 	const divRef = useRef<HTMLDivElement>(null);
 
@@ -123,8 +123,8 @@ const ScrollToBottomContainer = ({ children, height, className }: { children: Re
 		<div
 			ref={divRef}
 			onScroll={onScroll}
-			style={{ height: height }}
 			className={className}
+			style={style}
 		>
 			{children}
 		</div>
@@ -294,9 +294,13 @@ export const SidebarChat = () => {
 
 	// state of current message
 	const [instructions, setInstructions] = useState('') // the user's instructions
-	const onChangeText = useCallback((newStr: string) => { setInstructions(newStr) }, [setInstructions])
 	const isDisabled = !instructions.trim()
-	const formRef = useRef<HTMLFormElement | null>(null)
+	const [formHeight, setFormHeight] = useState(0)
+	const [sidebarHeight, setSidebarHeight] = useState(0)
+	const formRef = useCallback((node: HTMLFormElement | null) => { if (node) { setFormHeight(node.clientHeight); } }, [setFormHeight]);
+	const sidebarRef = useCallback((node: HTMLDivElement | null) => { if (node) { setSidebarHeight(node.clientHeight); } }, [setSidebarHeight]);
+	const onChangeText = useCallback((newStr: string) => { setInstructions(newStr) }, [setInstructions])
+
 
 	const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
 
@@ -396,25 +400,28 @@ export const SidebarChat = () => {
 
 	}
 
-
 	const currentThread = threadsStateService.getCurrentThread(threadsState)
 
 	const selections = threadsState._currentStagingSelections
 
 	const previousMessages = currentThread?.messages ?? []
 
-	return <>
+	return <div
+		ref={sidebarRef}
+		className={`w-full h-full`}
+	>
 		<ScrollToBottomContainer
-			height={`calc(100%-${formRef.current?.height ?? 0}px)`}
-			className='overflow-x-hidden overflow-y-auto space-y-4'
+			className={`overflow-x-hidden overflow-y-auto space-y-4`}
+			style={{ height: sidebarHeight - formHeight - 30 }}
 		>
 			{/* previous messages */}
-			{previousMessages.map((message, i) =>
-				<ChatBubble key={i} chatMessage={message} />
-			)}
+			{previousMessages.map((message, i) => <ChatBubble key={i} chatMessage={message} />)}
 
 			{/* message stream */}
 			<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} />
+
+			<div>{`text`}</div>
+
 		</ScrollToBottomContainer>
 
 
@@ -425,7 +432,7 @@ export const SidebarChat = () => {
 			<form
 				ref={formRef}
 				className={`
-					flex flex-col gap-2 px-2 py-0.5 relative input text-left shrink-0
+					flex flex-col gap-2 p-2 relative input text-left shrink-0
 					transition-all duration-200
 					rounded-md
 					bg-vscode-input-bg
@@ -507,7 +514,7 @@ export const SidebarChat = () => {
 
 			</form>
 		</div>
-	</>
+	</div>
 }
 
 

From 718b8cc61b951beff1342c2c5a3eaac4622e50d0 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 15 Dec 2024 21:10:15 -0800
Subject: [PATCH 07/21] add void settings  in lower left

---
 .../platform/void/common/voidSettingsService.ts |  2 +-
 .../ModelSelectionSettings.tsx                  | 17 +++++++----------
 .../contrib/void/browser/voidSettingsPane.ts    | 16 ++++++++++++++--
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/vs/platform/void/common/voidSettingsService.ts b/src/vs/platform/void/common/voidSettingsService.ts
index 6309213b..dbaf0837 100644
--- a/src/vs/platform/void/common/voidSettingsService.ts
+++ b/src/vs/platform/void/common/voidSettingsService.ts
@@ -29,7 +29,7 @@ type SetModelSelectionOfFeature = <K extends FeatureName>(
 
 
 
-type ModelOption = { text: string, value: ModelSelection }
+export type ModelOption = { text: string, value: ModelSelection }
 
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
index beefbc3c..bc16aeaa 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
@@ -17,13 +17,13 @@ export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureN
 
 	let weChangedText = false
 	return <>
-		<h2>{featureName}</h2>
-		{
-			<VoidSelectBox
+		{settingsState._modelsList.length === 0 ?
+
+			'Please add a provider!'
+			: <VoidSelectBox
 				options={settingsState._modelsList}
 				onChangeSelection={useCallback((newVal: ModelSelection) => {
 					if (weChangedText) return
-
 					voidSettingsService.setModelSelectionOfFeature(featureName, newVal)
 				}, [voidSettingsService, featureName])}
 				// we are responsible for setting the initial state here. always sync instance when state changes.
@@ -32,18 +32,15 @@ export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureN
 						const modelsListRef = voidSettingsService.state._modelsList // as a ref
 						const settingsAtProvider = voidSettingsService.state.modelSelectionOfFeature[featureName]
 						const selectionIdx = settingsAtProvider === null ? -1 : modelsListRef.findIndex(v => modelSelectionsEqual(v.value, settingsAtProvider))
-						if (selectionIdx !== -1) {
-							weChangedText = true
-							instance.select(selectionIdx)
-							weChangedText = false
-						}
+						weChangedText = true
+						instance.select(selectionIdx === -1 ? 0 : selectionIdx)
+						weChangedText = false
 					}
 					syncInstance()
 					const disposable = voidSettingsService.onDidChangeState(syncInstance)
 					return [disposable]
 				}, [voidSettingsService, featureName])}
 			/>}
-
 	</>
 }
 
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 3bf9f685..7ece62e6 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -15,7 +15,7 @@ import { IStorageService } from '../../../../platform/storage/common/storage.js'
 import { Dimension } from '../../../../base/browser/dom.js';
 import { EditorPaneDescriptor, IEditorPaneRegistry } from '../../../browser/editor.js';
 import { SyncDescriptor } from '../../../../platform/instantiation/common/descriptors.js';
-import { Action2, MenuId, registerAction2 } from '../../../../platform/actions/common/actions.js';
+import { Action2, MenuId, MenuRegistry, registerAction2 } from '../../../../platform/actions/common/actions.js';
 import { Registry } from '../../../../platform/registry/common/platform.js';
 import { ServicesAccessor } from '../../../../editor/browser/editorExtensions.js';
 import { IEditorService } from '../../../services/editor/common/editorService.js';
@@ -92,11 +92,12 @@ Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane
 );
 
 
+const OPEN_VOID_SETTINGS_ID = 'workbench.action.openVoidSettings'
 // Register the gear
 registerAction2(class extends Action2 {
 	constructor() {
 		super({
-			id: 'workbench.action.openVoidSettings',
+			id: OPEN_VOID_SETTINGS_ID,
 			title: nls.localize2('voidSettings', "Void: Settings"),
 			f1: true,
 			icon: Codicon.gear,
@@ -120,3 +121,14 @@ registerAction2(class extends Action2 {
 		await editorService.openEditor(input);
 	}
 })
+
+
+
+MenuRegistry.appendMenuItem(MenuId.GlobalActivity, {
+	group: '0_command',
+	command: {
+		id: OPEN_VOID_SETTINGS_ID,
+		title: nls.localize('voidSettings', "Void Settings")
+	},
+	order: 1
+});

From 8403eed8ca73ae5ca5ef0352e9571e919b9578b1 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Sun, 15 Dec 2024 21:42:31 -0800
Subject: [PATCH 08/21] fix hook

---
 .../ModelSelectionSettings.tsx                | 55 ++++++++++---------
 .../contrib/void/browser/voidSettingsPane.ts  |  2 +-
 2 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
index bc16aeaa..6c8c53c1 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
@@ -10,37 +10,40 @@ import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
 
 
-export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureName }) => {
-
+const SelectBoxOfFeature = ({ featureName }: { featureName: FeatureName }) => {
 	const voidSettingsService = useService('settingsStateService')
 	const settingsState = useSettingsState()
 
 	let weChangedText = false
-	return <>
-		{settingsState._modelsList.length === 0 ?
 
-			'Please add a provider!'
-			: <VoidSelectBox
-				options={settingsState._modelsList}
-				onChangeSelection={useCallback((newVal: ModelSelection) => {
-					if (weChangedText) return
-					voidSettingsService.setModelSelectionOfFeature(featureName, newVal)
-				}, [voidSettingsService, featureName])}
-				// we are responsible for setting the initial state here. always sync instance when state changes.
-				onCreateInstance={useCallback((instance: SelectBox) => {
-					const syncInstance = () => {
-						const modelsListRef = voidSettingsService.state._modelsList // as a ref
-						const settingsAtProvider = voidSettingsService.state.modelSelectionOfFeature[featureName]
-						const selectionIdx = settingsAtProvider === null ? -1 : modelsListRef.findIndex(v => modelSelectionsEqual(v.value, settingsAtProvider))
-						weChangedText = true
-						instance.select(selectionIdx === -1 ? 0 : selectionIdx)
-						weChangedText = false
-					}
-					syncInstance()
-					const disposable = voidSettingsService.onDidChangeState(syncInstance)
-					return [disposable]
-				}, [voidSettingsService, featureName])}
-			/>}
+	return <VoidSelectBox
+		options={settingsState._modelsList}
+		onChangeSelection={useCallback((newVal: ModelSelection) => {
+			if (weChangedText) return
+			voidSettingsService.setModelSelectionOfFeature(featureName, newVal)
+		}, [voidSettingsService, featureName])}
+		// we are responsible for setting the initial state here. always sync instance when state changes.
+		onCreateInstance={useCallback((instance: SelectBox) => {
+			const syncInstance = () => {
+				const modelsListRef = voidSettingsService.state._modelsList // as a ref
+				const settingsAtProvider = voidSettingsService.state.modelSelectionOfFeature[featureName]
+				const selectionIdx = settingsAtProvider === null ? -1 : modelsListRef.findIndex(v => modelSelectionsEqual(v.value, settingsAtProvider))
+				weChangedText = true
+				instance.select(selectionIdx === -1 ? 0 : selectionIdx)
+				weChangedText = false
+			}
+			syncInstance()
+			const disposable = voidSettingsService.onDidChangeState(syncInstance)
+			return [disposable]
+		}, [voidSettingsService, featureName])}
+	/>
+}
+
+
+export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureName }) => {
+	const settingsState = useSettingsState()
+	return <>
+		{settingsState._modelsList.length === 0 ? 'Please add a provider!' : <SelectBoxOfFeature featureName={featureName} />}
 	</>
 }
 
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 7ece62e6..f09b5e63 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -123,7 +123,7 @@ registerAction2(class extends Action2 {
 })
 
 
-
+// add to settings gear on bottom left
 MenuRegistry.appendMenuItem(MenuId.GlobalActivity, {
 	group: '0_command',
 	command: {

From f973f8d4e794d159b5ad1e548b2efef06becff35 Mon Sep 17 00:00:00 2001
From: mp <mathewpareles@gmail.com>
Date: Sun, 15 Dec 2024 22:24:12 -0800
Subject: [PATCH 09/21] fix selection range bug

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 18 ++++++++++-----
 .../contrib/void/browser/sidebarActions.ts    | 22 ++++++++++---------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 8226db82..591886bc 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -297,8 +297,6 @@ export const SidebarChat = () => {
 	const isDisabled = !instructions.trim()
 	const [formHeight, setFormHeight] = useState(0)
 	const [sidebarHeight, setSidebarHeight] = useState(0)
-	const formRef = useCallback((node: HTMLFormElement | null) => { if (node) { setFormHeight(node.clientHeight); } }, [setFormHeight]);
-	const sidebarRef = useCallback((node: HTMLDivElement | null) => { if (node) { setSidebarHeight(node.clientHeight); } }, [setSidebarHeight]);
 	const onChangeText = useCallback((newStr: string) => { setInstructions(newStr) }, [setInstructions])
 
 
@@ -406,8 +404,14 @@ export const SidebarChat = () => {
 
 	const previousMessages = currentThread?.messages ?? []
 
+
+
+
+	const [_test, _setTest] = useState<string[]>([])
+
+
 	return <div
-		ref={sidebarRef}
+		ref={(ref) => { if (ref) { setSidebarHeight(ref.clientHeight); } }}
 		className={`w-full h-full`}
 	>
 		<ScrollToBottomContainer
@@ -420,7 +424,11 @@ export const SidebarChat = () => {
 			{/* message stream */}
 			<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} />
 
-			<div>{`text`}</div>
+			<button type='button' onClick={() => { _setTest(d => [...d, 'asdasdsadasd']) }}>more divs</button>
+			{_test.map((_, i) => <div key={i}>div {i}</div>)}
+			<div>{`totalHeight: ${sidebarHeight - formHeight - 30}`}</div>
+			<div>{`sidebarHeight: ${sidebarHeight}`}</div>
+			<div>{`formHeight: ${formHeight}`}</div>
 
 		</ScrollToBottomContainer>
 
@@ -430,7 +438,7 @@ export const SidebarChat = () => {
 			className={`right-0 left-0 m-2 z-[999] ${previousMessages.length > 0 ? 'absolute bottom-0' : ''}`}
 		>
 			<form
-				ref={formRef}
+				ref={(ref) => { if (ref) { setFormHeight(ref.clientHeight); } }}
 				className={`
 					flex flex-col gap-2 p-2 relative input text-left shrink-0
 					transition-all duration-200
diff --git a/src/vs/workbench/contrib/void/browser/sidebarActions.ts b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
index bc80596d..06f86b8e 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarActions.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
@@ -73,20 +73,12 @@ registerAction2(class extends Action2 {
 			accessor.get(IEditorService).activeTextEditorControl?.getSelection()
 		)
 
-		// add selection
-		const threadHistoryService = accessor.get(IThreadHistoryService)
-		const currentStaging = threadHistoryService.state._currentStagingSelections
-		const currentStagingEltIdx = currentStaging?.findIndex(s =>
-			s.fileURI.fsPath === model.uri.fsPath
-			&& s.range?.startLineNumber === selectionRange?.startLineNumber
-			&& s.range?.endLineNumber === selectionRange?.endLineNumber
-		)
 
 		if (selectionRange) {
 
 			const selectionStr = getContentInRange(model, selectionRange)
 
-			const selection: CodeStagingSelection = selectionStr === null ? {
+			const selection: CodeStagingSelection = selectionStr === null || selectionRange.startLineNumber > selectionRange.endLineNumber ? {
 				type: 'File',
 				fileURI: model.uri,
 				selectionStr: null,
@@ -98,7 +90,16 @@ registerAction2(class extends Action2 {
 				range: selectionRange,
 			}
 
-			// overwrite selections that match with this one (compares by `fileURI` and  line numbers in `range`)
+			// add selection to staging
+			const threadHistoryService = accessor.get(IThreadHistoryService)
+			const currentStaging = threadHistoryService.state._currentStagingSelections
+			const currentStagingEltIdx = currentStaging?.findIndex(s =>
+				s.fileURI.fsPath === model.uri.fsPath
+				&& s.range?.startLineNumber === selection.range?.startLineNumber
+				&& s.range?.endLineNumber === selection.range?.endLineNumber
+			)
+
+			// if matches with existing selection, overwrite
 			if (currentStagingEltIdx !== undefined && currentStagingEltIdx !== -1) {
 				threadHistoryService.setStaging([
 					...currentStaging!.slice(0, currentStagingEltIdx),
@@ -106,6 +107,7 @@ registerAction2(class extends Action2 {
 					...currentStaging!.slice(currentStagingEltIdx + 1, Infinity)
 				])
 			}
+			// if no match, add
 			else {
 				threadHistoryService.setStaging([...(currentStaging ?? []), selection])
 			}

From fc187e0028c7ef74e0fd326bc764310880ac11ee Mon Sep 17 00:00:00 2001
From: mp <mathewpareles@gmail.com>
Date: Sun, 15 Dec 2024 23:01:24 -0800
Subject: [PATCH 10/21] sidebar scrolllock

---
 .../void/browser/react/src/sidebar-tsx/Sidebar.tsx        | 2 +-
 .../void/browser/react/src/sidebar-tsx/SidebarChat.tsx    | 8 +++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index 7725b16a..399feff8 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -24,7 +24,7 @@ export const Sidebar = () => {
 	const { isHistoryOpen, currentTab: tab } = sidebarState
 
 	// className='@@void-scope'
-	return <div className='@@void-scope w-full h-full'>
+	return <div className='@@void-scope' style={{ width: '100%', height: '100%' }}>
 		<div className={`flex flex-col px-2 py-2 w-full h-full`}>
 
 			{/* <span onClick={() => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 591886bc..abb47d23 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -58,8 +58,8 @@ const IconArrowUp = ({ size, className = '' }: { size: number, className?: strin
 		>
 			<path
 				fill="black"
-				fill-rule="evenodd"
-				clip-rule="evenodd"
+				fillRule="evenodd"
+				clipRule="evenodd"
 				d="M15.1918 8.90615C15.6381 8.45983 16.3618 8.45983 16.8081 8.90615L21.9509 14.049C22.3972 14.4953 22.3972 15.2189 21.9509 15.6652C21.5046 16.1116 20.781 16.1116 20.3347 15.6652L17.1428 12.4734V22.2857C17.1428 22.9169 16.6311 23.4286 15.9999 23.4286C15.3688 23.4286 14.8571 22.9169 14.8571 22.2857V12.4734L11.6652 15.6652C11.2189 16.1116 10.4953 16.1116 10.049 15.6652C9.60265 15.2189 9.60265 14.4953 10.049 14.049L15.1918 8.90615Z"
 			></path>
 		</svg>
@@ -405,11 +405,8 @@ export const SidebarChat = () => {
 	const previousMessages = currentThread?.messages ?? []
 
 
-
-
 	const [_test, _setTest] = useState<string[]>([])
 
-
 	return <div
 		ref={(ref) => { if (ref) { setSidebarHeight(ref.clientHeight); } }}
 		className={`w-full h-full`}
@@ -429,6 +426,7 @@ export const SidebarChat = () => {
 			<div>{`totalHeight: ${sidebarHeight - formHeight - 30}`}</div>
 			<div>{`sidebarHeight: ${sidebarHeight}`}</div>
 			<div>{`formHeight: ${formHeight}`}</div>
+			<button type='button' onClick={() => { _setTest(d => [...d, 'asdasdsadasd']) }}>more divs</button>
 
 		</ScrollToBottomContainer>
 

From 78a48bae138a0b9422c6f030faa1fc92c8aa15e1 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 00:17:48 -0800
Subject: [PATCH 11/21] add model selection

---
 .../void/common/refreshModelService.ts        |  2 +-
 .../void/common/voidSettingsService.ts        | 73 +++++++++++++++----
 .../platform/void/common/voidSettingsTypes.ts | 52 ++++++++-----
 .../browser/react/src/sidebar-tsx/Sidebar.tsx |  2 -
 .../react/src/sidebar-tsx/SidebarChat.tsx     |  4 +-
 ...electionSettings.tsx => ModelDropdown.tsx} | 41 +++--------
 .../src/void-settings-tsx/ModelSettings.tsx   | 58 +++++++++++++++
 ...viderSettings.tsx => ProviderSettings.tsx} |  0
 .../react/src/void-settings-tsx/Settings.tsx  | 17 +++++
 .../src/void-settings-tsx/VoidSettings.tsx    | 13 ----
 .../react/src/void-settings-tsx/index.tsx     |  4 +-
 .../contrib/void/browser/voidSettingsPane.ts  | 23 +++---
 12 files changed, 199 insertions(+), 90 deletions(-)
 rename src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/{ModelSelectionSettings.tsx => ModelDropdown.tsx} (67%)
 create mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
 rename src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/{VoidProviderSettings.tsx => ProviderSettings.tsx} (100%)
 create mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
 delete mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx

diff --git a/src/vs/platform/void/common/refreshModelService.ts b/src/vs/platform/void/common/refreshModelService.ts
index f1f0c575..b9b44e83 100644
--- a/src/vs/platform/void/common/refreshModelService.ts
+++ b/src/vs/platform/void/common/refreshModelService.ts
@@ -85,7 +85,7 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 
 		this.llmMessageService.ollamaList({
 			onSuccess: ({ models }) => {
-				this.voidSettingsService.setSettingOfProvider('ollama', 'models', models.map(model => model.name))
+				this.voidSettingsService.setDefaultModels('ollama', models.map(model => model.name))
 				this._setState('done')
 			},
 			onError: ({ error }) => {
diff --git a/src/vs/platform/void/common/voidSettingsService.ts b/src/vs/platform/void/common/voidSettingsService.ts
index dbaf0837..a11e3f60 100644
--- a/src/vs/platform/void/common/voidSettingsService.ts
+++ b/src/vs/platform/void/common/voidSettingsService.ts
@@ -10,10 +10,10 @@ import { IEncryptionService } from '../../encryption/common/encryptionService.js
 import { registerSingleton, InstantiationType } from '../../instantiation/common/extensions.js';
 import { createDecorator } from '../../instantiation/common/instantiation.js';
 import { IStorageService, StorageScope, StorageTarget } from '../../storage/common/storage.js';
-import { defaultSettingsOfProvider, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName, providerNames, ModelSelection, modelSelectionsEqual, featureNames } from './voidSettingsTypes.js';
+import { defaultSettingsOfProvider, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName, providerNames, ModelSelection, modelSelectionsEqual, featureNames, modelInfoOfDefaultNames, ModelInfo } from './voidSettingsTypes.js';
 
 
-const STORAGE_KEY = 'void.voidConfigStateIV'
+const STORAGE_KEY = 'void.voidSettings'
 
 type SetSettingOfProviderFn = <S extends SettingName>(
 	providerName: ProviderName,
@@ -37,7 +37,7 @@ export type VoidSettingsState = {
 	readonly settingsOfProvider: SettingsOfProvider; // optionsOfProvider
 	readonly modelSelectionOfFeature: ModelSelectionOfFeature; // stateOfFeature
 
-	readonly _modelsList: ModelOption[] // computed based on the two above items
+	readonly _modelOptions: ModelOption[] // computed based on the two above items
 }
 
 
@@ -48,19 +48,25 @@ export interface IVoidSettingsService {
 	onDidChangeState: Event<void>;
 	setSettingOfProvider: SetSettingOfProviderFn;
 	setModelSelectionOfFeature: SetModelSelectionOfFeature;
+
+	setDefaultModels(providerName: ProviderName, modelNames: string[]): void;
+	toggleModelHidden(providerName: ProviderName, modelName: string): void;
+	addModel(providerName: ProviderName, modelName: string): void;
+	deleteModel(providerName: ProviderName, modelName: string): boolean;
 }
 
 
-let _computeModelsList = (settingsOfProvider: SettingsOfProvider) => {
-	let modelsList: ModelOption[] = []
+let _computeModelOptions = (settingsOfProvider: SettingsOfProvider) => {
+	let modelOptions: ModelOption[] = []
 	for (const providerName of providerNames) {
 		const providerConfig = settingsOfProvider[providerName]
 		if (providerConfig.enabled !== 'true') continue
-		providerConfig.models?.forEach(modelName => {
-			modelsList.push({ text: `${modelName} (${providerName})`, value: { providerName, modelName } })
-		})
+		for (const { modelName, isHidden } of providerConfig.models) {
+			if (isHidden) continue
+			modelOptions.push({ text: `${modelName} (${providerName})`, value: { providerName, modelName } })
+		}
 	}
-	return modelsList
+	return modelOptions
 }
 
 
@@ -68,7 +74,7 @@ const defaultState = () => {
 	const d: VoidSettingsState = {
 		settingsOfProvider: deepClone(defaultSettingsOfProvider),
 		modelSelectionOfFeature: { 'Ctrl+L': null, 'Ctrl+K': null, 'Autocomplete': null },
-		_modelsList: _computeModelsList(defaultSettingsOfProvider),
+		_modelOptions: _computeModelOptions(defaultSettingsOfProvider), // computed
 	}
 	return d
 }
@@ -132,12 +138,12 @@ class VoidSettingsService extends Disposable implements IVoidSettingsService {
 
 		// if changed models or enabled a provider, recompute models list
 		const modelsListChanged = settingName === 'models' || settingName === 'enabled'
-		const newModelsList = modelsListChanged ? _computeModelsList(newSettingsOfProvider) : this.state._modelsList
+		const newModelsList = modelsListChanged ? _computeModelOptions(newSettingsOfProvider) : this.state._modelOptions
 
 		const newState: VoidSettingsState = {
 			modelSelectionOfFeature: newModelSelectionOfFeature,
 			settingsOfProvider: newSettingsOfProvider,
-			_modelsList: newModelsList,
+			_modelOptions: newModelsList,
 		}
 
 		// this must go above this.setanythingelse()
@@ -177,7 +183,6 @@ class VoidSettingsService extends Disposable implements IVoidSettingsService {
 
 		if (options?.doNotApplyEffects)
 			return
-		console.log('NEW STATE II', JSON.stringify(newState, null, 2))
 
 		await this._storeState()
 		this._onDidChangeState.fire()
@@ -185,6 +190,48 @@ class VoidSettingsService extends Disposable implements IVoidSettingsService {
 
 
 
+	setDefaultModels(providerName: ProviderName, newDefaultModelNames: string[]) {
+		const { models } = this.state.settingsOfProvider[providerName]
+		const newDefaultModels = modelInfoOfDefaultNames(newDefaultModelNames)
+		const newModels = [
+			...newDefaultModels,
+			...models.filter(m => !m.isDefault), // keep any non-default models
+		]
+		this.setSettingOfProvider(providerName, 'models', newModels)
+	}
+	toggleModelHidden(providerName: ProviderName, modelName: string) {
+		const { models } = this.state.settingsOfProvider[providerName]
+		const modelIdx = models.findIndex(m => m.modelName === modelName)
+		if (modelIdx === -1) return
+		const newModels: ModelInfo[] = [
+			...models.slice(0, modelIdx),
+			{ ...models[modelIdx], isHidden: !models[modelIdx].isHidden },
+			...models.slice(modelIdx + 1, Infinity)
+		]
+		this.setSettingOfProvider(providerName, 'models', newModels)
+	}
+	addModel(providerName: ProviderName, modelName: string) {
+		const { models } = this.state.settingsOfProvider[providerName]
+		const existingIdx = models.findIndex(m => m.modelName === modelName)
+		if (existingIdx !== -1) return // if exists, do nothing
+		const newModels = [
+			...models,
+			{ modelName, isDefault: false, isHidden: false }
+		]
+		this.setSettingOfProvider(providerName, 'models', newModels)
+	}
+	deleteModel(providerName: ProviderName, modelName: string): boolean {
+		const { models } = this.state.settingsOfProvider[providerName]
+		const delIdx = models.findIndex(m => m.modelName === modelName)
+		if (delIdx === -1) return false
+		const newModels = [
+			...models.slice(0, delIdx), // delete the idx
+			...models.slice(delIdx + 1, Infinity)
+		]
+		this.setSettingOfProvider(providerName, 'models', newModels)
+		return true
+	}
+
 }
 
 
diff --git a/src/vs/platform/void/common/voidSettingsTypes.ts b/src/vs/platform/void/common/voidSettingsTypes.ts
index 810e9651..7c8b99c8 100644
--- a/src/vs/platform/void/common/voidSettingsTypes.ts
+++ b/src/vs/platform/void/common/voidSettingsTypes.ts
@@ -5,17 +5,30 @@
  *--------------------------------------------------------------------------------------------*/
 
 
+export type ModelInfo = {
+	modelName: string,
+	isDefault: boolean, // whether or not it's a default for its provider
+	isHidden: boolean, // whether or not the user is hiding it
+}
+
+
+export const modelInfoOfDefaultNames = (modelNames: string[]): ModelInfo[] => {
+	const isHidden = modelNames.length >= 10 // hide all models if there are a ton of them, and make user enable them individually
+	return modelNames.map((modelName, i) => ({ modelName, isDefault: true, isHidden }))
+}
+
 // https://docs.anthropic.com/en/docs/about-claude/models
-export const defaultAnthropicModels = [
+export const defaultAnthropicModels = modelInfoOfDefaultNames([
 	'claude-3-5-sonnet-20241022',
 	'claude-3-5-haiku-20241022',
 	'claude-3-opus-20240229',
 	'claude-3-sonnet-20240229',
 	// 'claude-3-haiku-20240307',
-]
+])
 
 
-export const defaultOpenAIModels = [
+// https://platform.openai.com/docs/models/gp
+export const defaultOpenAIModels = modelInfoOfDefaultNames([
 	'o1-preview',
 	'o1-mini',
 	'gpt-4o',
@@ -33,23 +46,24 @@ export const defaultOpenAIModels = [
 	// 'gpt-3.5-turbo-0125',
 	// 'gpt-3.5-turbo',
 	// 'gpt-3.5-turbo-1106',
-]
+])
 
 
 
-export const defaultGroqModels = [
+// https://console.groq.com/docs/models
+export const defaultGroqModels = modelInfoOfDefaultNames([
 	"mixtral-8x7b-32768",
 	"llama2-70b-4096",
 	"gemma-7b-it"
-]
+])
 
 
-export const defaultGeminiModels = [
+export const defaultGeminiModels = modelInfoOfDefaultNames([
 	'gemini-1.5-flash',
 	'gemini-1.5-pro',
 	'gemini-1.5-flash-8b',
 	'gemini-1.0-pro'
-]
+])
 
 
 
@@ -152,7 +166,7 @@ export type SettingsOfProvider = {
 		{
 			enabled: string, // 'true' | 'false'
 
-			models: string[], // if null, user can type in any string as a model
+			models: ModelInfo[], // if null, user can type in any string as a model
 		})
 }
 
@@ -245,6 +259,16 @@ export const defaultSettingsOfProvider: SettingsOfProvider = {
 		...voidInitModelOptions.openAI,
 		enabled: 'false',
 	},
+	gemini: {
+		...voidProviderDefaults.gemini,
+		...voidInitModelOptions.gemini,
+		enabled: 'false',
+	},
+	groq: {
+		...voidProviderDefaults.groq,
+		...voidInitModelOptions.groq,
+		enabled: 'false',
+	},
 	ollama: {
 		...voidProviderDefaults.ollama,
 		...voidInitModelOptions.ollama,
@@ -260,16 +284,6 @@ export const defaultSettingsOfProvider: SettingsOfProvider = {
 		...voidInitModelOptions.openAICompatible,
 		enabled: 'false',
 	},
-	gemini: {
-		...voidProviderDefaults.gemini,
-		...voidInitModelOptions.gemini,
-		enabled: 'false',
-	},
-	groq: {
-		...voidProviderDefaults.groq,
-		...voidInitModelOptions.groq,
-		enabled: 'false',
-	}
 }
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index 399feff8..4d177c88 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -15,8 +15,6 @@ import { useSidebarState } from '../util/services.js';
 import '../styles.css'
 import { SidebarThreadSelector } from './SidebarThreadSelector.js';
 import { SidebarChat } from './SidebarChat.js';
-import { ModelSelectionSettings } from '../void-settings-tsx/ModelSelectionSettings.js';
-import { VoidProviderSettings } from '../void-settings-tsx/VoidProviderSettings.js';
 import ErrorBoundary from './ErrorBoundary.js';
 
 export const Sidebar = () => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index abb47d23..9180640a 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -22,7 +22,7 @@ import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platf
 import { getCmdKey } from '../../../helpers/getCmdKey.js'
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { VoidInputBox } from './inputs.js';
-import { ModelSelectionOfFeature } from '../void-settings-tsx/ModelSelectionSettings.js';
+import { ModelDropdown } from '../void-settings-tsx/ModelDropdown.js';
 
 
 const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
@@ -487,7 +487,7 @@ export const SidebarChat = () => {
 				<div className='flex flex-row justify-between items-end'>
 					{/* submit options */}
 					<div>
-						<ModelSelectionOfFeature featureName='Ctrl+L' />
+						<ModelDropdown featureName='Ctrl+L' />
 					</div>
 
 					{/* submit / stop button */}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
similarity index 67%
rename from src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
index 6c8c53c1..71c84014 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSelectionSettings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
@@ -10,14 +10,14 @@ import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
 
 
-const SelectBoxOfFeature = ({ featureName }: { featureName: FeatureName }) => {
+const ModelSelectBox = ({ featureName }: { featureName: FeatureName }) => {
 	const voidSettingsService = useService('settingsStateService')
 	const settingsState = useSettingsState()
 
 	let weChangedText = false
 
 	return <VoidSelectBox
-		options={settingsState._modelsList}
+		options={settingsState._modelOptions}
 		onChangeSelection={useCallback((newVal: ModelSelection) => {
 			if (weChangedText) return
 			voidSettingsService.setModelSelectionOfFeature(featureName, newVal)
@@ -25,7 +25,7 @@ const SelectBoxOfFeature = ({ featureName }: { featureName: FeatureName }) => {
 		// we are responsible for setting the initial state here. always sync instance when state changes.
 		onCreateInstance={useCallback((instance: SelectBox) => {
 			const syncInstance = () => {
-				const modelsListRef = voidSettingsService.state._modelsList // as a ref
+				const modelsListRef = voidSettingsService.state._modelOptions // as a ref
 				const settingsAtProvider = voidSettingsService.state.modelSelectionOfFeature[featureName]
 				const selectionIdx = settingsAtProvider === null ? -1 : modelsListRef.findIndex(v => modelSelectionsEqual(v.value, settingsAtProvider))
 				weChangedText = true
@@ -39,34 +39,17 @@ const SelectBoxOfFeature = ({ featureName }: { featureName: FeatureName }) => {
 	/>
 }
 
+const DummySelectBox = () => {
+	return <VoidSelectBox
+		options={[{ text: 'Please add a model!', value: null }]}
+		onChangeSelection={() => { }}
+		onCreateInstance={() => { }}
+	/>
+}
 
-export const ModelSelectionOfFeature = ({ featureName }: { featureName: FeatureName }) => {
+export const ModelDropdown = ({ featureName }: { featureName: FeatureName }) => {
 	const settingsState = useSettingsState()
 	return <>
-		{settingsState._modelsList.length === 0 ? 'Please add a provider!' : <SelectBoxOfFeature featureName={featureName} />}
+		{settingsState._modelOptions.length === 0 ? <DummySelectBox /> : <ModelSelectBox featureName={featureName} />}
 	</>
 }
-
-const RefreshModels = () => {
-	const refreshModelState = useRefreshModelState()
-	const refreshModelService = useService('refreshModelService')
-
-	return <>
-		<button onClick={() => refreshModelService.refreshOllamaModels()}>
-			refresh
-		</button>
-		{refreshModelState === 'loading' ? 'loading...' : '✅'}
-	</>
-}
-
-export const ModelSelectionSettings = () => {
-	return <>
-		{featureNames.map(featureName => <ModelSelectionOfFeature
-			key={featureName}
-			featureName={featureName}
-		/>)}
-
-		<RefreshModels />
-	</>
-}
-
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
new file mode 100644
index 00000000..efcce3c0
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Glass Devtools, Inc. All rights reserved.
+ *  Void Editor additions licensed under the AGPL 3.0 License.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ModelInfo, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
+import { useRefreshModelState, useService, useSettingsState } from '../util/services.js'
+
+
+
+
+
+
+const Refreshables = () => {
+	const settingsState = useSettingsState()
+
+	const refreshModelState = useRefreshModelState()
+	const refreshModelService = useService('refreshModelService')
+
+	if (settingsState.settingsOfProvider.ollama.enabled !== 'true')
+		return null
+
+	return <>
+		<button onClick={() => refreshModelService.refreshOllamaModels()}>refresh Ollama built-in models</button>
+		{refreshModelState === 'loading' ? 'loading...' : 'good!'}
+	</>
+}
+
+
+
+
+export const ModelMenu = () => {
+
+	const settingsStateService = useService('settingsStateService')
+	const settingsState = useSettingsState()
+
+	// a dump of all the enabled providers' models
+	const models: (ModelInfo & { providerName: ProviderName })[] = []
+	for (let providerName of providerNames) {
+		const providerSettings = settingsState.settingsOfProvider[providerName]
+		if (providerSettings.enabled !== 'true') continue
+		models.push(...providerSettings.models.map(model => ({ ...model, providerName })))
+	}
+
+	return <>
+		{models.map(m => {
+			const { isHidden, isDefault, modelName, providerName } = m
+
+			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4'>
+				<span>{modelName} {isDefault ? '' : '(custom)'}</span>
+				<span>{providerName}</span>
+				<span onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? 'hidden' : '✅'}</span>
+			</div>
+		})}
+
+		<Refreshables />
+	</>
+}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx
similarity index 100%
rename from src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidProviderSettings.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
new file mode 100644
index 00000000..4a2ac4e0
--- /dev/null
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -0,0 +1,17 @@
+import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
+import { ModelMenu } from './ModelSettings.js'
+import { VoidProviderSettings } from './ProviderSettings.js'
+
+
+export const Settings = () => {
+	return <div className='@@void-scope w-full h-full'>
+		<ErrorBoundary>
+			<ModelMenu />
+		</ErrorBoundary>
+
+		<ErrorBoundary>
+			<VoidProviderSettings />
+		</ErrorBoundary>
+
+	</div>
+}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx
deleted file mode 100644
index ecf60499..00000000
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/VoidSettings.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
-import { VoidProviderSettings } from './VoidProviderSettings.js'
-
-
-export const VoidSettings = () => {
-	return <>
-		<ErrorBoundary>
-			<VoidProviderSettings />
-		</ErrorBoundary>
-	</>
-}
-
-
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
index ee89ffab..ff596b24 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/index.tsx
@@ -1,6 +1,6 @@
 import { mountFnGenerator } from '../util/mountFnGenerator.js'
-import { VoidSettings } from './VoidSettings.js'
+import { Settings } from './Settings.js'
 
-export const mountVoidSettings = mountFnGenerator(VoidSettings)
+export const mountVoidSettings = mountFnGenerator(Settings)
 
 
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index f09b5e63..2d638bf5 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -26,11 +26,12 @@ import { ContextKeyExpr } from '../../../../platform/contextkey/common/contextke
 import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
 import { getReactServices } from './helpers/reactServicesHelper.js';
 import { Codicon } from '../../../../base/common/codicons.js';
+import { IDisposable } from '../../../../base/common/lifecycle.js';
 
 
 // refer to preferences.contribution.ts keybindings editor
 
-class VoidEditorInput extends EditorInput {
+class VoidSettingsInput extends EditorInput {
 
 	static readonly ID: string = 'workbench.input.void.settings';
 
@@ -44,7 +45,7 @@ class VoidEditorInput extends EditorInput {
 	}
 
 	override get typeId(): string {
-		return VoidEditorInput.ID;
+		return VoidSettingsInput.ID;
 	}
 
 	override getName(): string {
@@ -54,7 +55,7 @@ class VoidEditorInput extends EditorInput {
 }
 
 
-class MyCustomPane extends EditorPane {
+class VoidSettingsPane extends EditorPane {
 	static readonly ID = 'workbench.test.myCustomPane';
 
 	constructor(
@@ -64,14 +65,18 @@ class MyCustomPane extends EditorPane {
 		@IStorageService storageService: IStorageService,
 		@IInstantiationService private readonly instantiationService: IInstantiationService
 	) {
-		super(MyCustomPane.ID, group, telemetryService, themeService, storageService);
+		super(VoidSettingsPane.ID, group, telemetryService, themeService, storageService);
 	}
 
-	protected createEditor(container: HTMLElement): void {
+	protected createEditor(parent: HTMLElement): void {
+		parent.style.overflow = 'auto'
+		parent.style.userSelect = 'text'
 
+		// gets set immediately
 		this.instantiationService.invokeFunction(accessor => {
 			const services = getReactServices(accessor)
-			mountVoidSettings(container, services);
+			const disposables: IDisposable[] | undefined = mountVoidSettings(parent, services);
+			disposables?.forEach(d => this._register(d))
 		})
 	}
 
@@ -87,8 +92,8 @@ class MyCustomPane extends EditorPane {
 
 
 Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
-	EditorPaneDescriptor.create(MyCustomPane, MyCustomPane.ID, nls.localize('MyCustomPane', "CustomPane")),
-	[new SyncDescriptor(VoidEditorInput)]
+	EditorPaneDescriptor.create(VoidSettingsPane, VoidSettingsPane.ID, nls.localize('VoidSettingsPane', "Void Settings Pane")),
+	[new SyncDescriptor(VoidSettingsInput)]
 );
 
 
@@ -117,7 +122,7 @@ registerAction2(class extends Action2 {
 	async run(accessor: ServicesAccessor): Promise<void> {
 		const editorService = accessor.get(IEditorService);
 		const instantiationService = accessor.get(IInstantiationService);
-		const input = instantiationService.createInstance(VoidEditorInput);
+		const input = instantiationService.createInstance(VoidSettingsInput);
 		await editorService.openEditor(input);
 	}
 })

From 420fb1a18659d1a2cbebdb097cadff03f2759b5d Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 01:21:55 -0800
Subject: [PATCH 12/21] icon is incredibly annoying

---
 .../contrib/void/browser/sidebarActions.ts    | 19 -------------
 .../contrib/void/browser/sidebarViewPane.ts   | 28 +++++++++++++------
 .../contrib/void/browser/void.contribution.ts |  6 ++--
 .../contrib/void/browser/voidSettingsPane.ts  | 12 +++++---
 4 files changed, 31 insertions(+), 34 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/sidebarActions.ts b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
index 06f86b8e..3b544a83 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarActions.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
@@ -161,22 +161,3 @@ registerAction2(class extends Action2 {
 	}
 })
 
-// registerAction2(class extends Action2 {
-// 	constructor() {
-// 		super({
-// 			id: 'void.viewSettings',
-// 			title: 'Void Settings',
-// 			icon: { id: 'settings-gear' },
-// 			menu: [{ id: MenuId.ViewTitle, group: 'navigation', when: ContextKeyExpr.equals('view', VOID_VIEW_ID), }]
-// 		});
-// 	}
-// 	async run(accessor: ServicesAccessor): Promise<void> {
-// 		const stateService = accessor.get(IVoidSidebarStateService)
-// 		const metricsService = accessor.get(IMetricsService)
-
-// 		metricsService.capture('Chat Navigation', { type: 'Settings' })
-
-// 		stateService.setState({ isHistoryOpen: false, currentTab: stateService.state.currentTab === 'settings' ? 'chat' : 'settings' })
-// 		stateService.fireBlurChat()
-// 	}
-// })
diff --git a/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts b/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
index 8b778474..87d0872c 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
@@ -37,6 +37,10 @@ import { IHoverService } from '../../../../platform/hover/browser/hover.js';
 import { mountSidebar } from './react/out/sidebar-tsx/index.js';
 
 import { getReactServices } from './helpers/reactServicesHelper.js';
+import { Codicon } from '../../../../base/common/codicons.js';
+// import { Orientation } from '../../../../base/browser/ui/sash/sash.js';
+// import { Codicon } from '../../../../base/common/codicons.js';
+// import { Codicon } from '../../../../base/common/codicons.js';
 
 
 // compare against search.contribution.ts and debug.contribution.ts, scm.contribution.ts (source control)
@@ -90,17 +94,22 @@ class VoidSidebarViewPane extends ViewPane {
 
 // called VIEWLET_ID in other places for some reason
 export const VOID_VIEW_CONTAINER_ID = 'workbench.view.void'
-export const VOID_VIEW_ID = VOID_VIEW_CONTAINER_ID // simplicity
+export const VOID_VIEW_ID = VOID_VIEW_CONTAINER_ID
 
 // Register view container
 const viewContainerRegistry = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry);
-const viewContainer = viewContainerRegistry.registerViewContainer({
+const container = viewContainerRegistry.registerViewContainer({
 	id: VOID_VIEW_CONTAINER_ID,
-	title: nls.localize2('void chat', 'Void Chat'), // this is used to say "Void" (Ctrl + L)
+	title: nls.localize2('voidContainer', 'Void'), // this is used to say "Void" (Ctrl + L)
 	ctorDescriptor: new SyncDescriptor(ViewPaneContainer, [VOID_VIEW_CONTAINER_ID, { mergeViewWithContainerWhenSingleView: true }]),
 	hideIfEmpty: false,
-	// icon: voidViewIcon,
 	order: 1,
+
+	icon: Codicon.symbolMethod,
+	alwaysUseContainerInfo: true,
+	// alwaysUseContainerInfo: true,
+	// icon: ,
+
 }, ViewContainerLocation.AuxiliaryBar, { doNotRegisterOpenCommand: true, isDefault: true });
 
 
@@ -111,16 +120,19 @@ viewsRegistry.registerViews([{
 	id: VOID_VIEW_ID,
 	hideByDefault: false, // start open
 	// containerIcon: voidViewIcon,
-	name: nls.localize2('chat', 'Chat'), // this says ... : CHAT
+	name: nls.localize2('voidChat', 'Chat'), // this says ... : CHAT
 	ctorDescriptor: new SyncDescriptor(VoidSidebarViewPane),
 	canToggleVisibility: false,
-	canMoveView: true,
+	canMoveView: false, // can't move this out of its container
+
+	// singleViewPaneContainerTitle: 'hi',
+
 	// openCommandActionDescriptor: {
-	// 	id: viewContainer.id,
+	// 	id: VOID_VIEW_CONTAINER_ID,
 	// 	keybindings: {
 	// 		primary: KeyMod.CtrlCmd | KeyCode.KeyL,
 	// 	},
 	// 	order: 1
 	// },
-}], viewContainer);
+}], container);
 
diff --git a/src/vs/workbench/contrib/void/browser/void.contribution.ts b/src/vs/workbench/contrib/void/browser/void.contribution.ts
index ee12a345..b7d3f8be 100644
--- a/src/vs/workbench/contrib/void/browser/void.contribution.ts
+++ b/src/vs/workbench/contrib/void/browser/void.contribution.ts
@@ -18,8 +18,8 @@ import './threadHistoryService.js'
 // register Autocomplete
 import './autocompleteService.js'
 
-// register css
-import './media/void.css'
-
 // settings pane
 import './voidSettingsPane.js'
+
+// register css
+import './media/void.css'
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 2d638bf5..f94e9aff 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -49,7 +49,11 @@ class VoidSettingsInput extends EditorInput {
 	}
 
 	override getName(): string {
-		return nls.localize('voidSettingsInputsName', "Void Settings");
+		return nls.localize('voidSettingsInputsName', 'Void Settings');
+	}
+
+	override getIcon() {
+		return Codicon.checklist // symbol for the actual editor pane
 	}
 
 }
@@ -90,7 +94,7 @@ class VoidSettingsPane extends EditorPane {
 }
 
 
-
+// register Settings pane
 Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
 	EditorPaneDescriptor.create(VoidSettingsPane, VoidSettingsPane.ID, nls.localize('VoidSettingsPane', "Void Settings Pane")),
 	[new SyncDescriptor(VoidSettingsInput)]
@@ -98,14 +102,14 @@ Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane
 
 
 const OPEN_VOID_SETTINGS_ID = 'workbench.action.openVoidSettings'
-// Register the gear
+// register the gear on the top right
 registerAction2(class extends Action2 {
 	constructor() {
 		super({
 			id: OPEN_VOID_SETTINGS_ID,
 			title: nls.localize2('voidSettings', "Void: Settings"),
 			f1: true,
-			icon: Codicon.gear,
+			icon: Codicon.settingsGear,
 			menu: [
 				{
 					id: MenuId.LayoutControlMenuSubmenu,

From dfdf29fb367c39d3563c1a78dee064bcec7a5506 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 15:05:49 -0800
Subject: [PATCH 13/21] rename

---
 .../void/browser/react/src/util/services.tsx  |  6 +++-
 .../contrib/void/browser/sidebarActions.ts    |  2 +-
 .../{sidebarViewPane.ts => sidebarPane.ts}    | 30 +++++++++++++------
 .../void/browser/sidebarStateService.ts       |  2 +-
 .../contrib/void/browser/void.contribution.ts |  2 +-
 5 files changed, 29 insertions(+), 13 deletions(-)
 rename src/vs/workbench/contrib/void/browser/{sidebarViewPane.ts => sidebarPane.ts} (88%)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
index 70219c0b..240ec032 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
@@ -40,7 +40,11 @@ export const _registerServices = (services_: ReactServicesType) => {
 
 	const disposables: IDisposable[] = []
 
-	if (wasCalled) console.error(`⚠️ Void _registerServices was called again! It should only be called once.`)
+	// don't register services twice
+	if (wasCalled) {
+		return
+		// console.error(`⚠️ Void _registerServices was called again! It should only be called once.`)
+	}
 	wasCalled = true
 
 	services = services_
diff --git a/src/vs/workbench/contrib/void/browser/sidebarActions.ts b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
index 3b544a83..5f9a9356 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarActions.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
@@ -18,7 +18,7 @@ import { IEditorService } from '../../../services/editor/common/editorService.js
 import { ICodeEditorService } from '../../../../editor/browser/services/codeEditorService.js';
 import { IRange } from '../../../../editor/common/core/range.js';
 import { ITextModel } from '../../../../editor/common/model.js';
-import { VOID_VIEW_ID } from './sidebarViewPane.js';
+import { VOID_VIEW_ID } from './sidebarPane.js';
 import { IMetricsService } from '../../../../platform/void/common/metricsService.js';
 import { ISidebarStateService } from './sidebarStateService.js';
 
diff --git a/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts b/src/vs/workbench/contrib/void/browser/sidebarPane.ts
similarity index 88%
rename from src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
rename to src/vs/workbench/contrib/void/browser/sidebarPane.ts
index 87d0872c..974b0e11 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarViewPane.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarPane.ts
@@ -38,6 +38,7 @@ import { mountSidebar } from './react/out/sidebar-tsx/index.js';
 
 import { getReactServices } from './helpers/reactServicesHelper.js';
 import { Codicon } from '../../../../base/common/codicons.js';
+import { Orientation } from '../../../../base/browser/ui/sash/sash.js';
 // import { Orientation } from '../../../../base/browser/ui/sash/sash.js';
 // import { Codicon } from '../../../../base/common/codicons.js';
 // import { Codicon } from '../../../../base/common/codicons.js';
@@ -47,7 +48,7 @@ import { Codicon } from '../../../../base/common/codicons.js';
 
 // ---------- Define viewpane ----------
 
-class VoidSidebarViewPane extends ViewPane {
+class SidebarViewPane extends ViewPane {
 
 	constructor(
 		options: IViewPaneOptions,
@@ -83,6 +84,14 @@ class VoidSidebarViewPane extends ViewPane {
 		});
 	}
 
+	override layoutBody(height: number, width: number): void {
+		super.layoutBody(height, width)
+		this.element.style.height = `${height}px`
+		this.element.style.width = `${width}px`
+
+
+	}
+
 }
 
 
@@ -100,15 +109,17 @@ export const VOID_VIEW_ID = VOID_VIEW_CONTAINER_ID
 const viewContainerRegistry = Registry.as<IViewContainersRegistry>(ViewContainerExtensions.ViewContainersRegistry);
 const container = viewContainerRegistry.registerViewContainer({
 	id: VOID_VIEW_CONTAINER_ID,
-	title: nls.localize2('voidContainer', 'Void'), // this is used to say "Void" (Ctrl + L)
-	ctorDescriptor: new SyncDescriptor(ViewPaneContainer, [VOID_VIEW_CONTAINER_ID, { mergeViewWithContainerWhenSingleView: true }]),
+	title: nls.localize2('voidContainer', 'Void Chat'), // this is used to say "Void" (Ctrl + L)
+	ctorDescriptor: new SyncDescriptor(ViewPaneContainer, [VOID_VIEW_CONTAINER_ID, {
+		mergeViewWithContainerWhenSingleView: true,
+		orientation: Orientation.HORIZONTAL,
+	}]),
 	hideIfEmpty: false,
 	order: 1,
 
+	rejectAddedViews: true,
 	icon: Codicon.symbolMethod,
-	alwaysUseContainerInfo: true,
-	// alwaysUseContainerInfo: true,
-	// icon: ,
+
 
 }, ViewContainerLocation.AuxiliaryBar, { doNotRegisterOpenCommand: true, isDefault: true });
 
@@ -120,11 +131,12 @@ viewsRegistry.registerViews([{
 	id: VOID_VIEW_ID,
 	hideByDefault: false, // start open
 	// containerIcon: voidViewIcon,
-	name: nls.localize2('voidChat', 'Chat'), // this says ... : CHAT
-	ctorDescriptor: new SyncDescriptor(VoidSidebarViewPane),
+	name: nls.localize2('voidChat', ''), // this says ... : CHAT
+	ctorDescriptor: new SyncDescriptor(SidebarViewPane),
 	canToggleVisibility: false,
 	canMoveView: false, // can't move this out of its container
-
+	weight: 80,
+	order: 1,
 	// singleViewPaneContainerTitle: 'hi',
 
 	// openCommandActionDescriptor: {
diff --git a/src/vs/workbench/contrib/void/browser/sidebarStateService.ts b/src/vs/workbench/contrib/void/browser/sidebarStateService.ts
index 0cab1180..683a3ed4 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarStateService.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarStateService.ts
@@ -3,7 +3,7 @@ import { Disposable } from '../../../../base/common/lifecycle.js';
 import { InstantiationType, registerSingleton } from '../../../../platform/instantiation/common/extensions.js';
 import { createDecorator } from '../../../../platform/instantiation/common/instantiation.js';
 import { IViewsService } from '../../../services/views/common/viewsService.js';
-import { VOID_VIEW_CONTAINER_ID, VOID_VIEW_ID } from './sidebarViewPane.js';
+import { VOID_VIEW_CONTAINER_ID, VOID_VIEW_ID } from './sidebarPane.js';
 
 
 // service that manages sidebar's state
diff --git a/src/vs/workbench/contrib/void/browser/void.contribution.ts b/src/vs/workbench/contrib/void/browser/void.contribution.ts
index b7d3f8be..a67594a7 100644
--- a/src/vs/workbench/contrib/void/browser/void.contribution.ts
+++ b/src/vs/workbench/contrib/void/browser/void.contribution.ts
@@ -9,7 +9,7 @@ import './inlineDiffsService.js'
 
 // register Sidebar pane, state, actions (keybinds, menus)
 import './sidebarActions.js'
-import './sidebarViewPane.js'
+import './sidebarPane.js'
 import './sidebarStateService.js'
 
 // register Thread History

From c485d2c478b05375d0b6c7fbdb55920e990ab597 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 17:43:07 -0800
Subject: [PATCH 14/21] react updates

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     |   4 +-
 .../src/{sidebar-tsx => util}/inputs.tsx      |  24 ++-
 .../void/browser/react/src/util/services.tsx  |   3 +
 .../src/void-settings-tsx/ModelDropdown.tsx   |   2 +-
 .../src/void-settings-tsx/ModelSettings.tsx   |  58 -------
 .../void-settings-tsx/ProviderSettings.tsx    |  74 ---------
 .../react/src/void-settings-tsx/Settings.tsx  | 143 ++++++++++++++++--
 .../contrib/void/browser/sidebarPane.ts       |   2 +-
 .../contrib/void/browser/voidSettingsPane.ts  |   2 +-
 9 files changed, 164 insertions(+), 148 deletions(-)
 rename src/vs/workbench/contrib/void/browser/react/src/{sidebar-tsx => util}/inputs.tsx (87%)
 delete mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
 delete mode 100644 src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 9180640a..e8ab57ed 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -21,8 +21,9 @@ import { ErrorDisplay } from './ErrorDisplay.js';
 import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
 import { getCmdKey } from '../../../helpers/getCmdKey.js'
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
-import { VoidInputBox } from './inputs.js';
+import { VoidInputBox, VoidScrollableElt } from '../util/inputs.js';
 import { ModelDropdown } from '../void-settings-tsx/ModelDropdown.js';
+import { ScrollbarVisibility } from '../../../../../../../base/common/scrollable.js';
 
 
 const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
@@ -121,6 +122,7 @@ const ScrollToBottomContainer = ({ children, className, style }: { children: Rea
 
 	return (
 		<div
+			// options={{ vertical: ScrollbarVisibility.Auto, horizontal: ScrollbarVisibility.Auto }}
 			ref={divRef}
 			onScroll={onScroll}
 			className={className}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
similarity index 87%
rename from src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
rename to src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index 017ed131..2097773f 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -4,20 +4,23 @@
  *--------------------------------------------------------------------------------------------*/
 
 import React, { useCallback, useEffect, useRef } from 'react';
-import { useService } from '../util/services.js';
+import { useService } from './services.js';
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
+import { DomScrollableElement } from '../../../../../../../base/browser/ui/scrollbar/scrollableElement.js';
+import { ScrollableElementCreationOptions } from '../../../../../../../base/browser/ui/scrollbar/scrollableElementOptions.js';
 
 
 
-export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, propsFn, dispose, onCreateInstance }
+export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, propsFn, dispose, onCreateInstance, children }
 	: {
 		ctor: { new(...params: CtorParams): Instance },
 		propsFn: (container: HTMLDivElement) => CtorParams,
 		onCreateInstance: (instance: Instance) => IDisposable[],
 		dispose: (instance: Instance) => void,
+		children?: React.ReactNode,
 	}
 ) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
@@ -31,7 +34,7 @@ export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, prop
 		}
 	}, [ctor, propsFn, dispose, onCreateInstance, containerRef])
 
-	return <div ref={containerRef} className='w-full' />
+	return <div ref={containerRef} className='w-full'>{children}</div>
 }
 
 
@@ -142,6 +145,21 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 };
 
 
+export const VoidScrollableElt = ({ options, children }: { options: ScrollableElementCreationOptions, children: React.ReactNode }) => {
+
+	return <WidgetComponent
+		ctor={DomScrollableElement}
+		propsFn={useCallback((container) => {
+			return [container, options] as const;
+		}, [options])}
+		onCreateInstance={useCallback(() => { return [] }, [])}
+		dispose={useCallback((instance: DomScrollableElement) => {
+			console.log('calling dispose!!!!')
+			// instance.dispose();
+			// instance.getDomNode().remove()
+		}, [])}
+	>abcdefg</WidgetComponent>
+}
 
 // export const VoidSelectBox = <T,>({ onChangeSelection, initVal, selectBoxRef, options }: {
 // 	initVal: T;
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
index 240ec032..0b5b85f4 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
@@ -136,3 +136,6 @@ export const useRefreshModelState = () => {
 	}, [ss])
 	return s
 }
+
+
+
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
index 71c84014..08cbd52e 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
@@ -6,7 +6,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { FeatureName, featureNames, ModelSelection, modelSelectionsEqual, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import { useSettingsState, useRefreshModelState, useService } from '../util/services.js'
-import { VoidSelectBox } from '../sidebar-tsx/inputs.js'
+import { VoidSelectBox } from '../util/inputs.js'
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js'
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
deleted file mode 100644
index efcce3c0..00000000
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelSettings.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Glass Devtools, Inc. All rights reserved.
- *  Void Editor additions licensed under the AGPL 3.0 License.
- *--------------------------------------------------------------------------------------------*/
-
-import { ModelInfo, ProviderName, providerNames } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
-import { useRefreshModelState, useService, useSettingsState } from '../util/services.js'
-
-
-
-
-
-
-const Refreshables = () => {
-	const settingsState = useSettingsState()
-
-	const refreshModelState = useRefreshModelState()
-	const refreshModelService = useService('refreshModelService')
-
-	if (settingsState.settingsOfProvider.ollama.enabled !== 'true')
-		return null
-
-	return <>
-		<button onClick={() => refreshModelService.refreshOllamaModels()}>refresh Ollama built-in models</button>
-		{refreshModelState === 'loading' ? 'loading...' : 'good!'}
-	</>
-}
-
-
-
-
-export const ModelMenu = () => {
-
-	const settingsStateService = useService('settingsStateService')
-	const settingsState = useSettingsState()
-
-	// a dump of all the enabled providers' models
-	const models: (ModelInfo & { providerName: ProviderName })[] = []
-	for (let providerName of providerNames) {
-		const providerSettings = settingsState.settingsOfProvider[providerName]
-		if (providerSettings.enabled !== 'true') continue
-		models.push(...providerSettings.models.map(model => ({ ...model, providerName })))
-	}
-
-	return <>
-		{models.map(m => {
-			const { isHidden, isDefault, modelName, providerName } = m
-
-			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4'>
-				<span>{modelName} {isDefault ? '' : '(custom)'}</span>
-				<span>{providerName}</span>
-				<span onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? 'hidden' : '✅'}</span>
-			</div>
-		})}
-
-		<Refreshables />
-	</>
-}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx
deleted file mode 100644
index 0b91bf93..00000000
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ProviderSettings.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Glass Devtools, Inc. All rights reserved.
- *  Void Editor additions licensed under the AGPL 3.0 License.
- *--------------------------------------------------------------------------------------------*/
-
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react'
-import { titleOfProviderName, displayInfoOfSettingName, ProviderName, providerNames, featureNames, SettingsOfProvider, SettingName, defaultSettingsOfProvider } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
-import { VoidInputBox } from '../sidebar-tsx/inputs.js'
-import { useSettingsState, useService } from '../util/services.js'
-import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
-import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
-
-
-const Setting = ({ providerName, settingName }: { providerName: ProviderName, settingName: SettingName }) => {
-
-	const { title, type, placeholder } = displayInfoOfSettingName(providerName, settingName)
-	const voidSettingsService = useService('settingsStateService')
-
-
-	let weChangedTextRef = false
-
-	return <><ErrorBoundary>
-		<label>{title}</label>
-		<VoidInputBox
-			placeholder={placeholder}
-			onChangeText={useCallback((newVal) => {
-				if (weChangedTextRef) return
-				voidSettingsService.setSettingOfProvider(providerName, settingName, newVal)
-			}, [voidSettingsService, providerName, settingName])}
-
-			// we are responsible for setting the initial value. always sync the instance whenever there's a change to state.
-			onCreateInstance={useCallback((instance: InputBox) => {
-				const syncInstance = () => {
-					const settingsAtProvider = voidSettingsService.state.settingsOfProvider[providerName];
-					const stateVal = settingsAtProvider[settingName as keyof typeof settingsAtProvider]
-					// console.log('SYNCING TO', providerName, settingName, stateVal)
-					weChangedTextRef = true
-					instance.value = stateVal as string
-					weChangedTextRef = false
-				}
-				syncInstance()
-				const disposable = voidSettingsService.onDidChangeState(syncInstance)
-				return [disposable]
-			}, [voidSettingsService, providerName, settingName])}
-			multiline={false}
-		/>
-	</ErrorBoundary></>
-
-}
-
-
-const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
-	const voidSettingsState = useSettingsState()
-	const { models, ...others } = voidSettingsState.settingsOfProvider[providerName]
-
-	return <>
-		<h1 className='text-xl'>{titleOfProviderName(providerName)}</h1>
-		{/* settings besides models (e.g. api key) */}
-		{Object.keys(others).map((sName, i) => {
-			const settingName = sName as keyof typeof others
-			return <Setting key={settingName} providerName={providerName} settingName={settingName} />
-		})}
-	</>
-}
-
-
-export const VoidProviderSettings = () => {
-
-	return <>
-		{providerNames.map(providerName =>
-			<SettingsForProvider key={providerName} providerName={providerName} />
-		)}
-	</>
-}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 4a2ac4e0..d4eaa679 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -1,17 +1,142 @@
+import React, { useCallback } from 'react'
+import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
+import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderName, providerNames, ModelInfo } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
-import { ModelMenu } from './ModelSettings.js'
-import { VoidProviderSettings } from './ProviderSettings.js'
+import { VoidInputBox } from '../util/inputs.js'
+import { useRefreshModelState, useService, useSettingsState } from '../util/services.js'
 
 
+
+// models
+
+const RefreshableModels = () => {
+	const settingsState = useSettingsState()
+
+	const refreshModelState = useRefreshModelState()
+	const refreshModelService = useService('refreshModelService')
+
+	if (settingsState.settingsOfProvider.ollama.enabled !== 'true')
+		return null
+
+	return <>
+		<button onClick={() => refreshModelService.refreshOllamaModels()}>refresh Ollama built-in models</button>
+		{refreshModelState === 'loading' ? 'loading...' : 'good!'}
+	</>
+}
+
+
+
+
+export const ModelMenu = () => {
+
+	const settingsStateService = useService('settingsStateService')
+	const settingsState = useSettingsState()
+
+	// a dump of all the enabled providers' models
+	const modelDump: (ModelInfo & { providerName: ProviderName })[] = []
+	for (let providerName of providerNames) {
+		const providerSettings = settingsState.settingsOfProvider[providerName]
+		if (providerSettings.enabled !== 'true') continue
+		modelDump.push(...providerSettings.models.map(model => ({ ...model, providerName })))
+	}
+
+	return <>
+		{modelDump.map(m => {
+			const { isHidden, isDefault, modelName, providerName } = m
+
+			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4'>
+				<span>{modelName} {isDefault ? '' : '(custom)'}</span>
+				<span>{providerName}</span>
+				<span onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? 'hidden' : '✅'}</span>
+			</div>
+		})}
+	</>
+}
+
+
+
+// providers
+
+const ProviderSetting = ({ providerName, settingName }: { providerName: ProviderName, settingName: SettingName }) => {
+
+	const { title, type, placeholder } = displayInfoOfSettingName(providerName, settingName)
+	const voidSettingsService = useService('settingsStateService')
+
+
+	let weChangedTextRef = false
+
+	return <><ErrorBoundary>
+		<label>{title}</label>
+		<VoidInputBox
+			placeholder={placeholder}
+			onChangeText={useCallback((newVal) => {
+				if (weChangedTextRef) return
+				voidSettingsService.setSettingOfProvider(providerName, settingName, newVal)
+			}, [voidSettingsService, providerName, settingName])}
+
+			// we are responsible for setting the initial value. always sync the instance whenever there's a change to state.
+			onCreateInstance={useCallback((instance: InputBox) => {
+				const syncInstance = () => {
+					const settingsAtProvider = voidSettingsService.state.settingsOfProvider[providerName];
+					const stateVal = settingsAtProvider[settingName as keyof typeof settingsAtProvider]
+					// console.log('SYNCING TO', providerName, settingName, stateVal)
+					weChangedTextRef = true
+					instance.value = stateVal as string
+					weChangedTextRef = false
+				}
+				syncInstance()
+				const disposable = voidSettingsService.onDidChangeState(syncInstance)
+				return [disposable]
+			}, [voidSettingsService, providerName, settingName])}
+			multiline={false}
+		/>
+	</ErrorBoundary></>
+
+}
+
+const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
+	const voidSettingsState = useSettingsState()
+	const { models, ...others } = voidSettingsState.settingsOfProvider[providerName]
+
+	return <>
+		<h1 className='text-xl'>{titleOfProviderName(providerName)}</h1>
+		{/* settings besides models (e.g. api key) */}
+		{Object.keys(others).map((sName, i) => {
+			const settingName = sName as keyof typeof others
+			return <ProviderSetting key={settingName} providerName={providerName} settingName={settingName} />
+		})}
+	</>
+}
+
+
+export const VoidProviderSettings = () => {
+
+	return <>
+		{providerNames.map(providerName =>
+			<SettingsForProvider key={providerName} providerName={providerName} />
+		)}
+	</>
+}
+
+
+
+// full settings
+
 export const Settings = () => {
-	return <div className='@@void-scope w-full h-full'>
-		<ErrorBoundary>
-			<ModelMenu />
-		</ErrorBoundary>
+	return <div className='@@void-scope'>
+		<div className='w-full h-full'>
 
-		<ErrorBoundary>
-			<VoidProviderSettings />
-		</ErrorBoundary>
+			<div className='max-w-3xl mx-auto'>
+				<ErrorBoundary>
+					<ModelMenu />
+					<RefreshableModels />
+				</ErrorBoundary>
+			</div>
+
+			<ErrorBoundary>
+				<VoidProviderSettings />
+			</ErrorBoundary>
+		</div>
 
 	</div>
 }
diff --git a/src/vs/workbench/contrib/void/browser/sidebarPane.ts b/src/vs/workbench/contrib/void/browser/sidebarPane.ts
index 974b0e11..576850fa 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarPane.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarPane.ts
@@ -71,7 +71,7 @@ class SidebarViewPane extends ViewPane {
 
 	protected override renderBody(parent: HTMLElement): void {
 		super.renderBody(parent);
-		parent.style.overflow = 'auto'
+		// parent.style.overflow = 'auto'
 		parent.style.userSelect = 'text'
 
 		// gets set immediately
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index f94e9aff..73b42cc0 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -73,7 +73,7 @@ class VoidSettingsPane extends EditorPane {
 	}
 
 	protected createEditor(parent: HTMLElement): void {
-		parent.style.overflow = 'auto'
+		// parent.style.overflow = 'auto'
 		parent.style.userSelect = 'text'
 
 		// gets set immediately

From c44497510ba69066746aff0c4626ee93d0414000 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 18:57:28 -0800
Subject: [PATCH 15/21] add responsive dark mode

---
 .../platform/void/common/voidSettingsTypes.ts | 17 +++-----
 .../browser/react/src/sidebar-tsx/Sidebar.tsx |  8 ++--
 .../react/src/sidebar-tsx/SidebarChat.tsx     |  3 +-
 .../void/browser/react/src/util/inputs.tsx    | 41 ++++++++++++-------
 .../react/src/util/mountFnGenerator.tsx       |  5 ++-
 .../void/browser/react/src/util/services.tsx  | 29 ++++++++++++-
 .../react/src/void-settings-tsx/Settings.tsx  | 10 ++---
 .../void/browser/react/tailwind.config.js     |  1 +
 .../contrib/void/browser/voidSettingsPane.ts  |  4 ++
 9 files changed, 77 insertions(+), 41 deletions(-)

diff --git a/src/vs/platform/void/common/voidSettingsTypes.ts b/src/vs/platform/void/common/voidSettingsTypes.ts
index 7c8b99c8..689888cb 100644
--- a/src/vs/platform/void/common/voidSettingsTypes.ts
+++ b/src/vs/platform/void/common/voidSettingsTypes.ts
@@ -177,11 +177,6 @@ export type SettingName = UnionOfKeys<SettingsOfProvider[ProviderName]>
 
 
 
-type DisplayInfo = {
-	title: string,
-	type: string,
-	placeholder: string,
-}
 
 export const titleOfProviderName = (providerName: ProviderName) => {
 	if (providerName === 'anthropic')
@@ -202,11 +197,14 @@ export const titleOfProviderName = (providerName: ProviderName) => {
 	throw new Error(`descOfProviderName: Unknown provider name: "${providerName}"`)
 }
 
+type DisplayInfo = {
+	title: string,
+	placeholder: string,
+}
 export const displayInfoOfSettingName = (providerName: ProviderName, settingName: SettingName): DisplayInfo => {
 	if (settingName === 'apiKey') {
 		return {
 			title: 'API Key',
-			type: 'string',
 			placeholder: providerName === 'anthropic' ? 'sk-ant-key...' : // sk-ant-api03-key
 				providerName === 'openAI' ? 'sk-proj-key...' :
 					providerName === 'openRouter' ? 'sk-or-key...' : // sk-or-v1-key
@@ -221,7 +219,6 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 			title: providerName === 'ollama' ? 'Your Ollama endpoint' :
 				providerName === 'openAICompatible' ? 'baseURL' // (do not include /chat/completions)
 					: '(never)',
-			type: 'string',
 			placeholder: providerName === 'ollama' ? voidProviderDefaults.ollama.endpoint
 				: providerName === 'openAICompatible' ? 'https://my-website.com/v1'
 					: '(never)',
@@ -229,15 +226,13 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 	}
 	else if (settingName === 'enabled') {
 		return {
-			title: 'Enabled?',
-			type: 'boolean',
+			title: '(never)',
 			placeholder: '(never)',
 		}
 	}
 	else if (settingName === 'models') {
 		return {
-			title: 'Available Models',
-			type: '(never)',
+			title: '(never)',
 			placeholder: '(never)',
 		}
 	}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index 4d177c88..f8f78d00 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -8,7 +8,7 @@ import { mountFnGenerator } from '../util/mountFnGenerator.js'
 // import { SidebarSettings } from './SidebarSettings.js';
 
 
-import { useSidebarState } from '../util/services.js';
+import { useIsDark, useSidebarState } from '../util/services.js';
 // import { SidebarThreadSelector } from './SidebarThreadSelector.js';
 // import { SidebarChat } from './SidebarChat.js';
 
@@ -17,12 +17,12 @@ import { SidebarThreadSelector } from './SidebarThreadSelector.js';
 import { SidebarChat } from './SidebarChat.js';
 import ErrorBoundary from './ErrorBoundary.js';
 
-export const Sidebar = () => {
+export const Sidebar = ({ className }: { className: string }) => {
 	const sidebarState = useSidebarState()
 	const { isHistoryOpen, currentTab: tab } = sidebarState
 
-	// className='@@void-scope'
-	return <div className='@@void-scope' style={{ width: '100%', height: '100%' }}>
+	const isDark = useIsDark()
+	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ width: '100%', height: '100%' }}>
 		<div className={`flex flex-col px-2 py-2 w-full h-full`}>
 
 			{/* <span onClick={() => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index e8ab57ed..924f75a6 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -21,9 +21,8 @@ import { ErrorDisplay } from './ErrorDisplay.js';
 import { OnError, ServiceSendLLMMessageParams } from '../../../../../../../platform/void/common/llmMessageTypes.js';
 import { getCmdKey } from '../../../helpers/getCmdKey.js'
 import { HistoryInputBox, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
-import { VoidInputBox, VoidScrollableElt } from '../util/inputs.js';
+import { VoidInputBox } from '../util/inputs.js';
 import { ModelDropdown } from '../void-settings-tsx/ModelDropdown.js';
-import { ScrollbarVisibility } from '../../../../../../../base/common/scrollable.js';
 
 
 const IconX = ({ size, className = '' }: { size: number, className?: string }) => {
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index 2097773f..769056ed 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -3,7 +3,7 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useService } from './services.js';
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
@@ -145,21 +145,32 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 };
 
 
-export const VoidScrollableElt = ({ options, children }: { options: ScrollableElementCreationOptions, children: React.ReactNode }) => {
+// export const VoidScrollableElt = ({ options, children }: { options: ScrollableElementCreationOptions, children: React.ReactNode }) => {
+// 	const instanceRef = useRef<DomScrollableElement | null>(null);
+// 	const [childrenPortal, setChildrenPortal] = useState<React.ReactNode | null>(null)
 
-	return <WidgetComponent
-		ctor={DomScrollableElement}
-		propsFn={useCallback((container) => {
-			return [container, options] as const;
-		}, [options])}
-		onCreateInstance={useCallback(() => { return [] }, [])}
-		dispose={useCallback((instance: DomScrollableElement) => {
-			console.log('calling dispose!!!!')
-			// instance.dispose();
-			// instance.getDomNode().remove()
-		}, [])}
-	>abcdefg</WidgetComponent>
-}
+// 	return <>
+// 		<WidgetComponent
+// 			ctor={DomScrollableElement}
+// 			propsFn={useCallback((container) => {
+// 				return [container, options] as const;
+// 			}, [options])}
+// 			onCreateInstance={useCallback((instance: DomScrollableElement) => {
+// 				instanceRef.current = instance;
+// 				setChildrenPortal(createPortal(children, instance.getDomNode()))
+// 				return []
+// 			}, [setChildrenPortal, children])}
+// 			dispose={useCallback((instance: DomScrollableElement) => {
+// 				console.log('calling dispose!!!!')
+// 				// instance.dispose();
+// 				// instance.getDomNode().remove()
+// 			}, [])}
+// 		>{children}</WidgetComponent>
+
+// 		{childrenPortal}
+
+// 	</>
+// }
 
 // export const VoidSelectBox = <T,>({ onChangeSelection, initVal, selectBoxRef, options }: {
 // 	initVal: T;
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
index b4de1b6f..d67932dd 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/mountFnGenerator.tsx
@@ -9,7 +9,7 @@ import { _registerServices } from './services.js';
 import { ReactServicesType } from '../../../helpers/reactServicesHelper.js';
 
 
-export const mountFnGenerator = (Component: React.FC) => (rootElement: HTMLElement, services: ReactServicesType) => {
+export const mountFnGenerator = (Component: (params: any) => React.ReactNode) => (rootElement: HTMLElement, services: ReactServicesType) => {
 	if (typeof document === 'undefined') {
 		console.error('index.tsx error: document was undefined')
 		return
@@ -17,8 +17,9 @@ export const mountFnGenerator = (Component: React.FC) => (rootElement: HTMLEleme
 
 	const disposables = _registerServices(services)
 
+
 	const root = ReactDOM.createRoot(rootElement)
-	root.render(<Component />);
+	root.render(<Component />); // tailwind dark theme indicator
 
 	return disposables
 }
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
index 0b5b85f4..250363ce 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/services.tsx
@@ -11,6 +11,7 @@ import { IDisposable } from '../../../../../../../base/common/lifecycle.js'
 import { ReactServicesType } from '../../../helpers/reactServicesHelper.js'
 import { VoidSidebarState } from '../../../sidebarStateService.js'
 import { VoidSettingsState } from '../../../../../../../platform/void/common/voidSettingsService.js'
+import { ColorScheme } from '../../../../../../../platform/theme/common/theme.js'
 
 
 // normally to do this you'd use a useEffect that calls .onDidChangeState(), but useEffect mounts too late and misses initial state changes
@@ -31,7 +32,8 @@ const settingsStateListeners: Set<(s: VoidSettingsState) => void> = new Set()
 let refreshModelState: RefreshModelState
 const refreshModelStateListeners: Set<(s: RefreshModelState) => void> = new Set()
 
-
+let colorThemeState: ColorScheme
+const colorThemeStateListeners: Set<(s: ColorScheme) => void> = new Set()
 
 // must call this before you can use any of the hooks below
 // this should only be called ONCE! this is the only place you don't need to dispose onDidChange. If you use state.onDidChange anywhere else, make sure to dispose it!
@@ -48,7 +50,7 @@ export const _registerServices = (services_: ReactServicesType) => {
 	wasCalled = true
 
 	services = services_
-	const { sidebarStateService, settingsStateService, threadsStateService, refreshModelService } = services
+	const { sidebarStateService, settingsStateService, threadsStateService, refreshModelService, themeService } = services
 
 	sidebarState = sidebarStateService.state
 	disposables.push(
@@ -82,6 +84,14 @@ export const _registerServices = (services_: ReactServicesType) => {
 		})
 	)
 
+	colorThemeState = themeService.getColorTheme().type
+	disposables.push(
+		themeService.onDidColorThemeChange(theme => {
+			colorThemeState = theme.type
+			colorThemeStateListeners.forEach(l => l(colorThemeState))
+		})
+	)
+
 	return disposables
 }
 
@@ -139,3 +149,18 @@ export const useRefreshModelState = () => {
 
 
 
+
+
+export const useIsDark = () => {
+	const [s, ss] = useState(colorThemeState)
+	useEffect(() => {
+		ss(colorThemeState)
+		colorThemeStateListeners.add(ss)
+		return () => { colorThemeStateListeners.delete(ss) }
+	}, [ss])
+
+	// s is the theme, return isDark instead of s
+	const isDark = s === ColorScheme.DARK || s === ColorScheme.HIGH_CONTRAST_DARK
+	return isDark
+
+}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index d4eaa679..6c5648de 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -3,7 +3,7 @@ import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox
 import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderName, providerNames, ModelInfo } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
 import { VoidInputBox } from '../util/inputs.js'
-import { useRefreshModelState, useService, useSettingsState } from '../util/services.js'
+import { useIsDark, useRefreshModelState, useService, useSettingsState } from '../util/services.js'
 
 
 
@@ -44,7 +44,7 @@ export const ModelMenu = () => {
 		{modelDump.map(m => {
 			const { isHidden, isDefault, modelName, providerName } = m
 
-			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4'>
+			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-white/10'>
 				<span>{modelName} {isDefault ? '' : '(custom)'}</span>
 				<span>{providerName}</span>
 				<span onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? 'hidden' : '✅'}</span>
@@ -59,7 +59,7 @@ export const ModelMenu = () => {
 
 const ProviderSetting = ({ providerName, settingName }: { providerName: ProviderName, settingName: SettingName }) => {
 
-	const { title, type, placeholder } = displayInfoOfSettingName(providerName, settingName)
+	const { title, placeholder } = displayInfoOfSettingName(providerName, settingName)
 	const voidSettingsService = useService('settingsStateService')
 
 
@@ -110,7 +110,6 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 
 
 export const VoidProviderSettings = () => {
-
 	return <>
 		{providerNames.map(providerName =>
 			<SettingsForProvider key={providerName} providerName={providerName} />
@@ -123,7 +122,8 @@ export const VoidProviderSettings = () => {
 // full settings
 
 export const Settings = () => {
-	return <div className='@@void-scope'>
+	const isDark = useIsDark()
+	return <div className={`@@void-scope ${isDark ? 'dark' : ''} px-2 lg:px-10`}>
 		<div className='w-full h-full'>
 
 			<div className='max-w-3xl mx-auto'>
diff --git a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
index eb3f965f..8a41657b 100644
--- a/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
+++ b/src/vs/workbench/contrib/void/browser/react/tailwind.config.js
@@ -5,6 +5,7 @@
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+	darkMode: 'selector', // '{prefix-}dark' className is used to identify `dark:`
 	content: ['./src2/**/*.{jsx,tsx}'], // uses these files to decide how to transform the css file
 	theme: {
 		extend: {
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 73b42cc0..6d522842 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -76,6 +76,7 @@ class VoidSettingsPane extends EditorPane {
 		// parent.style.overflow = 'auto'
 		parent.style.userSelect = 'text'
 
+
 		// gets set immediately
 		this.instantiationService.invokeFunction(accessor => {
 			const services = getReactServices(accessor)
@@ -91,6 +92,9 @@ class VoidSettingsPane extends EditorPane {
 		container.style.width = `${dimension.width}px`;
 		container.style.height = `${dimension.height}px`;
 	}
+
+	override get minimumWidth() { return 512 }
+
 }
 
 

From a7aab9cf8608e080e68271c7872e9cd0074cfe9e Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 21:49:03 -0800
Subject: [PATCH 16/21] some UI for models!

---
 .../void/common/refreshModelService.ts        |   2 +-
 .../void/common/voidSettingsService.ts        |   4 +-
 .../platform/void/common/voidSettingsTypes.ts | 137 ++++++++++--------
 .../src/void-settings-tsx/ModelDropdown.tsx   |   1 -
 .../react/src/void-settings-tsx/Settings.tsx  | 134 ++++++++++++++---
 5 files changed, 189 insertions(+), 89 deletions(-)

diff --git a/src/vs/platform/void/common/refreshModelService.ts b/src/vs/platform/void/common/refreshModelService.ts
index b9b44e83..1f6b08f3 100644
--- a/src/vs/platform/void/common/refreshModelService.ts
+++ b/src/vs/platform/void/common/refreshModelService.ts
@@ -75,7 +75,7 @@ export class RefreshModelService extends Disposable implements IRefreshModelServ
 		this._cancelTimeout()
 
 		// if ollama is disabled, obivously done
-		if (this.voidSettingsService.state.settingsOfProvider.ollama.enabled !== 'true') {
+		if (!this.voidSettingsService.state.settingsOfProvider.ollama.enabled) {
 			this._setState('done')
 			return
 		}
diff --git a/src/vs/platform/void/common/voidSettingsService.ts b/src/vs/platform/void/common/voidSettingsService.ts
index a11e3f60..ab9d28f8 100644
--- a/src/vs/platform/void/common/voidSettingsService.ts
+++ b/src/vs/platform/void/common/voidSettingsService.ts
@@ -13,7 +13,7 @@ import { IStorageService, StorageScope, StorageTarget } from '../../storage/comm
 import { defaultSettingsOfProvider, FeatureName, ProviderName, ModelSelectionOfFeature, SettingsOfProvider, SettingName, providerNames, ModelSelection, modelSelectionsEqual, featureNames, modelInfoOfDefaultNames, ModelInfo } from './voidSettingsTypes.js';
 
 
-const STORAGE_KEY = 'void.voidSettings'
+const STORAGE_KEY = 'void.voidSettingsI'
 
 type SetSettingOfProviderFn = <S extends SettingName>(
 	providerName: ProviderName,
@@ -60,7 +60,7 @@ let _computeModelOptions = (settingsOfProvider: SettingsOfProvider) => {
 	let modelOptions: ModelOption[] = []
 	for (const providerName of providerNames) {
 		const providerConfig = settingsOfProvider[providerName]
-		if (providerConfig.enabled !== 'true') continue
+		if (!providerConfig.enabled) continue // if disabled, don't display model options
 		for (const { modelName, isHidden } of providerConfig.models) {
 			if (isHidden) continue
 			modelOptions.push({ text: `${modelName} (${providerName})`, value: { providerName, modelName } })
diff --git a/src/vs/platform/void/common/voidSettingsTypes.ts b/src/vs/platform/void/common/voidSettingsTypes.ts
index 689888cb..6de2f47f 100644
--- a/src/vs/platform/void/common/voidSettingsTypes.ts
+++ b/src/vs/platform/void/common/voidSettingsTypes.ts
@@ -5,6 +5,8 @@
  *--------------------------------------------------------------------------------------------*/
 
 
+
+
 export type ModelInfo = {
 	modelName: string,
 	isDefault: boolean, // whether or not it's a default for its provider
@@ -90,16 +92,11 @@ export const anthropicMaxPossibleTokens = (modelName: string) => {
 }
 
 
-// export const dummyModelData = {
-// 	anthropic: ['claude 3.5'],
-// 	openAI: ['gpt 4o'],
-// 	ollama: ['llama 3.2', 'codestral'],
-// 	openRouter: ['qwen 2.5'],
-// }
+type UnionOfKeys<T> = T extends T ? keyof T : never;
 
 
 
-export const voidProviderDefaults = {
+export const customProviderSettingsDefaults = {
 	anthropic: {
 		apiKey: '',
 	},
@@ -124,57 +121,30 @@ export const voidProviderDefaults = {
 	}
 } as const
 
+export type ProviderName = keyof typeof customProviderSettingsDefaults
+export const providerNames = Object.keys(customProviderSettingsDefaults) as ProviderName[]
 
-export const voidInitModelOptions = {
-	anthropic: {
-		models: defaultAnthropicModels,
-	},
-	openAI: {
-		models: defaultOpenAIModels,
-	},
-	ollama: {
-		models: [],
-	},
-	openRouter: {
-		models: [], // any string
-	},
-	openAICompatible: {
-		models: [],
-	},
-	gemini: {
-		models: defaultGeminiModels,
-	},
-	groq: {
-		models: defaultGroqModels,
-	},
+
+type CustomSettingName = UnionOfKeys<typeof customProviderSettingsDefaults[ProviderName]>
+
+type CustomProviderSettings<providerName extends ProviderName> = {
+	[k in CustomSettingName]: k extends keyof typeof customProviderSettingsDefaults[providerName] ? string : undefined
 }
 
+type CommonProviderSettings = {
+	enabled: boolean,
+	models: ModelInfo[], // if null, user can type in any string as a model
+}
 
+type SettingsForProvider<providerName extends ProviderName> = CustomProviderSettings<providerName> & CommonProviderSettings
 
-export type ProviderName = keyof typeof voidProviderDefaults
-export const providerNames = Object.keys(voidProviderDefaults) as ProviderName[]
-
-
-
-// state
+// part of state
 export type SettingsOfProvider = {
-	[providerName in ProviderName]: (
-		{
-			[optionName in keyof typeof voidProviderDefaults[providerName]]: string
-		}
-		&
-		{
-			enabled: string, // 'true' | 'false'
-
-			models: ModelInfo[], // if null, user can type in any string as a model
-		})
+	[providerName in ProviderName]: SettingsForProvider<providerName>
 }
 
 
-type UnionOfKeys<T> = T extends T ? keyof T : never;
-
-export type SettingName = UnionOfKeys<SettingsOfProvider[ProviderName]>
-
+export type SettingName = keyof SettingsForProvider<ProviderName>
 
 
 
@@ -219,7 +189,7 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 			title: providerName === 'ollama' ? 'Your Ollama endpoint' :
 				providerName === 'openAICompatible' ? 'baseURL' // (do not include /chat/completions)
 					: '(never)',
-			placeholder: providerName === 'ollama' ? voidProviderDefaults.ollama.endpoint
+			placeholder: providerName === 'ollama' ? customProviderSettingsDefaults.ollama.endpoint
 				: providerName === 'openAICompatible' ? 'https://my-website.com/v1'
 					: '(never)',
 		}
@@ -242,42 +212,81 @@ export const displayInfoOfSettingName = (providerName: ProviderName, settingName
 }
 
 
+
+
+const defaultCustomSettings: Record<CustomSettingName, undefined> = {
+	apiKey: undefined,
+	endpoint: undefined,
+}
+
+export const voidInitModelOptions = {
+	anthropic: {
+		models: defaultAnthropicModels,
+	},
+	openAI: {
+		models: defaultOpenAIModels,
+	},
+	ollama: {
+		models: [],
+	},
+	openRouter: {
+		models: [], // any string
+	},
+	openAICompatible: {
+		models: [],
+	},
+	gemini: {
+		models: defaultGeminiModels,
+	},
+	groq: {
+		models: defaultGroqModels,
+	},
+}
+
+
 // used when waiting and for a type reference
 export const defaultSettingsOfProvider: SettingsOfProvider = {
 	anthropic: {
-		...voidProviderDefaults.anthropic,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.anthropic,
 		...voidInitModelOptions.anthropic,
-		enabled: 'false',
+		enabled: false,
 	},
 	openAI: {
-		...voidProviderDefaults.openAI,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.openAI,
 		...voidInitModelOptions.openAI,
-		enabled: 'false',
+		enabled: false,
 	},
 	gemini: {
-		...voidProviderDefaults.gemini,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.gemini,
 		...voidInitModelOptions.gemini,
-		enabled: 'false',
+		enabled: false,
 	},
 	groq: {
-		...voidProviderDefaults.groq,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.groq,
 		...voidInitModelOptions.groq,
-		enabled: 'false',
+		enabled: false,
 	},
 	ollama: {
-		...voidProviderDefaults.ollama,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.ollama,
 		...voidInitModelOptions.ollama,
-		enabled: 'false',
+		enabled: false,
 	},
 	openRouter: {
-		...voidProviderDefaults.openRouter,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.openRouter,
 		...voidInitModelOptions.openRouter,
-		enabled: 'false',
+		enabled: false,
 	},
 	openAICompatible: {
-		...voidProviderDefaults.openAICompatible,
+		...defaultCustomSettings,
+		...customProviderSettingsDefaults.openAICompatible,
 		...voidInitModelOptions.openAICompatible,
-		enabled: 'false',
+		enabled: false,
 	},
 }
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
index 08cbd52e..59abfcde 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/ModelDropdown.tsx
@@ -43,7 +43,6 @@ const DummySelectBox = () => {
 	return <VoidSelectBox
 		options={[{ text: 'Please add a model!', value: null }]}
 		onChangeSelection={() => { }}
-		onCreateInstance={() => { }}
 	/>
 }
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 6c5648de..60f8501b 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
 import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderName, providerNames, ModelInfo } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
-import { VoidInputBox } from '../util/inputs.js'
+import { VoidInputBox, VoidSelectBox } from '../util/inputs.js'
 import { useIsDark, useRefreshModelState, useService, useSettingsState } from '../util/services.js'
 
 
@@ -15,7 +15,7 @@ const RefreshableModels = () => {
 	const refreshModelState = useRefreshModelState()
 	const refreshModelService = useService('refreshModelService')
 
-	if (settingsState.settingsOfProvider.ollama.enabled !== 'true')
+	if (!settingsState.settingsOfProvider.ollama.enabled)
 		return null
 
 	return <>
@@ -26,8 +26,82 @@ const RefreshableModels = () => {
 
 
 
+const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
+	const settingsStateService = useService('settingsStateService')
+	const settingsState = useSettingsState()
 
-export const ModelMenu = () => {
+	const providerNameRef = useRef<ProviderName | null>(null)
+	const modelNameRef = useRef<string | null>(null)
+
+	const [errorString, setErrorString] = useState('')
+
+	const providerOptions = providerNames.map(providerName => ({ text: titleOfProviderName(providerName), value: providerName }))
+
+	return <div className='flex justify-center items-center gap-20'>
+		{/* model */}
+		<div className='max-w-xl w-full'>
+			<VoidInputBox
+				placeholder='Model Name'
+				onChangeText={(modelName) => { modelNameRef.current = modelName }}
+				multiline={false}
+			/>
+		</div>
+
+		{/* provider */}
+		<div className='w-fit'>
+			<VoidSelectBox
+				onCreateInstance={(instance) => { providerNameRef.current = providerOptions[0].value }} // initialize state
+				onChangeSelection={(providerName: ProviderName) => { console.log('selecting provider', providerName); providerNameRef.current = providerName }}
+				options={providerOptions}
+			/>
+		</div>
+
+		{/* button */}
+		<div className='w-80'>
+			<button onClick={() => {
+				const providerName = providerNameRef.current
+				const modelName = modelNameRef.current
+
+				if (providerName === null) {
+					setErrorString('Please select a provider.')
+					return
+				}
+				if (!modelName) {
+					setErrorString('Please enter a model name.')
+					return
+				}
+				// if model already exists here
+				if (settingsState.settingsOfProvider[providerName].models.find(m => m.modelName === modelName)) {
+					setErrorString(`This model already exists under ${providerName}.`)
+					return
+				}
+
+				settingsStateService.addModel(providerName, modelName)
+				onSubmit()
+
+			}}>Add model</button>
+		</div>
+
+		{!errorString ? null : <>
+			{errorString}
+		</>}
+	</div>
+
+}
+
+const AddModelButton = () => {
+	const [open, setOpen] = useState(false)
+
+	return <>
+		{open ?
+			<AddModelMenu onSubmit={() => { setOpen(false) }} />
+			: <button onClick={() => setOpen(true)}>Add Model</button>
+		}
+	</>
+}
+
+
+export const ModelDump = () => {
 
 	const settingsStateService = useService('settingsStateService')
 	const settingsState = useSettingsState()
@@ -36,21 +110,30 @@ export const ModelMenu = () => {
 	const modelDump: (ModelInfo & { providerName: ProviderName })[] = []
 	for (let providerName of providerNames) {
 		const providerSettings = settingsState.settingsOfProvider[providerName]
-		if (providerSettings.enabled !== 'true') continue
+		if (!providerSettings.enabled) continue
 		modelDump.push(...providerSettings.models.map(model => ({ ...model, providerName })))
 	}
 
-	return <>
+	return <div className='max-h-80 overflow-y-auto'>
 		{modelDump.map(m => {
 			const { isHidden, isDefault, modelName, providerName } = m
 
-			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-white/10'>
-				<span>{modelName} {isDefault ? '' : '(custom)'}</span>
-				<span>{providerName}</span>
-				<span onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? 'hidden' : '✅'}</span>
+			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-gray-200/10 py-1 px-3 rounded-sm overflow-hidden cursor-default'>
+				{/* left part is width:full */}
+				<div className='w-full flex items-center gap-4'>
+					<span>{`${modelName} (${providerName})`}</span>
+				</div>
+				{/* right part is anything that fits */}
+				<div className='w-fit flex items-center gap-4'>
+					<span className='opacity-50 whitespace-nowrap'>{isDefault ? '' : '(custom model)'}</span>
+					<div onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? '❌' : '✅'}</div>
+					<div className='w-10'>
+						{isDefault ? null : <button onClick={() => { settingsStateService.deleteModel(providerName, modelName) }}>x</button>}
+					</div>
+				</div>
 			</div>
 		})}
-	</>
+	</div>
 }
 
 
@@ -78,7 +161,7 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
 			onCreateInstance={useCallback((instance: InputBox) => {
 				const syncInstance = () => {
 					const settingsAtProvider = voidSettingsService.state.settingsOfProvider[providerName];
-					const stateVal = settingsAtProvider[settingName as keyof typeof settingsAtProvider]
+					const stateVal = settingsAtProvider[settingName as SettingName]
 					// console.log('SYNCING TO', providerName, settingName, stateVal)
 					weChangedTextRef = true
 					instance.value = stateVal as string
@@ -96,10 +179,16 @@ const ProviderSetting = ({ providerName, settingName }: { providerName: Provider
 
 const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) => {
 	const voidSettingsState = useSettingsState()
-	const { models, ...others } = voidSettingsState.settingsOfProvider[providerName]
+	const voidSettingsService = useService('settingsStateService')
+
+	const { models, enabled, ...others } = voidSettingsState.settingsOfProvider[providerName]
 
 	return <>
-		<h1 className='text-xl'>{titleOfProviderName(providerName)}</h1>
+
+		<div className='flex items-center gap-4'>
+			<h3 className='text-xl'>{titleOfProviderName(providerName)}</h3>
+			<span onClick={() => { voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabled) }}>{enabled ? '✅' : '❌'}</span>
+		</div>
 		{/* settings besides models (e.g. api key) */}
 		{Object.keys(others).map((sName, i) => {
 			const settingName = sName as keyof typeof others
@@ -123,19 +212,22 @@ export const VoidProviderSettings = () => {
 
 export const Settings = () => {
 	const isDark = useIsDark()
-	return <div className={`@@void-scope ${isDark ? 'dark' : ''} px-2 lg:px-10`}>
-		<div className='w-full h-full'>
+	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
+		<div className='w-full h-full px-10 py-10'>
 
 			<div className='max-w-3xl mx-auto'>
+				<h2 className='text-3xl'>Models</h2>
 				<ErrorBoundary>
-					<ModelMenu />
+					<ModelDump />
+					<AddModelButton />
 					<RefreshableModels />
 				</ErrorBoundary>
-			</div>
 
-			<ErrorBoundary>
-				<VoidProviderSettings />
-			</ErrorBoundary>
+				<h2 className='text-3xl'>Providers</h2>
+				<ErrorBoundary>
+					<VoidProviderSettings />
+				</ErrorBoundary>
+			</div>
 		</div>
 
 	</div>

From a7c4a1b179afdaad3ca1234d6ebfa97deb1efdf2 Mon Sep 17 00:00:00 2001
From: mp <mathewpareles@gmail.com>
Date: Mon, 16 Dec 2024 23:01:41 -0800
Subject: [PATCH 17/21] input box style

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     | 172 ++++++++++--------
 .../void/browser/react/src/util/inputs.tsx    |  14 +-
 2 files changed, 101 insertions(+), 85 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 924f75a6..8fd4be9b 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -102,7 +102,7 @@ const ScrollToBottomContainer = ({ children, className, style }: { children: Rea
 
 		const isBottom = Math.abs(
 			div.scrollHeight - div.clientHeight - div.scrollTop
-		) < 1;
+		) < 4;
 
 		setIsAtBottom(isBottom);
 	};
@@ -159,71 +159,66 @@ export const SelectedFiles = (
 
 	return (
 		!!selections && selections.length !== 0 && (
-			<div className='flex flex-wrap gap-4 p-2'>
-				{selections.map((selection, i) => (
-					<Fragment key={i}>
-						{/* selected file summary */}
-						<div
-							// className="relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default"
-							className={`grid grid-rows-2 gap-1 relative
+			<div
+				className='flex flex-wrap gap-4 p-2 text-left'
+			>
+				{selections.map((selection, i) => {
+
+					const showSelectionText = selection.selectionStr && selectionIsOpened[i]
+
+					return (
+						<div key={i} // container for `selectionSummary` and `selectionText`
+							className={`${showSelectionText ? 'w-full' : ''}`}
+						>
+							{/* selection summary */}
+							<div
+								// className="relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default"
+								className={`grid grid-rows-2 gap-1 relative
 									select-none
 									bg-vscode-badge-bg border border-vscode-button-border rounded-md
-									w-fit h-fit min-w-[80px] p-1
-									text-left
+									w-fit h-fit min-w-[81px] p-1
 							`}
-							onClick={() => {
-								setSelectionIsOpened(s => {
-									const newS = [...s]
-									newS[i] = !newS[i]
-									return newS
-								});
-							}}
-						>
-
-							<span className='truncate'>
-								{/* file name */}
-								{getBasename(selection.fileURI.fsPath)}
-								{/* selection range */}
-								{selection.selectionStr !== null ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
-							</span>
-
-							{/* type of selection */}
-							<span className='truncate text-opacity-75'>{selection.selectionStr !== null ? 'Selection' : 'File'}</span>
-
-							{/* X button */}
-							{type === 'staging' && // hoveredIdx === i
-								<span className='absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer bg-white rounded-full border border-vscode-input-border z-1'
-									onClick={(e) => {
-										e.stopPropagation();
-										if (type !== 'staging') return;
-										setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
-										setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
-									}}
-								>
-									<IconX size={16} className="p-[2px] stroke-[3]" />
+								onClick={() => {
+									setSelectionIsOpened(s => {
+										const newS = [...s]
+										newS[i] = !newS[i]
+										return newS
+									});
+								}}
+							>
+								<span className='truncate'>
+									{/* file name */}
+									{getBasename(selection.fileURI.fsPath)}
+									{/* selection range */}
+									{selection.selectionStr !== null ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
 								</span>
+
+								{/* type of selection */}
+								<span className='truncate text-opacity-75'>{selection.selectionStr !== null ? 'Selection' : 'File'}</span>
+
+								{/* X button */}
+								{type === 'staging' && // hoveredIdx === i
+									<span className='absolute right-0 top-0 translate-x-[50%] translate-y-[-50%] cursor-pointer bg-white rounded-full border border-vscode-input-border z-1'
+										onClick={(e) => {
+											e.stopPropagation();
+											if (type !== 'staging') return;
+											setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
+											setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
+										}}
+									>
+										<IconX size={16} className="p-[2px] stroke-[3]" />
+									</span>
+								}
+							</div>
+							{/* selection text */}
+							{showSelectionText &&
+								<div className='w-full'>
+									<BlockCode text={selection.selectionStr!} />
+								</div>
 							}
 						</div>
-						{/* selection full text */}
-						{selection.selectionStr && selectionIsOpened[i] &&
-							<BlockCode
-								text={selection.selectionStr}
-							// buttonsOnHover={(<button
-							// 	// onClick={() => { // clear the selection string but keep the file
-							// 	// 	setStaging([...selections.slice(0, i), { ...selection, selectionStr: null }, ...selections.slice(i + 1, Infinity)])
-							// 	// }}
-							// 	onClick={() => {
-							// 		if (type !== 'staging') return
-							// 		setStaging([...selections.slice(0, i), ...selections.slice(i + 1, Infinity)])
-							// 	}}
-							// 	className="btn btn-secondary btn-sm border border-vscode-input-border rounded"
-							// >Remove</button>
-							// )}
-							/>
-						}
-					</Fragment>
-				))
-				}
+					)
+				})}
 			</div>
 		)
 	)
@@ -296,7 +291,7 @@ export const SidebarChat = () => {
 	// state of current message
 	const [instructions, setInstructions] = useState('') // the user's instructions
 	const isDisabled = !instructions.trim()
-	const [formHeight, setFormHeight] = useState(0)
+	const [formHeight, setFormHeight] = useState(0) // TODO should use resize observer instead
 	const [sidebarHeight, setSidebarHeight] = useState(0)
 	const onChangeText = useCallback((newStr: string) => { setInstructions(newStr) }, [setInstructions])
 
@@ -405,8 +400,7 @@ export const SidebarChat = () => {
 
 	const previousMessages = currentThread?.messages ?? []
 
-
-	const [_test, _setTest] = useState<string[]>([])
+	// const [_test_messages, _set_test_messages] = useState<string[]>([])
 
 	return <div
 		ref={(ref) => { if (ref) { setSidebarHeight(ref.clientHeight); } }}
@@ -414,7 +408,7 @@ export const SidebarChat = () => {
 	>
 		<ScrollToBottomContainer
 			className={`overflow-x-hidden overflow-y-auto space-y-4`}
-			style={{ height: sidebarHeight - formHeight - 30 }}
+			style={{ maxHeight: sidebarHeight - formHeight - 30 }}
 		>
 			{/* previous messages */}
 			{previousMessages.map((message, i) => <ChatBubble key={i} chatMessage={message} />)}
@@ -422,12 +416,11 @@ export const SidebarChat = () => {
 			{/* message stream */}
 			<ChatBubble chatMessage={{ role: 'assistant', content: messageStream, displayContent: messageStream || null }} />
 
-			<button type='button' onClick={() => { _setTest(d => [...d, 'asdasdsadasd']) }}>more divs</button>
-			{_test.map((_, i) => <div key={i}>div {i}</div>)}
-			<div>{`totalHeight: ${sidebarHeight - formHeight - 30}`}</div>
-			<div>{`sidebarHeight: ${sidebarHeight}`}</div>
-			<div>{`formHeight: ${formHeight}`}</div>
-			<button type='button' onClick={() => { _setTest(d => [...d, 'asdasdsadasd']) }}>more divs</button>
+			{/* {_test_messages.map((_, i) => <div key={i}>div {i}</div>)}
+				<div>{`totalHeight: ${sidebarHeight - formHeight - 30}`}</div>
+				<div>{`sidebarHeight: ${sidebarHeight}`}</div>
+				<div>{`formHeight: ${formHeight}`}</div>
+				<button type='button' onClick={() => { _set_test_messages(d => [...d, 'asdasdsadasd']) }}>add div</button> */}
 
 		</ScrollToBottomContainer>
 
@@ -454,9 +447,14 @@ export const SidebarChat = () => {
 					console.log('submit!')
 					onSubmit(e)
 				}}
+				onClick={(e) => {
+					if (e.currentTarget === e.target) {
+						inputBoxRef.current?.focus()
+					}
+				}}
 			>
 				{/* top row */}
-				<div className=''>
+				<>
 					{/* selections */}
 					{(selections && selections.length !== 0) &&
 						<SelectedFiles type='staging' selections={selections} setStaging={threadsStateService.setStaging.bind(threadsStateService)} />
@@ -471,10 +469,24 @@ export const SidebarChat = () => {
 							showDismiss={true}
 						/>
 					}
-				</div>
+				</>
 
 				{/* middle row */}
-				<div className=''>
+				<div
+					className={
+						//   // overwrite vscode styles (generated with this code):
+						//   `bg-transparent outline-none text-vscode-input-fg min-h-[81px] max-h-[500px]`
+						//     .split(' ')
+						//     .map(style => `@@[&_textarea]:!void-${style}`) // apply styles to ancestor input and textarea elements
+						//     .join(' ') +
+						//   ` outline-none`
+						//     .split(' ')
+						//     .map(style => `@@[&_div.monaco-inputbox]:!void-${style}`) // apply styles to ancestor input and textarea elements
+						//     .join(' ');
+						`@@[&_textarea]:!void-bg-transparent @@[&_textarea]:!void-outline-none @@[&_textarea]:!void-text-vscode-input-fg @@[&_textarea]:!void-min-h-[81px] @@[&_textarea]:!void-max-h-[500px]@@[&_div.monaco-inputbox]:!void- @@[&_div.monaco-inputbox]:!void-outline-none`
+					}
+				>
+
 					{/* text input */}
 					<VoidInputBox
 						placeholder={`${getCmdKey()}+L to select`}
@@ -485,7 +497,9 @@ export const SidebarChat = () => {
 				</div>
 
 				{/* bottom row */}
-				<div className='flex flex-row justify-between items-end'>
+				<div
+					className='flex flex-row justify-between items-end'
+				>
 					{/* submit options */}
 					<div>
 						<ModelDropdown featureName='Ctrl+L' />
@@ -495,7 +509,7 @@ export const SidebarChat = () => {
 					{isLoading ?
 						// stop button
 						<button
-							className={`size-[24px] rounded-full bg-white cursor-pointer`}
+							className={`size-[20px] rounded-full bg-white cursor-pointer flex items-center justify-center`}
 							onClick={onAbort}
 							type='button'
 						>
@@ -504,7 +518,7 @@ export const SidebarChat = () => {
 						:
 						// submit button (up arrow)
 						<button
-							className={`size-[24px] rounded-full shrink-0 grow-0 cursor-pointer
+							className={`size-[20px] rounded-full shrink-0 grow-0 cursor-pointer
 								${isDisabled ?
 									'bg-vscode-disabled-fg' // cursor-not-allowed
 									: 'bg-white' // cursor-pointer
@@ -513,15 +527,15 @@ export const SidebarChat = () => {
 							disabled={isDisabled}
 							type='submit'
 						>
-							<IconArrowUp size={24} className="stroke-[2]" />
+							<IconArrowUp size={20} className="stroke-[2]" />
 						</button>
 					}
 				</div>
 
 
 			</form>
-		</div>
-	</div>
+		</div >
+	</div >
 }
 
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index 769056ed..adeb6930 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -3,9 +3,9 @@
  *  Void Editor additions licensed under the AGPL 3.0 License.
  *--------------------------------------------------------------------------------------------*/
 
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useService } from './services.js';
-import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { useService } from '../util/services.js';
+import { , InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
@@ -39,15 +39,15 @@ export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, prop
 
 
 
-export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, placeholder, multiline }: {
+export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, placeholder, multiline, styles }: {
 	onChangeText: (value: string) => void;
+	styles?: Partial<IInputBoxStyles>,
 	onCreateInstance?: (instance: InputBox) => void | IDisposable[];
 	inputBoxRef?: { current: InputBox | null };
 	placeholder: string;
 	multiline: boolean;
 }) => {
 
-
 	const contextViewProvider = useService('contextViewService');
 
 	return <WidgetComponent
@@ -58,7 +58,9 @@ export const VoidInputBox = ({ onChangeText, onCreateInstance, inputBoxRef, plac
 			{
 				inputBoxStyles: {
 					...defaultInputBoxStyles,
-					inputBackground: 'transparent',
+					// inputBackground: 'transparent',
+					// inputBorder: 'none',
+					...styles,
 				},
 				placeholder,
 				tooltip: '',

From 597c04f63b24a86a15b0dfa51fc642d1cd75fd3e Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Mon, 16 Dec 2024 23:07:59 -0800
Subject: [PATCH 18/21] settings UI

---
 .../react/src/void-settings-tsx/Settings.tsx  | 157 +++++++++++-------
 1 file changed, 98 insertions(+), 59 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 60f8501b..8144c76f 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -37,55 +37,58 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
 
 	const providerOptions = providerNames.map(providerName => ({ text: titleOfProviderName(providerName), value: providerName }))
 
-	return <div className='flex justify-center items-center gap-20'>
-		{/* model */}
-		<div className='max-w-xl w-full'>
-			<VoidInputBox
-				placeholder='Model Name'
-				onChangeText={(modelName) => { modelNameRef.current = modelName }}
-				multiline={false}
-			/>
+	return <>
+		<div className='flex justify-center items-center gap-4'>
+			{/* model */}
+			<div className='max-w-40 w-full'>
+				<VoidInputBox
+					placeholder='Model Name'
+					onChangeText={(modelName) => { modelNameRef.current = modelName }}
+					multiline={false}
+				/>
+			</div>
+
+			{/* provider */}
+			<div className='max-w-40 w-full'>
+				<VoidSelectBox
+					onCreateInstance={(instance) => { providerNameRef.current = providerOptions[0].value }} // initialize state
+					onChangeSelection={(providerName: ProviderName) => { console.log('selecting provider', providerName); providerNameRef.current = providerName }}
+					options={providerOptions}
+				/>
+			</div>
+
+			{/* button */}
+			<div className='max-w-40 w-full'>
+				<button
+					onClick={() => {
+						const providerName = providerNameRef.current
+						const modelName = modelNameRef.current
+
+						if (providerName === null) {
+							setErrorString('Please select a provider.')
+							return
+						}
+						if (!modelName) {
+							setErrorString('Please enter a model name.')
+							return
+						}
+						// if model already exists here
+						if (settingsState.settingsOfProvider[providerName].models.find(m => m.modelName === modelName)) {
+							setErrorString(`This model already exists under ${providerName}.`)
+							return
+						}
+
+						settingsStateService.addModel(providerName, modelName)
+						onSubmit()
+
+					}}>Add model</button>
+			</div>
 		</div>
 
-		{/* provider */}
-		<div className='w-fit'>
-			<VoidSelectBox
-				onCreateInstance={(instance) => { providerNameRef.current = providerOptions[0].value }} // initialize state
-				onChangeSelection={(providerName: ProviderName) => { console.log('selecting provider', providerName); providerNameRef.current = providerName }}
-				options={providerOptions}
-			/>
-		</div>
-
-		{/* button */}
-		<div className='w-80'>
-			<button onClick={() => {
-				const providerName = providerNameRef.current
-				const modelName = modelNameRef.current
-
-				if (providerName === null) {
-					setErrorString('Please select a provider.')
-					return
-				}
-				if (!modelName) {
-					setErrorString('Please enter a model name.')
-					return
-				}
-				// if model already exists here
-				if (settingsState.settingsOfProvider[providerName].models.find(m => m.modelName === modelName)) {
-					setErrorString(`This model already exists under ${providerName}.`)
-					return
-				}
-
-				settingsStateService.addModel(providerName, modelName)
-				onSubmit()
-
-			}}>Add model</button>
-		</div>
-
-		{!errorString ? null : <>
+		{!errorString ? null : <div className='text-center text-red-500'>
 			{errorString}
-		</>}
-	</div>
+		</div>}
+	</>
 
 }
 
@@ -114,7 +117,7 @@ export const ModelDump = () => {
 		modelDump.push(...providerSettings.models.map(model => ({ ...model, providerName })))
 	}
 
-	return <div className='max-h-80 overflow-y-auto'>
+	return <div className=''>
 		{modelDump.map(m => {
 			const { isHidden, isDefault, modelName, providerName } = m
 
@@ -212,21 +215,57 @@ export const VoidProviderSettings = () => {
 
 export const Settings = () => {
 	const isDark = useIsDark()
+
+	const [tab, setTab] = useState<'models' | 'providers'>('models')
+
 	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
-		<div className='w-full h-full px-10 py-10'>
+		<div className='w-full h-full px-10 py-10 select-none'>
 
-			<div className='max-w-3xl mx-auto'>
-				<h2 className='text-3xl'>Models</h2>
-				<ErrorBoundary>
-					<ModelDump />
-					<AddModelButton />
-					<RefreshableModels />
-				</ErrorBoundary>
+			<div className='max-w-5xl mx-auto'>
+
+				<h1 className='text-2xl w-full'>Void Settings</h1>
+
+				{/* separator */}
+				<div className='w-full h-[1px] my-4' />
+
+				<div className='flex items-stretch'>
+
+					{/* tabs */}
+					<div className='flex flex-col w-full max-w-32'>
+						<button className={`text-left p-1 my-0.5 rounded-sm overflow-hidden ${tab === 'models' ? 'bg-vscode-button-hover-bg' : 'bg-vscode-button-active-bg'} hover:bg-vscode-button-hover-bg active:bg-vscode-button-active-bg`}
+							onClick={() => { setTab('models') }}
+						>Models</button>
+						<button className={`text-left p-1 my-0.5 rounded-sm overflow-hidden ${tab === 'providers' ? 'bg-vscode-button-hover-bg' : 'bg-vscode-button-active-bg'} hover:bg-vscode-button-hover-bg active:bg-vscode-button-active-bg`}
+							onClick={() => { setTab('providers') }}
+						>Providers</button>
+					</div>
+
+					{/* separator */}
+					<div className='w-[1px] mx-4' />
+
+
+					{/* content */}
+					<div className='w-full overflow-y-auto'>
+
+						<div className={`${tab !== 'models' ? 'hidden' : ''}`}>
+							<h2 className={`text-3xl`}>Models</h2>
+							<ErrorBoundary>
+								<ModelDump />
+								<AddModelButton />
+								<RefreshableModels />
+							</ErrorBoundary>
+						</div>
+
+						<div className={`${tab !== 'providers' ? 'hidden' : ''}`}>
+							<h2 className={`text-3xl`} onClick={() => { setTab('providers') }}>Providers</h2>
+							<ErrorBoundary>
+								<VoidProviderSettings />
+							</ErrorBoundary>
+						</div>
+
+					</div>
+				</div>
 
-				<h2 className='text-3xl'>Providers</h2>
-				<ErrorBoundary>
-					<VoidProviderSettings />
-				</ErrorBoundary>
 			</div>
 		</div>
 

From 7752278720f99ae377824fa308110b6069d9a0a1 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Tue, 17 Dec 2024 01:33:33 -0800
Subject: [PATCH 19/21] settings styles

---
 .../react/src/sidebar-tsx/SidebarChat.tsx     |  4 +-
 .../void/browser/react/src/util/inputs.tsx    |  8 ++--
 .../react/src/void-settings-tsx/Settings.tsx  | 25 +++++------
 .../contrib/void/browser/voidSettingsPane.ts  | 41 +++++++++++++------
 4 files changed, 48 insertions(+), 30 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 8fd4be9b..046dc5d9 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -498,10 +498,10 @@ export const SidebarChat = () => {
 
 				{/* bottom row */}
 				<div
-					className='flex flex-row justify-between items-end'
+					className='flex flex-row justify-between items-end gap-1'
 				>
 					{/* submit options */}
-					<div>
+					<div className='w-[250px]'>
 						<ModelDropdown featureName='Ctrl+L' />
 					</div>
 
diff --git a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
index adeb6930..504b88d2 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/util/inputs.tsx
@@ -5,7 +5,7 @@
 
 import React, { useCallback, useEffect, useRef } from 'react';
 import { useService } from '../util/services.js';
-import { , InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
+import { IInputBoxStyles, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
 import { IDisposable } from '../../../../../../../base/common/lifecycle.js';
@@ -14,13 +14,14 @@ import { ScrollableElementCreationOptions } from '../../../../../../../base/brow
 
 
 
-export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, propsFn, dispose, onCreateInstance, children }
+export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, propsFn, dispose, onCreateInstance, children, className }
 	: {
 		ctor: { new(...params: CtorParams): Instance },
 		propsFn: (container: HTMLDivElement) => CtorParams,
 		onCreateInstance: (instance: Instance) => IDisposable[],
 		dispose: (instance: Instance) => void,
 		children?: React.ReactNode,
+		className?: string
 	}
 ) => {
 	const containerRef = useRef<HTMLDivElement | null>(null);
@@ -34,7 +35,7 @@ export const WidgetComponent = <CtorParams extends any[], Instance>({ ctor, prop
 		}
 	}, [ctor, propsFn, dispose, onCreateInstance, containerRef])
 
-	return <div ref={containerRef} className='w-full'>{children}</div>
+	return <div ref={containerRef} className={className === undefined ? `w-full` : className}>{children}</div>
 }
 
 
@@ -105,6 +106,7 @@ export const VoidSelectBox = <T,>({ onChangeSelection, onCreateInstance, selectB
 	let containerRef = useRef<HTMLDivElement | null>(null);
 
 	return <WidgetComponent
+		className='text-ellipsis whitespace-nowrap pr-6'
 		ctor={SelectBox}
 		propsFn={useCallback((container) => {
 			containerRef.current = container
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 8144c76f..2edc0137 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -4,6 +4,7 @@ import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderNam
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
 import { VoidInputBox, VoidSelectBox } from '../util/inputs.js'
 import { useIsDark, useRefreshModelState, useService, useSettingsState } from '../util/services.js'
+import { X } from 'lucide-react'
 
 
 
@@ -18,10 +19,10 @@ const RefreshableModels = () => {
 	if (!settingsState.settingsOfProvider.ollama.enabled)
 		return null
 
-	return <>
+	return <div>
 		<button onClick={() => refreshModelService.refreshOllamaModels()}>refresh Ollama built-in models</button>
 		{refreshModelState === 'loading' ? 'loading...' : 'good!'}
-	</>
+	</div>
 }
 
 
@@ -110,16 +111,16 @@ export const ModelDump = () => {
 	const settingsState = useSettingsState()
 
 	// a dump of all the enabled providers' models
-	const modelDump: (ModelInfo & { providerName: ProviderName })[] = []
+	const modelDump: (ModelInfo & { providerName: ProviderName, providerEnabled: boolean })[] = []
 	for (let providerName of providerNames) {
 		const providerSettings = settingsState.settingsOfProvider[providerName]
-		if (!providerSettings.enabled) continue
-		modelDump.push(...providerSettings.models.map(model => ({ ...model, providerName })))
+		// if (!providerSettings.enabled) continue
+		modelDump.push(...providerSettings.models.map(model => ({ ...model, providerName, providerEnabled: providerSettings.enabled })))
 	}
 
 	return <div className=''>
 		{modelDump.map(m => {
-			const { isHidden, isDefault, modelName, providerName } = m
+			const { isHidden, isDefault, modelName, providerName, providerEnabled } = m
 
 			return <div key={`${modelName}${providerName}`} className='flex items-center justify-between gap-4 hover:bg-black/10 dark:hover:bg-gray-200/10 py-1 px-3 rounded-sm overflow-hidden cursor-default'>
 				{/* left part is width:full */}
@@ -129,9 +130,9 @@ export const ModelDump = () => {
 				{/* right part is anything that fits */}
 				<div className='w-fit flex items-center gap-4'>
 					<span className='opacity-50 whitespace-nowrap'>{isDefault ? '' : '(custom model)'}</span>
-					<div onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{isHidden ? '❌' : '✅'}</div>
-					<div className='w-10'>
-						{isDefault ? null : <button onClick={() => { settingsStateService.deleteModel(providerName, modelName) }}>x</button>}
+					<button disabled={!providerEnabled} onClick={() => { settingsStateService.toggleModelHidden(providerName, modelName) }}>{(!providerEnabled || isHidden) ? '❌' : '✅'}</button>
+					<div className='w-5 flex items-center justify-center'>
+						{isDefault ? null : <button onClick={() => { settingsStateService.deleteModel(providerName, modelName) }}><X className='size-4' /></button>}
 					</div>
 				</div>
 			</div>
@@ -190,7 +191,7 @@ const SettingsForProvider = ({ providerName }: { providerName: ProviderName }) =
 
 		<div className='flex items-center gap-4'>
 			<h3 className='text-xl'>{titleOfProviderName(providerName)}</h3>
-			<span onClick={() => { voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabled) }}>{enabled ? '✅' : '❌'}</span>
+			<button onClick={() => { voidSettingsService.setSettingOfProvider(providerName, 'enabled', !enabled) }}>{enabled ? '✅' : '❌'}</button>
 		</div>
 		{/* settings besides models (e.g. api key) */}
 		{Object.keys(others).map((sName, i) => {
@@ -248,7 +249,7 @@ export const Settings = () => {
 					<div className='w-full overflow-y-auto'>
 
 						<div className={`${tab !== 'models' ? 'hidden' : ''}`}>
-							<h2 className={`text-3xl`}>Models</h2>
+							<h2 className={`text-3xl mb-2`}>Models</h2>
 							<ErrorBoundary>
 								<ModelDump />
 								<AddModelButton />
@@ -257,7 +258,7 @@ export const Settings = () => {
 						</div>
 
 						<div className={`${tab !== 'providers' ? 'hidden' : ''}`}>
-							<h2 className={`text-3xl`} onClick={() => { setTab('providers') }}>Providers</h2>
+							<h2 className={`text-3xl mb-2`} onClick={() => { setTab('providers') }}>Providers</h2>
 							<ErrorBoundary>
 								<VoidProviderSettings />
 							</ErrorBoundary>
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 6d522842..7974fd4c 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -27,6 +27,7 @@ import { mountVoidSettings } from './react/out/void-settings-tsx/index.js'
 import { getReactServices } from './helpers/reactServicesHelper.js';
 import { Codicon } from '../../../../base/common/codicons.js';
 import { IDisposable } from '../../../../base/common/lifecycle.js';
+import { DomScrollableElement } from '../../../../base/browser/ui/scrollbar/scrollableElement.js';
 
 
 // refer to preferences.contribution.ts keybindings editor
@@ -62,6 +63,8 @@ class VoidSettingsInput extends EditorInput {
 class VoidSettingsPane extends EditorPane {
 	static readonly ID = 'workbench.test.myCustomPane';
 
+	private _scrollbar: DomScrollableElement | undefined;
+
 	constructor(
 		group: IEditorGroup,
 		@ITelemetryService telemetryService: ITelemetryService,
@@ -73,31 +76,43 @@ class VoidSettingsPane extends EditorPane {
 	}
 
 	protected createEditor(parent: HTMLElement): void {
-		// parent.style.overflow = 'auto'
-		parent.style.userSelect = 'text'
+		parent.style.height = '100%';
+		parent.style.width = '100%';
 
+		const scrollableContent = document.createElement('div');
+		scrollableContent.style.height = '100%';
+		scrollableContent.style.width = '100%';
 
-		// gets set immediately
+		this._scrollbar = this._register(new DomScrollableElement(scrollableContent, {}));
+		parent.appendChild(this._scrollbar.getDomNode());
+		this._scrollbar.scanDomNode();
+
+		// Mount React into the scrollable content
 		this.instantiationService.invokeFunction(accessor => {
-			const services = getReactServices(accessor)
-			const disposables: IDisposable[] | undefined = mountVoidSettings(parent, services);
-			disposables?.forEach(d => this._register(d))
-		})
+			const services = getReactServices(accessor);
+			const disposables: IDisposable[] | undefined = mountVoidSettings(scrollableContent, services);
+
+			setTimeout(() => { // this is a complete hack and I don't really understand how scrollbar works here
+				this._scrollbar?.scanDomNode();
+			}, 1000)
+			disposables?.forEach(d => this._register(d));
+		});
 	}
 
 	layout(dimension: Dimension): void {
-		const container = this.getContainer();
-		if (!container) return;
+		if (!this._scrollbar) return;
+
+		this._scrollbar.getDomNode().style.height = `${dimension.height}px`;
+		this._scrollbar.getDomNode().style.width = `${dimension.width}px`;
+		this._scrollbar.scanDomNode();
 
-		container.style.width = `${dimension.width}px`;
-		container.style.height = `${dimension.height}px`;
 	}
 
-	override get minimumWidth() { return 512 }
+
+	override get minimumWidth() { return 700 }
 
 }
 
-
 // register Settings pane
 Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane(
 	EditorPaneDescriptor.create(VoidSettingsPane, VoidSettingsPane.ID, nls.localize('VoidSettingsPane', "Void Settings Pane")),

From d618223289841469bc0f7a6f74440e6b71256f98 Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Tue, 17 Dec 2024 01:55:32 -0800
Subject: [PATCH 20/21] misc improvements. need to add max h on thread histroy

---
 .../react/src/sidebar-tsx/SidebarThreadSelector.tsx    |  4 ++--
 .../browser/react/src/void-settings-tsx/Settings.tsx   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
index 3c3e00d3..39896d96 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
@@ -27,7 +27,7 @@ export const SidebarThreadSelector = () => {
 	const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].lastModified > allThreads![threadId2].lastModified ? -1 : 1)
 
 	return (
-		<div className="flex flex-col gap-y-1 overflow-y-auto h-[30vh]">
+		<div className="flex flex-col gap-y-1 overflow-y-auto">
 
 			{/* X button at top right */}
 			<div className="text-right">
@@ -49,7 +49,7 @@ export const SidebarThreadSelector = () => {
 			</div>
 
 			{/* a list of all the past threads */}
-			<div className='flex flex-col gap-y-1 max-h-80 overflow-y-auto'>
+			<div className='flex flex-col gap-y-1 overflow-y-auto'>
 				{sortedThreadIds.map((threadId) => {
 					if (!allThreads)
 						return <>Error: Threads not found.</>
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index 2edc0137..c1df63bb 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js'
 import { ProviderName, SettingName, displayInfoOfSettingName, titleOfProviderName, providerNames, ModelInfo } from '../../../../../../../platform/void/common/voidSettingsTypes.js'
 import ErrorBoundary from '../sidebar-tsx/ErrorBoundary.js'
@@ -36,7 +36,7 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
 
 	const [errorString, setErrorString] = useState('')
 
-	const providerOptions = providerNames.map(providerName => ({ text: titleOfProviderName(providerName), value: providerName }))
+	const providerOptions = useMemo(() => providerNames.map(providerName => ({ text: titleOfProviderName(providerName), value: providerName })), [providerNames])
 
 	return <>
 		<div className='flex justify-center items-center gap-4'>
@@ -44,7 +44,7 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
 			<div className='max-w-40 w-full'>
 				<VoidInputBox
 					placeholder='Model Name'
-					onChangeText={(modelName) => { modelNameRef.current = modelName }}
+					onChangeText={useCallback((modelName) => { modelNameRef.current = modelName }, [])}
 					multiline={false}
 				/>
 			</div>
@@ -52,8 +52,8 @@ const AddModelMenu = ({ onSubmit }: { onSubmit: () => void }) => {
 			{/* provider */}
 			<div className='max-w-40 w-full'>
 				<VoidSelectBox
-					onCreateInstance={(instance) => { providerNameRef.current = providerOptions[0].value }} // initialize state
-					onChangeSelection={(providerName: ProviderName) => { console.log('selecting provider', providerName); providerNameRef.current = providerName }}
+					onCreateInstance={useCallback(() => { providerNameRef.current = providerOptions[0].value }, [providerOptions])} // initialize state
+					onChangeSelection={useCallback((providerName: ProviderName) => { providerNameRef.current = providerName }, [])}
 					options={providerOptions}
 				/>
 			</div>

From 5b55eed08af0f512da920dc8aaf69c88dcaaeb7e Mon Sep 17 00:00:00 2001
From: Andrew Pareles <andrewpareles@gmail.com>
Date: Tue, 17 Dec 2024 18:15:09 -0800
Subject: [PATCH 21/21] threads styles + misc

---
 .../browser/react/src/sidebar-tsx/Sidebar.tsx  |  2 +-
 .../react/src/sidebar-tsx/SidebarChat.tsx      |  2 +-
 .../src/sidebar-tsx/SidebarThreadSelector.tsx  |  2 +-
 .../react/src/void-settings-tsx/Settings.tsx   | 16 ++++++++--------
 .../contrib/void/browser/sidebarActions.ts     | 18 ++++++++++++++++++
 .../contrib/void/browser/voidSettingsPane.ts   |  6 +++---
 src/vs/workbench/workbench.common.main.ts      |  2 +-
 7 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
index f8f78d00..55fa83b7 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/Sidebar.tsx
@@ -31,7 +31,7 @@ export const Sidebar = ({ className }: { className: string }) => {
 				sidebarStateService.setState({ currentTab: tabs[(index + 1) % tabs.length] as any })
 			}}>clickme {tab}</span> */}
 
-			<div className={`mb-2 w-full h-full ${isHistoryOpen ? '' : 'hidden'}`}>
+			<div className={`mb-2 w-full ${isHistoryOpen ? '' : 'hidden'}`}>
 				<ErrorBoundary>
 					<SidebarThreadSelector />
 				</ErrorBoundary>
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
index 046dc5d9..e5ff34c9 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarChat.tsx
@@ -407,7 +407,7 @@ export const SidebarChat = () => {
 		className={`w-full h-full`}
 	>
 		<ScrollToBottomContainer
-			className={`overflow-x-hidden overflow-y-auto space-y-4`}
+			className={`overflow-x-hidden overflow-y-auto`}
 			style={{ maxHeight: sidebarHeight - formHeight - 30 }}
 		>
 			{/* previous messages */}
diff --git a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
index 39896d96..6a2b1943 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/sidebar-tsx/SidebarThreadSelector.tsx
@@ -27,7 +27,7 @@ export const SidebarThreadSelector = () => {
 	const sortedThreadIds = Object.keys(allThreads ?? {}).sort((threadId1, threadId2) => allThreads![threadId1].lastModified > allThreads![threadId2].lastModified ? -1 : 1)
 
 	return (
-		<div className="flex flex-col gap-y-1 overflow-y-auto">
+		<div className="flex flex-col gap-y-1 max-h-[400px] overflow-y-auto">
 
 			{/* X button at top right */}
 			<div className="text-right">
diff --git a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
index c1df63bb..d9c34da9 100644
--- a/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
+++ b/src/vs/workbench/contrib/void/browser/react/src/void-settings-tsx/Settings.tsx
@@ -217,7 +217,7 @@ export const VoidProviderSettings = () => {
 export const Settings = () => {
 	const isDark = useIsDark()
 
-	const [tab, setTab] = useState<'models' | 'providers'>('models')
+	const [tab, setTab] = useState<'models' | 'features'>('models')
 
 	return <div className={`@@void-scope ${isDark ? 'dark' : ''}`}>
 		<div className='w-full h-full px-10 py-10 select-none'>
@@ -236,9 +236,9 @@ export const Settings = () => {
 						<button className={`text-left p-1 my-0.5 rounded-sm overflow-hidden ${tab === 'models' ? 'bg-vscode-button-hover-bg' : 'bg-vscode-button-active-bg'} hover:bg-vscode-button-hover-bg active:bg-vscode-button-active-bg`}
 							onClick={() => { setTab('models') }}
 						>Models</button>
-						<button className={`text-left p-1 my-0.5 rounded-sm overflow-hidden ${tab === 'providers' ? 'bg-vscode-button-hover-bg' : 'bg-vscode-button-active-bg'} hover:bg-vscode-button-hover-bg active:bg-vscode-button-active-bg`}
-							onClick={() => { setTab('providers') }}
-						>Providers</button>
+						<button className={`text-left p-1 my-0.5 rounded-sm overflow-hidden ${tab === 'features' ? 'bg-vscode-button-hover-bg' : 'bg-vscode-button-active-bg'} hover:bg-vscode-button-hover-bg active:bg-vscode-button-active-bg`}
+							onClick={() => { setTab('features') }}
+						>Features</button>
 					</div>
 
 					{/* separator */}
@@ -255,15 +255,15 @@ export const Settings = () => {
 								<AddModelButton />
 								<RefreshableModels />
 							</ErrorBoundary>
-						</div>
-
-						<div className={`${tab !== 'providers' ? 'hidden' : ''}`}>
-							<h2 className={`text-3xl mb-2`} onClick={() => { setTab('providers') }}>Providers</h2>
 							<ErrorBoundary>
 								<VoidProviderSettings />
 							</ErrorBoundary>
 						</div>
 
+						<div className={`${tab !== 'features' ? 'hidden' : ''}`}>
+							<h2 className={`text-3xl mb-2`} onClick={() => { setTab('features') }}>Features</h2>
+						</div>
+
 					</div>
 				</div>
 
diff --git a/src/vs/workbench/contrib/void/browser/sidebarActions.ts b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
index 5f9a9356..e44fc864 100644
--- a/src/vs/workbench/contrib/void/browser/sidebarActions.ts
+++ b/src/vs/workbench/contrib/void/browser/sidebarActions.ts
@@ -21,6 +21,8 @@ import { ITextModel } from '../../../../editor/common/model.js';
 import { VOID_VIEW_ID } from './sidebarPane.js';
 import { IMetricsService } from '../../../../platform/void/common/metricsService.js';
 import { ISidebarStateService } from './sidebarStateService.js';
+import { ICommandService } from '../../../../platform/commands/common/commands.js';
+import { OPEN_VOID_SETTINGS_ACTION_ID } from './voidSettingsPane.js';
 
 
 // ---------- Register commands and keybindings ----------
@@ -161,3 +163,19 @@ registerAction2(class extends Action2 {
 	}
 })
 
+
+// Settings gear
+registerAction2(class extends Action2 {
+	constructor() {
+		super({
+			id: 'void.settingsAction',
+			title: 'Void Settings',
+			icon: { id: 'settings-gear' },
+			menu: [{ id: MenuId.ViewTitle, group: 'navigation', when: ContextKeyExpr.equals('view', VOID_VIEW_ID), }]
+		});
+	}
+	async run(accessor: ServicesAccessor): Promise<void> {
+		const commandService = accessor.get(ICommandService)
+		commandService.executeCommand(OPEN_VOID_SETTINGS_ACTION_ID)
+	}
+})
diff --git a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
index 7974fd4c..3b7515b8 100644
--- a/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
+++ b/src/vs/workbench/contrib/void/browser/voidSettingsPane.ts
@@ -120,12 +120,12 @@ Registry.as<IEditorPaneRegistry>(EditorExtensions.EditorPane).registerEditorPane
 );
 
 
-const OPEN_VOID_SETTINGS_ID = 'workbench.action.openVoidSettings'
+export const OPEN_VOID_SETTINGS_ACTION_ID = 'workbench.action.openVoidSettings'
 // register the gear on the top right
 registerAction2(class extends Action2 {
 	constructor() {
 		super({
-			id: OPEN_VOID_SETTINGS_ID,
+			id: OPEN_VOID_SETTINGS_ACTION_ID,
 			title: nls.localize2('voidSettings', "Void: Settings"),
 			f1: true,
 			icon: Codicon.settingsGear,
@@ -155,7 +155,7 @@ registerAction2(class extends Action2 {
 MenuRegistry.appendMenuItem(MenuId.GlobalActivity, {
 	group: '0_command',
 	command: {
-		id: OPEN_VOID_SETTINGS_ID,
+		id: OPEN_VOID_SETTINGS_ACTION_ID,
 		title: nls.localize('voidSettings', "Void Settings")
 	},
 	order: 1
diff --git a/src/vs/workbench/workbench.common.main.ts b/src/vs/workbench/workbench.common.main.ts
index 36bd6ad4..14f3fec1 100644
--- a/src/vs/workbench/workbench.common.main.ts
+++ b/src/vs/workbench/workbench.common.main.ts
@@ -334,7 +334,7 @@ import './contrib/surveys/browser/nps.contribution.js';
 import './contrib/surveys/browser/languageSurveys.contribution.js';
 
 // Welcome
-import './contrib/welcomeGettingStarted/browser/gettingStarted.contribution.js';
+// import './contrib/welcomeGettingStarted/browser/gettingStarted.contribution.js'; // Void commented this out (removes Welcome page on start)
 import './contrib/welcomeWalkthrough/browser/walkThrough.contribution.js';
 import './contrib/welcomeViews/common/viewsWelcome.contribution.js';
 import './contrib/welcomeViews/common/newFile.contribution.js';