Scaffold GitManager multi-repo dashboard
Runnable skeleton per AGENT.md: Echo server (/, /help, /healthz, /api/repos), read-only repo scanner with in-memory index, the internal/git boundary, the <repo-list> web component with design tokens, and dev tooling (Dockerfile, docker-compose, air, .env.example). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,53 @@
|
||||
/* Shared design tokens — the ONE sanctioned cross-shadow-boundary styling
|
||||
channel (AGENT.md §1.1). Custom properties inherit into every shadow root, so
|
||||
components reference these with var(--…) instead of hardcoding hex. Change a
|
||||
token here and the whole UI follows. */
|
||||
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
|
||||
/* Surfaces & structure */
|
||||
--surface-0: #14161a; /* app background */
|
||||
--surface-1: #1b1e24; /* panels */
|
||||
--surface-2: #242830; /* raised cards */
|
||||
--border: #333944;
|
||||
--border-strong: #454c59;
|
||||
|
||||
/* Text */
|
||||
--color-fg: #e6e9ef;
|
||||
--color-fg-muted: #9aa4b2;
|
||||
|
||||
/* Fills / accents */
|
||||
--fill-accent: #4a9eff;
|
||||
|
||||
/* Semantic status (AGENT.md §1.1) */
|
||||
--color-danger: #ff5c5c;
|
||||
--color-danger-bg: #3a1e1e;
|
||||
--color-success: #4ade80;
|
||||
--color-warning: #f5c451;
|
||||
|
||||
/* Git-state colors */
|
||||
--git-clean: var(--color-success);
|
||||
--git-dirty: var(--color-warning);
|
||||
--git-ahead: #7ab8ff;
|
||||
--git-behind: #d08bff;
|
||||
--git-conflict: var(--color-danger);
|
||||
|
||||
/* Radii */
|
||||
--radius: 8px;
|
||||
--radius-sm: 4px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
/* The page shell owns only the app frame; components own everything inside their
|
||||
shadow roots. Keep global selectors OUT of components (AGENT.md §1.1). */
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--surface-0);
|
||||
color: var(--color-fg);
|
||||
font: 14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--fill-accent);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GitManager — Help</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<style>
|
||||
header {
|
||||
display: flex; align-items: baseline; gap: 16px;
|
||||
padding: 12px 20px; background: var(--surface-1);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
header h1 { margin: 0; font-size: 16px; }
|
||||
header nav { margin-left: auto; }
|
||||
main { max-width: 760px; padding: 20px; }
|
||||
h2 { font-size: 15px; margin-top: 28px; }
|
||||
code { background: var(--surface-2); padding: 1px 5px; border-radius: var(--radius-sm); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>GitManager</h1>
|
||||
<nav><a href="/">← Dashboard</a></nav>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Using GitManager</h1>
|
||||
<p>
|
||||
GitManager scans the folders you configure and shows every Git repository
|
||||
it finds, with each repo's current branch, whether it has uncommitted
|
||||
changes, and how far ahead or behind its upstream it is.
|
||||
</p>
|
||||
|
||||
<h2>Getting started</h2>
|
||||
<ol>
|
||||
<li>Copy <code>.env.example</code> to <code>.env</code>.</li>
|
||||
<li>Set <code>GIT_REPO_ROOTS</code> to the folders that hold your repos.</li>
|
||||
<li>Run <code>docker compose up</code> and open the dashboard.</li>
|
||||
</ol>
|
||||
|
||||
<h2>Reading the dashboard</h2>
|
||||
<ul>
|
||||
<li><strong>Branch</strong> — the checked-out branch (or <code>HEAD</code> when detached).</li>
|
||||
<li><strong>Dirty</strong> — the working tree has staged or unstaged changes.</li>
|
||||
<li><strong>Ahead / behind</strong> — commits your branch leads or trails its upstream by.</li>
|
||||
</ul>
|
||||
|
||||
<h2>Background refresh</h2>
|
||||
<p>
|
||||
The dashboard refreshes on its own. By default it does <em>not</em> reach
|
||||
the network — enable <code>SCAN_FETCH_ENABLED</code> if you want
|
||||
ahead/behind counts kept current via <code>git fetch</code>.
|
||||
</p>
|
||||
|
||||
<!-- Keep this page task-oriented and update it whenever a user-facing
|
||||
feature changes, in the same change (AGENT.md §9.3). -->
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>GitManager</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
<!-- Web components declare themselves; the page does not micro-manage them
|
||||
(AGENT.md §1.1). Each fetches its own data on connect. -->
|
||||
<script type="module" src="/components/repo-list/repo-list.js"></script>
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
padding: 12px 20px;
|
||||
background: var(--surface-1);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
header h1 { margin: 0; font-size: 16px; }
|
||||
header nav { margin-left: auto; }
|
||||
main { padding: 20px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>GitManager</h1>
|
||||
<span style="color: var(--color-fg-muted)">multi-repo dashboard</span>
|
||||
<nav><a href="/help">Help</a></nav>
|
||||
</header>
|
||||
<main>
|
||||
<!-- The repo list docks LEFT by default (AGENT.md §4). Docking is layered on
|
||||
later; for now the list stands alone. -->
|
||||
<repo-list></repo-list>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user