ompchamber 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ompchamber",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Developer web console and diagnostic chamber for AI Oh-My-Pi — Elysia + Preact on Bun.",
   "license": "UNLICENSED",
   "author": "Wijanarko Putra Rajeb <wijanarko.rajeb@gmail.com>",

package/src/client/components/workspace/diff-panel/SplitView.tsx

@@ -44,7 +44,10 @@ export function SplitView({ rows, language }: SplitViewProps) {
 
   return (
     <div className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface">
-      <div className="w-max min-w-full min-w-[700px]">
+      {/* The room under the last row belongs to the content, not the scroller:
+          a scroll container's own bottom padding is not part of its scrollable
+          overflow, so the padding has to sit inside it to have any effect. */}
+      <div className="w-max min-w-full min-w-[700px] pb-4">
         <div className="grid grid-cols-2 sticky top-0 z-10 bg-canvas border-b border-ink/10 text-[11px] text-ink/70 font-sans select-none shadow-xs">
           <div className="px-3 py-1 font-medium border-r border-ink/10 flex items-center justify-between">
             <span>Original (HEAD / Base)</span>

package/src/client/components/workspace/diff-panel/UnifiedView.tsx

@@ -38,80 +38,85 @@ export function UnifiedView({ lines, language }: UnifiedViewProps) {
 
   return (
     <div className="w-full h-full overflow-auto font-mono text-xs select-text bg-paper text-ink code-surface">
-      <table className="w-max min-w-full border-collapse">
-        <tbody>
-          {lines.map((line, idx) => {
-            if (line.type === 'meta') {
-              return (
-                <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
-                  <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                  <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
-                  <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
-                </tr>
-              );
-            }
+      {/* The room under the last row belongs to the content, not the scroller:
+          a scroll container's own bottom padding is not part of its scrollable
+          overflow, so the padding has to sit inside it to have any effect. */}
+      <div className="pb-4">
+        <table className="w-max min-w-full border-collapse">
+          <tbody>
+            {lines.map((line, idx) => {
+              if (line.type === 'meta') {
+                return (
+                  <tr key={idx} className="bg-canvas border-y border-ink/10 text-meta select-none">
+                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
+                    <td className="w-12 text-center py-1 px-2 text-[10px] opacity-60 border-r border-ink/10 font-mono">...</td>
+                    <td className="py-1 px-3 text-[11px] font-semibold text-meta font-mono tracking-tight">{line.text}</td>
+                  </tr>
+                );
+              }
 
-            const isAdd = line.type === 'add';
-            const isDel = line.type === 'del';
+              const isAdd = line.type === 'add';
+              const isDel = line.type === 'del';
 
-            return (
-              <tr
-                key={idx}
-                className={`transition-colors group ${
-                  isAdd
-                    ? 'bg-success/10 hover:bg-success/15'
-                    : isDel
-                    ? 'bg-error/10 hover:bg-error/15'
-                    : 'hover:bg-ink/[0.03]'
-                }`}
-              >
-                {/* Old line number */}
-                <td
-                  className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
-                    isDel
-                      ? 'bg-error/15 text-error font-semibold'
-                      : isAdd
-                      ? 'bg-success/15 text-success/70'
-                      : 'bg-canvas/50 text-ink/40'
-                  }`}
-                >
-                  {line.oldLineNumber || ''}
-                </td>
-
-                {/* New line number */}
-                <td
-                  className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+              return (
+                <tr
+                  key={idx}
+                  className={`transition-colors group ${
                     isAdd
-                      ? 'bg-success/15 text-success font-semibold'
+                      ? 'bg-success/10 hover:bg-success/15'
                       : isDel
-                      ? 'bg-error/15 text-error/70'
-                      : 'bg-canvas/50 text-ink/40'
+                      ? 'bg-error/10 hover:bg-error/15'
+                      : 'hover:bg-ink/[0.03]'
                   }`}
                 >
-                  {line.newLineNumber || ''}
-                </td>
+                  {/* Old line number */}
+                  <td
+                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      isDel
+                        ? 'bg-error/15 text-error font-semibold'
+                        : isAdd
+                        ? 'bg-success/15 text-success/70'
+                        : 'bg-canvas/50 text-ink/40'
+                    }`}
+                  >
+                    {line.oldLineNumber || ''}
+                  </td>
 
-                {/* Change prefix & code text */}
-                <td className="py-0.5 px-3 whitespace-pre text-ink pr-6">
-                  <span
-                    className={`inline-block w-4 text-center select-none font-bold ${
-                      isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
+                  {/* New line number */}
+                  <td
+                    className={`w-12 py-0.5 px-2 text-right text-[10px] select-none border-r border-ink/10 font-mono ${
+                      isAdd
+                        ? 'bg-success/15 text-success font-semibold'
+                        : isDel
+                        ? 'bg-error/15 text-error/70'
+                        : 'bg-canvas/50 text-ink/40'
                     }`}
                   >
-                    {isAdd ? '+' : isDel ? '-' : ' '}
-                  </span>
-                  <span
-                    className="shiki"
-                    dangerouslySetInnerHTML={{
-                      __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
-                    }}
-                  />
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                    {line.newLineNumber || ''}
+                  </td>
+
+                  {/* Change prefix & code text */}
+                  <td className="py-0.5 px-3 whitespace-pre text-ink pr-6">
+                    <span
+                      className={`inline-block w-4 text-center select-none font-bold ${
+                        isAdd ? 'text-success' : isDel ? 'text-error' : 'opacity-0'
+                      }`}
+                    >
+                      {isAdd ? '+' : isDel ? '-' : ' '}
+                    </span>
+                    <span
+                      className="shiki"
+                      dangerouslySetInnerHTML={{
+                        __html: line.text ? htmlByIndex[idx] || '&nbsp;' : '&nbsp;',
+                      }}
+                    />
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

package/src/client/components/workspace/diff-panel/index.tsx

@@ -135,7 +135,14 @@ export function DiffPanel({
   };
 
   return (
-    <div className={`flex flex-col h-full bg-paper select-text relative font-sans ${className}`}>
+    // The panel fills, it does not size itself: the caller owns the height
+    // (`flex-1` in the editor's column, `h-full` in the mobile overlay). A
+    // hardcoded `h-full` here resolves against the whole editor column rather
+    // than the space left under the tabs, so the panel began below the tabs
+    // *and* stood the full column tall — its bottom, the toolbar's height,
+    // hung past the panel edge and was clipped for good, since the scroll
+    // range ends below the visible area.
+    <div className={`flex flex-col min-h-0 bg-paper select-text relative font-sans ${className}`}>
       {/* Top Diff Toolbar */}
       <DiffToolbar
         filePath={filePath}

package/src/client/components/workspace/editor/index.tsx

@@ -193,6 +193,13 @@ export function Editor({
                       fontSize: zoomLevel,
                       lineHeight: 1.5,
                       minHeight: '100%',
+                      // Breathing room under the last line. It has to live on the
+                      // surface, not on the scroll container: a scroll container's
+                      // own bottom padding is not part of its scrollable overflow,
+                      // so `pb-*` on the scroller left the last line flush with the
+                      // panel's edge (measured: padding-bottom 32px did not change
+                      // scrollHeight by a single pixel).
+                      paddingBottom: 16,
                     }}
                   />
                 )}

package/src/client/hooks/editor/save-file.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The write half of the file-editing contract: POST one buffer to
+ * `/api/fs/action` and report whether the server took it.
+ *
+ * Kept out of `useFileEditor` because the multipart shape, the scope fields and
+ * the failure rule are one self-contained concern, and because the hook carries
+ * the read, cache and history concerns already.
+ */
+
+import type { LineEnding } from '@/shared/lib/code/line-endings';
+
+interface SavableFile {
+  path?: string;
+  root?: string;
+  repo?: string;
+}
+
+/**
+ * Writes `lfText` to `file.path` in the file's own `eol`. Returns false on any
+ * refusal — a non-2xx response, an `error` body, or a dropped connection —
+ * because the caller's only decision is whether to mark the buffer clean.
+ *
+ * The ending travels as its own field and the server rebuilds the bytes: a
+ * multipart body normalizes bare LF to CRLF, so the payload cannot carry the
+ * distinction itself.
+ */
+export async function saveEditorFile(file: SavableFile, lfText: string, eol: LineEnding): Promise<boolean> {
+  if (!file.path) return false;
+  const formData = new FormData();
+  formData.append('actionType', 'save');
+  formData.append('path', file.path);
+  formData.append('content', lfText);
+  formData.append('eol', eol);
+  if (file.root) formData.append('root', file.root);
+  if (file.repo && file.repo !== '.') formData.append('repo', file.repo);
+  try {
+    const res = await fetch('/api/fs/action', { method: 'POST', body: formData });
+    const data = await res.json().catch(() => null);
+    return Boolean(res.ok && data?.success);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Keeps only `keep`'s keys, returning the same object when nothing was
+ * dropped so a render whose tab set is unchanged does not re-key its children.
+ */
+export function retainKeys<T>(record: Record<string, T>, keep: Set<string>): Record<string, T> {
+  const keys = Object.keys(record);
+  if (keys.every((key) => keep.has(key))) return record;
+  const next: Record<string, T> = {};
+  for (const key of keys) {
+    if (keep.has(key)) next[key] = record[key];
+  }
+  return next;
+}

package/src/client/hooks/editor/use-file-editor.test.ts

@@ -19,7 +19,7 @@
  * bind their environment at evaluation time.
  */
 
-import { afterAll, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'bun:test';
 import { Window } from 'happy-dom';
 import type { h as PreactH, render as PreactRender } from 'preact';
 import type { act as PreactAct } from 'preact/test-utils';
@@ -42,17 +42,21 @@ interface FsState {
   reads: number;
   writes: number;
   body: string;
+  /** The `eol` field of the last write — the ending the server is asked to use. */
+  sentEol: string | null;
 }
 
-/** Serves `state.body` for reads and counts writes, without touching the network. */
+/** Serves `state.body` for reads and records writes, without touching the network. */
 function stubFetch(state: FsState) {
   globalThis.fetch = (async (input: string | URL | Request, init?: RequestInit) => {
     if (String(input).startsWith('/api/fs/read')) {
       state.reads += 1;
       return { ok: true, json: async () => ({ content: state.body }) };
     }
+    const form = init?.body as FormData;
     state.writes += 1;
-    state.body = String((init?.body as FormData).get('content'));
+    state.body = String(form.get('content'));
+    state.sentEol = form.get('eol') === null ? null : String(form.get('eol'));
     return { ok: true, json: async () => ({ success: true }) };
   }) as unknown as typeof fetch;
 }
@@ -123,9 +127,18 @@ beforeEach(() => {
   document.body.appendChild(container);
 });
 
+// Unmount while the DOM globals still exist, so the hook's effect cleanups run
+// here. A landed save arms a timer that returns the status to `idle`; an effect
+// timer that outlived this file would fire during the next file's test and, with
+// `window` already removed by `afterAll`, break its render.
+afterEach(() => {
+  render(null, container);
+  container.remove();
+});
+
 describe('useFileEditor revalidation', () => {
   test('reset re-reads from disk without blanking the open file', async () => {
-    const state: FsState = { reads: 0, writes: 0, body: DISK };
+    const state: FsState = { reads: 0, writes: 0, sentEol: null, body: DISK };
     stubFetch(state);
     await mountEditor();
     expect(mounted?.content).toBe(DISK);
@@ -142,7 +155,7 @@ describe('useFileEditor revalidation', () => {
   });
 
   test('a read that lands mid-typing does not replace the buffer', async () => {
-    const state: FsState = { reads: 0, writes: 0, body: DISK };
+    const state: FsState = { reads: 0, writes: 0, sentEol: null, body: DISK };
     stubFetch(state);
     await mountEditor();
 
@@ -155,4 +168,47 @@ describe('useFileEditor revalidation', () => {
     expect(state.reads).toBe(2);
     expect(mounted?.content).toBe('edited by hand');
   });
+
+  // A textarea's API value drops every CR, so a CRLF file reaches the buffer as
+  // LF — and multipart/form-data turns a bare LF back into CRLF, so the payload
+  // cannot carry the ending. The file's own ending therefore travels as its own
+  // field, and losing it rewrote every line of the file on a one-character edit.
+  test('a CRLF file is saved as CRLF after an edit', async () => {
+    const state: FsState = { reads: 0, writes: 0, sentEol: null, body: 'const a = 1;\r\nconst b = 2;\r\n' };
+    stubFetch(state);
+    await mountEditor();
+
+    expect(mounted?.content).toBe('const a = 1;\nconst b = 2;\n');
+
+    await act(async () => {
+      mounted?.onChange('const a = 1;\nconst c = 3;\n');
+    });
+    await settleEditor();
+    await act(async () => {
+      mounted?.saveNow();
+    });
+    await settleEditor();
+
+    expect(state.writes).toBe(1);
+    expect(state.body).toBe('const a = 1;\nconst c = 3;\n');
+    expect(state.sentEol).toBe('crlf');
+  });
+
+  test('an LF file is saved as LF', async () => {
+    const state: FsState = { reads: 0, writes: 0, sentEol: null, body: DISK };
+    stubFetch(state);
+    await mountEditor();
+
+    await act(async () => {
+      mounted?.onChange('const a = 1;\n');
+    });
+    await settleEditor();
+    await act(async () => {
+      mounted?.saveNow();
+    });
+    await settleEditor();
+
+    expect(state.body).toBe('const a = 1;\n');
+    expect(state.sentEol).toBe('lf');
+  });
 });

package/src/client/hooks/editor/use-file-editor.ts

@@ -2,6 +2,8 @@ import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
 import { getImageMimeType } from '@/shared/lib/fs/file-kind';
 import { buildFsRawUrl } from '@/shared/lib/fs/paths';
+import { detectLineEnding, toDiskText, toLf, type LineEnding } from '@/shared/lib/code/line-endings';
+import { retainKeys, saveEditorFile } from '@/client/hooks/editor/save-file';
 import { useFileTransfer } from '@/client/hooks/editor/use-file-transfer';
 
 export type FileEditorSaveStatus = 'idle' | 'saving' | 'saved' | 'error';
@@ -82,6 +84,12 @@ export function useFileEditor(
 
   const [contents, setContents] = useState<Record<string, string>>({});
   const [baselines, setBaselines] = useState<Record<string, string>>({});
+  /**
+   * The line ending each cached file arrived with. The buffer itself can only
+   * hold LF (a textarea strips CR), so the style has to live beside it or a
+   * CRLF file would be rewritten as LF by a one-character edit.
+   */
+  const [lineEndings, setLineEndings] = useState<Record<string, LineEnding>>({});
   const [isLoading, setIsLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [saveStatus, setSaveStatus] = useState<FileEditorSaveStatus>('idle');
@@ -89,7 +97,9 @@ export function useFileEditor(
   const [revision, setRevision] = useState(0);
 
   const key = target ? targetKey(target) : '';
-  const content = target ? (contents[key] ?? target.content ?? '') : '';
+  // An inline `content` (attachment chip) can carry CRLF too, and the buffer it
+  // feeds is LF-only — normalizing here keeps `isDirty` comparing like with like.
+  const content = target ? (contents[key] ?? (target.content !== undefined ? toLf(target.content) : '')) : '';
   const isDirty = content !== (baselines[key] ?? content);
 
   // Extension-keyed, matching the server's own classification: an image tab
@@ -113,33 +123,34 @@ export function useFileEditor(
   contentsRef.current = contents;
   const baselinesRef = useRef(baselines);
   baselinesRef.current = baselines;
+  // `persist` is a stable callback, so the ending it writes back is read from a
+  // live mirror rather than captured in its closure.
+  const lineEndingsRef = useRef(lineEndings);
+  lineEndingsRef.current = lineEndings;
 
   const remember = useCallback((fileKey: string, text: string) => {
-    setContents((prev) => ({ ...prev, [fileKey]: text }));
-    setBaselines((prev) => ({ ...prev, [fileKey]: text }));
+    // The buffer holds LF only; the style the bytes arrived with is kept beside
+    // it so the write can put the file back the way it was found.
+    const ending = detectLineEnding(text);
+    const lf = toLf(text);
+    setContents((prev) => ({ ...prev, [fileKey]: lf }));
+    setBaselines((prev) => ({ ...prev, [fileKey]: lf }));
+    setLineEndings((prev) => ({ ...prev, [fileKey]: ending }));
   }, []);
 
   const persist = useCallback(
     async (file: FileEditorTarget, text: string) => {
       if (!file.path) return;
       setSaveStatus('saving');
-      const formData = new FormData();
-      formData.append('actionType', 'save');
-      formData.append('path', file.path);
-      formData.append('content', text);
-      if (file.root) formData.append('root', file.root);
-      if (file.repo && file.repo !== '.') formData.append('repo', file.repo);
-      try {
-        const res = await fetch('/api/fs/action', { method: 'POST', body: formData });
-        const data = await res.json().catch(() => null);
-        if (res.ok && data?.success) {
-          setSaveStatus('saved');
-          setBaselines((prev) => ({ ...prev, [targetKey(file)]: text }));
-          onFileSaved?.();
-        } else {
-          setSaveStatus(reportSaveError ? 'error' : 'idle');
-        }
-      } catch {
+      const fileKey = targetKey(file);
+      // The buffer is LF; the file's own ending is applied by the server, so an
+      // untouched CRLF file stays byte-identical and an LF file stays LF.
+      const written = await saveEditorFile(file, text, lineEndingsRef.current[fileKey] ?? 'lf');
+      if (written) {
+        setSaveStatus('saved');
+        setBaselines((prev) => ({ ...prev, [fileKey]: text }));
+        onFileSaved?.();
+      } else {
         setSaveStatus(reportSaveError ? 'error' : 'idle');
       }
     },
@@ -269,6 +280,11 @@ export function useFileEditor(
   const { copied, copy, download } = useFileTransfer({
     target,
     content,
+    // A download is the file leaving the app, so it carries the file's own line
+    // endings — the LF buffer is an artifact of the textarea, not of the file.
+    // Copy stays the buffer: it is a text selection, and CRLF in a pasted
+    // snippet is noise every destination editor would normalize anyway.
+    downloadContent: target ? toDiskText(content, lineEndings[key] ?? 'lf') : content,
     imageUrl,
     downloadMimeType,
   });
@@ -287,15 +303,8 @@ export function useFileEditor(
     for (const loaded of Array.from(loadedRef.current)) {
       if (!keep.has(loaded)) loadedRef.current.delete(loaded);
     }
-    setContents((prev) => {
-      const keys = Object.keys(prev);
-      if (keys.every((k) => keep.has(k))) return prev;
-      const next: Record<string, string> = {};
-      for (const k of keys) {
-        if (keep.has(k)) next[k] = prev[k];
-      }
-      return next;
-    });
+    setContents((prev) => retainKeys(prev, keep));
+    setLineEndings((prev) => retainKeys(prev, keep));
   }, []);
 
   useEffect(() => {

package/src/client/hooks/editor/use-file-transfer.ts

@@ -25,6 +25,8 @@ interface UseFileTransferOptions {
   target: FileTransferTarget | null;
   /** Current text buffer for `target`; ignored for images. */
   content: string;
+  /** Disk form of `content` (the file's own line endings), used by download. */
+  downloadContent: string;
   /** Raw-byte URL of the active image, else null. */
   imageUrl: string | null;
   /** MIME type used for the text Blob. */
@@ -41,6 +43,7 @@ export interface UseFileTransferResult {
 export function useFileTransfer({
   target,
   content,
+  downloadContent,
   imageUrl,
   downloadMimeType,
 }: UseFileTransferOptions): UseFileTransferResult {
@@ -71,8 +74,8 @@ export function useFileTransfer({
       void downloadUrl(imageUrl, target.name).catch(() => {});
       return;
     }
-    saveBlob(new Blob([content], { type: downloadMimeType }), target.name);
-  }, [target, content, downloadMimeType, imageUrl]);
+    saveBlob(new Blob([downloadContent], { type: downloadMimeType }), target.name);
+  }, [target, downloadContent, downloadMimeType, imageUrl]);
 
   return { copied, copy, download };
 }

package/src/server/routes/fs/action.test.ts

@@ -0,0 +1,64 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * The save branch's byte contract.
+ *
+ * `multipart/form-data` normalizes every bare LF in a field value to CRLF in
+ * transit — the HTML serializer does it on the way out and Bun's parser agrees
+ * on the way in — so `content` reaches this route CRLF-normalized no matter what
+ * the editor buffer held. The file's own ending therefore arrives as its own
+ * `eol` field, and the bytes written to disk are built from it. Without that
+ * step every save rewrote the whole file's line endings: an LF file came back
+ * CRLF, which `git diff` reports as every line changed.
+ */
+
+import { afterEach, describe, expect, test } from 'bun:test';
+import fs from 'fs';
+import path from 'path';
+import { action } from '@/server/routes/fs/action';
+
+/** Probe files live in the repo root — the one directory the root allow-list always accepts. */
+const PROBE = path.join(process.cwd(), 'tmp-eol-probe.txt');
+
+afterEach(() => {
+  fs.rmSync(PROBE, { force: true });
+});
+
+async function save(content: string, eol?: string) {
+  const form = new FormData();
+  form.append('actionType', 'save');
+  form.append('root', process.cwd());
+  form.append('path', 'tmp-eol-probe.txt');
+  form.append('content', content);
+  if (eol) form.append('eol', eol);
+  const res = await action({ request: new Request('http://localhost/api/fs/action', { method: 'POST', body: form }) } as never);
+  expect(res.status).toBe(200);
+  return new Uint8Array(await Bun.file(PROBE).arrayBuffer());
+}
+
+describe('fs save line endings', () => {
+  test('an lf request writes lf, whatever multipart did in transit', async () => {
+    const bytes = await save('a\nb\n', 'lf');
+    expect([...bytes]).toEqual([0x61, 0x0a, 0x62, 0x0a]);
+  });
+
+  test('a crlf request writes crlf', async () => {
+    const bytes = await save('a\nb\n', 'crlf');
+    expect([...bytes]).toEqual([0x61, 0x0d, 0x0a, 0x62, 0x0d, 0x0a]);
+  });
+
+  test('a payload that already carries crlf is not doubled', async () => {
+    const bytes = await save('a\r\nb\r\n', 'crlf');
+    expect([...bytes]).toEqual([0x61, 0x0d, 0x0a, 0x62, 0x0d, 0x0a]);
+  });
+
+  // No `eol` means the route has no instruction, so the payload is written as
+  // multipart delivered it — which is CRLF, since the transport normalizes.
+  test('a payload without an eol field is written as delivered', async () => {
+    const bytes = await save('a\nb\n');
+    expect([...bytes]).toEqual([0x61, 0x0d, 0x0a, 0x62, 0x0d, 0x0a]);
+  });
+});

package/src/server/routes/fs/action.ts

@@ -5,6 +5,7 @@ import path from 'path';
 import { isMockMode } from '@/server/mock.server';
 import { getDefaultFsRoot, resolveRoot, resolveWithinRoot } from '@/server/lib/fs/root';
 import { runShell } from '@/server/lib/fs/shell';
+import { toDiskText } from '@/shared/lib/code/line-endings';
 export async function action({ request }: ActionFunctionArgs) {
   const formData = await request.formData();
   const actionType = formData.get('actionType') as string;
@@ -24,7 +25,15 @@ export async function action({ request }: ActionFunctionArgs) {
 
   try {
     if (actionType === 'save') {
-      const content = (formData.get('content') as string) ?? '';
+      const raw = (formData.get('content') as string) ?? '';
+      const eol = formData.get('eol');
+      // The bytes are built here rather than written verbatim: `multipart/
+      // form-data` normalizes every bare LF in a field value to CRLF in transit
+      // (the HTML serializer does it on the way out, Bun's parser agrees on the
+      // way in — same result either way), so an LF file would land on disk as
+      // CRLF and show up as a full-file diff. `eol` is the ending the client
+      // read the file with; without it the payload is written untouched.
+      const content = eol === 'crlf' || eol === 'lf' ? toDiskText(raw, eol) : raw;
       await fs.promises.mkdir(path.dirname(fullPath), { recursive: true });
       await Bun.write(fullPath, content);
       return json({ success: true });

package/src/shared/lib/code/line-endings.test.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+import { detectLineEnding, toDiskText, toLf } from '@/shared/lib/code/line-endings';
+
+describe('line endings', () => {
+  test('the first terminator decides the style', () => {
+    expect(detectLineEnding('a\r\nb\n')).toBe('crlf');
+    expect(detectLineEnding('a\nb\r\n')).toBe('lf');
+  });
+
+  test('a file with no terminator, or one using lone CR, reads as lf', () => {
+    expect(detectLineEnding('single line')).toBe('lf');
+    expect(detectLineEnding('\rleading')).toBe('lf');
+    expect(detectLineEnding('a\rb\r')).toBe('lf');
+  });
+
+  test('the buffer form carries no CR', () => {
+    expect(toLf('a\r\nb\r\n')).toBe('a\nb\n');
+    expect(toLf('a\rb\r')).toBe('a\nb\n');
+    expect(toLf('a\nb\n')).toBe('a\nb\n');
+  });
+
+  test('writing back restores the detected ending', () => {
+    expect(toDiskText('a\nb\n', 'crlf')).toBe('a\r\nb\r\n');
+    expect(toDiskText('a\nb\n', 'lf')).toBe('a\nb\n');
+    // A mixed buffer still normalizes before it is re-encoded.
+    expect(toDiskText('a\r\nb\n', 'crlf')).toBe('a\r\nb\r\n');
+  });
+
+  test('an unedited CRLF round trip is byte-identical', () => {
+    const disk = 'const a = 1;\r\nconst b = 2;\r\n';
+    expect(toDiskText(toLf(disk), detectLineEnding(disk))).toBe(disk);
+  });
+});