tabminal 3.0.11 → 3.0.13

package/public/index.html

@@ -500,6 +500,29 @@
             </form>
         </div>
     </div>
+    <div id="confirm-modal" class="modal" style="display: none;">
+        <div class="modal-content confirm-modal-content">
+            <h2 id="confirm-modal-title">Confirm</h2>
+            <p id="confirm-modal-message"></p>
+            <p id="confirm-modal-note" class="confirm-modal-note"></p>
+            <div class="confirm-modal-actions">
+                <button
+                    id="confirm-modal-cancel"
+                    type="button"
+                    class="secondary-button"
+                >
+                    Cancel
+                </button>
+                <button
+                    id="confirm-modal-confirm"
+                    type="button"
+                    class="danger-button"
+                >
+                    Delete
+                </button>
+            </div>
+        </div>
+    </div>
     <div id="shortcuts-modal" class="modal" style="display: none;">
         <div class="modal-content shortcuts-content">
             <h2>Keyboard Shortcuts</h2>

package/public/styles.css

@@ -1156,6 +1156,37 @@ body {
     background-color: rgba(255, 255, 255, 0.05);
 }
 
+.modal-content button.danger-button {
+    background-color: #dc322f;
+}
+
+.modal-content button.danger-button:hover {
+    background-color: #c1272d;
+}
+
+.confirm-modal-content {
+    max-width: 420px;
+    text-align: left;
+}
+
+.confirm-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 1.25rem;
+}
+
+.confirm-modal-note {
+    margin: 0.5rem 0 0;
+    color: var(--text-dim);
+    font-size: 0.85rem;
+}
+
+.confirm-modal-actions button {
+    width: auto;
+    min-width: 120px;
+}
+
 .agent-setup-content {
     max-width: 520px;
     text-align: left;
@@ -1471,11 +1502,20 @@ kbd {
     color: var(--text-highlight);
 }
 
+.file-tree-item.selected {
+    background-color: rgba(88, 110, 117, 0.26);
+    color: var(--text-highlight);
+}
+
 .file-tree-item.active {
     background-color: rgba(38, 139, 210, 0.15);
     color: var(--accent-color);
 }
 
+.file-tree-item.selected.active {
+    background-color: rgba(38, 139, 210, 0.22);
+}
+
 .file-tree-item .icon {
     width: 16px;
     text-align: center;
@@ -1495,6 +1535,81 @@ kbd {
     font-weight: bold;
 }
 
+.file-tree-name {
+    min-width: 0;
+}
+
+.file-tree-rename-btn,
+.file-tree-delete-btn,
+.file-tree-new-folder-btn,
+.file-tree-new-file-btn {
+    display: none;
+    border: 1px solid rgba(38, 139, 210, 0.28);
+    border-radius: 999px;
+    background: rgba(38, 139, 210, 0.12);
+    color: var(--text-highlight);
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
+.file-tree-item:hover .file-tree-rename-btn,
+.file-tree-item.selected .file-tree-rename-btn,
+.file-tree-item:focus-within .file-tree-rename-btn,
+.file-tree-item:hover .file-tree-delete-btn,
+.file-tree-item.selected .file-tree-delete-btn,
+.file-tree-item:focus-within .file-tree-delete-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-tree-delete-btn {
+    border-color: rgba(220, 50, 47, 0.28);
+    background: rgba(220, 50, 47, 0.12);
+    color: #dc322f;
+}
+
+.file-tree-rename-btn:disabled,
+.file-tree-delete-btn:disabled,
+.file-tree-new-folder-btn:disabled,
+.file-tree-new-file-btn:disabled {
+    display: none;
+}
+
+.file-tree-create-entry {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.file-tree-create-actions {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 6px 3px 28px;
+}
+
+.file-tree-create-actions .file-tree-new-folder-btn,
+.file-tree-create-actions .file-tree-new-file-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.file-tree-rename-input {
+    min-width: 0;
+    flex: 1 1 auto;
+    padding: 1px 4px;
+    border: 1px solid rgba(38, 139, 210, 0.5);
+    border-radius: 4px;
+    background: rgba(0, 43, 54, 0.9);
+    color: var(--text-highlight);
+    font: inherit;
+}
+
 .editor-workspace {
     flex-grow: 1;
     display: flex;
@@ -3235,12 +3350,12 @@ kbd {
     align-items: center;
     justify-content: center;
     overflow: auto;
-    background-color: #f0f0f0;
+    background-color: #073642;
     background-image:
-        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
-        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
-        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+        linear-gradient(45deg, #0b3f4b 25%, transparent 25%),
+        linear-gradient(-45deg, #0b3f4b 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, #0b3f4b 75%),
+        linear-gradient(-45deg, transparent 75%, #0b3f4b 75%);
     background-size: 20px 20px;
     background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
 }

package/src/fs-routes.mjs

@@ -1,7 +1,150 @@
+import { constants as fsConstants } from 'node:fs';
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import process from 'node:process';
 
+const IMAGE_MIME_TYPES = {
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.webp': 'image/webp'
+};
+
+export function isSupportedTextBuffer(buffer) {
+    if (!Buffer.isBuffer(buffer) || buffer.length === 0) {
+        return true;
+    }
+
+    let suspiciousControlBytes = 0;
+    for (const byte of buffer) {
+        if (byte === 0x00) {
+            return false;
+        }
+        if (
+            byte < 0x20
+            && byte !== 0x09
+            && byte !== 0x0a
+            && byte !== 0x0d
+        ) {
+            suspiciousControlBytes += 1;
+        }
+    }
+
+    if (suspiciousControlBytes > Math.max(1, buffer.length * 0.01)) {
+        return false;
+    }
+
+    try {
+        const decoder = new TextDecoder('utf-8', { fatal: true });
+        decoder.decode(buffer);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function joinRelativePath(basePath, name) {
+    if (!basePath || basePath === '.' || basePath === path.sep) {
+        return name;
+    }
+    return path.join(basePath, name);
+}
+
+async function canWritePath(targetPath) {
+    try {
+        await fs.access(targetPath, fsConstants.W_OK);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export async function createUniqueChild(baseDir, parentPath, kind) {
+    const normalizedParentPath = parentPath || '.';
+    const fullParentPath = resolvePath(baseDir, normalizedParentPath);
+    const parentStats = await fs.stat(fullParentPath);
+    if (!parentStats.isDirectory()) {
+        const error = new Error('Parent path is not a directory');
+        error.status = 400;
+        throw error;
+    }
+    const writable = await canWritePath(fullParentPath);
+    if (!writable) {
+        const error = new Error('Parent directory is read-only');
+        error.status = 403;
+        throw error;
+    }
+
+    const baseName = kind === 'directory'
+        ? 'untitled_folder'
+        : 'untitled_file';
+
+    for (let attempt = 0; attempt < 10000; attempt += 1) {
+        const name = attempt === 0
+            ? baseName
+            : `${baseName}_${attempt}`;
+        const relativePath = joinRelativePath(normalizedParentPath, name);
+        const fullPath = resolvePath(baseDir, relativePath);
+        try {
+            if (kind === 'directory') {
+                await fs.mkdir(fullPath);
+            } else {
+                const handle = await fs.open(fullPath, 'wx');
+                await handle.close();
+            }
+            return {
+                path: relativePath,
+                parentPath: normalizedParentPath,
+                name,
+                isDirectory: kind === 'directory'
+            };
+        } catch (error) {
+            if (error?.code === 'EEXIST') {
+                continue;
+            }
+            throw error;
+        }
+    }
+
+    const error = new Error('Unable to find an available name');
+    error.status = 409;
+    throw error;
+}
+
+export async function ensureRenameTargetAvailable(baseDir, sourcePath, newName) {
+    const nextPath = path.join(path.dirname(sourcePath), newName);
+    const fullSourcePath = resolvePath(baseDir, sourcePath);
+    const fullNextPath = resolvePath(baseDir, nextPath);
+
+    if (fullSourcePath === fullNextPath) {
+        return {
+            nextPath,
+            fullSourcePath,
+            fullNextPath
+        };
+    }
+
+    try {
+        await fs.stat(fullNextPath);
+        const error = new Error(
+            'A file or folder with that name already exists.'
+        );
+        error.status = 409;
+        throw error;
+    } catch (error) {
+        if (error?.code === 'ENOENT') {
+            return {
+                nextPath,
+                fullSourcePath,
+                fullNextPath
+            };
+        }
+        throw error;
+    }
+}
+
 // Helper to safely resolve path
 const resolvePath = (baseDir, targetPath) => {
     return path.resolve(baseDir, targetPath);
@@ -23,28 +166,43 @@ export const setupFsRoutes = (router) => {
                 return;
             }
 
+            let renameable = false;
+            try {
+                await fs.access(fullPath, fsConstants.W_OK);
+                renameable = true;
+            } catch {
+                renameable = false;
+            }
+
             const dirents = await fs.readdir(fullPath, { withFileTypes: true });
             
-            const files = dirents
-                .filter(dirent => dirent.name !== '.DS_Store')
-                .map(dirent => {
-                    return {
-                        name: dirent.name,
-                        isDirectory: dirent.isDirectory(),
-                        path: path.join(dirPath, dirent.name),
-                        // Add basic icon/type hint logic here if needed later
-                    };
-                });
+            const items = await Promise.all(
+                dirents
+                    .filter(dirent => dirent.name !== '.DS_Store')
+                    .map(async (dirent) => {
+                        const entryPath = path.join(dirPath, dirent.name);
+                        return {
+                            name: dirent.name,
+                            isDirectory: dirent.isDirectory(),
+                            path: entryPath,
+                            renameable,
+                            deleteable: renameable
+                        };
+                    })
+            );
 
             // Sort: Directories first, then files
-            files.sort((a, b) => {
+            items.sort((a, b) => {
                 if (a.isDirectory === b.isDirectory) {
                     return a.name.localeCompare(b.name);
                 }
                 return a.isDirectory ? -1 : 1;
             });
 
-            ctx.body = files;
+            ctx.body = {
+                items,
+                creatable: renameable
+            };
         } catch (err) {
             console.error('FS List Error:', err);
             ctx.status = 500;
@@ -52,6 +210,110 @@ export const setupFsRoutes = (router) => {
         }
     });
 
+    router.post('/api/fs/rename', async (ctx) => {
+        const sourcePath = ctx.request.body?.path;
+        const newName = ctx.request.body?.newName;
+        if (typeof sourcePath !== 'string' || sourcePath.length === 0) {
+            ctx.status = 400;
+            ctx.body = { error: 'Path required' };
+            return;
+        }
+        if (typeof newName !== 'string' || newName.length === 0) {
+            ctx.status = 400;
+            ctx.body = { error: 'New name required' };
+            return;
+        }
+        if (newName === '.' || newName === '..') {
+            ctx.status = 400;
+            ctx.body = { error: 'Invalid name' };
+            return;
+        }
+        if (/[\\/]/.test(newName)) {
+            ctx.status = 400;
+            ctx.body = { error: 'Name must not contain path separators' };
+            return;
+        }
+
+        try {
+            const {
+                nextPath,
+                fullSourcePath,
+                fullNextPath
+            } = await ensureRenameTargetAvailable(baseDir, sourcePath, newName);
+            const stats = await fs.stat(fullSourcePath);
+
+            if (fullSourcePath !== fullNextPath) {
+                await fs.rename(fullSourcePath, fullNextPath);
+            }
+
+            ctx.body = {
+                path: sourcePath,
+                newPath: nextPath,
+                isDirectory: stats.isDirectory()
+            };
+        } catch (err) {
+            console.error('FS Rename Error:', err);
+            ctx.status = err?.status || (err?.code === 'EEXIST' ? 409 : 500);
+            ctx.body = { error: err.message };
+        }
+    });
+
+    router.post('/api/fs/delete', async (ctx) => {
+        const targetPath = ctx.request.body?.path;
+        if (typeof targetPath !== 'string' || targetPath.length === 0) {
+            ctx.status = 400;
+            ctx.body = { error: 'Path required' };
+            return;
+        }
+
+        try {
+            const fullTargetPath = resolvePath(baseDir, targetPath);
+            const stats = await fs.stat(fullTargetPath);
+            await fs.rm(fullTargetPath, {
+                recursive: stats.isDirectory(),
+                force: false
+            });
+
+            ctx.body = {
+                path: targetPath,
+                isDirectory: stats.isDirectory()
+            };
+        } catch (err) {
+            console.error('FS Delete Error:', err);
+            ctx.status = 500;
+            ctx.body = { error: err.message };
+        }
+    });
+
+    router.post('/api/fs/create', async (ctx) => {
+        const parentPath = ctx.request.body?.parentPath;
+        const kind = ctx.request.body?.kind;
+
+        if (typeof parentPath !== 'string' || parentPath.length === 0) {
+            ctx.status = 400;
+            ctx.body = { error: 'Parent path required' };
+            return;
+        }
+        if (kind !== 'file' && kind !== 'directory') {
+            ctx.status = 400;
+            ctx.body = { error: 'Invalid create kind' };
+            return;
+        }
+
+        try {
+            const created = await createUniqueChild(
+                baseDir,
+                parentPath,
+                kind
+            );
+            ctx.body = created;
+        } catch (err) {
+            console.error('FS Create Error:', err);
+            ctx.status = err?.status || 500;
+            ctx.body = { error: err.message };
+        }
+    });
+
     // Read file
     router.get('/api/fs/read', async (ctx) => {
         const filePath = ctx.query.path;
@@ -65,13 +327,30 @@ export const setupFsRoutes = (router) => {
             const fullPath = resolvePath(baseDir, filePath);
             const stats = await fs.stat(fullPath);
 
+            if (!stats.isFile()) {
+                ctx.status = 400;
+                ctx.body = { error: 'Not a file' };
+                return;
+            }
+
             if (stats.size > 1024 * 1024 * 5) { // 5MB limit for now
                 ctx.status = 400;
                 ctx.body = { error: 'File too large' };
                 return;
             }
 
-            const content = await fs.readFile(fullPath, 'utf-8');
+            const contentBuffer = await fs.readFile(fullPath);
+            if (!isSupportedTextBuffer(contentBuffer)) {
+                ctx.status = 415;
+                ctx.body = {
+                    error: 'Unsupported file type',
+                    code: 'unsupported-file-type'
+                };
+                return;
+            }
+
+            const decoder = new TextDecoder('utf-8', { fatal: true });
+            const content = decoder.decode(contentBuffer);
             
             let readonly = false;
             try {
@@ -99,19 +378,10 @@ export const setupFsRoutes = (router) => {
 
         try {
             const fullPath = resolvePath(baseDir, filePath);
-            // Basic mime type handling could be added here
             const ext = path.extname(fullPath).toLowerCase();
-            const mimeTypes = {
-                '.png': 'image/png',
-                '.jpg': 'image/jpeg',
-                '.jpeg': 'image/jpeg',
-                '.gif': 'image/gif',
-                '.svg': 'image/svg+xml',
-                '.webp': 'image/webp'
-            };
 
-            if (mimeTypes[ext]) {
-                ctx.type = mimeTypes[ext];
+            if (IMAGE_MIME_TYPES[ext]) {
+                ctx.type = IMAGE_MIME_TYPES[ext];
                 ctx.body = await fs.readFile(fullPath);
             } else {
                 ctx.status = 400;