alex/g3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small style

Browse Source
This commit is contained in:
Dhanji Prasanna
2025-11-07 10:56:19 +11:00
parent 1f12ff6ca0
commit f8906ef62b
2 changed files with 82 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
crates/g3-console/web/js/router.js
View File

@@ -84,8 +84,9 @@ const router = {
this.renderInProgress = true; this.renderInProgress = true;
try { try {
console.log('[Router] Showing spinner'); // Check if we already have a container for instances
container.innerHTML = components.spinner('Loading instances...'); let instancesList = container.querySelector('.instances-list');
const isInitialLoad = !instancesList;
console.log('[Router] Fetching instances from API'); console.log('[Router] Fetching instances from API');
const instances = await api.getInstances(); const instances = await api.getInstances();
@@ -97,23 +98,23 @@ const router = {
return; return;
} }
// Check if we already have a container for instances
let instancesList = container.querySelector('.instances-list');
const isInitialLoad = !instancesList;
if (isInitialLoad) {
instancesList = document.createElement('div');
instancesList.className = 'instances-list';
}
if (instances.length === 0) { if (instances.length === 0) {
console.log('[Router] No instances, showing empty state'); console.log('[Router] No instances, showing empty state');
container.innerHTML = components.emptyState( // Check if we already have empty state
'No running instances. Click "+ New Run" to start one.' if (!container.querySelector('.empty-state')) {
); container.innerHTML = components.emptyState(
'No running instances. Click "+ New Run" to start one.'
);
}
} else { } else {
console.log('[Router] Building HTML for', instances.length, 'instances'); console.log('[Router] Building HTML for', instances.length, 'instances');
if (isInitialLoad) {
instancesList = document.createElement('div');
instancesList.className = 'instances-list';
}
// Build a map of existing panels for efficient lookup // Build a map of existing panels for efficient lookup
const existingPanels = new Map(); const existingPanels = new Map();
if (!isInitialLoad) { if (!isInitialLoad) {
@@ -133,7 +134,7 @@ const router = {
const existingPanel = existingPanels.get(instance.id); const existingPanel = existingPanels.get(instance.id);
if (existingPanel) { if (existingPanel) {
// Update existing panel in-place // Update existing panel in-place by replacing inner content
const tempDiv = document.createElement('div'); const tempDiv = document.createElement('div');
tempDiv.innerHTML = newHtml; tempDiv.innerHTML = newHtml;
const newPanel = tempDiv.firstElementChild; const newPanel = tempDiv.firstElementChild;
@@ -154,7 +155,10 @@ const router = {
}); });
if (isInitialLoad) { if (isInitialLoad) {
container.innerHTML = ''; // Only clear if container doesn't already have instances-list
if (container.firstChild && container.firstChild !== instancesList) {
container.innerHTML = '';
}
container.appendChild(instancesList); container.appendChild(instancesList);
} }
@@ -171,7 +175,12 @@ const router = {
} }
} catch (error) { } catch (error) {
console.error('[Router] Error in renderHome:', error); console.error('[Router] Error in renderHome:', error);
container.innerHTML = components.error('Failed to load instances: ' + error.message); // Don't clear container on error, just show error message
if (!container.querySelector('.error-message')) {
const errorDiv = document.createElement('div');
errorDiv.innerHTML = components.error('Failed to load instances: ' + error.message);
container.appendChild(errorDiv.firstElementChild);
}
} finally { } finally {
this.renderInProgress = false; this.renderInProgress = false;
console.log('[Router] renderHome complete, renderInProgress reset to false'); console.log('[Router] renderHome complete, renderInProgress reset to false');
@@ -183,15 +192,11 @@ const router = {
this.currentInstanceId = id; this.currentInstanceId = id;
// Check if we already have a detail view for this instance
let detailView = container.querySelector('.detail-view');
const isInitialLoad = !detailView || detailView.getAttribute('data-instance-id') !== id;
if (isInitialLoad) {
container.innerHTML = components.spinner('Loading instance details...');
}
try { try {
// Check if we already have a detail view for this instance
let detailView = container.querySelector('.detail-view');
const isInitialLoad = !detailView || detailView.getAttribute('data-instance-id') !== id;
const instance = await api.getInstance(id); const instance = await api.getInstance(id);
const logs = await api.getInstanceLogs(id); const logs = await api.getInstanceLogs(id);
@@ -306,7 +311,12 @@ const router = {
} }
} catch (error) { } catch (error) {
console.error('[Router] Error in renderDetail:', error); console.error('[Router] Error in renderDetail:', error);
container.innerHTML = components.error('Failed to load instance: ' + error.message); // Don't clear container on error, just show error message
if (!container.querySelector('.error-message')) {
const errorDiv = document.createElement('div');
errorDiv.innerHTML = components.error('Failed to load instance: ' + error.message);
container.appendChild(errorDiv.firstElementChild);
}
} }
}, },
@@ -406,7 +416,7 @@ const router = {
// Re-apply syntax highlighting to any new code blocks // Re-apply syntax highlighting to any new code blocks
detailView.querySelectorAll('pre code:not(.hljs)').forEach((block) => { detailView.querySelectorAll('pre code:not(.hljs)').forEach((block) => {
hljs.highlightElement(block); hljs.highlightElement(block);
} });
} }
}; };

92
crates/g3-console/web/styles/app.css
View File

@@ -39,7 +39,7 @@ body {
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
line-height: 1.6; line-height: 1.6;
font-size: 75%; font-size: 10.5px; /* 75% of 14px */
} }
/* Header */ /* Header */
@@ -59,7 +59,7 @@ body {
} }
.header-title { .header-title {
font-size: 1.5rem; font-size: 0.9375rem; /* 75% of 1.25rem */
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -73,7 +73,7 @@ body {
.main-content { .main-content {
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 1.5rem; /* Reduced padding */
} }
/* Buttons */ /* Buttons */
@@ -126,7 +126,7 @@ body {
.btn-sm { .btn-sm {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
font-size: 0.8125rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
/* Badges */ /* Badges */
@@ -134,7 +134,7 @@ body {
display: inline-block; display: inline-block;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.75rem; font-size: 0.5625rem; /* 75% of 0.75rem */
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -163,14 +163,14 @@ body {
.instances-list { .instances-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1rem; /* Reduced gap */
} }
.instance-panel { .instance-panel {
background-color: var(--bg-primary); background-color: var(--bg-primary);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 1.5rem; padding: 1rem; /* Reduced padding */
box-shadow: 0 1px 3px var(--shadow); box-shadow: 0 1px 3px var(--shadow);
transition: all 0.2s; transition: all 0.2s;
cursor: pointer; cursor: pointer;
@@ -182,7 +182,7 @@ body {
} }
.panel-header { .panel-header {
margin-bottom: 1rem; margin-bottom: 0.75rem; /* Reduced margin */
} }
.panel-title { .panel-title {
@@ -193,7 +193,7 @@ body {
} }
.panel-title h3 { .panel-title h3 {
font-size: 1.125rem; font-size: 0.75rem; /* 75% of 1rem */
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -205,14 +205,14 @@ body {
} }
.meta-item { .meta-item {
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
color: var(--text-secondary); color: var(--text-secondary);
} }
/* Progress Bar */ /* Progress Bar */
.progress-bar { .progress-bar {
position: relative; position: relative;
height: 2rem; height: 1.5rem; /* 75% of 2rem */
background-color: var(--bg-tertiary); background-color: var(--bg-tertiary);
border-radius: 0.5rem; border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
@@ -258,7 +258,7 @@ body {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 0.875rem; font-size: 0.65625rem; /* 75% of 0.875rem */
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -277,14 +277,14 @@ body {
} }
.stat-label { .stat-label {
font-size: 0.75rem; font-size: 0.515625rem; /* 75% of 0.6875rem */
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
} }
.stat-value { .stat-value {
font-size: 1.5rem; font-size: 0.9375rem; /* 75% of 1.25rem */
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -293,7 +293,7 @@ body {
padding: 0.75rem; padding: 0.75rem;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
color: var(--text-secondary); color: var(--text-secondary);
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -351,7 +351,7 @@ body {
} }
.modal-header h2 { .modal-header h2 {
font-size: 1.25rem; font-size: 0.84375rem; /* 75% of 1.125rem */
font-weight: 600; font-weight: 600;
} }
@@ -387,7 +387,7 @@ body {
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
font-weight: 500; font-weight: 500;
color: var(--text-primary); color: var(--text-primary);
} }
@@ -401,7 +401,7 @@ body {
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: var(--bg-secondary); background-color: var(--bg-secondary);
color: var(--text-primary); color: var(--text-primary);
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
.form-group input:focus, .form-group input:focus,
@@ -460,7 +460,7 @@ body {
.radio-label small { .radio-label small {
display: block; display: block;
color: var(--text-secondary); color: var(--text-secondary);
font-size: 0.8125rem; font-size: 0.5625rem; /* 75% of 0.75rem */
margin-top: 0.25rem; margin-top: 0.25rem;
} }
@@ -474,8 +474,8 @@ body {
} }
.spinner { .spinner {
width: 3rem; width: 2.25rem; /* 75% of 3rem */
height: 3rem; height: 2.25rem; /* 75% of 3rem */
border: 3px solid var(--border); border: 3px solid var(--border);
border-top-color: var(--primary); border-top-color: var(--primary);
border-radius: 50%; border-radius: 50%;
@@ -502,21 +502,21 @@ body {
.detail-view { .detail-view {
background-color: var(--bg-primary); background-color: var(--bg-primary);
border-radius: 0.75rem; border-radius: 0.75rem;
padding: 1.5rem; padding: 1rem; /* Reduced padding */
} }
.detail-header { .detail-header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1rem; /* Reduced margin */
padding-bottom: 1rem; padding-bottom: 0.75rem; /* Reduced padding */
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
} }
.detail-header h2 { .detail-header h2 {
flex: 1; flex: 1;
font-size: 1.5rem; font-size: 0.9375rem; /* 75% of 1.25rem */
font-weight: 600; font-weight: 600;
} }
@@ -524,7 +524,7 @@ body {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem; gap: 1rem;
margin-bottom: 2rem; margin-bottom: 1.5rem; /* Reduced margin */
} }
.stat-card { .stat-card {
@@ -535,7 +535,7 @@ body {
} }
.stat-card .stat-label { .stat-card .stat-label {
font-size: 0.75rem; font-size: 0.515625rem; /* 75% of 0.6875rem */
color: var(--text-secondary); color: var(--text-secondary);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@@ -543,23 +543,23 @@ body {
} }
.stat-card .stat-value { .stat-card .stat-value {
font-size: 2rem; font-size: 1.125rem; /* 75% of 1.5rem */
font-weight: 700; font-weight: 700;
color: var(--text-primary); color: var(--text-primary);
} }
/* Detail content wrapper */ /* Detail content wrapper */
.detail-content { .detail-content {
margin-top: 2rem; margin-top: 1.5rem; /* Reduced margin */
} }
/* Chat View */ /* Chat View */
.chat-view { .chat-view {
margin-top: 2rem; margin-top: 1.5rem; /* Reduced margin */
} }
.chat-view h3 { .chat-view h3 {
font-size: 1.25rem; font-size: 0.84375rem; /* 75% of 1.125rem */
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -588,7 +588,7 @@ body {
} }
.message-agent { .message-agent {
font-size: 0.75rem; font-size: 0.515625rem; /* 75% of 0.6875rem */
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
@@ -609,7 +609,7 @@ body {
.message-content code { .message-content code {
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
/* Tool Call */ /* Tool Call */
@@ -635,7 +635,7 @@ body {
.tool-name { .tool-name {
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
font-weight: 600; font-weight: 600;
} }
@@ -667,7 +667,7 @@ body {
.tool-section strong { .tool-section strong {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
.tool-section pre { .tool-section pre {
@@ -678,7 +678,7 @@ body {
} }
.tool-meta { .tool-meta {
font-size: 0.8125rem; font-size: 0.5625rem; /* 75% of 0.75rem */
color: var(--text-secondary); color: var(--text-secondary);
} }
@@ -706,7 +706,7 @@ body {
} }
.git-changes { .git-changes {
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
color: var(--text-secondary); color: var(--text-secondary);
} }
@@ -720,7 +720,7 @@ body {
.file-status { .file-status {
display: block; display: block;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -742,7 +742,7 @@ body {
} }
.git-file-group li { .git-file-group li {
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
color: var(--text-secondary); color: var(--text-secondary);
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
} }
@@ -776,7 +776,7 @@ body {
.file-name { .file-name {
font-weight: 600; font-weight: 600;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
.file-toggle { .file-toggle {
@@ -803,7 +803,7 @@ body {
background-color: var(--bg-primary); background-color: var(--bg-primary);
padding: 0.75rem; padding: 0.75rem;
border-radius: 0.375rem; border-radius: 0.375rem;
font-size: 0.8125rem; font-size: 0.5625rem; /* 75% of 0.75rem */
} }
/* Detail sections */ /* Detail sections */
@@ -812,7 +812,7 @@ body {
} }
.detail-section h3 { .detail-section h3 {
font-size: 1.25rem; font-size: 0.84375rem; /* 75% of 1.125rem */
font-weight: 600; font-weight: 600;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -822,7 +822,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.75rem; gap: 0.75rem;
margin-bottom: 2rem; margin-bottom: 1.5rem; /* Reduced margin */
} }
.tool-header-right { .tool-header-right {
@@ -832,7 +832,7 @@ body {
} }
.tool-time { .tool-time {
font-size: 0.8125rem; font-size: 0.5625rem; /* 75% of 0.75rem */
color: var(--text-secondary); color: var(--text-secondary);
font-family: 'Monaco', 'Courier New', monospace; font-family: 'Monaco', 'Courier New', monospace;
} }
@@ -867,7 +867,7 @@ body {
border-radius: 6px; border-radius: 6px;
color: var(--text-primary); color: var(--text-primary);
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
.file-browser-list { .file-browser-list {
@@ -915,7 +915,7 @@ body {
.file-browser-name { .file-browser-name {
flex: 1; flex: 1;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
font-size: 0.875rem; font-size: 0.609375rem; /* 75% of 0.8125rem */
} }
.file-browser-item:last-child { .file-browser-item:last-child {