+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/crates/g3-console/web/js/api.js b/crates/g3-console/web/js/api.js
new file mode 100644
index 0000000..bf75569
--- /dev/null
+++ b/crates/g3-console/web/js/api.js
@@ -0,0 +1,80 @@
+// API client for G3 Console
+const API_BASE = '/api';
+
+const api = {
+ // Get all instances
+ async getInstances() {
+ const response = await fetch(`${API_BASE}/instances`);
+ if (!response.ok) throw new Error('Failed to fetch instances');
+ return response.json();
+ },
+
+ // Get single instance details
+ async getInstance(id) {
+ const response = await fetch(`${API_BASE}/instances/${id}`);
+ if (!response.ok) throw new Error('Failed to fetch instance');
+ return response.json();
+ },
+
+ // Get instance logs
+ async getInstanceLogs(id) {
+ const response = await fetch(`${API_BASE}/instances/${id}/logs`);
+ if (!response.ok) throw new Error('Failed to fetch logs');
+ return response.json();
+ },
+
+ // Launch new instance
+ async launchInstance(data) {
+ const response = await fetch(`${API_BASE}/instances/launch`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(data)
+ });
+ if (!response.ok) {
+ // Try to extract error message from response
+ try {
+ const errorData = await response.json();
+ throw new Error(errorData.message || errorData.error || 'Failed to launch instance');
+ } catch (e) {
+ throw new Error(`Failed to launch instance (${response.status})`);
+ }
+ }
+ return response.json();
+ },
+
+ // Kill instance
+ async killInstance(id) {
+ const response = await fetch(`${API_BASE}/instances/${id}/kill`, {
+ method: 'POST'
+ });
+ if (!response.ok) throw new Error('Failed to kill instance');
+ return response.json();
+ },
+
+ // Restart instance
+ async restartInstance(id) {
+ const response = await fetch(`${API_BASE}/instances/${id}/restart`, {
+ method: 'POST'
+ });
+ if (!response.ok) throw new Error('Failed to restart instance');
+ return response.json();
+ },
+
+ // Get console state
+ async getState() {
+ const response = await fetch(`${API_BASE}/state`);
+ if (!response.ok) throw new Error('Failed to fetch state');
+ return response.json();
+ },
+
+ // Save console state
+ async saveState(state) {
+ const response = await fetch(`${API_BASE}/state`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify(state)
+ });
+ if (!response.ok) throw new Error('Failed to save state');
+ return response.json();
+ }
+};
diff --git a/crates/g3-console/web/js/app.js b/crates/g3-console/web/js/app.js
new file mode 100644
index 0000000..cb017d4
--- /dev/null
+++ b/crates/g3-console/web/js/app.js
@@ -0,0 +1,313 @@
+// Main application logic
+
+// Global action handlers
+window.handleKill = async function(id) {
+ if (!confirm('Are you sure you want to kill this instance?')) return;
+
+ // Find the button and show loading state
+ const button = event.target;
+ const originalText = button.textContent;
+ button.disabled = true;
+ button.innerHTML = ' Terminating...';
+
+ try {
+ await api.killInstance(id);
+
+ // Show success state
+ button.innerHTML = '✓ Terminated';
+ button.classList.remove('btn-danger');
+ button.classList.add('btn-secondary');
+
+ // Refresh after a short delay
+ setTimeout(() => {
+ router.handleRoute(router.currentRoute);
+ }, 1000);
+ } catch (error) {
+ // Restore button state on error
+ button.disabled = false;
+ button.textContent = originalText;
+ alert('Failed to kill instance: ' + error.message);
+ }
+};
+
+window.handleRestart = async function(id) {
+ // Find the button and show loading state
+ const button = event.target;
+ const originalText = button.textContent;
+ button.disabled = true;
+ button.innerHTML = ' Restarting...';
+
+ try {
+ await api.restartInstance(id);
+
+ // Show intermediate states
+ button.innerHTML = ' Starting...';
+
+ // Wait a bit then show success
+ setTimeout(() => {
+ button.innerHTML = '✓ Running';
+ button.classList.remove('btn-primary');
+ button.classList.add('btn-success');
+ }, 1500);
+
+ // Refresh current view
+ setTimeout(() => {
+ router.handleRoute(router.currentRoute);
+ }, 2500);
+ } catch (error) {
+ // Restore button state on error
+ button.disabled = false;
+ button.textContent = originalText;
+ alert('Failed to kill instance: ' + error.message);
+ }
+};
+
+// Modal management
+const modal = {
+ element: null,
+
+ init() {
+ this.element = document.getElementById('new-run-modal');
+
+ // Close button
+ document.getElementById('modal-close').addEventListener('click', () => this.close());
+ document.getElementById('cancel-launch').addEventListener('click', () => this.close());
+
+ // Close on overlay click
+ this.element.querySelector('.modal-overlay').addEventListener('click', () => this.close());
+
+ // Form submission
+ document.getElementById('launch-form').addEventListener('submit', (e) => {
+ e.preventDefault();
+ this.handleLaunch();
+ });
+
+ // File browser buttons - use HTML5 file input
+ document.getElementById('browse-workspace').addEventListener('click', () => {
+ this.browseDirectory('workspace');
+ });
+
+ document.getElementById('browse-binary').addEventListener('click', () => {
+ this.browseFile('g3-binary-path');
+ });
+
+ // Provider change updates model options
+ document.getElementById('provider').addEventListener('change', (e) => {
+ this.updateModelOptions(e.target.value);
+ });
+ },
+
+ browseDirectory(inputId) {
+ // Create a hidden file input with directory picker
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.webkitdirectory = true;
+ input.directory = true;
+ input.multiple = false;
+
+ input.onchange = (e) => {
+ const files = e.target.files;
+ if (files.length > 0) {
+ // Get the directory path from the first file
+ const path = files[0].webkitRelativePath.split('/')[0];
+ // In browser context, we get relative path, so we need to construct full path
+ // For now, just use the directory name and let user adjust
+ document.getElementById(inputId).value = path;
+ }
+ };
+
+ input.click();
+ },
+
+ browseFile(inputId) {
+ // Create a hidden file input
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = '*';
+
+ input.onchange = (e) => {
+ const files = e.target.files;
+ if (files.length > 0) {
+ // Get the file name
+ // Note: For security reasons, browsers don't give us the full path
+ // User will need to type the full path manually
+ document.getElementById(inputId).value = files[0].name;
+ }
+ };
+
+ input.click();
+ },
+
+ open() {
+ // Load saved state
+ const form = document.getElementById('launch-form');
+ if (state.lastWorkspace) {
+ form.workspace.value = state.lastWorkspace;
+ }
+ if (state.g3BinaryPath) {
+ form.g3_binary_path.value = state.g3BinaryPath;
+ }
+ form.provider.value = state.lastProvider;
+ this.updateModelOptions(state.lastProvider);
+ form.model.value = state.lastModel;
+
+ this.element.classList.remove('hidden');
+ },
+
+ close() {
+ this.element.classList.add('hidden');
+ },
+
+ updateModelOptions(provider) {
+ const modelSelect = document.getElementById('model');
+ const models = {
+ databricks: [
+ { value: 'databricks-claude-sonnet-4-5', label: 'databricks-claude-sonnet-4-5' },
+ { value: 'databricks-meta-llama-3-1-405b-instruct', label: 'databricks-meta-llama-3-1-405b-instruct' }
+ ],
+ anthropic: [
+ { value: 'claude-3-5-sonnet-20241022', label: 'claude-3-5-sonnet-20241022' },
+ { value: 'claude-3-opus-20240229', label: 'claude-3-opus-20240229' }
+ ],
+ local: [
+ { value: 'local-model', label: 'Local Model' }
+ ]
+ };
+
+ modelSelect.innerHTML = '';
+ for (const model of models[provider] || []) {
+ const option = document.createElement('option');
+ option.value = model.value;
+ option.textContent = model.label;
+ modelSelect.appendChild(option);
+ }
+ },
+
+ async handleLaunch() {
+ const form = document.getElementById('launch-form');
+ const formData = new FormData(form);
+
+ const data = {
+ prompt: formData.get('prompt'),
+ workspace: formData.get('workspace'),
+ provider: formData.get('provider'),
+ model: formData.get('model'),
+ mode: formData.get('mode'),
+ g3_binary_path: formData.get('g3_binary_path') || null
+ };
+
+ try {
+ // Show loading state
+ const submitBtn = form.querySelector('button[type="submit"]');
+ const modalBody = this.element.querySelector('.modal-body');
+ submitBtn.disabled = true;
+ submitBtn.innerHTML = ' Starting g3 instance...';
+
+ const response = await api.launchInstance(data);
+
+ // Show intermediate state
+ submitBtn.innerHTML = ' Waiting for process...';
+
+ // Wait a bit to let the process start
+ await new Promise(resolve => setTimeout(resolve, 1500));
+ submitBtn.innerHTML = '✓ Instance started!';
+
+ // Save state
+ state.updateLaunchDefaults(
+ data.workspace,
+ data.provider,
+ data.model,
+ data.g3_binary_path
+ );
+
+ // Close modal and navigate home
+ this.close();
+ router.navigate('/');
+
+ // Reset form
+ form.reset();
+ submitBtn.disabled = false;
+ submitBtn.textContent = 'Start Instance';
+ } catch (error) {
+ // Display detailed error message in modal
+ const errorDiv = document.createElement('div');
+ errorDiv.className = 'error-message';
+ errorDiv.style.cssText = 'background: #fee; border: 1px solid #fcc; color: #c33; padding: 1rem; margin: 1rem 0; border-radius: 0.5rem;';
+
+ let errorMessage = 'Failed to launch instance';
+ if (error.message) {
+ errorMessage += ': ' + error.message;
+ }
+
+ // Check for specific error types
+ if (error.message && error.message.includes('400')) {
+ errorMessage = 'Invalid configuration. Please check that the g3 binary path exists and is executable, and that the workspace directory is valid.';
+ } else if (error.message && error.message.includes('500')) {
+ errorMessage = 'Server error while launching instance. Check console logs for details.';
+ }
+
+ errorDiv.textContent = errorMessage;
+
+ // Remove any existing error messages
+ const existingError = modalBody.querySelector('.error-message');
+ if (existingError) existingError.remove();
+
+ // Insert error message at the top of modal body
+ modalBody.insertBefore(errorDiv, modalBody.firstChild);
+
+ const submitBtn = form.querySelector('button[type="submit"]');
+ submitBtn.disabled = false;
+ submitBtn.textContent = 'Start Instance';
+ }
+ }
+};
+
+// Theme toggle
+function initTheme() {
+ const themeToggle = document.getElementById('theme-toggle');
+
+ themeToggle.addEventListener('click', () => {
+ const newTheme = state.theme === 'dark' ? 'light' : 'dark';
+ state.setTheme(newTheme);
+ themeToggle.textContent = newTheme === 'dark' ? '🌙' : '☀️';
+ });
+
+ // Set initial theme
+ document.body.className = state.theme;
+ themeToggle.textContent = state.theme === 'dark' ? '🌙' : '☀️';
+}
+
+// Initialize app
+async function init() {
+ // Prevent double initialization
+ if (window.g3Initialized) {
+ return;
+ }
+ window.g3Initialized = true;
+
+ // Load state
+ await state.load();
+
+ // Initialize theme
+ initTheme();
+
+ // Initialize modal
+ modal.init();
+
+ // New Run button
+ document.getElementById('new-run-btn').addEventListener('click', () => {
+ modal.open();
+ });
+
+ // Initialize router
+ router.init();
+}
+
+// Simplified initialization - call exactly once when DOM is ready
+if (document.readyState === 'loading') {
+ // DOM still loading, wait for DOMContentLoaded
+ document.addEventListener('DOMContentLoaded', init, { once: true });
+} else {
+ // DOM already loaded (interactive or complete), init immediately
+ init();
+}
diff --git a/crates/g3-console/web/js/components.js b/crates/g3-console/web/js/components.js
new file mode 100644
index 0000000..75d19ac
--- /dev/null
+++ b/crates/g3-console/web/js/components.js
@@ -0,0 +1,311 @@
+// UI Components for G3 Console
+
+const components = {
+ // Render status badge
+ statusBadge(status) {
+ const colors = {
+ running: 'badge-success',
+ completed: 'badge-success',
+ failed: 'badge-error',
+ idle: 'badge-warning',
+ terminated: 'badge-neutral'
+ };
+ return `${status}`;
+ },
+
+ // Render progress bar
+ progressBar(instance, stats) {
+ const duration = stats.duration_secs;
+ const estimated = duration * 1.5; // Simple estimation
+ const progress = Math.min((duration / estimated) * 100, 100);
+
+ // Check if this is ensemble mode with turn data
+ if (instance.instance_type === 'ensemble' && stats.turns && stats.turns.length > 0) {
+ return this.ensembleProgressBar(stats.turns, duration);
+ }
+
+ return `
+
+ `;
+ },
+
+ // Render multi-segment progress bar for ensemble mode
+ ensembleProgressBar(turns, totalDuration) {
+ const colors = {
+ coach: '#3b82f6',
+ player: '#6b7280',
+ completed: '#10b981',
+ error: '#ef4444'
+ };
+
+ let segments = '';
+ for (const turn of turns) {
+ const percentage = (turn.duration_secs / totalDuration) * 100;
+ const color = colors[turn.agent] || colors.player;
+ const statusColor = turn.status === 'error' ? colors.error : color;
+
+ segments += `
+
+
+ G3 Console
+
+
+
+
+
+
+ `;
+ }
+
+ return `
+
+ `;
+ },
+
+ // Render instance panel
+ instancePanel(instance, stats, latestMessage) {
+ return `
+
+
+ `;
+ },
+
+ // Render loading spinner
+ spinner(message = 'Loading...') {
+ return `
+
+
+
+ ${this.progressBar(instance, stats)}
+
+
+
+
+ ${instance.workspace}
+ ${this.statusBadge(instance.status)} +
+
+
+ ${latestMessage ? `
+
+ ` : ''}
+
+
+ Tokens
+ ${stats.total_tokens.toLocaleString()}
+
+
+ Tool Calls
+ ${stats.tool_calls}
+
+
+ Errors
+ ${stats.errors}
+
+
+ Duration
+ ${Math.round(stats.duration_secs / 60)}m
+
+
+ ${instance.status === 'running' ? `
+
+ ` : ''}
+ ${instance.status === 'terminated' ? `
+
+ ` : ''}
+
+
+
+
+
+ `;
+ },
+
+ // Render error message
+ error(message) {
+ return `
+
+ `;
+ },
+
+ // Render empty state
+ emptyState(message) {
+ return `
+ ${message}
+
+
+ `;
+ },
+
+ // Truncate text
+ truncate(text, length) {
+ if (text.length <= length) return text;
+ return text.substring(0, length) + '...';
+ },
+
+ // Render chat message
+ chatMessage(message, agent = null) {
+ const agentClass = agent === 'coach' ? 'message-coach' : agent === 'player' ? 'message-player' : '';
+ return `
+
+ `;
+ },
+
+ // Render tool call
+ toolCall(toolCall) {
+ const statusIcon = toolCall.success ? '✓' : '✗';
+ const statusClass = toolCall.success ? 'success' : 'error';
+
+ return `
+ ${message}
+
+
+ `;
+ },
+
+ // Render git status section
+ gitStatus(gitStatus) {
+ if (!gitStatus) {
+ return '
+ 🔧 ${toolCall.tool_name}
+
+
+ ${toolCall.execution_time_ms ? `${toolCall.execution_time_ms}ms` : ''}
+ ${statusIcon}
+
+
+
+
+ Parameters:
+
+ ${toolCall.result ? `
+ ${JSON.stringify(toolCall.parameters, null, 2)}
+ Result:
+
+ ` : ''}
+ ${toolCall.error ? `
+ ${JSON.stringify(toolCall.result, null, 2)}
+ Error:
+
+ ` : ''}
+
+ ${this.escapeHtml(toolCall.error)}No git repository detected
'; + } + + return ` +
+
+ `;
+ },
+
+ // Render project files section
+ projectFiles(projectFiles) {
+ if (!projectFiles || (!projectFiles.requirements && !projectFiles.readme && !projectFiles.agents)) {
+ return '
+ 📍 ${gitStatus.branch}
+ ${gitStatus.uncommitted_changes} uncommitted changes
+
+ ${gitStatus.uncommitted_changes > 0 ? `
+
+ ${gitStatus.modified_files.length > 0 ? `
+
+ ` : ''}
+
+ Modified:
+
+ ` : ''}
+ ${gitStatus.added_files.length > 0 ? `
+ -
+ ${gitStatus.modified_files.map(f => `
- ${f} `).join('')} +
+ Added:
+
+ ` : ''}
+ ${gitStatus.deleted_files.length > 0 ? `
+ -
+ ${gitStatus.added_files.map(f => `
- ${f} `).join('')} +
+ Deleted:
+
+ ` : ''}
+ -
+ ${gitStatus.deleted_files.map(f => `
- ${f} `).join('')} +
No project files found
'; + } + + let html = '';
+
+ if (projectFiles.requirements) {
+ html += `
+
';
+ return html;
+ },
+
+ escapeHtml(text) {
+ const div = document.createElement('div');
+ div.textContent = text;
+ return div.innerHTML;
+ }
+};
diff --git a/crates/g3-console/web/js/highlight.min.js b/crates/g3-console/web/js/highlight.min.js
new file mode 100644
index 0000000..5d699ae
--- /dev/null
+++ b/crates/g3-console/web/js/highlight.min.js
@@ -0,0 +1,1213 @@
+/*!
+ Highlight.js v11.9.0 (git: f47103d4f1)
+ (c) 2006-2023 undefined and other contributors
+ License: BSD-3-Clause
+ */
+var hljs=function(){"use strict";function e(n){
+return n instanceof Map?n.clear=n.delete=n.set=()=>{
+throw Error("map is read-only")}:n instanceof Set&&(n.add=n.clear=n.delete=()=>{
+throw Error("set is read-only")
+}),Object.freeze(n),Object.getOwnPropertyNames(n).forEach((t=>{
+const a=n[t],i=typeof a;"object"!==i&&"function"!==i||Object.isFrozen(a)||e(a)
+})),n}class n{constructor(e){
+void 0===e.data&&(e.data={}),this.data=e.data,this.isMatchIgnored=!1}
+ignoreMatch(){this.isMatchIgnored=!0}}function t(e){
+return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")
+}function a(e,...n){const t=Object.create(null);for(const n in e)t[n]=e[n]
+;return n.forEach((e=>{for(const n in e)t[n]=e[n]})),t}const i=e=>!!e.scope
+;class r{constructor(e,n){
+this.buffer="",this.classPrefix=n.classPrefix,e.walk(this)}addText(e){
+this.buffer+=t(e)}openNode(e){if(!i(e))return;const n=((e,{prefix:n})=>{
+if(e.startsWith("language:"))return e.replace("language:","language-")
+;if(e.includes(".")){const t=e.split(".")
+;return[`${n}${t.shift()}`,...t.map(((e,n)=>`${e}${"_".repeat(n+1)}`))].join(" ")
+}return`${n}${e}`})(e.scope,{prefix:this.classPrefix});this.span(n)}
+closeNode(e){i(e)&&(this.buffer+="")}value(){return this.buffer}span(e){
+this.buffer+=``}}const s=(e={})=>{const n={children:[]}
+;return Object.assign(n,e),n};class o{constructor(){
+this.rootNode=s(),this.stack=[this.rootNode]}get top(){
+return this.stack[this.stack.length-1]}get root(){return this.rootNode}add(e){
+this.top.children.push(e)}openNode(e){const n=s({scope:e})
+;this.add(n),this.stack.push(n)}closeNode(){
+if(this.stack.length>1)return this.stack.pop()}closeAllNodes(){
+for(;this.closeNode(););}toJSON(){return JSON.stringify(this.rootNode,null,4)}
+walk(e){return this.constructor._walk(e,this.rootNode)}static _walk(e,n){
+return"string"==typeof n?e.addText(n):n.children&&(e.openNode(n),
+n.children.forEach((n=>this._walk(e,n))),e.closeNode(n)),e}static _collapse(e){
+"string"!=typeof e&&e.children&&(e.children.every((e=>"string"==typeof e))?e.children=[e.children.join("")]:e.children.forEach((e=>{
+o._collapse(e)})))}}class l extends o{constructor(e){super(),this.options=e}
+addText(e){""!==e&&this.add(e)}startScope(e){this.openNode(e)}endScope(){
+this.closeNode()}__addSublanguage(e,n){const t=e.root
+;n&&(t.scope="language:"+n),this.add(t)}toHTML(){
+return new r(this,this.options).value()}finalize(){
+return this.closeAllNodes(),!0}}function c(e){
+return e?"string"==typeof e?e:e.source:null}function d(e){return b("(?=",e,")")}
+function g(e){return b("(?:",e,")*")}function u(e){return b("(?:",e,")?")}
+function b(...e){return e.map((e=>c(e))).join("")}function m(...e){const n=(e=>{
+const n=e[e.length-1]
+;return"object"==typeof n&&n.constructor===Object?(e.splice(e.length-1,1),n):{}
+})(e);return"("+(n.capture?"":"?:")+e.map((e=>c(e))).join("|")+")"}
+function p(e){return RegExp(e.toString()+"|").exec("").length-1}
+const _=/\[(?:[^\\\]]|\\.)*\]|\(\??|\\([1-9][0-9]*)|\\./
+;function h(e,{joinWith:n}){let t=0;return e.map((e=>{t+=1;const n=t
+;let a=c(e),i="";for(;a.length>0;){const e=_.exec(a);if(!e){i+=a;break}
+i+=a.substring(0,e.index),
+a=a.substring(e.index+e[0].length),"\\"===e[0][0]&&e[1]?i+="\\"+(Number(e[1])+n):(i+=e[0],
+"("===e[0]&&t++)}return i})).map((e=>`(${e})`)).join(n)}
+const f="[a-zA-Z]\\w*",E="[a-zA-Z_]\\w*",y="\\b\\d+(\\.\\d+)?",N="(-?)(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)",w="\\b(0b[01]+)",v={
+begin:"\\\\[\\s\\S]",relevance:0},O={scope:"string",begin:"'",end:"'",
+illegal:"\\n",contains:[v]},k={scope:"string",begin:'"',end:'"',illegal:"\\n",
+contains:[v]},x=(e,n,t={})=>{const i=a({scope:"comment",begin:e,end:n,
+contains:[]},t);i.contains.push({scope:"doctag",
+begin:"[ ]*(?=(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):)",
+end:/(TODO|FIXME|NOTE|BUG|OPTIMIZE|HACK|XXX):/,excludeBegin:!0,relevance:0})
+;const r=m("I","a","is","so","us","to","at","if","in","it","on",/[A-Za-z]+['](d|ve|re|ll|t|s|n)/,/[A-Za-z]+[-][a-z]+/,/[A-Za-z][a-z]{2,}/)
+;return i.contains.push({begin:b(/[ ]+/,"(",r,/[.]?[:]?([.][ ]|[ ])/,"){3}")}),i
+},M=x("//","$"),S=x("/\\*","\\*/"),A=x("#","$");var C=Object.freeze({
+__proto__:null,APOS_STRING_MODE:O,BACKSLASH_ESCAPE:v,BINARY_NUMBER_MODE:{
+scope:"number",begin:w,relevance:0},BINARY_NUMBER_RE:w,COMMENT:x,
+C_BLOCK_COMMENT_MODE:S,C_LINE_COMMENT_MODE:M,C_NUMBER_MODE:{scope:"number",
+begin:N,relevance:0},C_NUMBER_RE:N,END_SAME_AS_BEGIN:e=>Object.assign(e,{
+"on:begin":(e,n)=>{n.data._beginMatch=e[1]},"on:end":(e,n)=>{
+n.data._beginMatch!==e[1]&&n.ignoreMatch()}}),HASH_COMMENT_MODE:A,IDENT_RE:f,
+MATCH_NOTHING_RE:/\b\B/,METHOD_GUARD:{begin:"\\.\\s*"+E,relevance:0},
+NUMBER_MODE:{scope:"number",begin:y,relevance:0},NUMBER_RE:y,
+PHRASAL_WORDS_MODE:{
+begin:/\b(a|an|the|are|I'm|isn't|don't|doesn't|won't|but|just|should|pretty|simply|enough|gonna|going|wtf|so|such|will|you|your|they|like|more)\b/
+},QUOTE_STRING_MODE:k,REGEXP_MODE:{scope:"regexp",begin:/\/(?=[^/\n]*\/)/,
+end:/\/[gimuy]*/,contains:[v,{begin:/\[/,end:/\]/,relevance:0,contains:[v]}]},
+RE_STARTERS_RE:"!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~",
+SHEBANG:(e={})=>{const n=/^#![ ]*\//
+;return e.binary&&(e.begin=b(n,/.*\b/,e.binary,/\b.*/)),a({scope:"meta",begin:n,
+end:/$/,relevance:0,"on:begin":(e,n)=>{0!==e.index&&n.ignoreMatch()}},e)},
+TITLE_MODE:{scope:"title",begin:f,relevance:0},UNDERSCORE_IDENT_RE:E,
+UNDERSCORE_TITLE_MODE:{scope:"title",begin:E,relevance:0}});function T(e,n){
+"."===e.input[e.index-1]&&n.ignoreMatch()}function R(e,n){
+void 0!==e.className&&(e.scope=e.className,delete e.className)}function D(e,n){
+n&&e.beginKeywords&&(e.begin="\\b("+e.beginKeywords.split(" ").join("|")+")(?!\\.)(?=\\b|\\s)",
+e.__beforeBegin=T,e.keywords=e.keywords||e.beginKeywords,delete e.beginKeywords,
+void 0===e.relevance&&(e.relevance=0))}function I(e,n){
+Array.isArray(e.illegal)&&(e.illegal=m(...e.illegal))}function L(e,n){
+if(e.match){
+if(e.begin||e.end)throw Error("begin & end are not supported with match")
+;e.begin=e.match,delete e.match}}function B(e,n){
+void 0===e.relevance&&(e.relevance=1)}const $=(e,n)=>{if(!e.beforeMatch)return
+;if(e.starts)throw Error("beforeMatch cannot be used with starts")
+;const t=Object.assign({},e);Object.keys(e).forEach((n=>{delete e[n]
+})),e.keywords=t.keywords,e.begin=b(t.beforeMatch,d(t.begin)),e.starts={
+relevance:0,contains:[Object.assign(t,{endsParent:!0})]
+},e.relevance=0,delete t.beforeMatch
+},z=["of","and","for","in","not","or","if","then","parent","list","value"],F="keyword"
+;function U(e,n,t=F){const a=Object.create(null)
+;return"string"==typeof e?i(t,e.split(" ")):Array.isArray(e)?i(t,e):Object.keys(e).forEach((t=>{
+Object.assign(a,U(e[t],n,t))})),a;function i(e,t){
+n&&(t=t.map((e=>e.toLowerCase()))),t.forEach((n=>{const t=n.split("|")
+;a[t[0]]=[e,j(t[0],t[1])]}))}}function j(e,n){
+return n?Number(n):(e=>z.includes(e.toLowerCase()))(e)?0:1}const P={},K=e=>{
+console.error(e)},H=(e,...n)=>{console.log("WARN: "+e,...n)},q=(e,n)=>{
+P[`${e}/${n}`]||(console.log(`Deprecated as of ${e}. ${n}`),P[`${e}/${n}`]=!0)
+},G=Error();function Z(e,n,{key:t}){let a=0;const i=e[t],r={},s={}
+;for(let e=1;e<=n.length;e++)s[e+a]=i[e],r[e+a]=!0,a+=p(n[e-1])
+;e[t]=s,e[t]._emit=r,e[t]._multi=!0}function W(e){(e=>{
+e.scope&&"object"==typeof e.scope&&null!==e.scope&&(e.beginScope=e.scope,
+delete e.scope)})(e),"string"==typeof e.beginScope&&(e.beginScope={
+_wrap:e.beginScope}),"string"==typeof e.endScope&&(e.endScope={_wrap:e.endScope
+}),(e=>{if(Array.isArray(e.begin)){
+if(e.skip||e.excludeBegin||e.returnBegin)throw K("skip, excludeBegin, returnBegin not compatible with beginScope: {}"),
+G
+;if("object"!=typeof e.beginScope||null===e.beginScope)throw K("beginScope must be object"),
+G;Z(e,e.begin,{key:"beginScope"}),e.begin=h(e.begin,{joinWith:""})}})(e),(e=>{
+if(Array.isArray(e.end)){
+if(e.skip||e.excludeEnd||e.returnEnd)throw K("skip, excludeEnd, returnEnd not compatible with endScope: {}"),
+G
+;if("object"!=typeof e.endScope||null===e.endScope)throw K("endScope must be object"),
+G;Z(e,e.end,{key:"endScope"}),e.end=h(e.end,{joinWith:""})}})(e)}function Q(e){
+function n(n,t){
+return RegExp(c(n),"m"+(e.case_insensitive?"i":"")+(e.unicodeRegex?"u":"")+(t?"g":""))
+}class t{constructor(){
+this.matchIndexes={},this.regexes=[],this.matchAt=1,this.position=0}
+addRule(e,n){
+n.position=this.position++,this.matchIndexes[this.matchAt]=n,this.regexes.push([n,e]),
+this.matchAt+=p(e)+1}compile(){0===this.regexes.length&&(this.exec=()=>null)
+;const e=this.regexes.map((e=>e[1]));this.matcherRe=n(h(e,{joinWith:"|"
+}),!0),this.lastIndex=0}exec(e){this.matcherRe.lastIndex=this.lastIndex
+;const n=this.matcherRe.exec(e);if(!n)return null
+;const t=n.findIndex(((e,n)=>n>0&&void 0!==e)),a=this.matchIndexes[t]
+;return n.splice(0,t),Object.assign(n,a)}}class i{constructor(){
+this.rules=[],this.multiRegexes=[],
+this.count=0,this.lastIndex=0,this.regexIndex=0}getMatcher(e){
+if(this.multiRegexes[e])return this.multiRegexes[e];const n=new t
+;return this.rules.slice(e).forEach((([e,t])=>n.addRule(e,t))),
+n.compile(),this.multiRegexes[e]=n,n}resumingScanAtSamePosition(){
+return 0!==this.regexIndex}considerAll(){this.regexIndex=0}addRule(e,n){
+this.rules.push([e,n]),"begin"===n.type&&this.count++}exec(e){
+const n=this.getMatcher(this.regexIndex);n.lastIndex=this.lastIndex
+;let t=n.exec(e)
+;if(this.resumingScanAtSamePosition())if(t&&t.index===this.lastIndex);else{
+const n=this.getMatcher(0);n.lastIndex=this.lastIndex+1,t=n.exec(e)}
+return t&&(this.regexIndex+=t.position+1,
+this.regexIndex===this.count&&this.considerAll()),t}}
+if(e.compilerExtensions||(e.compilerExtensions=[]),
+e.contains&&e.contains.includes("self"))throw Error("ERR: contains `self` is not supported at the top-level of a language. See documentation.")
+;return e.classNameAliases=a(e.classNameAliases||{}),function t(r,s){const o=r
+;if(r.isCompiled)return o
+;[R,L,W,$].forEach((e=>e(r,s))),e.compilerExtensions.forEach((e=>e(r,s))),
+r.__beforeBegin=null,[D,I,B].forEach((e=>e(r,s))),r.isCompiled=!0;let l=null
+;return"object"==typeof r.keywords&&r.keywords.$pattern&&(r.keywords=Object.assign({},r.keywords),
+l=r.keywords.$pattern,
+delete r.keywords.$pattern),l=l||/\w+/,r.keywords&&(r.keywords=U(r.keywords,e.case_insensitive)),
+o.keywordPatternRe=n(l,!0),
+s&&(r.begin||(r.begin=/\B|\b/),o.beginRe=n(o.begin),r.end||r.endsWithParent||(r.end=/\B|\b/),
+r.end&&(o.endRe=n(o.end)),
+o.terminatorEnd=c(o.end)||"",r.endsWithParent&&s.terminatorEnd&&(o.terminatorEnd+=(r.end?"|":"")+s.terminatorEnd)),
+r.illegal&&(o.illegalRe=n(r.illegal)),
+r.contains||(r.contains=[]),r.contains=[].concat(...r.contains.map((e=>(e=>(e.variants&&!e.cachedVariants&&(e.cachedVariants=e.variants.map((n=>a(e,{
+variants:null},n)))),e.cachedVariants?e.cachedVariants:X(e)?a(e,{
+starts:e.starts?a(e.starts):null
+}):Object.isFrozen(e)?a(e):e))("self"===e?r:e)))),r.contains.forEach((e=>{t(e,o)
+})),r.starts&&t(r.starts,s),o.matcher=(e=>{const n=new i
+;return e.contains.forEach((e=>n.addRule(e.begin,{rule:e,type:"begin"
+}))),e.terminatorEnd&&n.addRule(e.terminatorEnd,{type:"end"
+}),e.illegal&&n.addRule(e.illegal,{type:"illegal"}),n})(o),o}(e)}function X(e){
+return!!e&&(e.endsWithParent||X(e.starts))}class V extends Error{
+constructor(e,n){super(e),this.name="HTMLInjectionError",this.html=n}}
+const J=t,Y=a,ee=Symbol("nomatch"),ne=t=>{
+const a=Object.create(null),i=Object.create(null),r=[];let s=!0
+;const o="Could not find the language '{}', did you forget to load/include a language module?",c={
+disableAutodetect:!0,name:"Plain text",contains:[]};let p={
+ignoreUnescapedHTML:!1,throwUnescapedHTML:!1,noHighlightRe:/^(no-?highlight)$/i,
+languageDetectRe:/\blang(?:uage)?-([\w-]+)\b/i,classPrefix:"hljs-",
+cssSelector:"pre code",languages:null,__emitter:l};function _(e){
+return p.noHighlightRe.test(e)}function h(e,n,t){let a="",i=""
+;"object"==typeof n?(a=e,
+t=n.ignoreIllegals,i=n.language):(q("10.7.0","highlight(lang, code, ...args) has been deprecated."),
+q("10.7.0","Please use highlight(code, options) instead.\nhttps://github.com/highlightjs/highlight.js/issues/2277"),
+i=e,a=n),void 0===t&&(t=!0);const r={code:a,language:i};x("before:highlight",r)
+;const s=r.result?r.result:f(r.language,r.code,t)
+;return s.code=r.code,x("after:highlight",s),s}function f(e,t,i,r){
+const l=Object.create(null);function c(){if(!x.keywords)return void S.addText(A)
+;let e=0;x.keywordPatternRe.lastIndex=0;let n=x.keywordPatternRe.exec(A),t=""
+;for(;n;){t+=A.substring(e,n.index)
+;const i=w.case_insensitive?n[0].toLowerCase():n[0],r=(a=i,x.keywords[a]);if(r){
+const[e,a]=r
+;if(S.addText(t),t="",l[i]=(l[i]||0)+1,l[i]<=7&&(C+=a),e.startsWith("_"))t+=n[0];else{
+const t=w.classNameAliases[e]||e;g(n[0],t)}}else t+=n[0]
+;e=x.keywordPatternRe.lastIndex,n=x.keywordPatternRe.exec(A)}var a
+;t+=A.substring(e),S.addText(t)}function d(){null!=x.subLanguage?(()=>{
+if(""===A)return;let e=null;if("string"==typeof x.subLanguage){
+if(!a[x.subLanguage])return void S.addText(A)
+;e=f(x.subLanguage,A,!0,M[x.subLanguage]),M[x.subLanguage]=e._top
+}else e=E(A,x.subLanguage.length?x.subLanguage:null)
+;x.relevance>0&&(C+=e.relevance),S.__addSublanguage(e._emitter,e.language)
+})():c(),A=""}function g(e,n){
+""!==e&&(S.startScope(n),S.addText(e),S.endScope())}function u(e,n){let t=1
+;const a=n.length-1;for(;t<=a;){if(!e._emit[t]){t++;continue}
+const a=w.classNameAliases[e[t]]||e[t],i=n[t];a?g(i,a):(A=i,c(),A=""),t++}}
+function b(e,n){
+return e.scope&&"string"==typeof e.scope&&S.openNode(w.classNameAliases[e.scope]||e.scope),
+e.beginScope&&(e.beginScope._wrap?(g(A,w.classNameAliases[e.beginScope._wrap]||e.beginScope._wrap),
+A=""):e.beginScope._multi&&(u(e.beginScope,n),A="")),x=Object.create(e,{parent:{
+value:x}}),x}function m(e,t,a){let i=((e,n)=>{const t=e&&e.exec(n)
+;return t&&0===t.index})(e.endRe,a);if(i){if(e["on:end"]){const a=new n(e)
+;e["on:end"](t,a),a.isMatchIgnored&&(i=!1)}if(i){
+for(;e.endsParent&&e.parent;)e=e.parent;return e}}
+if(e.endsWithParent)return m(e.parent,t,a)}function _(e){
+return 0===x.matcher.regexIndex?(A+=e[0],1):(D=!0,0)}function h(e){
+const n=e[0],a=t.substring(e.index),i=m(x,e,a);if(!i)return ee;const r=x
+;x.endScope&&x.endScope._wrap?(d(),
+g(n,x.endScope._wrap)):x.endScope&&x.endScope._multi?(d(),
+u(x.endScope,e)):r.skip?A+=n:(r.returnEnd||r.excludeEnd||(A+=n),
+d(),r.excludeEnd&&(A=n));do{
+x.scope&&S.closeNode(),x.skip||x.subLanguage||(C+=x.relevance),x=x.parent
+}while(x!==i.parent);return i.starts&&b(i.starts,e),r.returnEnd?0:n.length}
+let y={};function N(a,r){const o=r&&r[0];if(A+=a,null==o)return d(),0
+;if("begin"===y.type&&"end"===r.type&&y.index===r.index&&""===o){
+if(A+=t.slice(r.index,r.index+1),!s){const n=Error(`0 width match regex (${e})`)
+;throw n.languageName=e,n.badRule=y.rule,n}return 1}
+if(y=r,"begin"===r.type)return(e=>{
+const t=e[0],a=e.rule,i=new n(a),r=[a.__beforeBegin,a["on:begin"]]
+;for(const n of r)if(n&&(n(e,i),i.isMatchIgnored))return _(t)
+;return a.skip?A+=t:(a.excludeBegin&&(A+=t),
+d(),a.returnBegin||a.excludeBegin||(A=t)),b(a,e),a.returnBegin?0:t.length})(r)
+;if("illegal"===r.type&&!i){
+const e=Error('Illegal lexeme "'+o+'" for mode "'+(x.scope||"
+
+ `;
+ }
+
+ if (projectFiles.readme) {
+ html += `
+
+ 📄 requirements.md
+ ▼
+
+
+
+ ${this.escapeHtml(projectFiles.requirements)}
+
+ `;
+ }
+
+ if (projectFiles.agents) {
+ html += `
+
+ 📄 README.md
+ ▼
+
+
+
+ ${this.escapeHtml(projectFiles.readme)}
+
+ `;
+ }
+
+ html += '
+ 📄 AGENTS.md
+ ▼
+
+
+
+ ${this.escapeHtml(projectFiles.agents)}'+(n?e:c(e,!0))+""+(n?e:c(e,!0))+"\n${e}\n`}html(e,t){return e}heading(e,t,n){return`
\n"}list(e,t,n){const s=t?"ol":"ul";return"<"+s+(t&&1!==n?' start="'+n+'"':"")+">\n"+e+"\n"}listitem(e,t,n){return`
${e}
\n`}table(e,t){return t&&(t=`${t}`),"${e}`}br(){return""}del(e){return`
An error occurred:
"+c(n.message+"",!0)+"";return t?Promise.resolve(e):e}if(t)return Promise.reject(n);throw n}}}const ae=new oe;function ce(e,t){return ae.parse(e,t)}ce.options=ce.setOptions=function(e){return ae.setOptions(e),ce.defaults=ae.defaults,n(ce.defaults),ce},ce.getDefaults=t,ce.defaults=e.defaults,ce.use=function(...e){return ae.use(...e),ce.defaults=ae.defaults,n(ce.defaults),ce},ce.walkTokens=function(e,t){return ae.walkTokens(e,t)},ce.parseInline=ae.parseInline,ce.Parser=ie,ce.parser=ie.parse,ce.Renderer=se,ce.TextRenderer=re,ce.Lexer=ne,ce.lexer=ne.lex,ce.Tokenizer=w,ce.Hooks=le,ce.parse=ce;const he=ce.options,pe=ce.setOptions,ue=ce.use,ke=ce.walkTokens,ge=ce.parseInline,fe=ce,de=ie.parse,xe=ne.lex;e.Hooks=le,e.Lexer=ne,e.Marked=oe,e.Parser=ie,e.Renderer=se,e.TextRenderer=re,e.Tokenizer=w,e.getDefaults=t,e.lexer=xe,e.marked=ce,e.options=he,e.parse=fe,e.parseInline=ge,e.parser=de,e.setOptions=pe,e.use=ue,e.walkTokens=ke})); diff --git a/crates/g3-console/web/js/router.js b/crates/g3-console/web/js/router.js new file mode 100644 index 0000000..a59eb5d --- /dev/null +++ b/crates/g3-console/web/js/router.js @@ -0,0 +1,167 @@ +// Simple client-side router +const router = { + currentRoute: '/', + + init() { + // Handle browser back/forward + window.addEventListener('popstate', () => { + this.handleRoute(window.location.pathname); + }); + + // Handle initial route + this.handleRoute(window.location.pathname); + }, + + navigate(path) { + window.history.pushState({}, '', path); + this.handleRoute(path); + }, + + async handleRoute(path) { + this.currentRoute = path; + const container = document.getElementById('page-container'); + + if (path === '/' || path === '') { + await this.renderHome(container); + } else if (path.startsWith('/instance/')) { + const id = path.split('/')[2]; + await this.renderDetail(container, id); + } else { + container.innerHTML = components.error('Page not found'); + } + }, + + async renderHome(container) { + container.innerHTML = components.spinner('Loading instances...'); + + try { + const instances = await api.getInstances(); + + if (instances.length === 0) { + container.innerHTML = components.emptyState( + 'No running instances. Click "+ New Run" to start one.' + ); + return; + } + + let html = '
';
+ for (const instance of instances) {
+ // Use stats from API response
+ const stats = instance.stats || { total_tokens: 0, tool_calls: 0, errors: 0, duration_secs: 0 };
+ html += components.instancePanel(instance, stats, instance.latest_message);
+ }
+ html += '
';
+
+ container.innerHTML = html;
+
+ // Auto-refresh every 5 seconds
+ setTimeout(() => {
+ if (this.currentRoute === '/') {
+ this.renderHome(container);
+ }
+ }, 5000);
+ } catch (error) {
+ container.innerHTML = components.error(error.message);
+ }
+ },
+
+ async renderDetail(container, id) {
+ container.innerHTML = components.spinner('Loading instance details...');
+
+ try {
+ const instance = await api.getInstance(id);
+ const logs = await api.getInstanceLogs(id);
+
+ // Build detail view HTML
+ let html = `
+
+
+
+ `;
+
+ container.innerHTML = html;
+
+ // Apply syntax highlighting
+ document.querySelectorAll('pre code').forEach((block) => {
+ hljs.highlightElement(block);
+ });
+
+ // Auto-refresh every 3 seconds
+ setTimeout(() => {
+ if (this.currentRoute === `/instance/${id}`) {
+ this.renderDetail(container, id);
+ }
+ }, 3000);
+ } catch (error) {
+ container.innerHTML = components.error(error.message);
+ }
+ }
+};
diff --git a/crates/g3-console/web/js/state.js b/crates/g3-console/web/js/state.js
new file mode 100644
index 0000000..14cfc04
--- /dev/null
+++ b/crates/g3-console/web/js/state.js
@@ -0,0 +1,51 @@
+// State management for G3 Console
+const state = {
+ theme: 'dark',
+ lastWorkspace: null,
+ g3BinaryPath: null,
+ lastProvider: 'databricks',
+ lastModel: 'databricks-claude-sonnet-4-5',
+
+ async load() {
+ try {
+ const data = await api.getState();
+ this.theme = data.theme || 'dark';
+ this.lastWorkspace = data.last_workspace;
+ this.g3BinaryPath = data.g3_binary_path;
+ this.lastProvider = data.last_provider || 'databricks';
+ this.lastModel = data.last_model || 'databricks-claude-sonnet-4-5';
+ return data;
+ } catch (error) {
+ console.error('Failed to load state:', error);
+ return null;
+ }
+ },
+
+ async save() {
+ try {
+ await api.saveState({
+ theme: this.theme,
+ last_workspace: this.lastWorkspace,
+ g3_binary_path: this.g3BinaryPath,
+ last_provider: this.lastProvider,
+ last_model: this.lastModel
+ });
+ } catch (error) {
+ console.error('Failed to save state:', error);
+ }
+ },
+
+ setTheme(theme) {
+ this.theme = theme;
+ document.body.className = theme;
+ this.save();
+ },
+
+ updateLaunchDefaults(workspace, provider, model, binaryPath) {
+ this.lastWorkspace = workspace;
+ this.lastProvider = provider;
+ this.lastModel = model;
+ if (binaryPath) this.g3BinaryPath = binaryPath;
+ this.save();
+ }
+};
diff --git a/crates/g3-console/web/public/index.html b/crates/g3-console/web/public/index.html
new file mode 100644
index 0000000..5670b5e
--- /dev/null
+++ b/crates/g3-console/web/public/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+ ${instance.workspace}
+ ${components.statusBadge(instance.status)} +
+
+
+
+
+ Tokens
+ ${(instance.stats?.total_tokens || 0).toLocaleString()}
+
+
+ Tool Calls
+ ${instance.stats?.tool_calls || 0}
+
+
+ Errors
+ ${instance.stats?.errors || 0}
+
+
+ Duration
+ ${Math.round((instance.stats?.duration_secs || 0) / 60)}m
+
+
+
+ Git Status
+ ${components.gitStatus(instance.git_status)} +
+
+
+ Project Files
+ ${components.projectFiles(instance.project_files)} +
+
+ Tool Calls
+
+ `;
+
+ // Render tool calls
+ if (logs && logs.tool_calls && logs.tool_calls.length > 0) {
+ for (const toolCall of logs.tool_calls) {
+ html += components.toolCall(toolCall);
+ }
+ } else {
+ html += '
+
+ No tool calls yet
'; + } + + html += ` +Chat History
+ +
+
+
+
+
+
+
+
+
+
+ G3 Console
+ +
+
+ )
+ }
+
+ React.useEffect(() => {
+ // Highlight code blocks after render
+ document.querySelectorAll('pre code').forEach((block) => {
+ hljs.highlightElement(block)
+ })
+ }, [messages])
+
+ if (messages.length === 0 && toolCalls.length === 0) {
+ return (
+
+
+ {message.agent.toUpperCase()}
+
+
+ {new Date(message.timestamp).toLocaleTimeString()}
+
+
+
+
+ No messages yet
+
+ )
+ }
+
+ return (
+
+ {messages.map(renderMessage)}
+
+ {toolCalls.length > 0 && (
+
+ )
+}
+
+export default ChatView
diff --git a/crates/g3-console/web/src/components/GitStatus.jsx b/crates/g3-console/web/src/components/GitStatus.jsx
new file mode 100644
index 0000000..9f756f1
--- /dev/null
+++ b/crates/g3-console/web/src/components/GitStatus.jsx
@@ -0,0 +1,62 @@
+import React from 'react'
+
+function GitStatus({ status }) {
+ return (
+
+
+ )}
+ + Tool Calls +
+ {toolCalls.map((toolCall) => ( +
+
+ )
+}
+
+export default GitStatus
diff --git a/crates/g3-console/web/src/components/InstancePanel.jsx b/crates/g3-console/web/src/components/InstancePanel.jsx
new file mode 100644
index 0000000..597bd48
--- /dev/null
+++ b/crates/g3-console/web/src/components/InstancePanel.jsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import StatusBadge from './StatusBadge'
+import ProgressBar from './ProgressBar'
+
+function InstancePanel({ instance, onClick, onKill, onRestart }) {
+ const { instance: inst, stats, latest_message } = instance
+
+ const handleKill = (e) => {
+ e.stopPropagation()
+ if (window.confirm('Are you sure you want to kill this instance?')) {
+ onKill()
+ }
+ }
+
+ const handleRestart = (e) => {
+ e.stopPropagation()
+ onRestart()
+ }
+
+ return (
+ Git Status
+
+
+
+ Branch:
+ {status.branch}
+
+
+ Uncommitted changes:
+
+ {status.uncommitted_changes}
+
+
+
+ {status.modified_files.length > 0 && (
+
+
+ )}
+
+ {status.added_files.length > 0 && (
+
+ Modified ({status.modified_files.length})
+
+ -
+ {status.modified_files.map((file, i) => (
+
- • {file} + ))} +
+
+ )}
+
+ {status.deleted_files.length > 0 && (
+
+ Added ({status.added_files.length})
+
+ -
+ {status.added_files.map((file, i) => (
+
- • {file} + ))} +
+
+ )}
+
+ Deleted ({status.deleted_files.length})
+
+ -
+ {status.deleted_files.map((file, i) => (
+
- • {file} + ))} +
+
+ )
+}
+
+export default InstancePanel
diff --git a/crates/g3-console/web/src/components/NewRunModal.jsx b/crates/g3-console/web/src/components/NewRunModal.jsx
new file mode 100644
index 0000000..0546281
--- /dev/null
+++ b/crates/g3-console/web/src/components/NewRunModal.jsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react'
+
+function NewRunModal({ onClose, onLaunch }) {
+ const [prompt, setPrompt] = useState('')
+ const [workspace, setWorkspace] = useState('')
+ const [provider, setProvider] = useState('databricks')
+ const [model, setModel] = useState('databricks-claude-sonnet-4-5')
+ const [mode, setMode] = useState('single')
+ const [g3BinaryPath, setG3BinaryPath] = useState('')
+ const [loading, setLoading] = useState(false)
+
+ const handleSubmit = async (e) => {
+ e.preventDefault()
+ setLoading(true)
+
+ const request = {
+ prompt,
+ workspace,
+ provider,
+ model,
+ mode,
+ g3_binary_path: g3BinaryPath || null,
+ }
+
+ await onLaunch(request)
+ setLoading(false)
+ }
+
+ const isValid = prompt.trim() && workspace.trim()
+
+ return (
+
+
+
+
+
+
+
+ + {inst.workspace.split('/').pop() || 'Unknown'} +
+
+ PID: {inst.pid} | Started: {new Date(inst.start_time).toLocaleTimeString()}
+
+
+ {inst.status === 'running' && (
+
+ )}
+ {inst.status === 'terminated' && (
+
+ )}
+
+
+
+
+ {latest_message && (
+
+
+ Tokens
+
+ {stats.total_tokens.toLocaleString()}
+
+
+
+ Tool Calls
+
+ {stats.tool_calls}
+
+
+
+ Errors
+
+ {stats.errors}
+
+
+ Latest: {latest_message}
+
+ )}
+
+
+ {inst.workspace}
+
+
+
+