139 lines
7.2 KiB
HTML
139 lines
7.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Chat with OpenCode</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/chat/styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<div class="brand-mark">OC</div>
|
|
<div>
|
|
<div class="brand-title">OpenCode Desk</div>
|
|
<div class="brand-sub">Terminal + Chat</div>
|
|
</div>
|
|
</div>
|
|
<button class="primary" id="new-chat">+ New chat</button>
|
|
<button class="ghost" id="home-btn" style="margin-top:8px;">HOME Home</button>
|
|
<div class="sidebar-section">
|
|
<div class="section-heading">Sessions</div>
|
|
<div id="session-list" class="session-list"></div>
|
|
</div>
|
|
<div class="sidebar-section slim">
|
|
<div class="section-heading">Version control</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px;">
|
|
<button id="github-button" class="primary">GitHub</button>
|
|
<button id="diagnostics-button" class="ghost" style="margin-left:8px;">Diagnostics</button>
|
|
<div id="git-output" class="git-output"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="main">
|
|
<header class="topbar">
|
|
<div class="topbar-left">
|
|
<div class="crumb">domain.com</div>
|
|
<div class="title" id="chat-title">Chat</div>
|
|
</div>
|
|
<div class="topbar-actions">
|
|
<div class="queue-indicator" id="queue-indicator">Idle</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="panel" id="session-meta">
|
|
<div>
|
|
<div class="label">Session ID</div>
|
|
<div id="session-id" class="value">-</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Active model</div>
|
|
<div id="session-model" class="value">-</div>
|
|
</div>
|
|
<div>
|
|
<div class="label">Pending</div>
|
|
<div id="session-pending" class="value">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="home-view" style="display:none; padding:20px;">
|
|
<h2 style="margin-bottom:20px;">Your Chats</h2>
|
|
<div id="home-session-list" style="display:grid; gap:12px;"></div>
|
|
</section>
|
|
|
|
<section class="chat-area" id="chat-area"></section>
|
|
|
|
<div class="composer">
|
|
<div class="input-row">
|
|
<textarea id="message-input" rows="3" placeholder="Type your message to OpenCode..."></textarea>
|
|
<button id="send-btn" class="primary">Send</button>
|
|
</div>
|
|
<div style="margin-top:10px; display:flex; gap:8px; align-items:center;">
|
|
<label class="model-select" style="background:transparent; border:1px solid var(--border);">
|
|
<span style="color:var(--muted); margin-right:6px;">CLI</span>
|
|
<select id="cli-select" style="color:var(--text); background:#fff; color: var(--text); border: none; padding:4px 8px; border-radius:6px;"></select>
|
|
</label>
|
|
<label class="model-select" style="background:transparent; border:1px solid var(--border);">
|
|
<span style="color:var(--muted); margin-right:6px;">Model</span>
|
|
<select id="model-select" style="color:var(--text); background:#fff; color: var(--text); border: none; padding:4px 8px; border-radius:6px;"></select>
|
|
</label>
|
|
<label class="model-select" style="background:transparent; border:1px solid var(--border);">
|
|
<span style="color:var(--muted); margin-right:6px;">Mode</span>
|
|
<select id="mode-select" style="color:var(--text); background:#fff; color: var(--text); border: none; padding:4px 8px; border-radius:6px;">
|
|
<option value="agent">Agent</option>
|
|
<option value="plan">Plan</option>
|
|
</select>
|
|
</label>
|
|
<label id="custom-model-label" class="model-select" style="display:none; margin-left:8px; background:transparent; border:1px solid var(--border);">
|
|
<span style="color:var(--muted); margin-right:6px;">Custom</span>
|
|
<input id="custom-model-input" type="text" placeholder="provider/model or model-name" style="background:transparent; border:none; color:var(--text); padding:0 8px;" />
|
|
</label>
|
|
</div>
|
|
<div class="status-line" id="status-line"></div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<!-- GitHub modal -->
|
|
<div id="github-modal" class="modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.4); align-items:center; justify-content:center; z-index:10000;">
|
|
<div style="background:var(--panel); padding:20px; border-radius:10px; width:420px; box-shadow:0 10px 40px rgba(0,0,0,0.2);">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;">
|
|
<strong style="color:var(--text);">GitHub</strong>
|
|
<button id="github-close" style="border:none; background:transparent; color:var(--muted); cursor:pointer;">CLOSE</button>
|
|
</div>
|
|
<div style="display:flex; flex-direction:column; gap:8px;">
|
|
<div style="display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
|
|
<button data-git="pull" class="ghost">Pull</button>
|
|
<button data-git="fetch" class="ghost">Fetch</button>
|
|
<button data-git="status" class="ghost">Status</button>
|
|
<button data-git="log" class="ghost">Log</button>
|
|
</div>
|
|
<div style="display:flex; gap:8px;">
|
|
<button data-git="push" class="ghost">Commit & Push</button>
|
|
<button data-git="sync" class="ghost">Sync</button>
|
|
</div>
|
|
<input id="modal-commit-message" type="text" placeholder="Commit message" value="Update from chat UI" style="padding:8px; border-radius:6px; border:1px solid var(--border);" />
|
|
<details style="margin-top:8px; padding:8px; border-radius:6px; background:var(--panel);">
|
|
<summary style="cursor:pointer; font-weight:600;">What commands will run</summary>
|
|
<div style="margin-top:8px; color:var(--muted);">
|
|
<ul>
|
|
<li><strong>Pull</strong> — git pull</li>
|
|
<li><strong>Fetch</strong> — git fetch --all</li>
|
|
<li><strong>Status</strong> — git status --short</li>
|
|
<li><strong>Log</strong> — git log --oneline -n 20</li>
|
|
<li><strong>Commit & Push</strong> — git add .; git commit -m "message"; git push origin main</li>
|
|
<li><strong>Sync</strong> — git pull; git add .; git commit -m "message"; git push origin main</li>
|
|
</ul>
|
|
<div style="font-size:12px; color:var(--muted);">Note: Commit will run with the provided message. The server runs git in the workspace root (configurable via the CHAT_REPO_ROOT env var)</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="/chat/app.js"></script>
|
|
</html>
|