feat(WebServer): add text editor for device files

- Double-click text files in device file browser to open in Ace Editor tab
- Support common text formats (.txt, .json, .c, .py, .yaml, .xml, etc.)
- Right-click 'Open as Text' to force-open any file as text
- Large file (>100KB) two-step confirm: download / open anyway / cancel
- Ctrl+S save back to device (full overwrite via existing upload flow)
- VS Code-style dirty indicator (dot on tab, close button morphs)
- Confirm discard on closing dirty tab
- Toolbar with save-to-device and download-to-PC buttons
- Image preview unchanged (priority: dir > image > text)
- i18n: en, zh-CN, zh-TW translations
- Tests: 1709 frontend tests passed, 80.10% coverage
- No backend changes

Author: FASTSHIFT

Tools/WebServer/docs/text-editor-design.md

@@ -809,6 +809,69 @@ body.resizing-panel .sash {
   background: var(--vscode-list-hover);
 }
 
+/* Tab dirty indicator (unsaved changes) */
+.tab-dirty-indicator {
+  color: var(--vscode-foreground);
+  opacity: 0.8;
+  font-size: 10px;
+  margin-right: 2px;
+  flex-shrink: 0;
+}
+
+/* VS Code style: dirty tab close button shows dot, hover restores × */
+.tab .tab-close.dirty .codicon-close::before {
+  content: "\eab8";
+}
+
+.tab .tab-close.dirty {
+  opacity: 0.8;
+}
+
+.tab:hover .tab-close.dirty .codicon-close::before {
+  content: "\ea76";
+}
+
+/* Text file editor toolbar */
+.textfile-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 12px;
+  background: var(--vscode-titlebar-bg);
+  border-bottom: 1px solid var(--vscode-panel-border);
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.textfile-path {
+  opacity: 0.7;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: "Consolas", "Courier New", monospace;
+}
+
+.textfile-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.textfile-actions button {
+  background: none;
+  border: none;
+  color: var(--vscode-foreground);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 3px;
+  opacity: 0.7;
+}
+
+.textfile-actions button:hover {
+  opacity: 1;
+  background: var(--vscode-list-hover);
+}
+
 .editor-toolbar {
   display: flex;
   align-items: flex-end;

Tools/WebServer/static/css/workbench.css

@@ -48,3 +48,18 @@ document.addEventListener('DOMContentLoaded', () => {
     watchRestoreFromStorage();
   }
 });
+
+/* Global Ctrl+S handler for text file tabs */
+document.addEventListener('keydown', (e) => {
+  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+    const state = window.FPBState;
+    if (!state) return;
+    const activeTab = state.editorTabs.find(
+      (tab) => tab.id === state.activeEditorTab,
+    );
+    if (activeTab && activeTab.type === 'textfile') {
+      e.preventDefault();
+      saveDeviceTextFile(activeTab.id);
+    }
+  }
+});

Tools/WebServer/static/js/app.js

@@ -111,6 +111,20 @@ function closeTab(tabId, event) {
   const tabInfo = state.editorTabs.find((t) => t.id === tabId);
   if (!tabInfo || !tabInfo.closable) return;
 
+  // Confirm before closing dirty text file tabs
+  if (tabInfo.type === 'textfile' && tabInfo.dirty) {
+    const discard = confirm(
+      t(
+        'transfer.unsaved_changes',
+        'File {{name}} has unsaved changes. Discard?',
+        {
+          name: tabInfo.title,
+        },
+      ),
+    );
+    if (!discard) return;
+  }
+
   const { aceEditors } = state;
   if (aceEditors.has(tabId)) {
     const editor = aceEditors.get(tabId);