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;
try {
console.log('[Router] Showing spinner');
container.innerHTML = components.spinner('Loading instances...');
// Check if we already have a container for instances
let instancesList = container.querySelector('.instances-list');
const isInitialLoad = !instancesList;
console.log('[Router] Fetching instances from API');
const instances = await api.getInstances();
@@ -97,23 +98,23 @@ const router = {
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) {
console.log('[Router] No instances, showing empty state');
container.innerHTML = components.emptyState(
'No running instances. Click "+ New Run" to start one.'
);
// Check if we already have empty state
if (!container.querySelector('.empty-state')) {
container.innerHTML = components.emptyState(
'No running instances. Click "+ New Run" to start one.'
);
}
} else {
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
const existingPanels = new Map();
if (!isInitialLoad) {
@@ -133,7 +134,7 @@ const router = {
const existingPanel = existingPanels.get(instance.id);
if (existingPanel) {
// Update existing panel in-place
// Update existing panel in-place by replacing inner content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = newHtml;
const newPanel = tempDiv.firstElementChild;
@@ -154,7 +155,10 @@ const router = {
});
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);
}
@@ -171,7 +175,12 @@ const router = {
}
} catch (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 {
this.renderInProgress = false;
console.log('[Router] renderHome complete, renderInProgress reset to false');
@@ -183,15 +192,11 @@ const router = {
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 {
// 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 logs = await api.getInstanceLogs(id);
@@ -306,7 +311,12 @@ const router = {
}
} catch (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
detailView.querySelectorAll('pre code:not(.hljs)').forEach((block) => {
hljs.highlightElement(block);
}
});
}
};

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

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