fleetcode/index.html
Anish Lakhwara f75c054e65 update
2025-11-08 21:58:34 -08:00

309 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>FleetCode Terminal</title>
<link rel="stylesheet" href="node_modules/xterm/css/xterm.css" />
<link rel="stylesheet" href="dist/styles.css" />
<!-- Socket.IO client for web mode -->
<script src="/socket.io/socket.io.js"></script>
<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">
<!-- Mobile hamburger menu -->
<button id="mobile-menu-btn" class="mobile-menu-btn" title="Toggle Menu">
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button>
<!-- Mobile overlay (when sidebar is open) -->
<div id="mobile-overlay" class="mobile-overlay"></div>
<div class="flex h-full">
<!-- Sidebar -->
<div class="sidebar" id="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>
<option value="amp">Amp</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>
<!-- Diff Viewer Modal -->
<div id="diff-viewer-modal" class="modal-overlay hidden">
<div class="diff-viewer-modal">
<div class="diff-viewer-header">
<h2 class="modal-title" id="diff-viewer-title">Git Diff Viewer</h2>
<div class="diff-viewer-actions">
<button id="merge-to-parent-btn" class="btn-merge" disabled title="Merge worktree branch into parent">
Merge to Parent
</button>
<button id="close-diff-viewer" class="diff-viewer-close" title="Close">×</button>
</div>
</div>
<div class="diff-viewer-content">
<!-- File List Sidebar -->
<div class="diff-file-list" id="diff-file-list">
<button id="toggle-diff-sidebar" class="diff-sidebar-toggle">
<span class="toggle-expand">&gt;&gt;</span>
<span class="toggle-collapse">&lt;&lt;</span>
</button>
<div class="diff-loading">Loading diff...</div>
</div>
<!-- Diff Display -->
<div class="diff-display" id="diff-display">
<div class="diff-empty">Select a file to view changes</div>
</div>
</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>
// Detect if running in Electron or Web browser
const isElectron = typeof window !== "undefined" &&
typeof window.process !== "undefined" &&
window.process.type === "renderer";
if (isElectron) {
// Electron: use require (CommonJS from tsc)
require('./dist/renderer.js');
} else {
// Web browser: use bundled version (IIFE from esbuild)
const script = document.createElement('script');
script.src = './dist/renderer.web.js';
script.type = 'text/javascript';
document.body.appendChild(script);
}
</script>
</body>
</html>