Spaces:
Sleeping
Sleeping
| <html lang="en" class=""> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>OpenCode Workspace</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| :root { | |
| --v2-background-bg-deep: #fafafa; | |
| --v2-background-bg-base: #ffffff; | |
| --v2-background-bg-layer-01: #f2f2f2; | |
| --v2-background-bg-layer-02: #ebebeb; | |
| --v2-background-bg-layer-03: #e0e0e0; | |
| --v2-background-bg-layer-04: #d4d4d4; | |
| --v2-text-text-base: #1a1a1a; | |
| --v2-text-text-muted: #777777; | |
| --v2-text-text-faint: #b3b3b3; | |
| --v2-text-text-inverse: #ffffff; | |
| --v2-icon-icon-base: #1a1a1a; | |
| --v2-icon-icon-muted: #777777; | |
| --v2-icon-icon-accent: #0066ff; | |
| --v2-border-border-muted: #e5e5e5; | |
| --v2-border-border-base: #d9d9d9; | |
| --v2-overlay-simple-overlay-hover: rgba(0,0,0,0.04); | |
| --v2-elevation-raised: 0 1px 3px rgba(0,0,0,0.1); | |
| --v2-elevation-floating: 0 4px 16px rgba(0,0,0,0.12); | |
| --color-bg-project-card: #ffffff; | |
| --color-bg-project-card-hover: #fafafa; | |
| } | |
| .dark { | |
| --v2-background-bg-deep: #0e0e0e; | |
| --v2-background-bg-base: #181818; | |
| --v2-background-bg-layer-01: #1f1f1f; | |
| --v2-background-bg-layer-02: #262626; | |
| --v2-background-bg-layer-03: #303030; | |
| --v2-background-bg-layer-04: #3a3a3a; | |
| --v2-text-text-base: #e8e8e8; | |
| --v2-text-text-muted: #999999; | |
| --v2-text-text-faint: #666666; | |
| --v2-text-text-inverse: #0e0e0e; | |
| --v2-icon-icon-base: #e8e8e8; | |
| --v2-icon-icon-muted: #999999; | |
| --v2-icon-icon-accent: #3b82f6; | |
| --v2-border-border-muted: #2a2a2a; | |
| --v2-border-border-base: #333333; | |
| --v2-overlay-simple-overlay-hover: rgba(255,255,255,0.06); | |
| --v2-elevation-raised: 0 1px 3px rgba(0,0,0,0.4); | |
| --v2-elevation-floating: 0 4px 16px rgba(0,0,0,0.5); | |
| --color-bg-project-card: #1f1f1f; | |
| --color-bg-project-card-hover: #262626; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; | |
| background: var(--v2-background-bg-deep); | |
| color: var(--v2-text-text-base); | |
| overflow: hidden; | |
| height: 100vh; | |
| } | |
| .glow-input { | |
| position: relative; | |
| border-radius: 10px; | |
| background: var(--v2-background-bg-base); | |
| border: 1px solid var(--v2-border-border-muted); | |
| transition: border-color 0.2s, box-shadow 0.2s; | |
| } | |
| .glow-input:focus-within { | |
| border-color: var(--v2-icon-icon-accent); | |
| box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-icon-icon-accent) 15%, transparent); | |
| } | |
| .glow-input textarea { | |
| width: 100%; | |
| border: none; | |
| background: transparent; | |
| color: var(--v2-text-text-base); | |
| outline: none; | |
| resize: none; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| padding: 8px 10px; | |
| font-family: inherit; | |
| } | |
| .glow-input textarea::placeholder { | |
| color: var(--v2-text-text-faint); | |
| } | |
| .session-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 6px 10px; | |
| border-radius: 6px; | |
| cursor: default; | |
| font-size: 13px; | |
| color: var(--v2-text-text-muted); | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .session-tab:hover { | |
| background: var(--v2-overlay-simple-overlay-hover); | |
| color: var(--v2-text-text-base); | |
| } | |
| .session-tab.active { | |
| background: var(--v2-background-bg-layer-02); | |
| color: var(--v2-text-text-base); | |
| font-weight: 530; | |
| } | |
| .project-card { | |
| background: var(--color-bg-project-card); | |
| border: 1px solid var(--v2-border-border-muted); | |
| border-radius: 10px; | |
| padding: 14px; | |
| cursor: default; | |
| transition: background 0.15s, border-color 0.15s; | |
| } | |
| .project-card:hover { | |
| background: var(--color-bg-project-card-hover); | |
| border-color: var(--v2-border-border-base); | |
| } | |
| .nav-icon-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 6px; | |
| border: none; | |
| background: transparent; | |
| color: var(--v2-icon-icon-muted); | |
| cursor: pointer; | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .nav-icon-btn:hover { | |
| background: var(--v2-overlay-simple-overlay-hover); | |
| color: var(--v2-icon-icon-base); | |
| } | |
| .scrollable::-webkit-scrollbar { width: 4px; } | |
| .scrollable::-webkit-scrollbar-track { background: transparent; } | |
| .scrollable::-webkit-scrollbar-thumb { background: var(--v2-border-border-base); border-radius: 4px; } | |
| .scrollable::-webkit-scrollbar-thumb:hover { background: var(--v2-text-text-faint); } | |
| .modal-overlay { | |
| position: fixed; inset: 0; z-index: 100; | |
| background: rgba(0,0,0,0.4); | |
| display: flex; align-items: center; justify-content: center; | |
| opacity: 0; pointer-events: none; | |
| transition: opacity 0.2s; | |
| } | |
| .modal-overlay.open { opacity: 1; pointer-events: auto; } | |
| .modal-content { | |
| background: var(--v2-background-bg-base); | |
| border: 1px solid var(--v2-border-border-muted); | |
| border-radius: 14px; | |
| box-shadow: var(--v2-elevation-floating); | |
| max-width: 640px; | |
| width: 90vw; | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| transform: scale(0.95); | |
| transition: transform 0.2s; | |
| } | |
| .modal-overlay.open .modal-content { transform: scale(1); } | |
| .cmd-palette { | |
| position: fixed; top: 80px; left: 50%; transform: translateX(-50%); | |
| z-index: 200; | |
| width: 620px; | |
| max-width: calc(100vw - 40px); | |
| background: var(--v2-background-bg-base); | |
| border: 1px solid var(--v2-border-border-muted); | |
| border-radius: 14px; | |
| box-shadow: var(--v2-elevation-floating); | |
| display: none; | |
| overflow: hidden; | |
| } | |
| .cmd-palette.open { display: block; } | |
| .cmd-palette input { | |
| width: 100%; | |
| border: none; | |
| background: transparent; | |
| padding: 14px 16px; | |
| font-size: 14px; | |
| color: var(--v2-text-text-base); | |
| outline: none; | |
| font-family: inherit; | |
| } | |
| .cmd-palette input::placeholder { color: var(--v2-text-text-faint); } | |
| .mode-btn { | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| border: none; | |
| font-size: 12px; | |
| font-weight: 530; | |
| cursor: pointer; | |
| background: transparent; | |
| color: var(--v2-text-text-muted); | |
| transition: background 0.12s, color 0.12s; | |
| } | |
| .mode-btn:hover { background: var(--v2-overlay-simple-overlay-hover); color: var(--v2-text-text-base); } | |
| .mode-btn.active { background: var(--v2-background-bg-layer-02); color: var(--v2-text-text-base); } | |
| .model-select { | |
| appearance: none; | |
| border: none; | |
| background: transparent; | |
| font-size: 12px; | |
| color: var(--v2-text-text-muted); | |
| cursor: pointer; | |
| outline: none; | |
| padding: 2px 4px; | |
| border-radius: 4px; | |
| font-family: inherit; | |
| } | |
| .model-select:hover { background: var(--v2-overlay-simple-overlay-hover); } | |
| .msg-bubble { | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| max-width: 85%; | |
| } | |
| .msg-bubble.user { | |
| background: var(--v2-background-bg-layer-02); | |
| color: var(--v2-text-text-base); | |
| align-self: flex-end; | |
| border-bottom-right-radius: 4px; | |
| } | |
| .msg-bubble.assistant { | |
| background: transparent; | |
| color: var(--v2-text-text-base); | |
| align-self: flex-start; | |
| } | |
| .msg-bubble.assistant .typing-dots span { | |
| display: inline-block; | |
| width: 5px; height: 5px; | |
| border-radius: 50%; | |
| background: var(--v2-text-text-muted); | |
| margin: 0 2px; | |
| animation: dotPulse 1.4s infinite both; | |
| } | |
| .msg-bubble.assistant .typing-dots span:nth-child(2) { animation-delay: 0.2s; } | |
| .msg-bubble.assistant .typing-dots span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes dotPulse { | |
| 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } | |
| 40% { opacity: 1; transform: scale(1); } | |
| } | |
| .card-status-dot { | |
| width: 8px; height: 8px; border-radius: 50%; display: inline-block; | |
| } | |
| .card-status-dot.online { background: #22c55e; } | |
| .card-status-dot.offline { background: #ef4444; } | |
| .card-status-dot.idle { background: #f59e0b; } | |
| .card-tag { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| font-size: 11px; | |
| font-weight: 500; | |
| background: var(--v2-background-bg-layer-01); | |
| color: var(--v2-text-text-muted); | |
| } | |
| svg.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } | |
| svg.icon-lg { width: 18px; height: 18px; } | |
| svg.icon-sm { width: 14px; height: 14px; } | |
| .toggle-dark { cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <svg style="display:none" xmlns="http://www.w3.org/2000/svg"> | |
| <symbol id="icon-chevron-down" viewBox="0 0 16 16"><path d="M4 6l4 4 4-4"/></symbol> | |
| <symbol id="icon-chevron-right" viewBox="0 0 16 16"><path d="M6 4l4 4-4 4"/></symbol> | |
| <symbol id="icon-search" viewBox="0 0 16 16"><circle cx="6.5" cy="6.5" r="3.5"/><path d="M10.5 10.5L14 14"/></symbol> | |
| <symbol id="icon-settings" viewBox="0 0 16 16"><circle cx="8" cy="8" r="1.5"/><path d="M8 2v1.5M8 12.5V14M2 8h1.5M12.5 8H14M3.5 3.5l1 1M11.5 11.5l1 1M3.5 12.5l1-1M11.5 4.5l1-1"/></symbol> | |
| <symbol id="icon-help" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M6 6c0-1.1.9-2 2-2s2 .9 2 2c0 1.5-2 2-2 3.5V11"/><circle cx="8" cy="12.5" r="0.5" fill="currentColor"/></symbol> | |
| <symbol id="icon-folder" viewBox="0 0 16 16"><path d="M1.5 4.5v8a1 1 0 001 1h11a1 1 0 001-1V6a1 1 0 00-1-1H8.5l-1.5-2h-5a1 1 0 00-1 1z"/></symbol> | |
| <symbol id="icon-plus" viewBox="0 0 16 16"><path d="M8 3v10M3 8h10"/></symbol> | |
| <symbol id="icon-close" viewBox="0 0 16 16"><path d="M4 4l8 8M12 4l-8 8"/></symbol> | |
| <symbol id="icon-send" viewBox="0 0 16 16"><path d="M2 8l12-6-4 6 4 6-12-6z"/></symbol> | |
| <symbol id="icon-edit" viewBox="0 0 16 16"><path d="M11 2l3 3-8 8H3v-3z"/></symbol> | |
| <symbol id="icon-trash" viewBox="0 0 16 16"><path d="M2 4h12M5 4V2.5a.5.5 0 01.5-.5h5a.5.5 0 01.5.5V4M3 4l1 10h8l1-10"/></symbol> | |
| <symbol id="icon-copy" viewBox="0 0 16 16"><rect x="4" y="4" width="10" height="10" rx="1"/><path d="M2 12V2h10"/></symbol> | |
| <symbol id="icon-check" viewBox="0 0 16 16"><path d="M3 8l3 4 7-8"/></symbol> | |
| <symbol id="icon-archive" viewBox="0 0 16 16"><path d="M1.5 4.5h13M2.5 4.5V13a1 1 0 001 1h9a1 1 0 001-1V4.5M5 7.5h6"/></symbol> | |
| <symbol id="icon-asterisk" viewBox="0 0 16 16"><path d="M8 2v12M2 8h12M3.5 3.5l9 9M12.5 3.5l-9 9"/></symbol> | |
| <symbol id="icon-sun" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.5 3.5l1.5 1.5M11 11l1.5 1.5M3.5 12.5L5 11M11 5l1.5-1.5"/></symbol> | |
| <symbol id="icon-moon" viewBox="0 0 16 16"><path d="M13.5 8.5A5.5 5.5 0 017.5 3a5.5 5.5 0 106 5.5z"/></symbol> | |
| <symbol id="icon-stop" viewBox="0 0 16 16"><rect x="4" y="4" width="8" height="8" rx="1"/></symbol> | |
| <symbol id="icon-history" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M8 5v3l2 1"/></symbol> | |
| <symbol id="icon-globe" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6"/><path d="M2 8h12M8 2a6 6 0 010 12"/></symbol> | |
| <symbol id="icon-box" viewBox="0 0 16 16"><path d="M2 5l6-3 6 3v6l-6 3-6-3z"/><path d="M2 5l6 3 6-3M8 8v6"/></symbol> | |
| <symbol id="icon-sparkles" viewBox="0 0 16 16"><path d="M5 2l.5 2.5L8 5l-2.5.5L5 8l-.5-2.5L2 5l2.5-.5z"/><path d="M11 4l.3 1.7L13 6l-1.7.3L11 8l-.3-1.7L9 6l1.7-.3z"/><path d="M9 11l.3 1.3L11 13l-1.7.3L9 14l-.3-1.7L7 13l1.7-.3z"/></symbol> | |
| </svg> | |
| <!-- MAIN LAYOUT --> | |
| <div class="flex flex-col h-screen"> | |
| <!-- TOP BAR --> | |
| <header class="h-9 shrink-0 flex items-center justify-between px-3 border-b" style="border-color:var(--v2-border-border-muted);background:var(--v2-background-bg-base);-webkit-app-region:drag"> | |
| <div class="flex items-center gap-2" style="-webkit-app-region:no-drag"> | |
| <svg class="icon icon-lg" style="color:var(--v2-icon-icon-accent)"><use href="#icon-box"/></svg> | |
| <span class="text-[12px] font-semibold tracking-tight" style="color:var(--v2-text-text-muted)">OcDash</span> | |
| </div> | |
| <div class="flex items-center gap-2" style="-webkit-app-region:no-drag"> | |
| <div class="relative flex items-center"> | |
| <svg class="icon-sm absolute left-2 pointer-events-none" style="color:var(--v2-text-text-faint)"><use href="#icon-search"/></svg> | |
| <input type="text" placeholder="Search sessions, projects, or commands (Ctrl+K)" | |
| class="h-7 w-[280px] rounded-[6px] border-none bg-transparent pl-7 pr-3 text-[12px] outline-none" | |
| style="color:var(--v2-text-text-base);background:var(--v2-background-bg-layer-02/60)" | |
| onfocus="this.style.background='var(--v2-background-bg-layer-02)'" | |
| onblur="this.style.background='var(--v2-background-bg-layer-02/60)'" | |
| onkeydown="if(event.key==='Escape')this.blur();if(event.key==='Enter')openCommandPalette()"/> | |
| </div> | |
| <button class="nav-icon-btn" onclick="toggleDark()" title="Toggle theme"> | |
| <svg class="icon"><use href="#icon-sun" id="theme-icon"/></svg> | |
| </button> | |
| <span class="w-px h-4" style="background:var(--v2-border-border-muted)"></span> | |
| </div> | |
| </header> | |
| <!-- MAIN BODY --> | |
| <div class="flex flex-1 min-h-0 overflow-hidden"> | |
| <!-- LEFT NAV BAR --> | |
| <nav class="w-10 shrink-0 flex flex-col items-center py-3 gap-2 border-r" style="background:var(--v2-background-bg-base);border-color:var(--v2-border-border-muted)"> | |
| <button class="nav-icon-btn" onclick="openSettings()" title="Settings (Ctrl+,)"> | |
| <svg class="icon icon-lg"><use href="#icon-settings"/></svg> | |
| </button> | |
| <button class="nav-icon-btn" onclick="openHelp()" title="Help"> | |
| <svg class="icon icon-lg"><use href="#icon-help"/></svg> | |
| </button> | |
| </nav> | |
| <!-- LEFT PANEL: SESSIONS + CHAT (420px) --> | |
| <div class="w-[420px] shrink-0 flex flex-col border-r" style="border-color:var(--v2-border-border-muted);background:var(--v2-background-bg-base)"> | |
| <!-- Session tabs --> | |
| <div class="flex items-center gap-0.5 px-3 pt-2 pb-1 border-b" style="border-color:var(--v2-border-border-muted)"> | |
| <div class="session-tab active"> | |
| <svg class="icon-sm"><use href="#icon-sparkles"/></svg> | |
| <span>Current</span> | |
| </div> | |
| <div class="session-tab"> | |
| <svg class="icon-sm"><use href="#icon-history"/></svg> | |
| <span>Yesterday</span> | |
| </div> | |
| <div class="session-tab"> | |
| <svg class="icon-sm"><use href="#icon-archive"/></svg> | |
| <span>Older</span> | |
| </div> | |
| <div class="flex-1"></div> | |
| <button class="nav-icon-btn" onclick="alert('Archive')" title="Archive session"> | |
| <svg class="icon-sm"><use href="#icon-archive"/></svg> | |
| </button> | |
| </div> | |
| <!-- Session list --> | |
| <div class="flex flex-col px-2 py-2 gap-px border-b" style="border-color:var(--v2-border-border-muted);max-height:180px;overflow-y:auto" class="scrollable"> | |
| <div class="session-tab active"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-background-bg-layer-03)">AE</span> | |
| <span class="truncate">Fix endpoint routing</span> | |
| <span class="ml-auto text-[11px]" style="color:var(--v2-text-text-faint)">2h</span> | |
| </div> | |
| <div class="session-tab"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-background-bg-layer-03)">W2</span> | |
| <span class="truncate">Refactor auth middleware</span> | |
| <span class="ml-auto text-[11px]" style="color:var(--v2-text-text-faint)">5h</span> | |
| </div> | |
| <div class="session-tab"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-background-bg-layer-03)">AS</span> | |
| <span class="truncate">Deploy Astro site</span> | |
| <span class="ml-auto text-[11px]" style="color:var(--v2-text-text-faint)">1d</span> | |
| </div> | |
| <div class="session-tab"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-background-bg-layer-03)">WD</span> | |
| <span class="truncate">Database migration plan</span> | |
| <span class="ml-auto text-[11px]" style="color:var(--v2-text-text-faint)">2d</span> | |
| </div> | |
| </div> | |
| <!-- Chat messages --> | |
| <div class="flex-1 overflow-y-auto px-3 py-3 flex flex-col gap-3 scrollable" id="chat-messages"> | |
| <div class="msg-bubble assistant"> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-icon-icon-accent);color:var(--v2-text-text-inverse)">OC</span> | |
| <span class="text-[11px]" style="color:var(--v2-text-text-muted)">OpenCode</span> | |
| </div> | |
| <div>Hello! I'm your AI coding assistant. I can help you write, debug, and refactor code. What are you working on?</div> | |
| </div> | |
| <div class="msg-bubble user"> | |
| <div>Let's work on the dashboard project. I need to add user authentication</div> | |
| </div> | |
| <div class="msg-bubble assistant"> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-icon-icon-accent);color:var(--v2-text-text-inverse)">OC</span> | |
| <span class="text-[11px]" style="color:var(--v2-text-text-muted)">OpenCode</span> | |
| </div> | |
| <div>Great! I'll help you implement authentication. First, let me check your project structure...</div> | |
| </div> | |
| <div class="msg-bubble assistant" id="typing-indicator" style="display:none"> | |
| <div class="flex items-center gap-2 mb-1"> | |
| <span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-icon-icon-accent);color:var(--v2-text-text-inverse)">OC</span> | |
| <span class="text-[11px]" style="color:var(--v2-text-text-muted)">OpenCode</span> | |
| </div> | |
| <div class="typing-dots"><span></span><span></span><span></span></div> | |
| </div> | |
| </div> | |
| <!-- Input area --> | |
| <div class="px-3 pb-3 pt-2 border-t" style="border-color:var(--v2-border-border-muted)"> | |
| <div class="glow-input"> | |
| <textarea rows="2" placeholder="Ask OpenCode anything..." id="chat-input" | |
| onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendMessage()}"></textarea> | |
| </div> | |
| <div class="flex items-center justify-between mt-2"> | |
| <div class="flex items-center gap-1.5"> | |
| <button class="mode-btn active">Auto</button> | |
| <button class="mode-btn">Ask</button> | |
| <button class="mode-btn">Edit</button> | |
| <button class="mode-btn">Agent</button> | |
| </div> | |
| <div class="flex items-center gap-2"> | |
| <select class="model-select"> | |
| <option>gpt-4o</option> | |
| <option>claude-opus-4</option> | |
| <option>claude-sonnet-4</option> | |
| <option selected>deepseek-v4</option> | |
| <option>llama-4</option> | |
| </select> | |
| <button class="nav-icon-btn" onclick="sendMessage()" title="Send"> | |
| <svg class="icon"><use href="#icon-send"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- RIGHT PANEL: PROJECT CARDS --> | |
| <div class="flex-1 flex flex-col min-w-0 overflow-hidden" style="background:var(--v2-background-bg-deep)"> | |
| <div class="flex items-center justify-between px-5 py-3"> | |
| <h2 class="text-[14px] font-semibold" style="color:var(--v2-text-text-base)">Projects</h2> | |
| <span class="text-[12px]" style="color:var(--v2-text-text-muted)">7 active</span> | |
| </div> | |
| <div class="flex-1 overflow-y-auto px-5 pb-5 scrollable"> | |
| <div class="grid grid-cols-2 xl:grid-cols-3 gap-3"> | |
| <!-- altamura-endpoints --> | |
| <div class="project-card"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#e0f2fe;color:#0369a1">AE</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">altamura-endpoints</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/altamura</div> | |
| </div> | |
| <span class="card-status-dot online"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag">typescript</span> | |
| <span class="card-tag">api</span> | |
| <span class="card-tag">express</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>Fix endpoint routing</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated 2 hours ago</div> | |
| </div> | |
| <!-- w2 --> | |
| <div class="project-card"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#f3e8ff;color:#7c3aed">W2</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">w2</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/w2</div> | |
| </div> | |
| <span class="card-status-dot online"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag">python</span> | |
| <span class="card-tag">cli</span> | |
| <span class="card-tag">auth</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>Refactor auth middleware</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated 5 hours ago</div> | |
| </div> | |
| <!-- astro --> | |
| <div class="project-card"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#fef3c7;color:#b45309">AS</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">astro</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/astro</div> | |
| </div> | |
| <span class="card-status-dot online"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag">astro</span> | |
| <span class="card-tag">react</span> | |
| <span class="card-tag">tailwind</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>Deploy Astro site</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated 1 day ago</div> | |
| </div> | |
| <!-- wd --> | |
| <div class="project-card"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#dbeafe;color:#2563eb">WD</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">wd</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/wd</div> | |
| </div> | |
| <span class="card-status-dot idle"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag">rust</span> | |
| <span class="card-tag">database</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>Database migration plan</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated 2 days ago</div> | |
| </div> | |
| <!-- claude-engineer --> | |
| <div class="project-card"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#fce7f3;color:#be185d">CE</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">claude-engineer</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/claude-engineer</div> | |
| </div> | |
| <span class="card-status-dot offline"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag">typescript</span> | |
| <span class="card-tag">ai</span> | |
| <span class="card-tag">cli</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>API integration</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated 3 days ago</div> | |
| </div> | |
| <!-- OcDash --> | |
| <div class="project-card" style="border-color:var(--v2-icon-icon-accent)"> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="w-7 h-7 rounded-[6px] flex items-center justify-center text-[11px] font-bold shrink-0" style="background:#ede9fe;color:#6d28d9">OD</span> | |
| <div class="min-w-0 flex-1"> | |
| <div class="text-[13px] font-medium truncate" style="color:var(--v2-text-text-base)">ocdash-app</div> | |
| <div class="text-[11px] truncate" style="color:var(--v2-text-text-faint)">/home/user/ocdash-app</div> | |
| </div> | |
| <span class="card-status-dot online"></span> | |
| </div> | |
| <div class="flex items-center gap-2 mb-2"> | |
| <span class="card-tag" style="background:color-mix(in srgb, var(--v2-icon-icon-accent) 12%, transparent);color:var(--v2-icon-icon-accent)">active</span> | |
| <span class="card-tag">solidjs</span> | |
| <span class="card-tag">dashboard</span> | |
| </div> | |
| <div class="flex items-center gap-2 text-[11px]" style="color:var(--v2-text-text-muted)"> | |
| <svg class="icon-sm"><use href="#icon-edit"/></svg> | |
| <span>Build dashboard UI</span> | |
| </div> | |
| <div class="mt-2 text-[11px]" style="color:var(--v2-text-text-faint)">Updated just now</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Command Palette --> | |
| <div class="cmd-palette" id="cmd-palette"> | |
| <input type="text" placeholder="Type a command or search..." id="cmd-input" autocomplete="off" | |
| onkeydown="if(event.key==='Escape')closeCommandPalette()"/> | |
| <div class="border-t px-3 py-2 flex flex-col" style="border-color:var(--v2-border-border-muted)" id="cmd-results"> | |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded-[6px] text-[13px] cursor-default hover:bg-v2-overlay-simple-overlay-hover" style="color:var(--v2-text-text-base)" onclick="closeCommandPalette();openSettings()"> | |
| <svg class="icon-sm"><use href="#icon-settings"/></svg> | |
| <span>Open Settings</span> | |
| <span class="ml-auto text-[11px]" style="color:var(--v2-text-text-faint)">Ctrl+,</span> | |
| </div> | |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded-[6px] text-[13px] cursor-default hover:bg-v2-overlay-simple-overlay-hover" style="color:var(--v2-text-text-base)" onclick="closeCommandPalette();toggleDark()"> | |
| <svg class="icon-sm"><use href="#icon-sun"/></svg> | |
| <span>Toggle Theme</span> | |
| </div> | |
| <div class="flex items-center gap-2 px-2 py-1.5 rounded-[6px] text-[13px] cursor-default hover:bg-v2-overlay-simple-overlay-hover" style="color:var(--v2-text-text-base)" onclick="closeCommandPalette();openHelp()"> | |
| <svg class="icon-sm"><use href="#icon-help"/></svg> | |
| <span>Help & Feedback</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <div class="modal-overlay" id="settings-modal"> | |
| <div class="modal-content"> | |
| <div class="flex items-center justify-between px-5 py-4 border-b" style="border-color:var(--v2-border-border-muted)"> | |
| <h2 class="text-[15px] font-semibold">Settings</h2> | |
| <button class="nav-icon-btn" onclick="closeSettings()"><svg class="icon"><use href="#icon-close"/></svg></button> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <div> | |
| <label class="block text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">Theme</label> | |
| <div class="flex gap-2"> | |
| <button class="mode-btn active" onclick="setTheme('light')">Light</button> | |
| <button class="mode-btn" onclick="setTheme('dark')">Dark</button> | |
| <button class="mode-btn" onclick="setTheme('system')">System</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">Default Model</label> | |
| <select class="model-select w-full p-2 rounded-[6px] text-[13px]" style="background:var(--v2-background-bg-layer-01);color:var(--v2-text-text-base);border:1px solid var(--v2-border-border-muted)"> | |
| <option>deepseek-v4</option> | |
| <option>gpt-4o</option> | |
| <option>claude-opus-4</option> | |
| <option>claude-sonnet-4</option> | |
| <option>llama-4</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">API Keys</label> | |
| <p class="text-[12px]" style="color:var(--v2-text-text-muted)">Configure your API keys in the OpenCode desktop app.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end px-5 py-3 border-t gap-2" style="border-color:var(--v2-border-border-muted)"> | |
| <button class="mode-btn active" onclick="closeSettings()">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Help Modal --> | |
| <div class="modal-overlay" id="help-modal"> | |
| <div class="modal-content"> | |
| <div class="flex items-center justify-between px-5 py-4 border-b" style="border-color:var(--v2-border-border-muted)"> | |
| <h2 class="text-[15px] font-semibold">Help & Feedback</h2> | |
| <button class="nav-icon-btn" onclick="closeHelp()"><svg class="icon"><use href="#icon-close"/></svg></button> | |
| </div> | |
| <div class="p-5 space-y-4"> | |
| <div> | |
| <h3 class="text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">Keyboard Shortcuts</h3> | |
| <div class="text-[12px] space-y-1" style="color:var(--v2-text-text-muted)"> | |
| <div><kbd class="px-1.5 py-0.5 rounded text-[11px]" style="background:var(--v2-background-bg-layer-01)">Ctrl+K</kbd> Command Palette</div> | |
| <div><kbd class="px-1.5 py-0.5 rounded text-[11px]" style="background:var(--v2-background-bg-layer-01)">Ctrl+,</kbd> Settings</div> | |
| <div><kbd class="px-1.5 py-0.5 rounded text-[11px]" style="background:var(--v2-background-bg-layer-01)">Enter</kbd> Send Message</div> | |
| <div><kbd class="px-1.5 py-0.5 rounded text-[11px]" style="background:var(--v2-background-bg-layer-01)">Shift+Enter</kbd> New Line</div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">About OcDash</h3> | |
| <p class="text-[12px]" style="color:var(--v2-text-text-muted)">OcDash is a web dashboard for OpenCode workspaces. View your projects, manage sessions, and interact with your AI coding assistant.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-[13px] font-medium mb-1" style="color:var(--v2-text-text-base)">Get Help</h3> | |
| <p class="text-[12px]" style="color:var(--v2-text-text-muted)">Visit <a href="https://opencode.ai/desktop-feedback" target="_blank" style="color:var(--v2-icon-icon-accent)">opencode.ai/desktop-feedback</a> for support.</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-end px-5 py-3 border-t gap-2" style="border-color:var(--v2-border-border-muted)"> | |
| <button class="mode-btn active" onclick="closeHelp()">Close</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Theme management | |
| function getPreferredTheme() { | |
| const stored = localStorage.getItem('ocdash-theme') | |
| if (stored === 'dark' || stored === 'light') return stored | |
| return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' | |
| } | |
| function setTheme(mode) { | |
| const html = document.documentElement | |
| if (mode === 'system') { | |
| localStorage.removeItem('ocdash-theme') | |
| mode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' | |
| } else { | |
| localStorage.setItem('ocdash-theme', mode) | |
| } | |
| html.classList.toggle('dark', mode === 'dark') | |
| const icon = document.getElementById('theme-icon') | |
| if (icon) icon.setAttribute('href', mode === 'dark' ? '#icon-moon' : '#icon-sun') | |
| } | |
| function toggleDark() { | |
| const isDark = document.documentElement.classList.contains('dark') | |
| setTheme(isDark ? 'light' : 'dark') | |
| } | |
| setTheme(getPreferredTheme()) | |
| // Modals | |
| function openSettings() { document.getElementById('settings-modal').classList.add('open') } | |
| function closeSettings() { document.getElementById('settings-modal').classList.remove('open') } | |
| function openHelp() { document.getElementById('help-modal').classList.add('open') } | |
| function closeHelp() { document.getElementById('help-modal').classList.remove('open') } | |
| // Close modals on overlay click | |
| document.querySelectorAll('.modal-overlay').forEach(el => { | |
| el.addEventListener('click', function(e) { | |
| if (e.target === this) this.classList.remove('open') | |
| }) | |
| }) | |
| // Command palette | |
| function openCommandPalette() { | |
| document.getElementById('cmd-palette').classList.add('open') | |
| document.getElementById('cmd-input').focus() | |
| } | |
| function closeCommandPalette() { | |
| document.getElementById('cmd-palette').classList.remove('open') | |
| document.getElementById('cmd-input').blur() | |
| } | |
| document.addEventListener('keydown', function(e) { | |
| if ((e.ctrlKey || e.metaKey) && e.key === 'k') { | |
| e.preventDefault() | |
| const palette = document.getElementById('cmd-palette') | |
| if (palette.classList.contains('open')) closeCommandPalette() | |
| else openCommandPalette() | |
| } | |
| }) | |
| // Close palette on click outside | |
| document.getElementById('cmd-palette')?.addEventListener('click', function(e) { | |
| if (e.target === this) closeCommandPalette() | |
| }) | |
| // Chat | |
| function sendMessage() { | |
| const input = document.getElementById('chat-input') | |
| const text = input.value.trim() | |
| if (!text) return | |
| const messages = document.getElementById('chat-messages') | |
| const userMsg = document.createElement('div') | |
| userMsg.className = 'msg-bubble user' | |
| userMsg.textContent = text | |
| messages.appendChild(userMsg) | |
| input.value = '' | |
| // Show typing indicator | |
| const typing = document.getElementById('typing-indicator') | |
| if (typing) typing.style.display = 'block' | |
| messages.scrollTop = messages.scrollHeight | |
| // Simulate response | |
| setTimeout(() => { | |
| if (typing) typing.style.display = 'none' | |
| const assistantMsg = document.createElement('div') | |
| assistantMsg.className = 'msg-bubble assistant' | |
| const header = document.createElement('div') | |
| header.className = 'flex items-center gap-2 mb-1' | |
| header.innerHTML = '<span class="w-5 h-5 rounded flex items-center justify-center text-[10px] font-bold shrink-0" style="background:var(--v2-icon-icon-accent);color:var(--v2-text-text-inverse)">OC</span><span class="text-[11px]" style="color:var(--v2-text-text-muted)">OpenCode</span>' | |
| const body = document.createElement('div') | |
| body.textContent = "I'm analyzing your request. Let me work through this..." | |
| assistantMsg.appendChild(header) | |
| assistantMsg.appendChild(body) | |
| messages.appendChild(assistantMsg) | |
| messages.scrollTop = messages.scrollHeight | |
| }, 800) | |
| } | |
| // Mode buttons | |
| document.querySelectorAll('.mode-btn').forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| const parent = this.parentElement | |
| if (parent) { | |
| parent.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active')) | |
| } | |
| this.classList.add('active') | |
| }) | |
| }) | |
| console.log('OcDash v0.1 — OpenCode Workspace Dashboard') | |
| </script> | |
| <script> | |
| if (window.__HF_TOKEN__) { | |
| console.log('HF Space configured with token') | |
| } | |
| </script> | |
| </body> | |
| </html> | |