fleetcode/index.html
Amrit Subramanian 2e88696071 Add configurable worktree root directory setting
Users can now configure where worktrees are stored via the settings modal. The setting is persisted and applies to all new sessions created after the change.

Changes:
- Added worktreeDir field to TerminalSettings interface
- Added UI controls in settings modal for selecting worktree directory
- Updated worktree creation logic to use configured directory
- Defaults to ~/worktrees for backward compatibility
2025-10-07 14:55:35 -04:00

250 lines
10 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FleetCode Terminal</title>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<link rel="stylesheet" href="dist/styles.css" />
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
</style>
</head>
<body class="h-screen overflow-hidden bg-gray-900">
<div class="flex h-full">
<!-- Sidebar -->
<div class="sidebar">
<div class="sidebar-header">
<h1 class="sidebar-title">FleetCode</h1>
<button id="open-settings" class="settings-btn" title="Settings">⚙️</button>
</div>
<div class="sidebar-content">
<div class="sidebar-section">
<div class="sidebar-section-header">
<div class="sidebar-section-title">SESSIONS</div>
<button id="new-session" class="section-add-btn" title="New Session">+</button>
</div>
<div id="session-list"></div>
</div>
<div class="sidebar-section" id="mcp-section" style="display: none;">
<div class="sidebar-section-header">
<div class="sidebar-section-title">MCP SERVERS</div>
<button id="add-mcp-server" class="section-add-btn" title="Add MCP Server">+</button>
</div>
<div id="mcp-server-list"></div>
</div>
</div>
</div>
<!-- Main content -->
<div class="flex-1 flex flex-col bg-black">
<!-- Tabs -->
<div id="tabs" class="tabs-container"></div>
<!-- Session container -->
<div id="session-container" class="flex-1 relative"></div>
</div>
</div>
<!-- Session Configuration Modal -->
<div id="config-modal" class="modal-overlay hidden">
<div class="modal">
<h2 class="modal-title">New Session Configuration</h2>
<div class="form-group">
<label class="form-label">Project Directory</label>
<div class="directory-input-group">
<input type="text" id="project-dir" class="form-input" readonly placeholder="Select a directory..." />
<button id="browse-dir" class="btn-icon">Browse</button>
</div>
</div>
<div class="form-group">
<label class="form-label">Parent Branch</label>
<select id="parent-branch" class="form-select">
<option value="">Loading branches...</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Branch Name (optional)</label>
<input type="text" id="branch-name" class="form-input" placeholder="e.g., feature/add-login" />
<span class="text-xs text-gray-400 mt-1 block">Custom branch name (will also be used as session name)</span>
</div>
<div class="form-group">
<label class="form-label">Coding Agent</label>
<select id="coding-agent" class="form-select">
<option value="claude">Claude</option>
<option value="codex">Codex</option>
</select>
</div>
<div class="form-group">
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" id="skip-permissions" class="form-checkbox" checked />
<span class="text-sm text-gray-300">Skip permissions (use --dangerously-skip-permissions)</span>
</label>
</div>
<div class="form-group">
<label class="form-label">Setup Commands (optional)</label>
<textarea id="setup-commands" class="form-input" rows="3" placeholder="Commands to run before starting coding agent (one per line)&#10;e.g., export API_KEY=...&#10;source .env"></textarea>
<span class="text-xs text-gray-400 mt-1 block">These commands will be executed in order before the coding agent starts</span>
</div>
<div class="btn-group">
<button id="cancel-session" class="btn-secondary">Cancel</button>
<button id="create-session" class="btn-primary">Create Session</button>
</div>
</div>
</div>
<!-- MCP Server Details Modal -->
<div id="mcp-details-modal" class="modal-overlay hidden">
<div class="modal">
<h2 class="modal-title" id="mcp-details-title">Server Details</h2>
<div id="mcp-details-content" class="space-y-3 text-sm text-gray-300">
<!-- Details will be populated here -->
</div>
<div class="btn-group">
<button id="close-mcp-details" class="btn-secondary">Close</button>
<button id="remove-mcp-details" class="btn-danger">Remove Server</button>
</div>
</div>
</div>
<!-- MCP Server Modal -->
<div id="mcp-modal" class="modal-overlay hidden">
<div class="modal">
<h2 class="modal-title">Add MCP Server</h2>
<div class="form-group">
<label class="form-label">Server Name</label>
<input type="text" id="mcp-name" class="form-input" placeholder="e.g., my-server" />
</div>
<div class="form-group">
<label class="form-label">Server Type</label>
<select id="mcp-type" class="form-select">
<option value="local">Local</option>
<option value="remote">Remote</option>
</select>
</div>
<!-- Local Server Fields -->
<div id="local-fields">
<div class="form-group">
<label class="form-label">Command</label>
<input type="text" id="mcp-command" class="form-input" placeholder="e.g., node, npx" />
</div>
<div class="form-group">
<label class="form-label">Arguments (space-separated)</label>
<input type="text" id="mcp-args" class="form-input" placeholder="e.g., /path/to/server.js or -s @modelcontextprotocol/server-filesystem" />
</div>
<div class="form-group">
<label class="form-label">Environment Variables (optional, JSON)</label>
<textarea id="mcp-env" class="form-input" rows="3" placeholder='{"API_KEY": "your_api_key"}'></textarea>
</div>
</div>
<!-- Remote Server Fields -->
<div id="remote-fields" style="display: none;">
<div class="form-group">
<label class="form-label">Server URL</label>
<input type="text" id="mcp-url" class="form-input" placeholder="https://your-server-url.com/mcp" />
</div>
<div class="form-group">
<label class="form-label">Headers (optional, JSON)</label>
<textarea id="mcp-headers" class="form-input" rows="3" placeholder='{"Authorization": "Bearer your-token"}'></textarea>
</div>
</div>
<div class="form-group">
<label class="form-label">Always Allow Tools (optional, comma-separated)</label>
<input type="text" id="mcp-always-allow" class="form-input" placeholder="e.g., tool1, tool2, tool3" />
</div>
<div class="btn-group">
<button id="cancel-mcp" class="btn-secondary">Cancel</button>
<button id="add-mcp" class="btn-primary">Add Server</button>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settings-modal" class="modal-overlay hidden">
<div class="modal">
<h2 class="modal-title">Terminal Settings</h2>
<div class="form-group">
<label class="form-label">Theme</label>
<select id="settings-theme" class="form-select">
<option value="macos-light">macOS Terminal (Light)</option>
<option value="macos-dark">macOS Terminal (Dark)</option>
<option value="solarized-dark">Solarized Dark</option>
<option value="dracula">Dracula</option>
<option value="one-dark">One Dark</option>
<option value="github-dark">GitHub Dark</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Font Family</label>
<select id="settings-font-family" class="form-select">
<option value="Menlo, Monaco, 'Courier New', monospace">Menlo</option>
<option value="'SF Mono', Monaco, 'Courier New', monospace">SF Mono</option>
<option value="Monaco, 'Courier New', monospace">Monaco</option>
<option value="'Courier New', Courier, monospace">Courier New</option>
<option value="'Source Code Pro', monospace">Source Code Pro</option>
<option value="'Fira Code', monospace">Fira Code</option>
<option value="'JetBrains Mono', monospace">JetBrains Mono</option>
<option value="Consolas, monospace">Consolas</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Font Size</label>
<input type="number" id="settings-font-size" class="form-input" min="8" max="32" placeholder="11" />
</div>
<div class="form-group">
<label class="flex items-center space-x-2 cursor-pointer">
<input type="checkbox" id="settings-cursor-blink" class="form-checkbox" />
<span class="text-sm text-gray-300">Cursor Blink</span>
</label>
</div>
<div class="form-group">
<label class="form-label">Worktree Root Directory</label>
<div class="directory-input-group">
<input type="text" id="settings-worktree-dir" class="form-input" readonly placeholder="~/worktrees" />
<button id="browse-worktree-dir" class="btn-icon">Browse</button>
</div>
<span class="text-xs text-gray-400 mt-1 block">Directory where session worktrees will be stored</span>
</div>
<div class="btn-group">
<button id="cancel-settings" class="btn-secondary">Cancel</button>
<button id="reset-settings" class="btn-secondary">Reset to Default</button>
<button id="save-settings" class="btn-primary">Save</button>
</div>
</div>
</div>
<script>
require('./dist/renderer.js');
</script>
</body>
</html>