Update
This commit is contained in:
NuklearRabbit
+1055
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="color-scheme" content="dark light" />
|
||||
<title>ForgeFlow</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" aria-live="polite">
|
||||
<div class="boot-screen">
|
||||
<div class="brand-mark">F</div>
|
||||
<strong>Starting ForgeFlow</strong>
|
||||
<span>Checking Git and local configuration…</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="toast-root" class="toast-root" aria-live="assertive"></div>
|
||||
<script src="mock-bridge.js"></script>
|
||||
<script defer src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,350 @@
|
||||
(() => {
|
||||
if (window.forgeflow) return;
|
||||
|
||||
const wait = (ms = 180) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
const clone = (value) => JSON.parse(JSON.stringify(value));
|
||||
const iso = (offset = 0) => new Date(Date.now() + offset).toISOString();
|
||||
const storage = {
|
||||
get(key) { try { return localStorage.getItem(key); } catch { return null; } },
|
||||
set(key, value) { try { localStorage.setItem(key, value); } catch {} }
|
||||
};
|
||||
const repositoryListeners = new Set();
|
||||
const operationListeners = new Set();
|
||||
const updateListeners = new Set();
|
||||
const emitRepositories = () => repositoryListeners.forEach((listener) => listener({ reason: 'demo-change' }));
|
||||
const emitOperations = (operations) => operationListeners.forEach((listener) => listener({ operations: clone(operations) }));
|
||||
const randomSha = () => `${Math.random().toString(16).slice(2)}${Date.now().toString(16)}`.padEnd(40, 'a').slice(0, 40);
|
||||
|
||||
const makeStatus = ({ head, branch = 'main', ahead = 0, behind = 0, upstream = `origin/${branch}`, files = [] }) => ({
|
||||
branch: { oid: head, head: branch, upstream, ahead, behind },
|
||||
files,
|
||||
counts: {
|
||||
changed: files.length,
|
||||
staged: files.filter((item) => item.staged).length,
|
||||
unstaged: files.filter((item) => item.unstaged).length,
|
||||
conflicts: files.filter((item) => item.conflict).length,
|
||||
untracked: files.filter((item) => item.untracked).length
|
||||
},
|
||||
clean: files.length === 0,
|
||||
root: '',
|
||||
remoteUrl: '',
|
||||
head,
|
||||
shortHead: head.slice(0, 7),
|
||||
fingerprint: `${head}:${branch}:${ahead}:${behind}:${files.map((item) => `${item.path}:${item.indexCode}${item.worktreeCode}`).join('|')}`
|
||||
});
|
||||
|
||||
const makeFile = (path, status = 'modified', options = {}) => ({
|
||||
path,
|
||||
originalPath: options.originalPath || null,
|
||||
indexCode: options.staged ? (status === 'added' ? 'A' : status === 'deleted' ? 'D' : 'M') : '.',
|
||||
worktreeCode: options.staged ? '.' : status === 'untracked' ? '?' : status === 'deleted' ? 'D' : status === 'conflict' ? 'U' : 'M',
|
||||
staged: Boolean(options.staged),
|
||||
unstaged: !options.staged,
|
||||
untracked: status === 'untracked',
|
||||
conflict: status === 'conflict',
|
||||
status
|
||||
});
|
||||
|
||||
const profile = (id, name, environment, options = {}) => ({
|
||||
id,
|
||||
name,
|
||||
environment,
|
||||
provider: 'gitea-actions',
|
||||
branch: options.branch || 'main',
|
||||
workflowFile: options.workflowFile || 'deploy.yml',
|
||||
rollbackWorkflowFile: options.rollbackWorkflowFile ?? 'rollback.yml',
|
||||
healthcheckUrl: options.healthcheckUrl || `https://${environment}.internal/health`,
|
||||
statusUrl: options.statusUrl || `https://${environment}.internal/.well-known/forgeflow`,
|
||||
confirmationRequired: options.confirmationRequired !== false,
|
||||
inputs: {},
|
||||
state: {
|
||||
liveSha: options.liveSha || null,
|
||||
previousSha: options.previousSha || null,
|
||||
healthy: options.healthy ?? null,
|
||||
healthConfigured: true,
|
||||
statusConfigured: true,
|
||||
healthStatus: options.healthy === false ? 503 : 200,
|
||||
healthLatencyMs: 42,
|
||||
checkedAt: options.checkedAt || iso(-120000)
|
||||
}
|
||||
});
|
||||
|
||||
const now = iso();
|
||||
const defaultPreferences = {
|
||||
autoRefresh: true,
|
||||
repositoryPollSeconds: 4,
|
||||
operationPollSeconds: 5,
|
||||
fetchIntervalMinutes: 10,
|
||||
preferredCloneProtocol: 'https',
|
||||
diagnosticsEnabled: true,
|
||||
diagnosticLevel: 'info',
|
||||
logRetentionDays: 14,
|
||||
maxLogFileMb: 8
|
||||
};
|
||||
|
||||
let state = {
|
||||
schemaVersion: 5,
|
||||
setupComplete: storage.get('forgeflow-demo-setup') !== 'false',
|
||||
appearance: storage.get('forgeflow-theme') || 'dark',
|
||||
gitea: { baseUrl: 'https://gitea.internal', user: { login: 'jens', full_name: 'Jens' }, hasToken: true },
|
||||
workspaceRoots: ['C:\\Development'],
|
||||
repositoryMappings: {},
|
||||
deploymentProfiles: {},
|
||||
deploymentStates: {},
|
||||
favorites: ['jens/microsoft-cloud-operations-platform', 'jens/unraid-appops-gateway'],
|
||||
updates: { owner: 'Jens', repo: 'ForgeFlow', branch: 'main', autoCheck: true, lastCheckedAt: null },
|
||||
servers: [{ id: 'server-unraid', name: 'Unraid', host: '192.168.1.10', port: 22, username: 'root', authType: 'privateKey', basePath: '/mnt/user/appdata', privateKeyPath: 'C:\\Users\\Jens\\.ssh\\id_ed25519', hostFingerprint: 'SHA256:demo', hasPassword: false, hasPassphrase: false }],
|
||||
preferences: { ...defaultPreferences },
|
||||
operations: [
|
||||
{
|
||||
id: 'op-success', type: 'deployment', action: 'deploy', status: 'success',
|
||||
repository: 'jens/microsoft-cloud-operations-platform', profileId: 'profile-mcop-prod', profileName: 'Production',
|
||||
environment: 'production', workflowFile: 'deploy.yml', branch: 'main',
|
||||
sha: 'b82f91ab0173cd4346ca0f0f7dcc3e8182cc8fd0', shortSha: 'b82f91a', createdAt: now, updatedAt: now,
|
||||
stages: [
|
||||
{ id: 'requested', label: 'Requested', status: 'complete' }, { id: 'verified', label: 'Verified', status: 'complete' },
|
||||
{ id: 'queued', label: 'Workflow queued', status: 'complete' }, { id: 'runner', label: 'Runner execution', status: 'complete' },
|
||||
{ id: 'healthcheck', label: 'Healthcheck', status: 'complete' }, { id: 'complete', label: 'Complete', status: 'complete' }
|
||||
],
|
||||
logs: ['[info] Exact commit verified.', '[job] deploy: success', '[ok] Server reports b82f91a and healthcheck returned 200.'],
|
||||
run: { id: 48, runNumber: 48, status: 'completed', conclusion: 'success', name: 'ForgeFlow deployment' },
|
||||
runUrl: 'https://gitea.internal/jens/microsoft-cloud-operations-platform/actions/runs/48'
|
||||
},
|
||||
{
|
||||
id: 'op-failed', type: 'deployment', action: 'deploy', status: 'failed',
|
||||
repository: 'jens/portfolio', profileId: 'profile-portfolio', profileName: 'Production', environment: 'production',
|
||||
workflowFile: 'deploy.yml', branch: 'main', sha: 'a7f2e1c1bb6147fc8b6633d2b08500c93402a719', shortSha: 'a7f2e1c',
|
||||
createdAt: iso(-86400000), updatedAt: iso(-86300000),
|
||||
failure: { stage: 'healthcheck', message: 'Healthcheck returned 502.' },
|
||||
stages: [
|
||||
{ id: 'requested', label: 'Requested', status: 'complete' }, { id: 'verified', label: 'Verified', status: 'complete' },
|
||||
{ id: 'queued', label: 'Workflow queued', status: 'complete' }, { id: 'runner', label: 'Runner execution', status: 'complete' },
|
||||
{ id: 'healthcheck', label: 'Healthcheck', status: 'failed' }, { id: 'complete', label: 'Complete', status: 'failed' }
|
||||
],
|
||||
logs: ['[job] deploy: success', '[error] Healthcheck returned 502.']
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let repositories = [
|
||||
{
|
||||
id: 1, name: 'microsoft-cloud-operations-platform', fullName: 'jens/microsoft-cloud-operations-platform', owner: { login: 'jens' },
|
||||
description: 'Tenant-aware Microsoft cloud operations console.', private: true, defaultBranch: 'main',
|
||||
htmlUrl: 'https://gitea.internal/jens/microsoft-cloud-operations-platform', cloneUrl: 'https://gitea.internal/jens/microsoft-cloud-operations-platform.git', sshUrl: 'git@gitea.internal:jens/microsoft-cloud-operations-platform.git', updatedAt: now,
|
||||
localPath: 'C:\\Development\\Microsoft-Cloud-Operations-Platform',
|
||||
localStatus: makeStatus({ head: 'b82f91ab0173cd4346ca0f0f7dcc3e8182cc8fd0' }), linkState: 'linked',
|
||||
deploymentProfiles: [
|
||||
profile('profile-mcop-prod', 'Production', 'production', { liveSha: '72bd10eb0173cd4346ca0f0f7dcc3e8182cc8fd0', previousSha: '6ac991ab0173cd4346ca0f0f7dcc3e8182cc8fd0', healthy: true }),
|
||||
profile('profile-mcop-stage', 'Staging', 'staging', { liveSha: 'b82f91ab0173cd4346ca0f0f7dcc3e8182cc8fd0', previousSha: '72bd10eb0173cd4346ca0f0f7dcc3e8182cc8fd0', healthy: true, confirmationRequired: false })
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2, name: 'vacancyradar', fullName: 'jens/vacancyradar', owner: { login: 'jens' }, description: 'Local-first vacancy intelligence cockpit.', private: true, defaultBranch: 'main',
|
||||
htmlUrl: 'https://gitea.internal/jens/vacancyradar', cloneUrl: 'https://gitea.internal/jens/vacancyradar.git', sshUrl: 'git@gitea.internal:jens/vacancyradar.git', updatedAt: now,
|
||||
localPath: 'C:\\Development\\VacancyRadar',
|
||||
localStatus: makeStatus({ head: 'c9182d0d28318c8cf0af109edc054732426aadf1', branch: 'feature/deployment-api', files: [makeFile('src/api/deploy.ts', 'added', { staged: true }), makeFile('src/main.tsx'), makeFile('src/components/Sidebar.tsx')] }),
|
||||
linkState: 'linked', deploymentProfiles: [profile('profile-vr', 'Production', 'production', { liveSha: 'c117ab9d28318c8cf0af109edc054732426aadf1', previousSha: 'b1f57aad28318c8cf0af109edc054732426aadf1', healthy: true })]
|
||||
},
|
||||
{
|
||||
id: 3, name: 'unraid-appops-gateway', fullName: 'jens/unraid-appops-gateway', owner: { login: 'jens' }, description: 'Safe operations gateway for Unraid and Portainer.', private: true, defaultBranch: 'main',
|
||||
htmlUrl: 'https://gitea.internal/jens/unraid-appops-gateway', cloneUrl: 'https://gitea.internal/jens/unraid-appops-gateway.git', sshUrl: 'git@gitea.internal:jens/unraid-appops-gateway.git', updatedAt: now,
|
||||
localPath: 'C:\\Development\\Unraid-AppOps-Gateway', localStatus: makeStatus({ head: 'f2d1e0a1bb6147fc8b6633d2b08500c93402a719', ahead: 2 }), linkState: 'linked',
|
||||
deploymentProfiles: [profile('profile-appops', 'Production', 'production', { liveSha: '8ac731b1bb6147fc8b6633d2b08500c93402a719', previousSha: '7bc198a1bb6147fc8b6633d2b08500c93402a719', healthy: true })]
|
||||
},
|
||||
{
|
||||
id: 4, name: 'support-bundle-collector', fullName: 'jens/support-bundle-collector', owner: { login: 'jens' }, description: 'Privacy-aware Windows support bundle collector.', private: true, defaultBranch: 'main',
|
||||
htmlUrl: 'https://gitea.internal/jens/support-bundle-collector', cloneUrl: 'https://gitea.internal/jens/support-bundle-collector.git', sshUrl: 'git@gitea.internal:jens/support-bundle-collector.git', updatedAt: now,
|
||||
localPath: null, localStatus: null, linkState: 'remote-only', deploymentProfiles: []
|
||||
},
|
||||
{
|
||||
id: 5, name: 'portfolio', fullName: 'jens/portfolio', owner: { login: 'jens' }, description: 'Professional infrastructure and automation portfolio.', private: false, defaultBranch: 'main',
|
||||
htmlUrl: 'https://gitea.internal/jens/portfolio', cloneUrl: 'https://gitea.internal/jens/portfolio.git', sshUrl: 'git@gitea.internal:jens/portfolio.git', updatedAt: now,
|
||||
localPath: 'C:\\Development\\portfolio', localStatus: makeStatus({ head: 'a7f2e1c1bb6147fc8b6633d2b08500c93402a719', behind: 1 }), linkState: 'linked',
|
||||
deploymentProfiles: [profile('profile-portfolio', 'Production', 'production', { liveSha: '4c20dd11bb6147fc8b6633d2b08500c93402a719', previousSha: '31adfe11bb6147fc8b6633d2b08500c93402a719', healthy: false })]
|
||||
}
|
||||
];
|
||||
|
||||
const diffs = {
|
||||
'src/api/deploy.ts': `diff --git a/src/api/deploy.ts b/src/api/deploy.ts\nnew file mode 100644\n--- /dev/null\n+++ b/src/api/deploy.ts\n@@ -0,0 +1,18 @@\n+export interface DeploymentRequest {\n+ environment: 'staging' | 'production';\n+ commitSha: string;\n+}\n+\n+export async function deploy(request: DeploymentRequest) {\n+ return api.post('/deployments', request);\n+}`,
|
||||
'src/main.tsx': `diff --git a/src/main.tsx b/src/main.tsx\nindex 45ad1a2..939fc17 100644\n--- a/src/main.tsx\n+++ b/src/main.tsx\n@@ -24,8 +24,9 @@ import { Router } from './routes';\n-const API_ENDPOINT = 'http://localhost:3000';\n+const API_ENDPOINT = process.env.VITE_API_URL || '/api';\n+const DEPLOY_VERSION = '1.0.4-rc1';`,
|
||||
'src/components/Sidebar.tsx': `diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx\nindex a7bbd82..bf21e90 100644\n--- a/src/components/Sidebar.tsx\n+++ b/src/components/Sidebar.tsx\n@@ -31,6 +31,7 @@ export function Sidebar() {\n+ <NavItem to="/deployments">Deployments</NavItem>`
|
||||
};
|
||||
|
||||
const findRepo = (localPath) => repositories.find((item) => item.localPath === localPath);
|
||||
const findProfileRepo = (profileId) => repositories.find((item) => item.deploymentProfiles.some((entry) => entry.id === profileId));
|
||||
const syncState = () => {
|
||||
state.deploymentProfiles = {};
|
||||
state.deploymentStates = {};
|
||||
state.repositoryMappings = {};
|
||||
for (const repository of repositories) {
|
||||
if (repository.localPath) state.repositoryMappings[repository.fullName.toLowerCase()] = repository.localPath;
|
||||
state.deploymentProfiles[repository.fullName.toLowerCase()] = repository.deploymentProfiles.map(({ state: profileState, ...entry }) => entry);
|
||||
for (const entry of repository.deploymentProfiles) if (entry.state) state.deploymentStates[entry.id] = clone(entry.state);
|
||||
}
|
||||
};
|
||||
const recompute = (repository) => {
|
||||
const status = repository.localStatus;
|
||||
if (status) {
|
||||
status.counts = {
|
||||
changed: status.files.length,
|
||||
staged: status.files.filter((item) => item.staged).length,
|
||||
unstaged: status.files.filter((item) => item.unstaged).length,
|
||||
conflicts: status.files.filter((item) => item.conflict).length,
|
||||
untracked: status.files.filter((item) => item.untracked).length
|
||||
};
|
||||
status.clean = status.files.length === 0;
|
||||
status.shortHead = status.head.slice(0, 7);
|
||||
status.branch.oid = status.head;
|
||||
}
|
||||
repository.favorite = state.favorites.includes(repository.fullName.toLowerCase());
|
||||
repository.readyToDeploy = Boolean(repository.localPath && status?.clean && status.branch.upstream && status.branch.ahead === 0 && status.branch.behind === 0 && repository.deploymentProfiles.some((entry) => entry.branch === status.branch.head));
|
||||
repository.attention = !repository.localPath || Boolean(status?.counts.conflicts || status?.branch.behind || status?.branch.ahead || status?.counts.changed);
|
||||
repository.attentionReason = !repository.localPath ? 'No local folder linked' : status?.counts.conflicts ? `${status.counts.conflicts} conflict(s)` : status?.counts.changed ? `${status.counts.changed} local change(s)` : status?.branch.behind ? `${status.branch.behind} commit(s) behind remote` : status?.branch.ahead ? `${status.branch.ahead} unpushed commit(s)` : null;
|
||||
repository.preferredCloneUrl = state.preferences.preferredCloneProtocol === 'ssh' ? repository.sshUrl : repository.cloneUrl;
|
||||
};
|
||||
const snapshot = () => { repositories.forEach(recompute); syncState(); return clone(repositories); };
|
||||
syncState();
|
||||
|
||||
const commitHistory = [
|
||||
{ sha: 'c9182d0d28318c8cf0af109edc054732426aadf1', shortSha: 'c9182d0', author: 'Jens', date: now, subject: 'feat: add deployment provider contract' },
|
||||
{ sha: '1fa7399d28318c8cf0af109edc054732426aadf1', shortSha: '1fa7399', author: 'Jens', date: iso(-86400000), subject: 'refactor: consolidate repository state' },
|
||||
{ sha: 'a251a11d28318c8cf0af109edc054732426aadf1', shortSha: 'a251a11', author: 'Jens', date: iso(-172800000), subject: 'docs: define deployment safety gates' }
|
||||
];
|
||||
const branchesByRepo = new Map();
|
||||
const stashesByRepo = new Map();
|
||||
|
||||
function updateOperation(operation) {
|
||||
state.operations = [clone(operation), ...state.operations.filter((item) => item.id !== operation.id)].slice(0, 250);
|
||||
emitOperations([operation]);
|
||||
return clone(operation);
|
||||
}
|
||||
|
||||
function advanceOperation(operation) {
|
||||
if (!operation || ['success', 'failed', 'cancelled', 'rolled-back'].includes(operation.status)) return operation;
|
||||
operation.demoPolls = (operation.demoPolls || 0) + 1;
|
||||
if (operation.demoPolls === 1) {
|
||||
operation.status = 'running';
|
||||
operation.run = { id: 81, runNumber: 81, status: 'running', conclusion: null, name: operation.action === 'rollback' ? 'ForgeFlow rollback' : 'ForgeFlow deployment' };
|
||||
operation.runUrl = `https://gitea.internal/${operation.repository}/actions/runs/81`;
|
||||
operation.stages.find((item) => item.id === 'queued').status = 'complete';
|
||||
operation.stages.find((item) => item.id === 'runner').status = 'active';
|
||||
operation.jobs = [{ id: 201, name: operation.action === 'rollback' ? 'rollback' : 'deploy', status: 'running', conclusion: null }];
|
||||
operation.logs.push(`[job] ${operation.jobs[0].name}: running`);
|
||||
} else if (operation.demoPolls >= 2) {
|
||||
operation.status = operation.action === 'rollback' ? 'rolled-back' : 'success';
|
||||
operation.stages.forEach((item) => { item.status = 'complete'; });
|
||||
operation.jobs = [{ id: 201, name: operation.action === 'rollback' ? 'rollback' : 'deploy', status: 'completed', conclusion: 'success' }];
|
||||
operation.logs.push('[ok] Runner completed successfully.', `[ok] Server status endpoint confirms ${operation.shortSha}.`);
|
||||
const repository = repositories.find((item) => item.fullName === operation.repository);
|
||||
const targetProfile = repository?.deploymentProfiles.find((item) => item.id === operation.profileId);
|
||||
if (targetProfile) {
|
||||
const oldLive = targetProfile.state.liveSha;
|
||||
targetProfile.state.previousSha = oldLive;
|
||||
targetProfile.state.liveSha = operation.sha;
|
||||
targetProfile.state.healthy = true;
|
||||
targetProfile.state.checkedAt = iso();
|
||||
}
|
||||
}
|
||||
operation.updatedAt = iso();
|
||||
return operation;
|
||||
}
|
||||
|
||||
window.forgeflow = Object.freeze({
|
||||
async bootstrap() { await wait(80); snapshot(); return { appVersion: '0.4.0-demo', platform: 'win32', state: clone(state), git: { available: true, version: 'git version 2.47.3' }, diagnostics: { enabled: true, level: state.preferences.diagnosticLevel, retentionDays: state.preferences.logRetentionDays, maxFileMb: state.preferences.maxLogFileMb, directory: '<HOME>/AppData/Roaming/ForgeFlow/diagnostics', fileCount: 2, totalBytes: 18432, totalSize: '18.0 KB', latestAt: iso(-2000), lastWriteError: null } }; },
|
||||
async selectDirectory() { await wait(); return 'C:\\Development'; },
|
||||
async selectKeyFile() { await wait(); return 'C:\\Users\\Jens\\.ssh\\id_ed25519'; },
|
||||
async setupPreflight({ baseUrl, token, roots = [] }) { await wait(240); const checks = [
|
||||
{ id: 'git.available', label: 'Git command line', status: 'pass', detail: 'git version 2.47.3', required: true },
|
||||
{ id: 'git.identity', label: 'Git author identity', status: 'pass', detail: 'Jens <jens@example.invalid>', required: false },
|
||||
{ id: 'storage.userdata', label: 'Application data storage', status: 'pass', detail: 'ForgeFlow can write its local configuration.', required: true },
|
||||
{ id: 'storage.diagnostics', label: 'Diagnostic log storage', status: 'pass', detail: 'The diagnostic directory is writable.', required: true },
|
||||
{ id: 'storage.credentials', label: 'Protected credential storage', status: 'pass', detail: 'The operating system can encrypt the Gitea token at rest.', required: false },
|
||||
{ id: 'workspace.roots', label: 'Development folders', status: roots.length ? 'pass' : 'warning', detail: roots.length ? `${roots.length} folder(s) selected.` : 'No development folder selected yet.', required: false },
|
||||
{ id: 'gitea.connection', label: 'Gitea connection', status: baseUrl && token ? 'pass' : 'warning', detail: baseUrl && token ? 'Connection parameters are ready for validation.' : 'Enter the Gitea URL and token.', required: false }
|
||||
]; return { kind: 'system', startedAt: iso(-100), completedAt: iso(), checks, summary: { counts: { pass: checks.filter(i=>i.status==='pass').length, warning: checks.filter(i=>i.status==='warning').length, fail: 0, skipped: 0 }, blocking: [], ready: true } }; },
|
||||
async validateGitea({ baseUrl, token }) { await wait(320); if (!baseUrl || !token) throw new Error('Enter an instance URL and access token.'); return { baseUrl: baseUrl.replace(/\/$/, ''), user: { login: 'jens', full_name: 'Jens' }, repositoryCount: repositories.length, version: '1.26.0' }; },
|
||||
async completeSetup(payload) { await wait(300); state.setupComplete = true; state.gitea = { baseUrl: payload.baseUrl, user: payload.user, hasToken: true }; state.workspaceRoots = payload.workspaceRoots; storage.set('forgeflow-demo-setup', 'true'); return { state: clone(state), tokenState: { persistent: true } }; },
|
||||
async updateGitea(payload) { const validation = await this.validateGitea({ ...payload, token: payload.token || 'preserved-demo-token' }); state.gitea = { baseUrl: validation.baseUrl, user: validation.user, hasToken: true }; return { validation, tokenState: { persistent: true, preserved: !payload.token }, state: clone(state) }; },
|
||||
async setWorkspaceRoots(roots) { state.workspaceRoots = [...new Set(roots)]; return clone(state); },
|
||||
async setAppearance(appearance) { state.appearance = appearance; storage.set('forgeflow-theme', appearance); return clone(state); },
|
||||
async setPreferences(preferences) { state.preferences = { ...state.preferences, ...preferences }; snapshot(); return clone(state); },
|
||||
async setUpdatePreferences(updates) { state.updates = { ...state.updates, ...updates }; return clone(state); },
|
||||
async checkForUpdates() { await wait(300); return { checkedAt: iso(), owner: state.updates.owner, repo: state.updates.repo, branch: state.updates.branch, currentVersion: '0.4.0', remoteVersion: '0.4.1', remoteSha: 'a'.repeat(40), shortSha: 'aaaaaaa', available: true, mode: 'source' }; },
|
||||
async downloadUpdate() { await wait(500); return { ...(await this.checkForUpdates()), downloaded: true, archivePath: 'C:\\Temp\\ForgeFlow-0.4.1.zip', sha256: 'b'.repeat(64) }; },
|
||||
async applyUpdate() { await wait(200); return { launched: true, version: '0.4.1' }; },
|
||||
async saveServer(server) { const saved = { ...server, id: server.id || `server-${Date.now()}`, hasPassword: server.authType === 'password', hasPassphrase: false }; state.servers = [saved, ...state.servers.filter((item) => item.id !== saved.id)]; return { server: clone(saved), state: clone(state) }; },
|
||||
async deleteServer(serverId) { state.servers = state.servers.filter((item) => item.id !== serverId); return clone(state); },
|
||||
async testServer(serverId) { const server = state.servers.find((item) => item.id === serverId); server.hostFingerprint = server.hostFingerprint || 'SHA256:demo'; return { connected: true, fingerprint: server.hostFingerprint, server: clone(server), output: 'Linux\n/usr/bin/git\nDocker Compose version v2', state: clone(state) }; },
|
||||
async inspectServerProject() { return { exists: true, rootGit: true, head: 'd42d4a7'.padEnd(40,'0'), branch: 'main', trackedChanges: [], composeFiles: ['docker-compose.yml'], nestedGit: ['source'], dockerfile: true }; },
|
||||
async refreshRepositories() { await wait(260); return snapshot(); },
|
||||
async discoverRepositories() { await wait(360); return snapshot().filter((repo) => repo.localPath).map((repo) => ({ localPath: repo.localPath, remoteUrl: repo.cloneUrl, status: repo.localStatus })); },
|
||||
async favoriteRepository(fullName, favorite) { const key = fullName.toLowerCase(); state.favorites = favorite ? [...new Set([...state.favorites, key])] : state.favorites.filter((item) => item !== key); snapshot(); return clone(state); },
|
||||
async linkRepository(fullName, localPath) { const repo = repositories.find((item) => item.fullName === fullName); repo.localPath = localPath; repo.linkState = 'linked'; repo.localStatus = makeStatus({ head: randomSha() }); emitRepositories(); return snapshot(); },
|
||||
async unlinkRepository(fullName) { const repo = repositories.find((item) => item.fullName === fullName); repo.localPath = null; repo.localStatus = null; repo.linkState = 'remote-only'; emitRepositories(); return snapshot(); },
|
||||
async repositoryStatus(localPath) { return clone(findRepo(localPath)?.localStatus); },
|
||||
async repositoryDiff(localPath, filePath) { await wait(80); return diffs[filePath] || `diff --git a/${filePath} b/${filePath}\n--- a/${filePath}\n+++ b/${filePath}\n@@ -1 +1 @@\n-old\n+new`; },
|
||||
async stageFiles(localPath, files) { const repo = findRepo(localPath); repo.localStatus.files.forEach((item) => { if (!files?.length || files.includes(item.path)) { item.staged = true; item.unstaged = false; item.indexCode = item.untracked ? 'A' : 'M'; item.worktreeCode = '.'; } }); recompute(repo); emitRepositories(); return clone(repo.localStatus); },
|
||||
async unstageFiles(localPath, files) { const repo = findRepo(localPath); repo.localStatus.files.forEach((item) => { if (!files?.length || files.includes(item.path)) { item.staged = false; item.unstaged = true; item.indexCode = '.'; item.worktreeCode = item.untracked ? '?' : 'M'; } }); recompute(repo); emitRepositories(); return clone(repo.localStatus); },
|
||||
async commit(localPath, message, files) { await wait(520); if (!message?.trim()) throw new Error('Enter a commit message.'); const repo = findRepo(localPath); repo.localStatus.files = repo.localStatus.files.filter((item) => !files?.includes(item.path)); repo.localStatus.head = randomSha(); repo.localStatus.branch.ahead += 1; recompute(repo); emitRepositories(); return { commitOutput: `[${repo.localStatus.branch.head} ${repo.localStatus.shortHead}] ${message}`, commitSha: repo.localStatus.head, status: clone(repo.localStatus) }; },
|
||||
async commitAndPush(localPath, message, files) { const result = await this.commit(localPath, message, files); const repo = findRepo(localPath); await wait(240); repo.localStatus.branch.ahead = 0; recompute(repo); emitRepositories(); return { ...result, pushOutput: 'Push completed.', status: clone(repo.localStatus) }; },
|
||||
async push(localPath) { await wait(360); const repo = findRepo(localPath); repo.localStatus.branch.ahead = 0; recompute(repo); emitRepositories(); return { output: 'Push completed.', status: clone(repo.localStatus) }; },
|
||||
async fetch() { await wait(260); return { output: 'Fetch completed.' }; },
|
||||
async pull(localPath) { await wait(380); const repo = findRepo(localPath); repo.localStatus.branch.behind = 0; recompute(repo); emitRepositories(); return { output: 'Fast-forwarded.', status: clone(repo.localStatus) }; },
|
||||
async history() { await wait(100); return clone(commitHistory); },
|
||||
async branches(localPath) { const repo = findRepo(localPath); if (!branchesByRepo.has(localPath)) branchesByRepo.set(localPath, [{ name: repo.localStatus.branch.head, current: true, sha: repo.localStatus.head, shortSha: repo.localStatus.shortHead, upstream: repo.localStatus.branch.upstream }, { name: 'main', current: repo.localStatus.branch.head === 'main', sha: repo.localStatus.head, shortSha: repo.localStatus.shortHead, upstream: 'origin/main' }]); return clone(branchesByRepo.get(localPath)); },
|
||||
async checkoutBranch(localPath, branch) { const repo = findRepo(localPath); if (!repo.localStatus.clean) throw new Error('Commit or stash local changes before switching branches.'); const list = await this.branches(localPath); list.forEach((item) => { item.current = item.name === branch; }); branchesByRepo.set(localPath, list); repo.localStatus.branch.head = branch; repo.localStatus.branch.upstream = `origin/${branch}`; recompute(repo); emitRepositories(); return { status: clone(repo.localStatus), branches: clone(list) }; },
|
||||
async createBranch(localPath, branch) { const repo = findRepo(localPath); const list = await this.branches(localPath); list.forEach((item) => { item.current = false; }); list.unshift({ name: branch, current: true, sha: repo.localStatus.head, shortSha: repo.localStatus.shortHead, upstream: null }); branchesByRepo.set(localPath, list); repo.localStatus.branch.head = branch; repo.localStatus.branch.upstream = null; recompute(repo); emitRepositories(); return { status: clone(repo.localStatus), branches: clone(list) }; },
|
||||
async stash(localPath, message) { const repo = findRepo(localPath); const list = stashesByRepo.get(localPath) || []; list.unshift({ ref: `stash@{${list.length}}`, subject: message || 'ForgeFlow stash', date: iso() }); stashesByRepo.set(localPath, list); repo.localStatus.files = []; recompute(repo); emitRepositories(); return { output: 'Saved working directory and index state.', status: clone(repo.localStatus), stashes: clone(list) }; },
|
||||
async stashList(localPath) { return clone(stashesByRepo.get(localPath) || []); },
|
||||
async popStash(localPath, ref) { const repo = findRepo(localPath); const list = stashesByRepo.get(localPath) || []; const index = list.findIndex((item) => item.ref === ref); if (index < 0) throw new Error('Stash not found.'); list.splice(index, 1); stashesByRepo.set(localPath, list); repo.localStatus.files = [makeFile('src/restored-from-stash.ts')]; recompute(repo); emitRepositories(); return { output: 'Stash applied.', status: clone(repo.localStatus), stashes: clone(list) }; },
|
||||
async cloneRepository(fullName, mode = 'default') {
|
||||
await wait(620);
|
||||
const repository = repositories.find((item) => item.fullName === fullName);
|
||||
if (!repository) throw new Error('Repository not found.');
|
||||
if (repository.localPath) throw new Error('This repository already has a linked local folder.');
|
||||
const root = mode === 'custom' ? 'D:\\OtherProjects' : state.workspaceRoots[0];
|
||||
if (!root) return { cancelled: true };
|
||||
const target = `${root.replace(/[\\/]+$/, '')}\\${repository.name}`;
|
||||
const head = randomSha();
|
||||
repository.localPath = target;
|
||||
repository.localStatus = makeStatus({ head, branch: repository.defaultBranch || 'main' });
|
||||
repository.localStatus.root = target;
|
||||
repository.localStatus.remoteUrl = repository.preferredCloneUrl || repository.cloneUrl;
|
||||
repository.linkState = 'linked';
|
||||
recompute(repository);
|
||||
const current = snapshot();
|
||||
emitRepositories();
|
||||
return { target, status: clone(repository.localStatus), reused: false, repositories: current, state: clone(state) };
|
||||
},
|
||||
async openPath() { return true; },
|
||||
async openExternal() { return true; },
|
||||
async saveDeploymentProfile(fullName, input) { const repo = repositories.find((item) => item.fullName === fullName); const existing = repo.deploymentProfiles.find((item) => item.id === input.id); const saved = { ...(existing || profile(input.id || `profile-${Date.now()}`, input.name || input.environment, input.environment || 'production')), ...input, id: input.id || `profile-${Date.now()}`, provider: 'gitea-actions', inputs: existing?.inputs || {}, state: existing?.state || { liveSha: null, previousSha: null, healthy: null, healthConfigured: Boolean(input.healthcheckUrl), statusConfigured: Boolean(input.statusUrl), checkedAt: null } }; repo.deploymentProfiles = [...repo.deploymentProfiles.filter((item) => item.id !== saved.id), saved]; snapshot(); return { profile: clone(saved), state: clone(state) }; },
|
||||
async deleteDeploymentProfile(fullName, profileId) { const repo = repositories.find((item) => item.fullName === fullName); repo.deploymentProfiles = repo.deploymentProfiles.filter((item) => item.id !== profileId); snapshot(); return { profiles: clone(repo.deploymentProfiles), state: clone(state) }; },
|
||||
async deploymentPreflight(repository, profileId) { await wait(280); const profile = repository.deploymentProfiles.find((item) => item.id === profileId); const status = repository.localStatus; const checks = [
|
||||
{ id: 'repository.linked', label: 'Local repository link', status: repository.localPath ? 'pass' : 'fail', detail: repository.localPath || 'No local folder linked.', required: true },
|
||||
{ id: 'git.branch', label: 'Allowed branch', status: status?.branch.head === profile?.branch ? 'pass' : 'fail', detail: `Current: ${status?.branch.head || 'unknown'}; required: ${profile?.branch || 'unknown'}.`, required: true },
|
||||
{ id: 'git.clean', label: 'Clean working tree', status: status?.clean ? 'pass' : 'fail', detail: status?.clean ? 'No uncommitted changes.' : `${status?.counts.changed || 0} changed file(s).`, required: true },
|
||||
{ id: 'git.sync', label: 'Local and Gitea synchronized', status: !status?.branch.ahead && !status?.branch.behind ? 'pass' : 'fail', detail: `${status?.branch.ahead || 0} ahead, ${status?.branch.behind || 0} behind.`, required: true },
|
||||
{ id: 'workflow.deploy.remote', label: 'Deploy workflow on Gitea branch', status: 'pass', detail: `${profile?.workflowFile || 'deploy.yml'} exists on ${profile?.branch || 'main'}.`, required: true },
|
||||
{ id: 'gitea.actions', label: 'Gitea Actions API', status: 'pass', detail: 'The Actions runs endpoint is accessible.', required: true },
|
||||
{ id: 'server.status', label: 'Server version endpoint', status: profile?.statusUrl ? 'pass' : 'warning', detail: profile?.statusUrl ? `Endpoint reachable; live ${profile.state?.liveSha?.slice(0,7) || 'unknown'}.` : 'No status URL configured.', required: false },
|
||||
{ id: 'server.health', label: 'Application healthcheck', status: profile?.healthcheckUrl ? 'pass' : 'warning', detail: profile?.healthcheckUrl ? 'HTTP 200 in 42 ms.' : 'No healthcheck URL configured.', required: false }
|
||||
]; const blocking = checks.filter(i=>i.required && i.status==='fail').map(i=>i.id); return { kind: 'deployment', repository: repository.fullName, profileId, startedAt: iso(-100), completedAt: iso(), checks, summary: { counts: { pass: checks.filter(i=>i.status==='pass').length, warning: checks.filter(i=>i.status==='warning').length, fail: checks.filter(i=>i.status==='fail').length, skipped: 0 }, blocking, ready: blocking.length===0 }, head: status?.head || null }; },
|
||||
async deploy(repository, profileId, sha) { await wait(320); const selected = repository.deploymentProfiles.find((item) => item.id === profileId); const operation = { id: `deploy-${Date.now()}`, type: 'deployment', action: 'deploy', status: 'queued', repository: repository.fullName, profileId, profileName: selected.name, environment: selected.environment, workflowFile: selected.workflowFile, branch: selected.branch, sha, shortSha: sha.slice(0, 7), dispatchedAt: iso(), createdAt: iso(), updatedAt: iso(), demoPolls: 0, stages: [{ id: 'requested', label: 'Requested', status: 'complete' }, { id: 'verified', label: 'Verified', status: 'complete' }, { id: 'queued', label: 'Workflow queued', status: 'active' }, { id: 'runner', label: 'Runner execution', status: 'pending' }, { id: 'healthcheck', label: 'Healthcheck', status: 'pending' }, { id: 'complete', label: 'Complete', status: 'pending' }], logs: [`[info] Verified clean ${selected.branch} at ${sha}`, `[ok] Gitea accepted ${selected.workflowFile}.`] }; return updateOperation(operation); },
|
||||
async rollback(repository, profileId, targetSha) { await wait(320); const selected = repository.deploymentProfiles.find((item) => item.id === profileId); const operation = { id: `rollback-${Date.now()}`, type: 'deployment', action: 'rollback', status: 'queued', repository: repository.fullName, profileId, profileName: selected.name, environment: selected.environment, workflowFile: selected.rollbackWorkflowFile, branch: selected.branch, sha: targetSha, shortSha: targetSha.slice(0, 7), dispatchedAt: iso(), createdAt: iso(), updatedAt: iso(), demoPolls: 0, stages: [{ id: 'requested', label: 'Requested', status: 'complete' }, { id: 'verified', label: 'Verified', status: 'complete' }, { id: 'queued', label: 'Workflow queued', status: 'active' }, { id: 'runner', label: 'Runner execution', status: 'pending' }, { id: 'healthcheck', label: 'Healthcheck', status: 'pending' }, { id: 'complete', label: 'Complete', status: 'pending' }], logs: [`[warning] Rollback target verified: ${targetSha}`, `[ok] Gitea accepted ${selected.rollbackWorkflowFile}.`] }; return updateOperation(operation); },
|
||||
async healthcheck() { await wait(160); return { configured: true, healthy: true, status: 200, latencyMs: 42 }; },
|
||||
async refreshProfileState(fullName, profileId) { await wait(240); const repo = repositories.find((item) => item.fullName === fullName) || findProfileRepo(profileId); const target = repo?.deploymentProfiles.find((item) => item.id === profileId); if (!target) throw new Error('Deployment profile not found.'); target.state = { ...target.state, checkedAt: iso(), healthy: target.state.healthy !== false, healthConfigured: Boolean(target.healthcheckUrl), statusConfigured: Boolean(target.statusUrl) }; syncState(); return clone(target.state); },
|
||||
async refreshOperations(operationId = null) { await wait(300); if (operationId) { const operation = state.operations.find((item) => item.id === operationId); if (!operation) throw new Error('Operation not found.'); return updateOperation(advanceOperation(operation)); } const active = state.operations.filter((item) => !['success', 'failed', 'cancelled', 'rolled-back'].includes(item.status)).map(advanceOperation); if (active.length) emitOperations(active); state.operations = state.operations.map((item) => active.find((entry) => entry.id === item.id) || item); return clone(active); },
|
||||
async getOperation(operationId) { return clone(state.operations.find((item) => item.id === operationId) || null); },
|
||||
async diagnosticsStatus() { return { enabled: state.preferences.diagnosticsEnabled !== false, level: state.preferences.diagnosticLevel, retentionDays: state.preferences.logRetentionDays, maxFileMb: state.preferences.maxLogFileMb, directory: '<HOME>/AppData/Roaming/ForgeFlow/diagnostics', fileCount: 2, totalBytes: 18432, totalSize: '18.0 KB', latestAt: iso(-2000), lastWriteError: null }; },
|
||||
async clearDiagnostics() { return { enabled: true, level: state.preferences.diagnosticLevel, retentionDays: state.preferences.logRetentionDays, maxFileMb: state.preferences.maxLogFileMb, directory: '<HOME>/AppData/Roaming/ForgeFlow/diagnostics', fileCount: 1, totalBytes: 256, totalSize: '256 B', latestAt: iso(), lastWriteError: null }; },
|
||||
async openDiagnosticsFolder() { return true; },
|
||||
async exportDiagnostics(privacyMode = 'standard') { await wait(500); return { path: `C:\Users\Jens\Downloads\ForgeFlow-Diagnostics-demo.zip`, bytes: 38221, size: '37.3 KB', sha256: 'b'.repeat(64), privacyMode, generatedAt: iso() }; },
|
||||
async showDiagnosticBundle() { return true; },
|
||||
async reportRendererEvent() { return true; },
|
||||
onRepositoriesChanged(listener) { repositoryListeners.add(listener); return () => repositoryListeners.delete(listener); },
|
||||
onOperationsChanged(listener) { operationListeners.add(listener); return () => operationListeners.delete(listener); },
|
||||
onUpdatesChanged(listener) { updateListeners.add(listener); return () => updateListeners.delete(listener); },
|
||||
async reset() { state.setupComplete = false; storage.set('forgeflow-demo-setup', 'false'); return clone(state); }
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,535 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
--bg: #0b0e14;
|
||||
--surface-0: #0f131b;
|
||||
--surface-1: #151a24;
|
||||
--surface-2: #1b2130;
|
||||
--surface-3: #252c3a;
|
||||
--surface-hover: #202838;
|
||||
--line: #30394a;
|
||||
--line-soft: #222a38;
|
||||
--text: #e7ebf4;
|
||||
--text-muted: #9aa4b6;
|
||||
--text-faint: #6f7a8d;
|
||||
--primary: #8fb4ff;
|
||||
--primary-strong: #5b8ff9;
|
||||
--primary-soft: rgba(91, 143, 249, .15);
|
||||
--success: #54ddb0;
|
||||
--success-soft: rgba(84, 221, 176, .12);
|
||||
--warning: #f2ba63;
|
||||
--warning-soft: rgba(242, 186, 99, .13);
|
||||
--danger: #ff817a;
|
||||
--danger-soft: rgba(255, 129, 122, .13);
|
||||
--shadow: 0 18px 70px rgba(0,0,0,.32);
|
||||
--radius: 7px;
|
||||
--sidebar: 286px;
|
||||
--action-panel: 352px;
|
||||
--font-ui: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
--bg: #eef2f7;
|
||||
--surface-0: #f7f9fc;
|
||||
--surface-1: #ffffff;
|
||||
--surface-2: #f3f6fa;
|
||||
--surface-3: #e8edf4;
|
||||
--surface-hover: #edf2f8;
|
||||
--line: #cdd5e1;
|
||||
--line-soft: #e1e6ee;
|
||||
--text: #172033;
|
||||
--text-muted: #526078;
|
||||
--text-faint: #7b879a;
|
||||
--primary: #295fca;
|
||||
--primary-strong: #326ee0;
|
||||
--primary-soft: rgba(50, 110, 224, .10);
|
||||
--success: #087a57;
|
||||
--success-soft: rgba(8, 122, 87, .10);
|
||||
--warning: #9b5b00;
|
||||
--warning-soft: rgba(155, 91, 0, .10);
|
||||
--danger: #c73737;
|
||||
--danger-soft: rgba(199, 55, 55, .10);
|
||||
--shadow: 0 18px 70px rgba(43, 55, 77, .15);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
|
||||
body { background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 13px; }
|
||||
button, input, textarea, select { font: inherit; color: inherit; }
|
||||
button { border: 0; }
|
||||
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
|
||||
::selection { background: rgba(91, 143, 249, .35); }
|
||||
::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-faint) 38%, transparent); border: 3px solid transparent; background-clip: padding-box; border-radius: 20px; }
|
||||
|
||||
.boot-screen { height: 100vh; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--text-muted); }
|
||||
.boot-screen strong { color: var(--text); font-size: 16px; }
|
||||
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(145deg, var(--primary), var(--primary-strong)); color: #07152e; font-weight: 800; font-size: 20px; box-shadow: 0 8px 30px rgba(91,143,249,.25); }
|
||||
|
||||
.app-shell { height: 100vh; display: grid; grid-template-rows: 48px minmax(0,1fr) 25px; background: var(--bg); }
|
||||
.titlebar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-1); -webkit-app-region: drag; }
|
||||
.titlebar-left, .titlebar-right { display: flex; align-items: center; gap: 9px; min-width: 0; }
|
||||
.titlebar button, .titlebar input { -webkit-app-region: no-drag; }
|
||||
.wordmark { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 720; letter-spacing: -.02em; }
|
||||
.wordmark .brand-mark { width: 25px; height: 25px; border-radius: 6px; font-size: 13px; box-shadow: none; }
|
||||
.brand-logo { width: 32px; height: 25px; object-fit: contain; display: block; }
|
||||
.wordmark small { color: var(--text-faint); font-size: 9px; font-weight: 620; letter-spacing: .01em; margin-left: -4px; }
|
||||
.workspace-name { color: var(--text-muted); border-left: 1px solid var(--line); padding-left: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
|
||||
.connection-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11px; font-weight: 650; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-0); }
|
||||
.connection-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
|
||||
.global-search { width: clamp(180px, 23vw, 330px); height: 30px; padding: 0 10px 0 31px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); color: var(--text); }
|
||||
.search-wrap { position: relative; }
|
||||
.search-wrap .icon { position: absolute; left: 9px; top: 7px; color: var(--text-faint); pointer-events: none; }
|
||||
|
||||
.app-body { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 0; }
|
||||
.sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: var(--surface-1); overflow: hidden; }
|
||||
.primary-nav { padding: 10px 8px 8px; border-bottom: 1px solid var(--line-soft); }
|
||||
.nav-button { width: 100%; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; font-weight: 560; }
|
||||
.nav-button:hover { background: var(--surface-hover); color: var(--text); }
|
||||
.nav-button.active { color: var(--primary); background: var(--primary-soft); }
|
||||
.nav-button .nav-count { margin-left: auto; min-width: 20px; text-align: center; font-family: var(--font-mono); color: var(--text-faint); font-size: 10px; }
|
||||
.sidebar-section { display: flex; align-items: center; justify-content: space-between; padding: 13px 12px 7px; color: var(--text-faint); font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
|
||||
.sidebar-section button { background: none; color: inherit; cursor: pointer; padding: 2px; }
|
||||
.repo-filter { margin: 0 9px 8px; width: calc(100% - 18px); height: 29px; border: 1px solid var(--line-soft); border-radius: 5px; background: var(--surface-0); padding: 0 9px; }
|
||||
.repo-list { min-height: 0; overflow: auto; padding: 0 6px 10px; }
|
||||
.repo-row { width: 100%; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 6px 8px; background: transparent; border-radius: 5px; color: var(--text-muted); cursor: pointer; text-align: left; border: 1px solid transparent; }
|
||||
.repo-row:hover { background: var(--surface-hover); color: var(--text); }
|
||||
.repo-row.active { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 26%, transparent); color: var(--text); }
|
||||
.repo-row.attention .repo-icon { color: var(--warning); }
|
||||
.repo-main { min-width: 0; }
|
||||
.repo-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; }
|
||||
.repo-sub { display: flex; gap: 6px; margin-top: 3px; color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; overflow: hidden; }
|
||||
.repo-sub span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.repo-badges { display: flex; gap: 3px; align-items: center; }
|
||||
.mini-badge { min-width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 9px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-muted); background: var(--surface-3); }
|
||||
.mini-badge.warning { background: var(--warning-soft); color: var(--warning); }
|
||||
.mini-badge.success { background: var(--success-soft); color: var(--success); }
|
||||
.mini-badge.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
.sidebar-footer { margin-top: auto; border-top: 1px solid var(--line-soft); padding: 10px 11px; }
|
||||
.sidebar-diagnostic-state { display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 9px; align-items: start; color: var(--text-muted); }
|
||||
.sidebar-diagnostic-state .state-dot { margin-top: 4px; }
|
||||
.sidebar-diagnostic-state strong, .sidebar-diagnostic-state span { display: block; }
|
||||
.sidebar-diagnostic-state strong { color: var(--text); font-size: 10px; font-weight: 650; }
|
||||
.sidebar-diagnostic-state span { margin-top: 2px; color: var(--text-faint); font-size: 9px; line-height: 1.35; }
|
||||
|
||||
.workspace { min-width: 0; min-height: 0; display: grid; background: var(--surface-0); }
|
||||
.workspace.with-panel { grid-template-columns: minmax(0,1fr) var(--action-panel); }
|
||||
.main-canvas { min-width: 0; min-height: 0; overflow: auto; }
|
||||
.main-canvas.repository-canvas { overflow: hidden; height: 100%; }
|
||||
.action-panel { min-width: 0; border-left: 1px solid var(--line); background: var(--surface-1); overflow: auto; }
|
||||
.page { min-height: 100%; padding: 22px 24px 40px; }
|
||||
.page.nopad { padding: 0; }
|
||||
.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
|
||||
.page-header h1, .repo-heading h1 { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
|
||||
.page-header p, .repo-heading p { margin: 5px 0 0; color: var(--text-muted); max-width: 720px; }
|
||||
.eyebrow { color: var(--text-faint); font-size: 10px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; }
|
||||
|
||||
.button { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--text); cursor: pointer; font-weight: 620; white-space: nowrap; }
|
||||
.button:hover { background: var(--surface-3); }
|
||||
.button.primary { background: var(--primary-strong); border-color: var(--primary-strong); color: #fff; }
|
||||
.button.primary:hover { filter: brightness(1.07); }
|
||||
.button.success { background: var(--success); border-color: var(--success); color: #06251b; }
|
||||
.button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: var(--danger-soft); }
|
||||
.button.ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
|
||||
.button.ghost:hover { color: var(--text); background: var(--surface-hover); }
|
||||
.button.block { width: 100%; min-height: 38px; }
|
||||
.button:disabled { opacity: .45; cursor: not-allowed; }
|
||||
.icon-button { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--text-muted); cursor: pointer; }
|
||||
.icon-button:hover { color: var(--text); background: var(--surface-hover); border-color: var(--line-soft); }
|
||||
.icon { width: 16px; height: 16px; display: inline-block; flex: 0 0 auto; }
|
||||
.icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
|
||||
|
||||
.summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-1); }
|
||||
.summary-card { min-height: 118px; padding: 15px; border-right: 1px solid var(--line); position: relative; }
|
||||
.summary-card:last-child { border-right: 0; }
|
||||
.summary-value { margin-top: 18px; font-size: 28px; font-weight: 720; letter-spacing: -.04em; }
|
||||
.summary-label { color: var(--text-muted); margin-top: 2px; }
|
||||
.summary-card .icon { position: absolute; top: 14px; right: 14px; color: var(--text-faint); }
|
||||
.summary-card.warning .summary-value, .summary-card.warning .icon { color: var(--warning); }
|
||||
.summary-card.success .summary-value, .summary-card.success .icon { color: var(--success); }
|
||||
.summary-card.danger .summary-value, .summary-card.danger .icon { color: var(--danger); }
|
||||
|
||||
.section-block { margin-top: 24px; }
|
||||
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
|
||||
.section-heading h2 { margin: 0; font-size: 13px; letter-spacing: -.01em; }
|
||||
.section-heading .meta { color: var(--text-faint); font-size: 11px; }
|
||||
.action-queue { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-1); }
|
||||
.queue-row { display: grid; grid-template-columns: 28px minmax(160px,1.2fr) minmax(230px,2fr) auto; gap: 12px; align-items: center; min-height: 62px; padding: 10px 13px; border-bottom: 1px solid var(--line-soft); }
|
||||
.queue-row:last-child { border-bottom: 0; }
|
||||
.queue-row:hover { background: var(--surface-hover); }
|
||||
.queue-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--surface-2); color: var(--text-muted); }
|
||||
.queue-icon.warning { background: var(--warning-soft); color: var(--warning); }
|
||||
.queue-icon.success { background: var(--success-soft); color: var(--success); }
|
||||
.queue-icon.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
.queue-title { font-weight: 640; }
|
||||
.queue-sub { color: var(--text-faint); margin-top: 3px; font-size: 11px; font-family: var(--font-mono); }
|
||||
.queue-reason { color: var(--text-muted); }
|
||||
.queue-reason strong { color: var(--text); display: block; font-weight: 600; }
|
||||
|
||||
.two-column { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 16px; }
|
||||
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
|
||||
.panel-header { min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-bottom: 1px solid var(--line-soft); }
|
||||
.panel-header h2, .panel-header h3 { font-size: 12px; margin: 0; }
|
||||
.panel-body { padding: 14px; }
|
||||
.activity-list { padding: 3px 0; }
|
||||
.activity-item { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 10px; padding: 10px 13px; align-items: start; }
|
||||
.activity-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--text-faint); }
|
||||
.activity-dot.success { background: var(--success); }
|
||||
.activity-dot.warning { background: var(--warning); }
|
||||
.activity-dot.danger { background: var(--danger); }
|
||||
.activity-title { font-weight: 590; }
|
||||
.activity-sub, .activity-time { color: var(--text-faint); font-size: 11px; }
|
||||
|
||||
.repo-workspace { height: 100%; min-height: 0; display: grid; grid-template-rows: auto auto 39px minmax(0,1fr); }
|
||||
.repo-header { padding: 16px 18px 13px; background: var(--surface-1); border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
|
||||
.repo-heading { min-width: 0; }
|
||||
.repo-heading h1 { display: flex; align-items: center; gap: 9px; font-size: 17px; }
|
||||
.repo-heading p { font-family: var(--font-mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.repo-header-actions { display: flex; gap: 7px; }
|
||||
.release-rail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); background: var(--surface-0); border-bottom: 1px solid var(--line); }
|
||||
.release-node { min-width: 0; padding: 10px 16px 11px; border-right: 1px solid var(--line-soft); position: relative; }
|
||||
.release-node:last-child { border-right: 0; }
|
||||
.release-node:not(:last-child)::after { content: '›'; position: absolute; right: -6px; top: 19px; z-index: 2; width: 12px; height: 12px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-0); color: var(--text-faint); }
|
||||
.release-label { color: var(--text-faint); font-size: 9px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.release-value { display: flex; align-items: center; gap: 7px; margin-top: 4px; min-width: 0; }
|
||||
.release-value strong { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.release-value span { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex: 0 0 auto; }
|
||||
.state-dot.success { background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
|
||||
.state-dot.warning { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
|
||||
.state-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
|
||||
.tabs { display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-1); }
|
||||
.tab { height: 38px; padding: 0 12px; background: transparent; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
|
||||
.tab:hover { color: var(--text); }
|
||||
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
|
||||
.repo-content { min-height: 0; overflow: hidden; }
|
||||
.changes-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: 290px minmax(0,1fr); }
|
||||
.file-panel { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface-1); display: flex; flex-direction: column; }
|
||||
.file-panel-tools { min-height: 38px; padding: 0 9px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
|
||||
.file-list { flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; min-height: 0; padding: 5px; overscroll-behavior: contain; scrollbar-gutter: stable; }
|
||||
.file-row { width: 100%; min-height: 34px; display: grid; grid-template-columns: 17px 17px minmax(0,1fr) 16px; gap: 7px; align-items: center; padding: 3px 6px; border-radius: 4px; background: transparent; color: var(--text-muted); cursor: pointer; text-align: left; }
|
||||
.file-row:hover { background: var(--surface-hover); color: var(--text); }
|
||||
.file-row.active { background: var(--primary-soft); color: var(--text); }
|
||||
.file-row input { margin: 0; accent-color: var(--primary-strong); }
|
||||
.file-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-mono); font-size: 11px; }
|
||||
.file-status { font-family: var(--font-mono); font-size: 10px; font-weight: 750; color: var(--warning); }
|
||||
.file-status.added, .file-status.untracked { color: var(--success); }
|
||||
.file-status.deleted, .file-status.conflict { color: var(--danger); }
|
||||
.diff-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: 38px minmax(0,1fr); background: var(--bg); }
|
||||
.diff-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border-bottom: 1px solid var(--line-soft); background: var(--surface-0); }
|
||||
.diff-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); color: var(--text-muted); }
|
||||
.diff-view { overflow: auto; padding: 8px 0 36px; font-family: var(--font-mono); font-size: 11px; line-height: 19px; white-space: pre; tab-size: 2; }
|
||||
.diff-line { display: block; min-height: 19px; padding: 0 14px; }
|
||||
.diff-line.add { background: rgba(38, 166, 115, .14); color: #8ef0c6; }
|
||||
.diff-line.remove { background: rgba(229, 83, 75, .14); color: #ffaaa5; }
|
||||
html[data-theme="light"] .diff-line.add { color: #006642; }
|
||||
html[data-theme="light"] .diff-line.remove { color: #a31f1f; }
|
||||
.diff-line.meta { color: var(--primary); }
|
||||
.diff-line.hunk { color: #caa7ff; background: rgba(148, 97, 214, .08); }
|
||||
.empty-state { height: 100%; min-height: 260px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 30px; color: var(--text-muted); }
|
||||
.empty-state .large-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--text-faint); margin-bottom: 12px; }
|
||||
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 14px; }
|
||||
.empty-state p { margin: 0; max-width: 420px; line-height: 1.55; }
|
||||
|
||||
.inspector { padding: 16px; }
|
||||
.inspector-header { margin-bottom: 16px; }
|
||||
.inspector-header h2 { margin: 3px 0 0; font-size: 15px; }
|
||||
.inspector-section { padding: 15px 0; border-top: 1px solid var(--line-soft); }
|
||||
.inspector-section:first-of-type { border-top: 0; padding-top: 0; }
|
||||
.inspector-label { color: var(--text-faint); font-size: 9px; font-weight: 760; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
.textarea, .input, .select { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-0); color: var(--text); }
|
||||
.input, .select { height: 33px; padding: 0 9px; }
|
||||
.textarea { min-height: 98px; resize: vertical; padding: 9px 10px; line-height: 1.45; }
|
||||
.field-hint { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--text-faint); font-size: 10px; }
|
||||
.context-summary { padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); }
|
||||
.context-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--text-muted); }
|
||||
.context-row strong { color: var(--text); font-family: var(--font-mono); font-size: 11px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
|
||||
.notice { display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px; border-radius: 5px; border: 1px solid var(--line); background: var(--surface-0); color: var(--text-muted); line-height: 1.45; }
|
||||
.notice.warning { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); background: var(--warning-soft); color: var(--warning); }
|
||||
.notice.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); color: var(--danger); }
|
||||
.notice.success { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: var(--success-soft); color: var(--success); }
|
||||
.stack { display: grid; gap: 8px; }
|
||||
.divider-text { display: flex; align-items: center; gap: 9px; color: var(--text-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
|
||||
.divider-text::before, .divider-text::after { content: ''; height: 1px; background: var(--line-soft); flex: 1; }
|
||||
|
||||
.data-table { width: 100%; border-collapse: collapse; }
|
||||
.data-table th { height: 34px; padding: 0 11px; color: var(--text-faint); text-align: left; font-size: 9px; letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--line); }
|
||||
.data-table td { padding: 10px 11px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
|
||||
.data-table tr:last-child td { border-bottom: 0; }
|
||||
.data-table tbody tr:hover { background: var(--surface-hover); }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
.status-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 8px; border-radius: 11px; background: var(--surface-3); color: var(--text-muted); font-size: 10px; font-weight: 680; }
|
||||
.status-pill.success { background: var(--success-soft); color: var(--success); }
|
||||
.status-pill.warning { background: var(--warning-soft); color: var(--warning); }
|
||||
.status-pill.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
|
||||
.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 100%; }
|
||||
.settings-nav { padding: 15px 8px; border-right: 1px solid var(--line); background: var(--surface-1); }
|
||||
.settings-content { padding: 25px 30px 60px; overflow: auto; }
|
||||
.settings-group { max-width: 860px; margin-bottom: 28px; }
|
||||
.settings-group > h2 { font-size: 12px; margin: 0 0 12px; }
|
||||
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
|
||||
.field { display: grid; gap: 6px; }
|
||||
.field label { color: var(--text-muted); font-size: 11px; font-weight: 650; }
|
||||
.field.full { grid-column: 1 / -1; }
|
||||
.connection-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-1); }
|
||||
.root-row { display: flex; align-items: center; gap: 8px; }
|
||||
.root-row .input { flex: 1; font-family: var(--font-mono); font-size: 11px; }
|
||||
|
||||
.deploy-card-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 12px; }
|
||||
.deploy-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
|
||||
.deploy-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid var(--line-soft); }
|
||||
.deploy-card-body { padding: 13px 14px; }
|
||||
.deploy-metadata { display: grid; grid-template-columns: 1fr auto; gap: 7px 15px; color: var(--text-muted); }
|
||||
.deploy-metadata strong { font-family: var(--font-mono); font-size: 11px; color: var(--text); }
|
||||
|
||||
.deployment-view { min-height: 100%; padding: 22px; }
|
||||
.pipeline-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); overflow: hidden; }
|
||||
.pipeline-head { display: flex; justify-content: space-between; gap: 15px; padding: 16px; border-bottom: 1px solid var(--line-soft); }
|
||||
.pipeline-head h2 { margin: 0; font-size: 16px; }
|
||||
.pipeline-head p { margin: 5px 0 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }
|
||||
.pipeline-stages { display: grid; grid-template-columns: repeat(5,1fr); padding: 25px 20px 20px; }
|
||||
.pipeline-stage { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--text-faint); text-align: center; font-size: 10px; font-weight: 680; }
|
||||
.pipeline-stage::before { content: ''; position: absolute; height: 2px; left: -50%; right: 50%; top: 15px; background: var(--line); }
|
||||
.pipeline-stage:first-child::before { display: none; }
|
||||
.pipeline-stage.complete::before, .pipeline-stage.active::before { background: var(--success); }
|
||||
.stage-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); border: 1px solid var(--line); z-index: 1; }
|
||||
.pipeline-stage.complete { color: var(--success); }
|
||||
.pipeline-stage.complete .stage-icon { background: var(--success); border-color: var(--success); color: #06251b; }
|
||||
.pipeline-stage.active { color: var(--primary); }
|
||||
.pipeline-stage.active .stage-icon { background: var(--primary-strong); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 5px var(--primary-soft); }
|
||||
.log-view { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: #080b11; overflow: hidden; }
|
||||
.log-toolbar { height: 35px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border-bottom: 1px solid #262d3b; color: #9aa4b6; }
|
||||
.log-lines { min-height: 290px; max-height: 500px; overflow: auto; padding: 12px 14px; font: 11px/19px var(--font-mono); color: #c3cada; white-space: pre-wrap; }
|
||||
.log-lines .ok { color: #54ddb0; }
|
||||
.log-lines .warn { color: #f2ba63; }
|
||||
.log-lines .err { color: #ff817a; }
|
||||
|
||||
.setup-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 25px; background: rgba(4,7,12,.75); backdrop-filter: blur(8px); }
|
||||
.setup-window { width: min(920px,96vw); min-height: 590px; max-height: 92vh; display: grid; grid-template-columns: 230px minmax(0,1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow); }
|
||||
.setup-sidebar { padding: 24px 17px; border-right: 1px solid var(--line); background: var(--surface-0); }
|
||||
.setup-sidebar h2 { margin: 16px 0 5px; font-size: 18px; }
|
||||
.setup-sidebar p { margin: 0 0 22px; color: var(--text-muted); line-height: 1.5; }
|
||||
.setup-step { min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 5px; color: var(--text-faint); margin-bottom: 3px; }
|
||||
.setup-step .step-number { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 9px; }
|
||||
.setup-step.active { background: var(--primary-soft); color: var(--primary); }
|
||||
.setup-step.complete { color: var(--success); }
|
||||
.setup-content { min-width: 0; padding: 34px 38px 24px; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: auto; }
|
||||
.setup-body h1 { margin: 0; font-size: 22px; }
|
||||
.setup-body > p { color: var(--text-muted); line-height: 1.55; max-width: 620px; }
|
||||
.setup-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
|
||||
.discovery-list { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; max-height: 260px; overflow-y: auto; }
|
||||
.discovery-row { min-height: 45px; display: grid; grid-template-columns: 20px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); }
|
||||
.discovery-row:last-child { border-bottom: 0; }
|
||||
.discovery-row strong { display: block; font-size: 12px; }
|
||||
.discovery-row span { display: block; margin-top: 2px; color: var(--text-faint); font: 10px var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; background: rgba(4,7,12,.7); backdrop-filter: blur(4px); }
|
||||
.modal { width: min(520px,94vw); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; }
|
||||
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 17px; border-bottom: 1px solid var(--line); }
|
||||
.modal-header h2 { margin: 0; font-size: 15px; }
|
||||
.modal-body { padding: 17px; }
|
||||
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 17px; border-top: 1px solid var(--line-soft); background: var(--surface-0); }
|
||||
|
||||
.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 9px; border-top: 1px solid var(--line); background: var(--surface-1); color: var(--text-faint); font-size: 10px; font-weight: 620; }
|
||||
.statusbar-left, .statusbar-right { display: flex; align-items: center; gap: 13px; min-width: 0; }
|
||||
.statusbar-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
|
||||
.statusbar .success { color: var(--success); }
|
||||
.statusbar .warning { color: var(--warning); }
|
||||
.statusbar .danger { color: var(--danger); }
|
||||
|
||||
.toast-root { position: fixed; right: 15px; bottom: 38px; z-index: 90; display: grid; gap: 8px; pointer-events: none; }
|
||||
.toast { width: min(380px,calc(100vw - 30px)); display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); box-shadow: var(--shadow); pointer-events: auto; animation: toast-in .18s ease-out; }
|
||||
.toast.success { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); }
|
||||
.toast.error { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }
|
||||
.toast strong { display: block; margin-bottom: 2px; }
|
||||
.toast span { color: var(--text-muted); line-height: 1.4; }
|
||||
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
|
||||
|
||||
.loading-overlay { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: color-mix(in srgb, var(--surface-0) 72%, transparent); backdrop-filter: blur(2px); }
|
||||
.spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@media (max-width: 1250px) {
|
||||
:root { --sidebar: 250px; --action-panel: 320px; }
|
||||
.summary-grid { grid-template-columns: repeat(2,1fr); }
|
||||
.summary-card:nth-child(2) { border-right: 0; }
|
||||
.summary-card:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
|
||||
.queue-row { grid-template-columns: 28px minmax(130px,1fr) minmax(180px,1.5fr) auto; }
|
||||
}
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
:root { --sidebar: 220px; --action-panel: 300px; }
|
||||
.global-search { width: 190px; }
|
||||
.changes-layout { grid-template-columns: 245px minmax(0,1fr); }
|
||||
.page { padding-left: 18px; padding-right: 18px; }
|
||||
}
|
||||
|
||||
/* ForgeFlow v0.2 interaction and workflow refinements */
|
||||
.command-trigger { height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); color: var(--text-muted); cursor: pointer; -webkit-app-region: no-drag; }
|
||||
.command-trigger:hover { color: var(--text); background: var(--surface-hover); }
|
||||
kbd { min-width: 24px; padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--text-faint); font: 9px var(--font-mono); text-align: center; }
|
||||
.repo-group-label { padding: 10px 8px 4px; color: var(--text-faint); font-size: 9px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
|
||||
.favorite-button { width: 25px; height: 25px; display: inline-grid; place-items: center; margin-left: -5px; border-radius: 5px; background: transparent; color: var(--text-faint); cursor: pointer; }
|
||||
.favorite-button:hover, .favorite-button.active { color: var(--warning); background: var(--warning-soft); }
|
||||
.favorite-button.active svg { fill: currentColor; }
|
||||
.repo-row .repo-icon .icon { width: 15px; height: 15px; }
|
||||
.repo-row .repo-icon:has(svg path[d^="m12 3"]) { color: var(--warning); }
|
||||
.button.small { min-height: 25px; padding: 0 7px; font-size: 10px; }
|
||||
.stack.horizontal.compact { gap: 5px; }
|
||||
.empty-state.compact { min-height: 105px; padding: 16px; }
|
||||
.empty-state.full { height: 100%; min-height: 320px; }
|
||||
.readiness-list { display: grid; gap: 3px; }
|
||||
.readiness-row { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 9px; align-items: start; padding: 9px 4px; border-bottom: 1px solid var(--line-soft); }
|
||||
.readiness-row:last-child { border-bottom: 0; }
|
||||
.readiness-row strong { display: block; font-size: 11px; }
|
||||
.readiness-row span:not(.state-dot) { display: block; margin-top: 2px; color: var(--text-faint); font-size: 10px; }
|
||||
.action-panel-head { padding: 18px 17px 14px; border-bottom: 1px solid var(--line); }
|
||||
.action-panel-head h2 { margin: 5px 0 5px; font-size: 16px; }
|
||||
.action-panel-head p { margin: 0; color: var(--text-muted); line-height: 1.45; }
|
||||
.action-panel-body { padding: 15px 16px; }
|
||||
.action-panel-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: auto 10px 10px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
|
||||
.action-panel { display: flex; flex-direction: column; }
|
||||
.panel-callout { display: grid; gap: 9px; }
|
||||
.panel-callout h2 { margin: 3px 0 0; font-size: 15px; }
|
||||
.panel-callout p { margin: 0 0 5px; color: var(--text-muted); line-height: 1.5; }
|
||||
.callout-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 9px; background: var(--primary-soft); color: var(--primary); }
|
||||
.callout-icon.success { background: var(--success-soft); color: var(--success); }
|
||||
.callout-icon.warning { background: var(--warning-soft); color: var(--warning); }
|
||||
.callout-icon.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
.field-hint { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--text-faint); font-size: 10px; }
|
||||
.field-label { display: block; margin-top: 8px; color: var(--text-muted); font-size: 10px; font-weight: 650; }
|
||||
.textarea { width: 100%; min-height: 92px; resize: vertical; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); line-height: 1.45; }
|
||||
.input, .select { width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-0); color: var(--text); }
|
||||
.select { cursor: pointer; }
|
||||
.stack { display: grid; gap: 8px; }
|
||||
.stack.horizontal { display: flex; flex-wrap: wrap; align-items: center; }
|
||||
.deploy-proof { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 7px 0 5px; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); }
|
||||
.deploy-proof span { color: var(--text-faint); }
|
||||
.deploy-proof strong { font: 11px var(--font-mono); }
|
||||
.tab-page { min-height: 100%; padding: 18px 19px 42px; overflow: auto; }
|
||||
.git-tools-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; align-items: start; }
|
||||
.inline-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 13px; }
|
||||
.tool-list { display: grid; border: 1px solid var(--line-soft); border-radius: 6px; overflow: hidden; }
|
||||
.tool-row { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
|
||||
.tool-row:last-child { border-bottom: 0; }
|
||||
.tool-row:hover { background: var(--surface-hover); }
|
||||
.tool-row strong { display: block; }
|
||||
.tool-row span { display: block; margin-top: 3px; color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.deploy-card-header h3 { margin: 4px 0 3px; font-size: 14px; }
|
||||
.deploy-card-header p { margin: 0; color: var(--text-faint); font: 10px var(--font-mono); }
|
||||
.card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
|
||||
.compact-card .deploy-card-body { padding-bottom: 11px; }
|
||||
.check-field { display: flex; align-items: center; gap: 9px; padding: 8px 0; color: var(--text-muted); }
|
||||
.check-field input { accent-color: var(--primary-strong); }
|
||||
.wide-modal { width: min(650px,95vw); }
|
||||
.modal-spacer { flex: 1; }
|
||||
.confirm-hero { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line)); border-radius: 7px; background: var(--success-soft); }
|
||||
.confirm-hero.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); }
|
||||
.confirm-hero > .icon { width: 27px; height: 27px; color: var(--success); }
|
||||
.confirm-hero.danger > .icon { color: var(--danger); }
|
||||
.confirm-hero strong, .confirm-hero span { display: block; }
|
||||
.confirm-hero span { margin-top: 3px; color: var(--text-muted); }
|
||||
.confirm-grid { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 9px 14px; margin-top: 16px; }
|
||||
.confirm-grid span { color: var(--text-faint); }
|
||||
.confirm-grid strong { overflow-wrap: anywhere; }
|
||||
.notice.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); background: var(--danger-soft); color: var(--danger); }
|
||||
.notice.warning { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); background: var(--warning-soft); color: var(--warning); }
|
||||
.danger-zone { padding: 15px; border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line)); border-radius: 7px; background: var(--danger-soft); }
|
||||
.danger-zone p { color: var(--text-muted); line-height: 1.5; }
|
||||
.pipeline-stages { grid-template-columns: repeat(6,1fr); }
|
||||
.pipeline-stage.failed { color: var(--danger); }
|
||||
.pipeline-stage.failed .stage-icon { background: var(--danger); border-color: var(--danger); color: #fff; }
|
||||
.pipeline-stage.cancelled, .pipeline-stage.skipped { color: var(--text-faint); }
|
||||
.log-lines { word-break: break-word; }
|
||||
.palette-backdrop { align-items: start; padding-top: 12vh; }
|
||||
.command-palette { width: min(650px,94vw); border: 1px solid var(--line); border-radius: 10px; background: var(--surface-1); box-shadow: var(--shadow); overflow: hidden; }
|
||||
.palette-search { height: 54px; display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 9px; align-items: center; padding: 0 15px; border-bottom: 1px solid var(--line); }
|
||||
.palette-search input { height: 100%; border: 0; outline: 0; background: transparent; font-size: 15px; }
|
||||
.palette-list { max-height: 380px; overflow: auto; padding: 6px; }
|
||||
.palette-row { width: 100%; min-height: 52px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 6px; background: transparent; color: var(--text-muted); text-align: left; cursor: pointer; }
|
||||
.palette-row:hover, .palette-row:focus-visible { background: var(--primary-soft); color: var(--text); }
|
||||
.palette-row:disabled { opacity: .4; cursor: not-allowed; }
|
||||
.palette-row strong, .palette-row small { display: block; }
|
||||
.palette-row small { margin-top: 3px; color: var(--text-faint); }
|
||||
.palette-footer { padding: 8px 13px; border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: 10px; }
|
||||
.discovery-progress { min-height: 260px; display: grid; place-content: center; justify-items: center; gap: 13px; color: var(--text-muted); }
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.command-trigger span { display: none; }
|
||||
.command-trigger kbd { display: none; }
|
||||
.git-tools-grid { grid-template-columns: 1fr; }
|
||||
.pipeline-stages { grid-template-columns: repeat(3,1fr); row-gap: 18px; }
|
||||
.pipeline-stage:nth-child(4)::before { display: none; }
|
||||
}
|
||||
|
||||
/* v0.3 diagnostics and preflight */
|
||||
.diagnostics-page { display: grid; gap: 18px; padding: 20px 22px 44px; overflow: auto; }
|
||||
.diagnostic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
|
||||
.diagnostic-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line-soft); border-radius: 7px; overflow: hidden; }
|
||||
.diagnostic-metrics > div { min-height: 68px; display: grid; align-content: center; gap: 5px; padding: 11px 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: var(--surface-0); }
|
||||
.diagnostic-metrics > div:nth-child(2n) { border-right: 0; }
|
||||
.diagnostic-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
|
||||
.diagnostic-metrics span { color: var(--text-faint); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
|
||||
.diagnostic-metrics strong { overflow-wrap: anywhere; font-size: 12px; }
|
||||
.preflight-summary { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 11px 13px; border-bottom: 1px solid var(--line-soft); color: var(--text-muted); }
|
||||
.preflight-list { display: grid; }
|
||||
.preflight-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px 13px; border-bottom: 1px solid var(--line-soft); }
|
||||
.preflight-row:last-child { border-bottom: 0; }
|
||||
.preflight-row > div { min-width: 0; }
|
||||
.preflight-row strong { display: block; margin-top: 1px; font-size: 11px; }
|
||||
.preflight-row span:not(.preflight-state):not(.status-pill), .preflight-row small { display: block; margin-top: 3px; color: var(--text-faint); line-height: 1.4; overflow-wrap: anywhere; }
|
||||
.preflight-row small { color: var(--text-muted); }
|
||||
.preflight-state { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); color: var(--text-faint); }
|
||||
.preflight-state .icon { width: 14px; height: 14px; }
|
||||
.preflight-state.success { background: var(--success-soft); color: var(--success); }
|
||||
.preflight-state.warning { background: var(--warning-soft); color: var(--warning); }
|
||||
.preflight-state.danger { background: var(--danger-soft); color: var(--danger); }
|
||||
.setup-preflight { max-height: 330px; margin-top: 17px; border: 1px solid var(--line); border-radius: 8px; overflow: auto; background: var(--surface-0); }
|
||||
.setup-summary { display: grid; margin: 18px 0; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; background: var(--surface-0); }
|
||||
.setup-support-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
|
||||
.diagnostics-page .panel-body { padding: 14px; }
|
||||
.diagnostics-page .section-block { margin: 0; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.diagnostic-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.diagnostics-page { padding: 15px; }
|
||||
.diagnostic-metrics { grid-template-columns: 1fr; }
|
||||
.diagnostic-metrics > div { border-right: 0; }
|
||||
.diagnostic-metrics > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line-soft); }
|
||||
.diagnostic-metrics > div:last-child { border-bottom: 0; }
|
||||
.preflight-row { grid-template-columns: 28px minmax(0, 1fr); }
|
||||
.preflight-row > .status-pill { grid-column: 2; justify-self: start; }
|
||||
}
|
||||
|
||||
.required-mark { color: var(--warning); font-size: 10px; font-weight: 700; text-transform: uppercase; margin-left: 5px; }
|
||||
.commit-readiness { margin-top: 9px; padding: 8px 9px; display: flex; align-items: flex-start; gap: 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--text-muted); background: var(--surface-0); font-size: 11px; line-height: 1.4; }
|
||||
.commit-readiness.blocked { border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); background: var(--warning-soft); color: var(--text); }
|
||||
.commit-readiness.ready { border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: var(--success-soft); color: var(--text); }
|
||||
.commit-readiness .icon { flex: 0 0 auto; margin-top: 1px; }
|
||||
.stage-note { margin-top: 10px; color: var(--text-faint); font-size: 10px; line-height: 1.45; }
|
||||
|
||||
.update-card { margin-top: 12px; padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-0); }
|
||||
.update-card.available { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: var(--primary-soft); }
|
||||
.update-card > div:first-child { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
||||
.update-card > div:first-child > span { min-width: 0; display: grid; gap: 2px; }
|
||||
.update-card small, .server-card small { color: var(--text-faint); }
|
||||
.server-list { display: grid; gap: 8px; }
|
||||
.server-card { padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-0); }
|
||||
.server-card-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
|
||||
.server-card-main > div { min-width: 0; display: grid; gap: 2px; }
|
||||
.server-card-main span { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
|
||||
.provider-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-bottom: 14px; }
|
||||
.provider-note { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-0); color: var(--text-muted); font-size: 11px; }
|
||||
.server-inspection { margin-top: 12px; }
|
||||
@media (max-width: 1240px) {
|
||||
.wordmark small { display: none; }
|
||||
.update-card, .server-card { align-items: flex-start; flex-direction: column; }
|
||||
}
|
||||
|
||||
.setup-brand-logo { width: 150px; height: auto; display: block; margin-bottom: 12px; }
|
||||
Reference in New Issue
Block a user