@hienlh/ppm 0.20.9 → 0.21.0

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";

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

@@ -4,9 +4,12 @@ import type * as MonacoType from "monaco-editor";
 import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
+import { useIsMobile } from "@/hooks/use-is-mobile";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
-import { Loader2 } from "lucide-react";
+import { Loader2 } from "@/lib/icons";
+import { DOTENV_LANGUAGE_ID, isDotenvFile, registerDotenvLanguage } from "@/lib/monaco-dotenv-language";
 
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
@@ -22,7 +25,7 @@ function getMonacoLanguage(filename: string): string {
     rb: "ruby", php: "php", swift: "swift",
     sql: "sql", xml: "xml", toml: "toml",
   };
-  return map[ext] ?? "plaintext";
+  return map[ext] ?? (isDotenvFile(filename) ? DOTENV_LANGUAGE_ID : "plaintext");
 }
 
 interface ConflictRegion {
@@ -102,7 +105,11 @@ export function ConflictEditor({ metadata }: ConflictEditorProps) {
   const widgetsRef = useRef<MonacoType.editor.IContentWidget[]>([]);
   const decorationsRef = useRef<MonacoType.editor.IEditorDecorationsCollection | null>(null);
 
-  const { wordWrap } = useSettingsStore(useShallow((s) => ({ wordWrap: s.wordWrap })));
+  // A phone keeps its own wrap answer, and defaults to wrapping.
+  const { wordWrap, mobileWordWrap } = useSettingsStore(
+    useShallow((s) => ({ wordWrap: s.wordWrap, mobileWordWrap: s.mobileWordWrap })),
+  );
+  const wrapOn = useIsMobile() ? mobileWordWrap : wordWrap;
   const monacoTheme = useMonacoTheme();
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -353,13 +360,15 @@ export function ConflictEditor({ metadata }: ConflictEditorProps) {
           <Editor
             height={containerHeight}
             language={language}
+            beforeMount={registerDotenvLanguage}
             value={content}
             onMount={handleMount}
             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",
               glyphMargin: true,
               readOnly: false,
               automaticLayout: true,

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

@@ -9,7 +9,7 @@ import {
 } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { parseCsv, serializeCsv } from "@/lib/csv-parser";
-import { ArrowUp, ArrowDown } from "lucide-react";
+import { ArrowUp, ArrowDown } from "@/lib/icons";
 
 interface CsvPreviewProps {
   content: string;

package/src/web/components/editor/diff-viewer.tsx

@@ -4,9 +4,12 @@ import { api, projectUrl } from "@/lib/api-client";
 import { useShallow } from "zustand/react/shallow";
 import { useSettingsStore } from "@/stores/settings-store";
 import { useMonacoTheme } from "@/lib/use-monaco-theme";
+import { EDITOR_FONT_FAMILY, EDITOR_FONT_LIGATURES, EDITOR_FONT_SIZE } from "@/lib/editor-font";
+import { useGitRepo } from "@/hooks/use-git-repo";
 import { onHostResize } from "@/components/floating-window/pip/pip-resize-signal";
-import { Loader2, FileCode, WrapText, UserRound } from "lucide-react";
+import { Loader2, FileCode, WrapText, UserRound } from "@/lib/icons";
 import { useInlineBlame } from "@/hooks/use-inline-blame";
+import { DOTENV_LANGUAGE_ID, isDotenvFile, registerDotenvLanguage } from "@/lib/monaco-dotenv-language";
 
 function getMonacoLanguage(filename: string): string {
   const ext = filename.split(".").pop()?.toLowerCase() ?? "";
@@ -19,7 +22,7 @@ function getMonacoLanguage(filename: string): string {
     yaml: "yaml", yml: "yaml",
     sh: "shell", bash: "shell",
   };
-  return map[ext] ?? "plaintext";
+  return map[ext] ?? (isDotenvFile(filename) ? DOTENV_LANGUAGE_ID : "plaintext");
 }
 
 interface DiffViewerProps {
@@ -43,8 +46,14 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const [fullFileDiff, setFullFileDiff] = useState<{ original: string; modified: string } | null>(null);
   const [loading, setLoading] = useState(!isInline);
   const [error, setError] = useState<string | null>(null);
-  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 monacoTheme = useMonacoTheme();
+  const gitRepo = useGitRepo(projectName);
 
   // Measure container height — Monaco needs explicit pixel height on mobile
   const containerRef = useRef<HTMLDivElement>(null);
@@ -108,12 +117,17 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
     // Monaco DiffEditor computes the diff itself, giving full-file view instead
     // of just the changed hunks + 3 lines of context that `git diff` returns.
     if (filePath) {
-      const params = new URLSearchParams({ file: filePath });
+      // git is being run inside the repository, which for a container project
+      // is a subfolder — so the path it is asked about has to be relative to
+      // that, and a file outside it has no diff to show.
+      const inRepo = gitRepo.repoPath(filePath);
+      if (inRepo == null) { setLoading(false); return; }
+      const params = new URLSearchParams({ file: inRepo });
       if (ref1) params.set("ref", ref1);
       if (ref2) params.set("ref2", ref2);
       api
         .get<{ original: string; modified: string }>(
-          `${projectUrl(projectName)}/git/file-full-diff?${params}`,
+          gitRepo.gitUrl(`/file-full-diff?${params}`),
         )
         .then((data) => { setFullFileDiff(data); setLoading(false); })
         .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
@@ -125,16 +139,16 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
       const params = new URLSearchParams();
       if (ref1) params.set("ref1", ref1);
       if (ref2) params.set("ref2", ref2);
-      url = `${projectUrl(projectName)}/git/diff?${params}`;
+      url = gitRepo.gitUrl(`/diff?${params}`);
     } else {
-      url = `${projectUrl(projectName)}/git/diff`;
+      url = gitRepo.gitUrl("/diff");
     }
 
     api
       .get<{ diff: string }>(url)
       .then((data) => { setDiffText(data.diff); setLoading(false); })
       .catch((err) => { setError(err instanceof Error ? err.message : "Failed to load diff"); setLoading(false); });
-  }, [filePath, projectName, ref1, ref2, file1, file2, isInline]);
+  }, [filePath, projectName, ref1, ref2, file1, file2, isInline, gitRepo]);
 
   const { original, modified } = useMemo(() => {
     if (isInline) return { original: inlineOriginal ?? "", modified: inlineModified ?? "" };
@@ -152,6 +166,13 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   const inlineBlame = useSettingsStore((s) => s.inlineBlame);
   const toggleInlineBlame = useSettingsStore((s) => s.toggleInlineBlame);
 
+  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
+  // A phone wraps by default and keeps its own answer: the desktop pref is
+  // shared across devices, and a 27-inch monitor's "no wrap" is not a 6-inch
+  // screen's.
+  const wrapOn = isMobile ? mobileWordWrap : wordWrap;
+  const toggleWrap = isMobile ? toggleMobileWordWrap : toggleWordWrap;
+
   /**
    * Blame is only honest on the full-file path.
    *
@@ -162,7 +183,9 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
    * its line 40 is not the file's line 40 — annotating it would confidently
    * name the wrong commit.
    */
-  const canBlame = Boolean(projectName && filePath && fullFileDiff);
+  // Not on a phone: an annotation on every focused line is a `git blame` per
+  // file and a `git show` per hover, on the device least able to pay for either.
+  const canBlame = Boolean(projectName && filePath && fullFileDiff) && !isMobile;
 
   // The left pane is the file at `ref1` (the route defaults to HEAD); the right
   // is `ref2`, or the working tree when there is none.
@@ -186,7 +209,6 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   });
 
   // Force inline on mobile (<768px) since side-by-side is too narrow
-  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
   const renderSideBySide = !isMobile;
 
   // Sync word wrap on both sub-editors.
@@ -198,11 +220,11 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   useEffect(() => {
     const editor = diffEditorRef.current;
     if (!editor) return;
-    const val: "on" | "off" = isMobile ? "on" : wordWrap ? "on" : "off";
+    const val: "on" | "off" = wrapOn ? "on" : "off";
     editor.updateOptions({ diffWordWrap: val });
     editor.getOriginalEditor().updateOptions({ wordWrapOverride2: val } as any);
     editor.getModifiedEditor().updateOptions({ wordWrapOverride2: val } as any);
-  }, [wordWrap, isMobile, editorReady]);
+  }, [wrapOn, editorReady]);
 
   if (!projectName && !isInline) {
     return (
@@ -241,34 +263,33 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
   return (
     <div className="flex flex-col h-full">
       {/* Toolbar */}
-      {(!isMobile || canBlame) && (
-        <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
-          {canBlame && (
-            <button type="button" onClick={toggleInlineBlame}
-              title="Inline blame (Alt+B) — who last touched the cursor's line. Click a pane to annotate that side."
-              className={`flex items-center justify-center rounded hover:bg-muted active:scale-95 transition-colors ${
-                isMobile ? "size-11" : "p-1"
-              } ${inlineBlame ? "bg-muted text-foreground" : ""}`}
-            >
-              <UserRound className="size-3.5" />
-            </button>
-          )}
-          {/* Word wrap is forced on below `md`, so its toggle would be a lie. */}
-          {!isMobile && (
-            <button type="button" onClick={toggleWordWrap} title="Toggle word wrap"
-              className={`p-1 rounded hover:bg-muted transition-colors ${wordWrap ? "bg-muted text-foreground" : ""}`}
-            >
-              <WrapText className="size-3.5" />
-            </button>
-          )}
-        </div>
-      )}
+      <div className="flex items-center justify-end gap-0.5 px-2 py-0.5 border-b border-border shrink-0">
+        {canBlame && (
+          <button type="button" onClick={toggleInlineBlame}
+            title="Inline blame (Alt+B) — who last touched the cursor's line. Click a pane to annotate that side."
+            className={`flex items-center justify-center rounded hover:bg-muted active:scale-95 transition-colors p-1 ${
+              inlineBlame ? "bg-muted text-foreground" : ""
+            }`}
+          >
+            <UserRound className="size-3.5" />
+          </button>
+        )}
+        <button type="button" onClick={toggleWrap}
+          title={wrapOn ? "Wrapping long lines — tap to scroll sideways instead" : "Toggle word wrap"}
+          className={`flex items-center justify-center rounded hover:bg-muted active:scale-95 transition-colors ${
+            isMobile ? "size-11" : "p-1"
+          } ${wrapOn ? "bg-muted text-foreground" : ""}`}
+        >
+          <WrapText className="size-3.5" />
+        </button>
+      </div>
       {/* Monaco DiffEditor */}
       <div ref={containerRef} className="flex-1 overflow-hidden">
         {containerHeight && containerHeight > 0 ? (
           <DiffEditor
             height={containerHeight}
             language={language}
+            beforeMount={registerDotenvLanguage}
             original={original}
             modified={modified}
             theme={monacoTheme}
@@ -288,9 +309,10 @@ export function DiffViewer({ metadata }: DiffViewerProps) {
               );
             }}
             options={{
-              fontSize: isMobile ? 11 : 13,
-              fontFamily: "Menlo, Monaco, Consolas, monospace",
-              diffWordWrap: isMobile ? "on" : wordWrap ? "on" : "off",
+              fontSize: isMobile ? 11 : EDITOR_FONT_SIZE,
+              fontFamily: EDITOR_FONT_FAMILY,
+              fontLigatures: EDITOR_FONT_LIGATURES,
+              diffWordWrap: wrapOn ? "on" : "off",
               renderSideBySide,
               useInlineViewWhenSpaceIsLimited: false,
               readOnly: true,