- {/* Copy path */}
-
-
-
-
- Copy file path
-
+ {/* Edit in editor tab */}
+ {onOpenFile && (
+
+
+
+
+ Edit
+
+ )}
+
+ {/* Open with external editor / copy path / open folder */}
+
{/* Discard changes */}
{file.source === 'uncommitted' && (
diff --git a/apps/web/components/settings/editors-settings.tsx b/apps/web/components/settings/editors-settings.tsx
index 2303c39117..f086382260 100644
--- a/apps/web/components/settings/editors-settings.tsx
+++ b/apps/web/components/settings/editors-settings.tsx
@@ -1,11 +1,16 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
-import { IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconEdit, IconTrash, IconChevronDown, IconExternalLink, IconInfoCircle } from '@tabler/icons-react';
import { Badge } from '@kandev/ui/badge';
import { Button } from '@kandev/ui/button';
+import { Checkbox } from '@kandev/ui/checkbox';
import { Input } from '@kandev/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@kandev/ui/select';
+import { Separator } from '@kandev/ui/separator';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@kandev/ui/tooltip';
+import { Switch } from '@kandev/ui/switch';
+import { Textarea } from '@kandev/ui/textarea';
import { SettingsPageTemplate } from '@/components/settings/settings-page-template';
import { Combobox, type ComboboxOption } from '@/components/combobox';
import { useAppStore } from '@/components/state-provider';
@@ -13,6 +18,7 @@ import { EditableCard } from '@/components/settings/editable-card';
import { useEditors } from '@/hooks/domains/settings/use-editors';
import { createEditor, deleteEditor, updateEditor, updateUserSettings } from '@/lib/api';
import { useRequest } from '@/lib/http/use-request';
+import { LSP_DEFAULT_CONFIGS } from '@/lib/lsp/lsp-client-manager';
import type { EditorOption } from '@/lib/types/http';
type CustomKind = 'custom_command' | 'custom_remote_ssh' | 'custom_hosted_url';
@@ -36,6 +42,21 @@ const CUSTOM_KIND_OPTIONS: Array<{ value: CustomKind; label: string }> = [
const PLACEHOLDER_HINT = '{cwd} {file} {rel} {line} {column}';
+const LSP_LANGUAGE_OPTIONS = [
+ { id: 'typescript', label: 'TypeScript / JavaScript', binary: 'typescript-language-server',
+ docsUrl: 'https://github.com/typescript-language-server/typescript-language-server#workspace-configuration',
+ installHint: 'Installs typescript-language-server and typescript via npm into ~/.kandev/lsp-servers/' },
+ { id: 'go', label: 'Go', binary: 'gopls',
+ docsUrl: 'https://github.com/golang/tools/blob/master/gopls/doc/settings.md',
+ installHint: 'Runs "go install golang.org/x/tools/gopls@latest". Requires Go to be installed.' },
+ { id: 'rust', label: 'Rust', binary: 'rust-analyzer',
+ docsUrl: 'https://rust-analyzer.github.io/book/configuration.html',
+ installHint: 'Downloads the rust-analyzer binary from GitHub releases into ~/.kandev/lsp-servers/' },
+ { id: 'python', label: 'Python', binary: 'pyright-langserver',
+ docsUrl: 'https://microsoft.github.io/pyright/#/settings',
+ installHint: 'Installs pyright via npm into ~/.kandev/lsp-servers/' },
+];
+
function getCustomKindLabel(kind: string) {
return CUSTOM_KIND_OPTIONS.find((option) => option.value === kind)?.label ?? 'Custom';
}
@@ -288,6 +309,98 @@ export function EditorsSettings() {
const [isAdding, setIsAdding] = useState(false);
const [editingId, setEditingId] = useState
(null);
+ // LSP settings
+ const [lspAutoStartLanguages, setLspAutoStartLanguages] = useState(
+ () => currentUserSettings.lspAutoStartLanguages ?? []
+ );
+ const [lspAutoInstallLanguages, setLspAutoInstallLanguages] = useState(
+ () => currentUserSettings.lspAutoInstallLanguages ?? []
+ );
+ const [baselineLspAutoStart, setBaselineLspAutoStart] = useState(
+ () => currentUserSettings.lspAutoStartLanguages ?? []
+ );
+ const [baselineLspAutoInstall, setBaselineLspAutoInstall] = useState(
+ () => currentUserSettings.lspAutoInstallLanguages ?? []
+ );
+
+ // LSP server configs (per-language JSON overrides)
+ const initConfigStrings = useCallback((): Record => {
+ const configs = currentUserSettings.lspServerConfigs ?? {};
+ const result: Record = {};
+ for (const [lang, config] of Object.entries(configs)) {
+ if (config && Object.keys(config).length > 0) {
+ result[lang] = JSON.stringify(config, null, 2);
+ }
+ }
+ return result;
+ }, [currentUserSettings.lspServerConfigs]);
+ const [lspConfigStrings, setLspConfigStrings] = useState>(initConfigStrings);
+ const [baselineLspConfigStrings, setBaselineLspConfigStrings] = useState>(initConfigStrings);
+ const [expandedConfigLang, setExpandedConfigLang] = useState(null);
+ const [lspConfigErrors, setLspConfigErrors] = useState>({});
+
+ const toggleAutoStart = useCallback((langId: string, checked: boolean) => {
+ setLspAutoStartLanguages((prev) =>
+ checked ? [...prev, langId] : prev.filter((id) => id !== langId)
+ );
+ }, []);
+
+ const toggleAutoInstall = useCallback((langId: string, checked: boolean) => {
+ setLspAutoInstallLanguages((prev) =>
+ checked ? [...prev, langId] : prev.filter((id) => id !== langId)
+ );
+ }, []);
+
+ const updateLspConfigString = useCallback((langId: string, value: string) => {
+ setLspConfigStrings((prev) => {
+ if (!value.trim()) {
+ const next = { ...prev };
+ delete next[langId];
+ return next;
+ }
+ return { ...prev, [langId]: value };
+ });
+ // Validate JSON
+ if (!value.trim()) {
+ setLspConfigErrors((prev) => {
+ const next = { ...prev };
+ delete next[langId];
+ return next;
+ });
+ return;
+ }
+ try {
+ const parsed = JSON.parse(value);
+ if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+ setLspConfigErrors((prev) => ({ ...prev, [langId]: 'Must be a JSON object' }));
+ } else {
+ setLspConfigErrors((prev) => {
+ const next = { ...prev };
+ delete next[langId];
+ return next;
+ });
+ }
+ } catch {
+ setLspConfigErrors((prev) => ({ ...prev, [langId]: 'Invalid JSON' }));
+ }
+ }, []);
+
+ const parseLspConfigs = useCallback((): Record> | null => {
+ const result: Record> = {};
+ for (const [lang, str] of Object.entries(lspConfigStrings)) {
+ if (!str.trim()) continue;
+ try {
+ const parsed = JSON.parse(str);
+ if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) return null;
+ result[lang] = parsed as Record;
+ } catch {
+ return null;
+ }
+ }
+ return result;
+ }, [lspConfigStrings]);
+
+
const customEditors = useMemo(() => {
const items = editors.filter(isCustomEditor);
return items.slice().sort((a, b) => {
@@ -350,17 +463,32 @@ export function EditorsSettings() {
}));
}, [availableEditors, defaultEditorId]);
- const isDirty = defaultEditorId !== baselineDefaultId;
+ const lspAutoStartDirty =
+ lspAutoStartLanguages.length !== baselineLspAutoStart.length ||
+ lspAutoStartLanguages.some((id) => !baselineLspAutoStart.includes(id));
+ const lspAutoInstallDirty =
+ lspAutoInstallLanguages.length !== baselineLspAutoInstall.length ||
+ lspAutoInstallLanguages.some((id) => !baselineLspAutoInstall.includes(id));
+ const lspConfigsDirty = JSON.stringify(lspConfigStrings) !== JSON.stringify(baselineLspConfigStrings);
+ const isDirty = defaultEditorId !== baselineDefaultId || lspAutoStartDirty || lspAutoInstallDirty || lspConfigsDirty;
const saveDefaultRequest = useRequest(async () => {
- const payload = {
+ const parsedConfigs = parseLspConfigs();
+ if (parsedConfigs === null) return; // Invalid JSON, don't save
+ const payload: Parameters[0] = {
workspace_id: currentUserSettings.workspaceId ?? '',
board_id: currentUserSettings.boardId ?? '',
repository_ids: currentUserSettings.repositoryIds ?? [],
default_editor_id: defaultEditorId || undefined,
+ lsp_auto_start_languages: lspAutoStartLanguages,
+ lsp_auto_install_languages: lspAutoInstallLanguages,
+ lsp_server_configs: parsedConfigs,
};
const response = await updateUserSettings(payload, { cache: 'no-store' });
setBaselineDefaultId(defaultEditorId);
+ setBaselineLspAutoStart([...lspAutoStartLanguages]);
+ setBaselineLspAutoInstall([...lspAutoInstallLanguages]);
+ setBaselineLspConfigStrings({ ...lspConfigStrings });
if (response?.settings) {
setUserSettings({
workspaceId: response.settings.workspace_id || null,
@@ -372,6 +500,9 @@ export function EditorsSettings() {
enablePreviewOnClick: response.settings.enable_preview_on_click ?? false,
chatSubmitKey: response.settings.chat_submit_key ?? 'cmd_enter',
reviewAutoMarkOnScroll: response.settings.review_auto_mark_on_scroll ?? true,
+ lspAutoStartLanguages: response.settings.lsp_auto_start_languages ?? [],
+ lspAutoInstallLanguages: response.settings.lsp_auto_install_languages ?? [],
+ lspServerConfigs: response.settings.lsp_server_configs ?? {},
loaded: true,
});
}
@@ -426,17 +557,141 @@ export function EditorsSettings() {
return (
{
void saveDefaultRequest.run();
}}
>
-
-
-
Default editor
-
+
+ {/* ── File Editor ────────────────────────────────────── */}
+
+
+ File Editor
+
+
+
+
+
Language Servers
+
+ Auto-start language servers when opening files to get diagnostics, hover info, and go-to-definition. You can also toggle each server on/off per file.
+
+ When enabled, install your project's dependencies (e.g. npm install via repository setup scripts) to avoid missing type errors.
+
+
+
+ {LSP_LANGUAGE_OPTIONS.map((lang) => (
+
+
+
{lang.label}
+
{lang.binary}
+
+
+ Auto-start
+ toggleAutoStart(lang.id, checked === true)}
+ />
+
+
+ toggleAutoInstall(lang.id, checked === true)}
+ className="h-3.5 w-3.5"
+ />
+
+
+
+
+
+
+ {lang.installHint}
+
+
+
+
+ ))}
+
+
+
+
+
+
Server Configuration
+
+ Override settings sent to each language server via workspace/configuration. JSON format.
+
+
+ {LSP_LANGUAGE_OPTIONS.map((lang) => {
+ const isExpanded = expandedConfigLang === lang.id;
+ const configStr = lspConfigStrings[lang.id] ?? '';
+ const defaultConfig = LSP_DEFAULT_CONFIGS[lang.id];
+ const hasDefaults = defaultConfig && Object.keys(defaultConfig).length > 0;
+ const error = lspConfigErrors[lang.id];
+ return (
+
+
+ {isExpanded && (
+