@hienlh/ppm 0.20.10 → 0.21.0

package/src/web/components/chat/slash-command-picker.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef, useCallback, useMemo, type KeyboardEvent } from "react";
-import { Sparkles, Terminal, Zap, Bot, RefreshCw, Clock } from "lucide-react";
+import { Sparkles, Terminal, Zap, Bot, RefreshCw, Clock } from "@/lib/icons";
 import { api, projectUrl } from "@/lib/api-client";
 import { searchFuzzy } from "../../../shared/fuzzy-search";
 

package/src/web/components/chat/task-tracker.tsx

@@ -4,7 +4,7 @@
  * default; auto-hides once every task is finished (completed/stopped).
  */
 import { useState, useMemo } from "react";
-import { ChevronDown, ChevronRight, ListTodo } from "lucide-react";
+import { ChevronDown, ChevronRight, ListTodo } from "@/lib/icons";
 import type { ChatMessage } from "../../../types/chat";
 import type { TaskItem, TaskStatus } from "../../../services/task-status-aggregator";
 import { useTasks } from "@/hooks/use-tasks";

package/src/web/components/chat/team-activity-panel.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState, useEffect, useMemo, useCallback } from "react";
-import { RefreshCw } from "lucide-react";
+import { RefreshCw } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMessageItem } from "@/hooks/use-chat";
 import { useTeamActivityFeed } from "@/hooks/use-team-activity-feed";

package/src/web/components/chat/team-member-activity-row.tsx

@@ -6,7 +6,7 @@
  * which is exactly the display that made it impossible to tell who was running.
  */
 
-import { Loader2, ChevronRight } from "lucide-react";
+import { Loader2, ChevronRight } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";

package/src/web/components/chat/team-member-list.tsx

@@ -5,7 +5,7 @@
  * the two used to share one scroll and the members were pushed out of view.
  */
 
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { TeamMemberActivityRow } from "./team-member-activity-row";

package/src/web/components/chat/team-member-sheet.tsx

@@ -7,7 +7,7 @@
  */
 
 import { lazy, Suspense } from "react";
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { useTeamMemberSheet } from "./use-open-team-member";
 

package/src/web/components/chat/team-member-window-content.tsx

@@ -9,7 +9,7 @@
  * so a teammate's session looks identical wherever it is read.
  */
 
-import { Loader2, RefreshCw } from "lucide-react";
+import { Loader2, RefreshCw } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import { useMemberTranscriptTail } from "@/hooks/use-member-transcript-tail";
 import type { WindowContentProps } from "@/components/floating-window/window-content-registry";

package/src/web/components/chat/team-working-bar.tsx

@@ -11,7 +11,7 @@
  * nothing here instead of claiming a long-finished teammate is still running.
  */
 
-import { Users } from "lucide-react";
+import { Users } from "@/lib/icons";
 import type { TeamMemberActivity } from "@/hooks/use-team-activity-feed";
 import { currentStep, formatDuration, shortAgentType } from "./team-member-activity-format";
 import { useOpenTeamMember } from "./use-open-team-member";

package/src/web/components/chat/tool-cards.tsx

@@ -36,8 +36,8 @@ import {
   Clock,
   Send,
   Users,
-  ImagePlus,
-} from "lucide-react";
+} from "@/lib/icons";
+import { ImagePlus } from "@/lib/icons";
 
 /**
  * Handle of an agent that can be addressed later, or null for a one-shot subagent.

package/src/web/components/chat/turn-change-sheet.tsx

@@ -6,7 +6,7 @@
  * The panel is capped; the body scrolls inside it so the sheet itself never does.
  */
 import { useEffect, useRef, useState } from "react";
-import { ArrowUp, ChevronLeft, X } from "lucide-react";
+import { ArrowUp, ChevronLeft, X } from "@/lib/icons";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
 import { copyToClipboard } from "@/lib/clipboard";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";

package/src/web/components/chat/turn-change-tray.tsx

@@ -6,7 +6,7 @@
  * Both panes need `min-h-0` or the grid rows refuse to shrink and neither scrolls.
  */
 import { useEffect, useId, useRef, useState } from "react";
-import { X } from "lucide-react";
+import { X } from "@/lib/icons";
 import { copyToClipboard } from "@/lib/clipboard";
 import { ownsGlobalShortcut } from "@/lib/owns-global-shortcut";
 import type { TurnFileChange } from "@/lib/aggregate-turn-file-changes";

package/src/web/components/chat/turn-cost-warning.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { ChevronDown, TriangleAlert } from "lucide-react";
+import { ChevronDown, TriangleAlert } from "@/lib/icons";
 import type { TurnUsage } from "../../../shared/turn-usage";
 import {
   assessTurnCost,

package/src/web/components/chat/usage-badge.tsx

@@ -17,7 +17,7 @@
  */
 
 import { useState } from "react";
-import { Activity, RefreshCw } from "lucide-react";
+import { Activity, RefreshCw } from "@/lib/icons";
 import type { UsageInfo } from "../../../types/chat";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { AccountCard } from "@/components/settings/accounts/account-card";

package/src/web/components/chat/usage-panel-shell.tsx

@@ -13,7 +13,7 @@
  */
 
 import { useState, type ReactNode } from "react";
-import { ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "lucide-react";
+import { ExternalLink, Maximize2, Minimize2, RefreshCw, X } from "@/lib/icons";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { openSettings } from "@/components/settings/open-settings";
 

package/src/web/components/chat/version-switcher.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "@/lib/icons";
 import type { VersionGroup } from "../../../types/api";
 
 /**

package/src/web/components/database/connection-import-export.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "lucide-react";
+import { MoreVertical, Download, Upload, Clipboard, ClipboardPaste } from "@/lib/icons";
 import { copyToClipboard } from "@/lib/clipboard";
 
 interface Props {

package/src/web/components/database/connection-list.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useRef } from "react";
-import { ChevronRight, ChevronDown } from "lucide-react";
+import { ChevronRight, ChevronDown } from "@/lib/icons";
 import type { Connection, CachedTable } from "./use-connections";
 import type { ColumnInfo } from "./schema-table-tree";
 import { ConnectionRow } from "./connection-row";

package/src/web/components/database/connection-row.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Lock, Search } from "lucide-react";
+import { ChevronRight, ChevronDown, RefreshCw, Pencil, Trash2, Lock, Search } from "@/lib/icons";
 import { cn } from "@/lib/utils";
 import type { Connection, CachedTable } from "./use-connections";
 import { SchemaTableTree, type ColumnInfo } from "./schema-table-tree";

package/src/web/components/database/database-sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Database, Plus } from "lucide-react";
+import { Database, Plus } from "@/lib/icons";
 import { SidebarHeader } from "@/components/ui/sidebar-header";
 import { useTabStore } from "@/stores/tab-store";
 import { ConnectionList } from "./connection-list";

package/src/web/components/database/database-viewer.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useRef, useCallback } from "react";
-import { Database, RefreshCw, GripHorizontal, Loader2, ShieldCheck, ShieldOff } from "lucide-react";
+import { Database, RefreshCw, GripHorizontal, Loader2, ShieldCheck, ShieldOff } from "@/lib/icons";
 import { api } from "@/lib/api-client";
 import { useTabStore } from "@/stores/tab-store";
 import { useDatabase, type DbColumnInfo } from "./use-database";

package/src/web/components/database/export-button.tsx

@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { Download } from "lucide-react";
+import { Download } from "@/lib/icons";
 import { serializeCsv } from "@/lib/csv-parser";
 import { copyToClipboard } from "@/lib/clipboard";
 

package/src/web/components/database/glide-context-menu.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Eye, Pin, PinOff, Trash2, ExternalLink } from "lucide-react";
+import { Eye, Pin, PinOff, Trash2, ExternalLink } from "@/lib/icons";
 
 interface ContextMenuProps {
   position: { x: number; y: number };

package/src/web/components/database/glide-data-grid.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from "react";
 import DataEditor, { type GridColumn, type Item } from "@glideapps/glide-data-grid";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import type { GlideGridProps } from "./glide-grid-types";
 import { useGlideTheme } from "./glide-grid-theme";
 import { useGlideColumns } from "./use-glide-columns";

package/src/web/components/database/glide-data-preview-panel.tsx

@@ -1,7 +1,7 @@
 import { useState, useCallback, useMemo } from "react";
-import { Eye, Sparkles, WrapText, ExternalLink, X, GripHorizontal } from "lucide-react";
+import { Eye, Sparkles, WrapText, ExternalLink, X, GripHorizontal } from "@/lib/icons";
 import Editor from "@monaco-editor/react";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 
 export interface PreviewData {

package/src/web/components/database/glide-grid-pagination.tsx

@@ -1,4 +1,4 @@
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "@/lib/icons";
 
 interface PaginationProps {
   total: number;

package/src/web/components/database/glide-grid-toolbar.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import { Search, X, Trash2, Plus, Columns } from "lucide-react";
+import { Search, X, Trash2, Plus, Columns } from "@/lib/icons";
 import { ExportButton } from "./export-button";
 import { GlideColumnSearch } from "./glide-column-search";
 

package/src/web/components/database/glide-header-menu.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
-import { Filter, Pin, PinOff, ArrowUp, ArrowDown, X } from "lucide-react";
+import { Filter, Pin, PinOff, ArrowUp, ArrowDown, X } from "@/lib/icons";
 
 interface HeaderMenuProps {
   colName: string;

package/src/web/components/database/glide-save-bar.tsx

@@ -1,4 +1,4 @@
-import { Save, Undo2 } from "lucide-react";
+import { Save, Undo2 } from "@/lib/icons";
 
 interface SaveBarProps {
   pendingCount: number;

package/src/web/components/database/schema-table-tree.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronDown, Database, Key, Link2 } from "lucide-react";
+import { ChevronRight, ChevronDown, Database, Key, Link2 } from "@/lib/icons";
 import type { CachedTable } from "./use-connections";
 
 export interface ColumnInfo {

package/src/web/components/editor/audio-preview.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FileWarning, Music } from "lucide-react";
+import { FileWarning, Music } from "@/lib/icons";
 import { basename } from "@/lib/utils";
 import { rawMediaUrl } from "@/lib/media-url";
 

package/src/web/components/editor/code-editor.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useRef, useMemo, memo, lazy, Suspense } from "react";
-import Editor, { type OnMount } from "@monaco-editor/react";
+import Editor, { type Monaco, type OnMount } from "@monaco-editor/react";
 import type * as MonacoType from "monaco-editor";
 import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
@@ -9,7 +9,13 @@ import { useSettingsStore } from "@/stores/settings-store";
 import { basename } from "@/lib/utils";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
 import { useInlineBlame } from "@/hooks/use-inline-blame";
-import { Loader2, FileWarning, Play, Database, ExternalLink, X, GripHorizontal, ShieldCheck, ShieldOff } from "lucide-react";
+import { applyBuiltinTypeScript } from "@/lib/lsp/monaco-builtin-typescript";
+import { useIsMobile, isMobileDevice } from "@/hooks/use-is-mobile";
+import { useIsTouchOnly } from "@/hooks/use-is-touch-only";
+import type { EditorLspState } from "./editor-language-service";
+import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
+import { LspStatus } from "./lsp-status";
+import { Loader2, FileWarning, Play, Database, ExternalLink, X, GripHorizontal, ShieldCheck, ShieldOff } from "@/lib/icons";
 import { EditorBreadcrumb } from "./editor-breadcrumb";
 import { EditorToolbar } from "./editor-toolbar";
 import { EditorLanguagePicker } from "./editor-language-picker";
@@ -25,10 +31,18 @@ import type { DbQueryResult } from "../database/use-database";
 // all from these very sets, so they must not be redeclared here.
 import { AUDIO_EXTS, IMAGE_EXTS, SQLITE_EXTS, VIDEO_EXTS } from "@/components/os-explorer/can-open-in-ppm";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
+import { DOTENV_LANGUAGE_ID, isDotenvFile, registerDotenvLanguage } from "@/lib/monaco-dotenv-language";
 
 const MarkdownRenderer = lazy(() =>
   import("@/components/shared/markdown-renderer").then((m) => ({ default: m.MarkdownRenderer }))
 );
+// Only mounted while the language-server setting is on, which is what keeps
+// the LSP client, the Monaco providers and the conversions out of the chunk
+// that opening a file pulls in. Static-importing anything from that module —
+// even a constant — would put it back.
+const EditorLanguageService = lazy(() =>
+  import("./editor-language-service").then((m) => ({ default: m.EditorLanguageService }))
+);
 const CsvPreview = lazy(() => import("./csv-preview").then((m) => ({ default: m.CsvPreview })));
 const ImagePreview = lazy(() => import("./image-preview").then((m) => ({ default: m.ImagePreview })));
 const PdfPreview = lazy(() => import("./pdf-preview").then((m) => ({ default: m.PdfPreview })));
@@ -52,7 +66,10 @@ function getMonacoLanguage(filename: string): string {
     sh: "shell", bash: "shell",
     sql: "sql",
   };
-  return map[ext] ?? "plaintext";
+  // The extension answers first, so `.env.example.md` stays markdown; an env
+  // file's suffix is not an extension at all (`.env.test.example`), which is
+  // why the name has to be tested as a whole.
+  return map[ext] ?? (isDotenvFile(filename) ? DOTENV_LANGUAGE_ID : "plaintext");
 }
 
 interface CodeEditorProps {
@@ -76,14 +93,34 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
   const editorRef = useRef<MonacoType.editor.IStandaloneCodeEditor | null>(null);
   // Mirrors editorRef as state, so hooks that must react to the editor existing
   // (inline blame) re-run on mount instead of reading a ref that is still null.
+  // `Monaco` rather than `typeof MonacoType`: the bare `monaco-editor` types declare
+  // `languages.typescript` as a deprecated stub, and the TypeScript defaults this reaches for
+  // are only on the type that includes the language contributions.
   const [mounted, setMounted] = useState<{
     editor: MonacoType.editor.IStandaloneCodeEditor;
-    monaco: typeof MonacoType;
+    monaco: Monaco;
   } | null>(null);
   const { tabs, updateTab } = useTabStore(useShallow((s) => ({ tabs: s.tabs, updateTab: s.updateTab })));
-  const { wordWrap, toggleWordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap })));
+  const { wordWrap, toggleWordWrap, mobileWordWrap, toggleMobileWordWrap } = useSettingsStore(
+    useShallow((s) => ({
+      wordWrap: s.wordWrap, toggleWordWrap: s.toggleWordWrap,
+      mobileWordWrap: s.mobileWordWrap, toggleMobileWordWrap: s.toggleMobileWordWrap,
+    })),
+  );
   const inlineBlame = useSettingsStore((s) => s.inlineBlame);
   const toggleInlineBlame = useSettingsStore((s) => s.toggleInlineBlame);
+  const lspEnabled = useSettingsStore((s) => s.lspEnabled);
+  const setLspEnabled = useSettingsStore((s) => s.setLspEnabled);
+  // The viewport breakpoint, not the `isMobile` further down: that one is
+  // `ontouchstart`, which is also true of a touch-screen laptop with every
+  // reason to run a language server and enough width to read unwrapped code.
+  const isPhone = useIsMobile();
+  const isTouchOnly = useIsTouchOnly();
+  // A phone's wrap state is its own pref. The toggle for `wordWrap` lives in
+  // the desktop-only breadcrumb bar, so a phone had no way to reach it and
+  // defaulted to off — the one shape of this setting a narrow screen cannot use.
+  const wrapOn = isPhone ? mobileWordWrap : wordWrap;
+  const toggleWrap = isPhone ? toggleMobileWordWrap : toggleWordWrap;
   const monacoTheme = useMonacoTheme();
 
   const isUntitled = metadata?.isUntitled === true;
@@ -379,7 +416,9 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
   // GitLens-style annotation on the cursor's line. Off unless the pref is on,
   // and never for an untitled buffer or inline (read-only preview) content —
   // neither has a path git could blame.
-  const canBlame = !isUntitled && inlineContent == null && !!filePath && !!projectName;
+  // Never on a phone: it is a `git blame` for every file opened and a
+  // `git show` for every hover, on the device least able to pay for either.
+  const canBlame = !isUntitled && inlineContent == null && !!filePath && !!projectName && !isPhone;
   const blame = useInlineBlame({
     editor: mounted?.editor ?? null,
     monaco: mounted?.monaco ?? null,
@@ -388,6 +427,31 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     enabled: inlineBlame && canBlame,
   });
 
+  // Real language intelligence, from a real language server on the host.
+  //
+  // Servable is about the buffer: an untitled or inline one has no path, and an
+  // external file (outside any project) has no project whose node_modules,
+  // tsconfig or go.mod would tell a server what it is looking at, so it gets
+  // nothing rather than a server rooted somewhere arbitrary.
+  const lspServable = !isUntitled && !isExternalFile && inlineContent == null && !!filePath && !!projectName;
+  // Off until asked, and never on a touch-only device. A server is a real process on the
+  // host — one `typescript-language-server` was 854 MB resident — so it starts because
+  // someone wanted it, not because a file was opened.
+  //
+  // `useIsTouchOnly` rather than `isPhone`: that one is a 768px viewport test, so narrowing a
+  // desktop window past the breakpoint shut the language server down mid-session and dragging
+  // it back cold-started another one. What a *machine* should be asked to run cannot depend on
+  // how wide a window happens to be.
+  // Two questions, deliberately separated. `lspWanted` is about the *device*: the setting is
+  // on and this machine can run a server. `lspOn` adds the buffer. Monaco's TypeScript
+  // defaults are global to the page, so only the device half may decide them — a scratch
+  // buffer no server can serve must not switch the built-in worker back on underneath the
+  // project file in the next tab.
+  const lspWanted = lspEnabled && !isTouchOnly;
+  const lspOn = lspWanted && lspServable;
+  const [lsp, setLsp] = useState<EditorLspState>({ status: null, diagnostics: [] });
+  const handleLspState = useCallback((next: EditorLspState) => setLsp(next), []);
+
   const saveFile = useCallback(
     async (text: string) => {
       if (!filePath) return;
@@ -402,9 +466,16 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
         // The blame line table is keyed by line number, so an edit invalidates
         // it; a save is the point where a fresh one can be had.
         blame.refresh();
+        // Servers that only re-analyse on save (gopls by default, several
+        // linters) would otherwise keep reporting the previous contents.
+        // Dynamically, so the save path does not statically import the LSP
+        // client; by the time this runs the chunk is already loaded.
+        if (lspOn && projectName && filePath) {
+          void import("@/hooks/use-lsp").then((m) => m.notifyLspSave(projectName, filePath, text));
+        }
       } catch { /* Silent — unsaved indicator persists */ }
     },
-    [filePath, projectName, isExternalFile, blame.refresh], // eslint-disable-line react-hooks/exhaustive-deps
+    [filePath, projectName, isExternalFile, lspOn, blame.refresh], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   function handleChange(value: string | undefined) {
@@ -473,6 +544,25 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     revealTarget();
   }, [revealAt, revealTarget]);
 
+  /**
+   * Monaco's own TypeScript worker is not a fallback *beside* a real server — it is a
+   * slower, single-file second answer, and two answers is what put "Loading…" under a hover
+   * the server had already given. With no server coming it is the only answer there is, and
+   * unregistering it left a fresh desktop install and every phone with nothing at all.
+   *
+   * An effect rather than a line in the mount handler: the setting can be toggled while an
+   * editor is open, and this has to follow it.
+   */
+  useEffect(() => {
+    const monaco = mounted?.monaco;
+    if (!monaco) return;
+    applyBuiltinTypeScript(
+      lspWanted,
+      monaco.languages.typescript.typescriptDefaults,
+      monaco.languages.typescript.javascriptDefaults,
+    );
+  }, [mounted, lspWanted]);
+
   const handleEditorMount: OnMount = useCallback((editor, monaco) => {
     editorRef.current = editor;
     monacoInstanceRef.current = monaco;
@@ -489,18 +579,18 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
     }
     editor.addCommand(
       monaco.KeyMod.Alt | monaco.KeyCode.KeyZ,
-      () => useSettingsStore.getState().toggleWordWrap(),
+      () => {
+        // Read the breakpoint at press time: which of the two prefs this editor
+        // is showing depends on the viewport, and the binding outlives a resize.
+        const settings = useSettingsStore.getState();
+        if (isMobileDevice()) settings.toggleMobileWordWrap();
+        else settings.toggleWordWrap();
+      },
     );
     editor.addCommand(
       monaco.KeyMod.Alt | monaco.KeyCode.KeyB,
       () => useSettingsStore.getState().toggleInlineBlame(),
     );
-    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: true, noSyntaxValidation: true, noSuggestionDiagnostics: true,
-    });
-    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: true, noSyntaxValidation: true, noSuggestionDiagnostics: true,
-    });
     // Register SQL completion if schema available
     if (sqlSchemaInfo) {
       completionDisposable.current?.dispose();
@@ -695,6 +785,18 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
       className="flex flex-col h-full w-full overflow-hidden"
       style={mobileHeight ? { height: `${mobileHeight}px`, maxHeight: `${mobileHeight}px` } : undefined}
     >
+      {/* Renders nothing — it is the language server, mounted only when asked. */}
+      {lspOn && mounted && filePath && projectName && (
+        <Suspense fallback={null}>
+          <EditorLanguageService
+            editor={mounted.editor}
+            monaco={mounted.monaco}
+            projectName={projectName}
+            filePath={filePath}
+            onState={handleLspState}
+          />
+        </Suspense>
+      )}
       {/* Inline content toolbar (cell viewer mode) */}
       {inlineContent != null && canBeautifyInline && (
         <div className="flex items-center h-7 border-b border-border bg-background shrink-0 px-2 gap-2">
@@ -713,6 +815,18 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             tabId={tabId}
             className="flex items-center flex-1 min-w-0 overflow-x-auto scrollbar-none px-2 gap-0.5"
           />
+          {/* `lspWanted`, not `lspServable` alone: on a touch-only device no server
+              runs whatever the setting says, so a chip there offers a switch that
+              changes nothing — and turning it on hides the chip itself, leaving no
+              way back to it. */}
+          {lspServable && !isTouchOnly && (
+            <LspStatus
+              enabled={lspWanted}
+              onToggle={setLspEnabled}
+              status={lsp.status}
+              diagnostics={lsp.diagnostics}
+            />
+          )}
           <EditorLanguagePicker value={effectiveLanguage} onChange={handleLanguageChange} />
           {sqlPickerBar}
           <EditorToolbar
@@ -721,8 +835,8 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             onMdModeChange={setMdMode}
             csvMode={csvMode}
             onCsvModeChange={setCsvMode}
-            wordWrap={wordWrap}
-            onToggleWordWrap={toggleWordWrap}
+            wordWrap={wrapOn}
+            onToggleWordWrap={toggleWrap}
             inlineBlame={inlineBlame}
             onToggleInlineBlame={canBlame ? toggleInlineBlame : undefined}
             blameStale={blame.stale}
@@ -749,7 +863,7 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
       {/* Content area */}
       {isCsv && csvMode === "table" ? (
         <Suspense fallback={<div className="flex items-center justify-center h-full"><Loader2 className="size-5 animate-spin text-text-subtle" /></div>}>
-          <CsvPreview content={content ?? ""} onContentChange={handleChange} wordWrap={wordWrap} />
+          <CsvPreview content={content ?? ""} onContentChange={handleChange} wordWrap={wrapOn} />
         </Suspense>
       ) : isMarkdown && mdMode === "preview" ? (
         <MarkdownPreview content={content ?? ""} />
@@ -759,14 +873,19 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
             height="100%"
             key={effectiveLanguage}
             language={effectiveLanguage}
+            // Before, not on, mount: the model is created with its language
+            // id first, and a model created against an unregistered id is
+            // plaintext for good.
+            beforeMount={registerDotenvLanguage}
             value={content ?? ""}
             onChange={inlineContent != null ? undefined : handleChange}
             onMount={handleEditorMount}
             theme={monacoTheme}
             options={{
-              fontSize: 13,
-              fontFamily: "Menlo, Monaco, Consolas, monospace",
-              wordWrap: wordWrap ? "on" : "off",
+              fontSize: EDITOR_FONT_SIZE,
+              fontFamily: EDITOR_FONT_FAMILY,
+              fontLigatures: EDITOR_FONT_LIGATURES,
+              wordWrap: wrapOn ? "on" : "off",
               minimap: { enabled: false },
               scrollBeyondLastLine: false,
               automaticLayout: true,
@@ -774,6 +893,26 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
               folding: true,
               bracketPairColorization: { enabled: true },
               readOnly: inlineContent != null,
+
+              // VS Code's defaults for the things a language server drives.
+              // Monaco ships several of these off, which makes real
+              // intelligence look absent even once a server is answering.
+              quickSuggestions: { other: true, comments: false, strings: false },
+              suggestOnTriggerCharacters: true,
+              acceptSuggestionOnEnter: "on",
+              suggestSelection: "first",
+              parameterHints: { enabled: true },
+              inlayHints: { enabled: "on" },
+              // Standalone Monaco hardcodes its themes' `semanticHighlighting`
+              // to false and the default here follows the theme, so this is the
+              // only switch that turns server token colouring on at all.
+              "semanticHighlighting.enabled": true,
+              // Sticky scroll costs a row of vertical space, which is free on a
+              // desktop and expensive on a phone.
+              stickyScroll: { enabled: !isMobile },
+              // The peek and references widgets are how a cross-file result is
+              // read; the default height shows barely two lines.
+              peekWidgetDefaultFocus: "editor",
             }}
             loading={<Loader2 className="size-5 animate-spin text-text-subtle" />}
           />
@@ -791,7 +930,14 @@ export const CodeEditor = memo(function CodeEditor({ metadata, tabId }: CodeEdit
       )}
 
       {/* Mobile toolbar — bottom, like terminal */}
-      {isMobile && <EditorMobileToolbar editorRef={editorRef} readOnly={inlineContent != null} />}
+      {isMobile && (
+        <EditorMobileToolbar
+          editorRef={editorRef}
+          readOnly={inlineContent != null}
+          wrapOn={wrapOn}
+          onToggleWrap={toggleWrap}
+        />
+      )}
 
       {/* Save As dialog for untitled tabs */}
       {showSaveAs && (

package/src/web/components/editor/compare-picker.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useEffect, useRef } from "react";
-import { Columns2, FileCode, X } from "lucide-react";
+import { Columns2, FileCode, X } from "@/lib/icons";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { useTabStore } from "@/stores/tab-store";
 import { useFileStore } from "@/stores/file-store";