Spaces:

Ben-S
/

git-visualizer

Running

App Files Files Community

Ben-S commited on Nov 5, 2025

Commit

ec7b4bb

verified ·

1 Parent(s): ebe8d5e

A visual and interactive representation of the core features of git. Branch, merge, rebase, detached head, blame, commits, issues, pull requests, etc. Should be beautiful and easy to understand

Browse files

Files changed (4) hide show

README.md +7 -4
index.html +211 -19
script.js +456 -0
style.css +333 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
 title: Git Visualizer
-emoji: 🌖
-colorFrom: pink
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Git Visualizer
+colorFrom: green
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -1,19 +1,211 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Git Visualizer — Interactive Git Core Concepts</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7.5a3.5 3.5 0 0 1 4.5 3.9V14a3 3 0 1 1-1.5-2.6'/%3E%3Cpath d='M6 3a5 5 0 0 0 5 5h3'/%3E%3Cpath d='M2 3v5.5A3.5 3.5 0 0 0 5.5 12H8'/%3E%3Cpath d='M2 12h3a5 5 0 0 1 5 5v3'/%3E%3Cpath d='M10 20v-3a5 5 0 0 1 5-5h3'/%3E%3C/svg%3E" />
+  <link rel="stylesheet" href="style.css" />
+  <script defer src="script.js"></script>
+</head>
+<body>
+  <header class="app-header">
+    <div class="brand">
+      <div class="logo">⧉</div>
+      <div class="title">
+        <h1>Git Visualizer</h1>
+        <p>Explore commits, branches, merge, rebase, detached HEAD, blame, issues, and pull requests.</p>
+      </div>
+    </div>
+    <div class="customization">
+      <div class="chip">
+        <label for="primaryColor">Primary</label>
+        <input id="primaryColor" type="color" value="#6366f1" />
+      </div>
+      <div class="chip">
+        <label for="secondaryColor">Secondary</label>
+        <input id="secondaryColor" type="color" value="#22c55e" />
+      </div>
+      <div class="chip">
+        <label for="themeMode">Theme</label>
+        <select id="themeMode">
+          <option value="system">System</option>
+          <option value="light">Light</option>
+          <option value="dark">Dark</option>
+        </select>
+      </div>
+    </div>
+  </header>
+  <main class="app">
+    <aside class="sidebar">
+      <section class="panel">
+        <h2>Repository</h2>
+        <div class="row">
+          <div>
+            <div class="label">Current HEAD</div>
+            <div id="currentHead" class="value">-</div>
+          </div>
+          <div>
+            <div class="label">Detached</div>
+            <div id="detachedState" class="value">No</div>
+          </div>
+        </div>
+        <div class="row">
+          <div>
+            <div class="label">Branches</div>
+            <ul id="branchList" class="list"></ul>
+          </div>
+        </div>
+        <div class="row">
+          <div>
+            <div class="label">Stash</div>
+            <ul id="stashList" class="list compact"></ul>
+          </div>
+        </div>
+      </section>
+      <section class="panel">
+        <h2>Actions</h2>
+        <div class="grid">
+          <div class="field">
+            <label for="commitMsg">Commit message</label>
+            <input id="commitMsg" type="text" placeholder="Describe your change" />
+          </div>
+          <button id="btnCommit" class="btn primary">Commit</button>
+          <button id="btnCommitAmend" class="btn ghost">Amend</button>
+          <button id="btnUndoCommit" class="btn ghost">Undo last commit</button>
+        </div>
+        <div class="grid">
+          <div class="field">
+            <label for="branchName">New branch name</label>
+            <input id="branchName" type="text" placeholder="feature/..." />
+          </div>
+          <button id="btnCreateBranch" class="btn">Create branch</button>
+        </div>
+        <div class="grid">
+          <div class="field">
+            <label for="switchBranch">Switch to branch</label>
+            <select id="switchBranch"></select>
+          </div>
+          <button id="btnCheckout" class="btn">Checkout</button>
+        </div>
+        <div class="grid">
+          <div class="field">
+            <label for="checkoutCommit">Checkout commit</label>
+            <select id="checkoutCommit"></select>
+          </div>
+          <button id="btnDetach" class="btn warn">Detach HEAD</button>
+        </div>
+        <div class="grid">
+          <button id="btnMerge" class="btn">Merge selected into current</button>
+          <button id="btnRebase" class="btn">Rebase current on selected</button>
+        </div>
+        <div class="grid">
+          <div class="field">
+            <label for="mergeTarget">Merge target</label>
+            <select id="mergeTarget"></select>
+          </div>
+          <div class="field">
+            <label for="rebaseTarget">Rebase target</label>
+            <select id="rebaseTarget"></select>
+          </div>
+        </div>
+        <div class="grid">
+          <button id="btnStash" class="btn">Stash</button>
+          <button id="btnStashPop" class="btn">Stash pop</button>
+        </div>
+        <div class="grid">
+          <button id="btnResetHard" class="btn danger">Reset --hard (to selected)</button>
+          <select id="resetTarget"></select>
+        </div>
+      </section>
+      <section class="panel">
+        <h2>Issues & Pull Requests</h2>
+        <div class="grid">
+          <button id="btnNewIssue" class="btn">New Issue</button>
+          <button id="btnNewPR" class="btn">New Pull Request</button>
+        </div>
+        <div class="row">
+          <div>
+            <div class="label">Issues</div>
+            <ul id="issuesList" class="list"></ul>
+          </div>
+        </div>
+        <div class="row">
+          <div>
+            <div class="label">Pull Requests</div>
+            <ul id="prsList" class="list"></ul>
+          </div>
+        </div>
+      </section>
+      <section class="panel">
+        <h2>Blame</h2>
+        <div class="grid">
+          <div class="field">
+            <label for="blameCommit">Select commit</label>
+            <select id="blameCommit"></select>
+          </div>
+          <button id="btnBlame" class="btn ghost">Show blame</button>
+        </div>
+        <div id="blamePanel" class="code hidden"></div>
+      </section>
+      <section class="panel">
+        <h2>Demo Scenarios</h2>
+        <div class="grid">
+          <button id="btnDemoBasic" class="btn">Init demo</button>
+          <button id="btnDemoPR" class="btn">Open PR scenario</button>
+        </div>
+      </section>
+    </aside>
+    <section class="graph">
+      <div class="graph-toolbar">
+        <div class="left">
+          <button id="btnFit" class="btn ghost">Fit</button>
+          <button id="btnCenterMain" class="btn ghost">Center main</button>
+          <button id="btnCenterHead" class="btn ghost">Center HEAD</button>
+        </div>
+        <div class="right">
+          <span class="legend"><span class="legend-dot"></span> Commits</span>
+          <span class="legend"><span class="legend-branch"></span> Branch head</span>
+          <span class="legend"><span class="legend-head"></span> HEAD</span>
+        </div>
+      </div>
+      <div class="canvas-wrapper">
+        <svg id="graphSvg" xmlns="http://www.w3.org/2000/svg"></svg>
+      </div>
+    </section>
+  </main>
+  <footer class="app-footer">
+    <div>Tip: Start with “Init demo”, create a branch, make commits, then try Merge and Rebase. Toggle theme and colors above.</div>
+    <div class="small">Built for interactive learning of core Git concepts.</div>
+  </footer>
+  <script>
+    // Configure CSS variables from inputs (supports "undefined" placeholder too)
+    const primaryInput = document.getElementById('primaryColor');
+    const secondaryInput = document.getElementById('secondaryColor');
+    const themeMode = document.getElementById('themeMode');
+    const applyVars = () => {
+      const getOrFallback = (v, fallback) => (!v || v === 'undefined') ? fallback : v;
+      document.documentElement.style.setProperty('--primary', getOrFallback(primaryInput.value, '#6366f1'));
+      document.documentElement.style.setProperty('--secondary', getOrFallback(secondaryInput.value, '#22c55e'));
+    };
+    primaryInput.addEventListener('input', applyVars);
+    secondaryInput.addEventListener('input', applyVars);
+    themeMode.addEventListener('change', () => {
+      const mode = themeMode.value;
+      if (mode === 'system') document.documentElement.removeAttribute('data-theme');
+      else document.documentElement.setAttribute('data-theme', mode);
+    });
+    applyVars();
+  </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,456 @@

+(() => {
+  // Utility short-hands
+  const $ = (sel) => document.querySelector(sel);
+  const $$ = (sel) => document.querySelectorAll(sel);
+  // DOM refs
+  const svg = $('#graphSvg');
+  const branchListEl = $('#branchList');
+  const stashListEl = $('#stashList');
+  const currentHeadEl = $('#currentHead');
+  const detachedStateEl = $('#detachedState');
+  const commitMsgEl = $('#commitMsg');
+  const btnCommit = $('#btnCommit');
+  const btnCommitAmend = $('#btnCommitAmend');
+  const btnUndoCommit = $('#btnUndoCommit');
+  const branchNameEl = $('#branchName');
+  const btnCreateBranch = $('#btnCreateBranch');
+  const switchBranchEl = $('#switchBranch');
+  const checkoutCommitEl = $('#checkoutCommit');
+  const btnCheckout = $('#btnCheckout');
+  const btnDetach = $('#btnDetach');
+  const btnMerge = $('#btnMerge');
+  const btnRebase = $('#btnRebase');
+  const mergeTargetEl = $('#mergeTarget');
+  const rebaseTargetEl = $('#rebaseTarget');
+  const btnStash = $('#btnStash');
+  const btnStashPop = $('#btnStashPop');
+  const btnResetHard = $('#btnResetHard');
+  const resetTargetEl = $('#resetTarget');
+  const btnNewIssue = $('#btnNewIssue');
+  const btnNewPR = $('#btnNewPR');
+  const issuesListEl = $('#issuesList');
+  const prsListEl = $('#prsList');
+  const btnFit = $('#btnFit');
+  const btnCenterMain = $('#btnCenterMain');
+  const btnCenterHead = $('#btnCenterHead');
+  const btnDemoBasic = $('#btnDemoBasic');
+  const btnDemoPR = $('#btnDemoPR');
+  const blameCommitEl = $('#blameCommit');
+  const btnBlame = $('#btnBlame');
+  const blamePanel = $('#blamePanel');
+  // Graph rendering config
+  const Lane = {
+    width: 140,
+    marginX: 90,
+    marginY: 36,
+    commitRadius: 6
+  };
+  // Colors
+  const cssVar = (name, fallback) => getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
+  // State
+  const state = {
+    repo: null,
+    layout: null,
+    nextCommitIndex: 0,
+    selectedNodeId: null,
+    cardEl: null,
+  };
+  // Init state
+  const initRepo = () => {
+    const main = newBranch('main', null);
+    const root = newCommit('Initial commit', 'System', { isRoot: true });
+    main.head = root.id;
+    return {
+      commits: new Map([[root.id, root]]),
+      branches: new Map([['main', main]]),
+      head: { type: 'branch', name: 'main' },
+      detachedHeadCommit: null,
+      stash: [],
+      issues: [],
+      prs: [],
+      nextId: 1
+    };
+  };
+  // Helpers
+  function newId(prefix = 'c') {
+    return `${prefix}${String(state.repo.nextId++).padStart(3, '0')}`;
+  }
+  function newBranch(name, fromCommitId) {
+    return {
+      name,
+      head: fromCommitId || null,
+      color: pickBranchColor()
+    };
+  }
+  function pickBranchColor() {
+    // Generates an HSL color based on repo state
+    const n = state.repo.branches.size + 1;
+    const hue = (n * 67) % 360;
+    return `hsl(${hue} 72% 60%)`;
+  }
+  function newCommit(message, author, extra = {}) {
+    const id = newId('c');
+    const idx = state.nextCommitIndex++;
+    return {
+      id,
+      idx,
+      message,
+      author,
+      parents: extra.parents || [],
+      branch: extra.branch || null,
+      isRoot: !!extra.isRoot,
+      timestamp: Date.now()
+    };
+  }
+  function getCommit(id) { return state.repo.commits.get(id); }
+  function getHeadCommit() {
+    const head = state.repo.head;
+    if (head.type === 'branch') {
+      const br = state.repo.branches.get(head.name);
+      return br && br.head ? getCommit(br.head) : null;
+    } else if (head.type === 'detached') {
+      return getCommit(head.commitId);
+    }
+    return null;
+  }
+  function getBranchByName(name) { return state.repo.branches.get(name); }
+  function isMergedInto(commitId, targetBranchName) {
+    // Check if commitId is ancestor of targetBranch head
+    const target = getBranchByName(targetBranchName)?.head;
+    if (!target) return false;
+    let cur = target;
+    const visited = new Set();
+    while (cur) {
+      if (cur === commitId) return true;
+      const node = getCommit(cur);
+      if (!node) break;
+      if (visited.has(cur)) break;
+      visited.add(cur);
+      cur = node.parents[0] || null;
+    }
+    return false;
+  }
+  // History navigation
+  function walk(commitId, fn) {
+    const visited = new Set();
+    let cur = commitId;
+    while (cur) {
+      if (visited.has(cur)) break;
+      visited.add(cur);
+      const node = getCommit(cur);
+      if (!node) break;
+      if (fn(node) === false) break;
+      cur = node.parents[0] || null;
+    }
+  }
+  // Index commit for linear layout per first-parent chain
+  function buildLayout() {
+    let idx = -1;
+    const visited = new Set();
+    let cur = null;
+    // find a head
+    const heads = [];
+    for (const br of state.repo.branches.values()) {
+      if (br.head) heads.push(br.head);
+    }
+    if (state.repo.head.type === 'detached') heads.push(state.repo.head.commitId);
+    // sort heads by existing idx
+    heads.sort((a, b) => (getCommit(a)?.idx ?? 0) - (getCommit(b)?.idx ?? 0));
+    // Walk each chain to assign indices topologically
+    for (const h of heads) {
+      cur = h;
+      const chain = [];
+      while (cur && !visited.has(cur)) {
+        visited.add(cur);
+        chain.push(cur);
+        const c = getCommit(cur);
+        cur = c?.parents?.[0] || null;
+      }
+      // Assign idx descending from 0 upwards
+      for (let i = chain.length - 1; i >= 0; i--) {
+        const id = chain[i];
+        const node = getCommit(id);
+        if (node && node.idx === -1) {
+          idx += 1;
+          node.idx = idx;
+        }
+      }
+    }
+    // Keep nextCommitIndex aligned with max idx
+    state.nextCommitIndex = idx + 1;
+    // Assign lanes (first-come-first-serve)
+    const lanes = new Map(); // branchName -> laneIndex
+    let laneCursor = 0;
+    for (const [name, br] of state.repo.branches) {
+      if (!br.head) continue;
+      if (!lanes.has(name)) {
+        lanes.set(name, laneCursor++);
+      }
+    }
+    // Compute x,y positions
+    const nodes = Array.from(state.repo.commits.values());
+    nodes.sort((a,b) => a.idx - b.idx);
+    const coords = new Map(); // id -> {x,y}
+    const xForLane = (i) => Lane.marginX + i * Lane.width;
+    const yForIdx = (i) => Lane.marginY + i * 36;
+    // First pass: assign rough positions
+    for (const c of nodes) {
+      const lane = lanes.get(c.branch || '') ?? 0;
+      coords.set(c.id, { x: xForLane(lane), y: yForIdx(c.idx) });
+    }
+    // Second pass: route merges with intermediate waypoints to avoid crossings
+    const edges = []; // {from,to,type}
+    for (const c of nodes) {
+      const a = coords.get(c.id);
+      for (const p of (c.parents || [])) {
+        const b = coords.get(p);
+        const type = c.parents.length > 1 ? 'merge' : 'link';
+        edges.push({ from: a, to: b, type });
+      }
+    }
+    // Compute bounding box
+    let maxY = 0;
+    nodes.forEach(n => {
+      const { y } = coords.get(n.id);
+      if (y > maxY) maxY = y;
+    });
+    state.layout = { coords, edges, maxY, lanes: lanes.size, nodes };
+  }
+  // SVG utilities
+  function clearSvg() {
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+  }
+  function make(tag, attrs = {}, children = []) {
+    const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
+    for (const [k, v] of Object.entries(attrs)) {
+      if (v !== null && v !== undefined) el.setAttribute(k, v);
+    }
+    if (!Array.isArray(children)) children = [children];
+    children.forEach(ch => el.appendChild(ch));
+    return el;
+  }
+  // Draw graph
+  function renderGraph() {
+    clearSvg();
+    buildLayout();
+    // Size SVG
+    const width = Math.max(900, 2 * Lane.marginX + (state.layout.lanes * Lane.width));
+    const height = Math.max(420, state.layout.maxY + Lane.marginY + 40);
+    svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+    svg.setAttribute('width', '100%');
+    svg.setAttribute('height', '100%');
+    // Draw links
+    for (const [id, c] of state.repo.commits) {
+      for (const p of (c.parents || [])) {
+        const a = state.layout.coords.get(id);
+        const b = state.layout.coords.get(p);
+        if (!a || !b) continue;
+        const d = curvePath(a, b);
+        const cl = make('path', { d, class: `link ${c.parents.length > 1 ? 'merge' : ''}` });
+        svg.appendChild(cl);
+      }
+    }
+    // Draw nodes
+    const nodes = state.layout.nodes;
+    for (const c of nodes) {
+      const { x, y } = state.layout.coords.get(c.id);
+      const g = make('g', { class: 'node', transform: `translate(${x},${y})`, 'data-id': c.id });
+      const isHeadOfBranch = [...state.repo.branches.values()].some(b => b.head === c.id);
+      const isHead = (state.repo.head.type === 'branch' && getBranchByName(state.repo.head.name)?.head === c.id)
+        || (state.repo.head.type === 'detached' && state.repo.head.commitId === c.id);
+      // circle
+      const circle = make('circle', { r: Lane.commitRadius });
+      g.appendChild(circle);
+      // label (commit short id and idx)
+      const short = c.id.slice(-6);
+      const label = make('text', { class: 'id', x: 12, y: -10 }, document.createTextNode(`${short} · idx:${c.idx}`));
+      g.appendChild(label);
+      // branch head marker
+      const branchNames = [];
+      for (const [name, br] of state.repo.branches) {
+        if (br.head === c.id) branchNames.push(name);
+      }
+      const branchLabel = make('text', { class: 'branch', x: 12, y: -22 }, document.createTextNode(branchNames.join(' · ')));
+      g.appendChild(branchLabel);
+      // HEAD marker
+      if (isHead) {
+        g.appendChild(make('circle', { r: Lane.commitRadius + 4, class: 'head' }));
+      }
+      // Merge node indicator: diamond
+      if (c.parents.length > 1) {
+        g.appendChild(make('rect', { x: -4, y: -4, width: 8, height: 8, class: 'diamond', transform: 'rotate(45)' }));
+      }
+      // events
+      g.addEventListener('click', () => showCommitCard(c.id, x, y));
+      svg.appendChild(g);
+    }
+  }
+  function curvePath(a, b) {
+    // Cubic Bezier curve between points
+    const dx = Math.max(30, Math.abs(a.x - b.x) * 0.35);
+    return `M ${a.x} ${a.y} C ${a.x + dx} ${a.y}, ${b.x - dx} ${b.y}, ${b.x} ${b.y}`;
+  }
+  // Commit card UI
+  function showCommitCard(commitId, x, y) {
+    if (state.cardEl && state.cardEl.parentNode) state.cardEl.parentNode.removeChild(state.cardEl);
+    const c = getCommit(commitId);
+    const card = document.createElement('div');
+    card.className = 'commit-card';
+    card.style.left = Math.min(Math.max(10, x + 14), svg.clientWidth - 280) + 'px';
+    card.style.top = Math.min(Math.max(10, y - 20), svg.clientHeight - 160) + 'px';
+    const parents = c.parents.length ? c.parents.map(id => getCommit(id)?.id.slice(-6)).join(', ') : 'none';
+    const branches = [...state.repo.branches.entries()]
+      .filter(([_, br]) => br.head === c.id)
+      .map(([name, _]) => name)
+      .join(', ') || '-';
+    card.innerHTML = `
+      <h3>${escapeHtml(c.message)}</h3>
+      <div class="meta">
+        <span class="tag">${escapeHtml(c.author)}</span>
+        <span class="tag">${c.id.slice(-6)}</span>
+        <span class="tag">parents: ${parents}</span>
+        <span class="tag">branches: ${escapeHtml(branches)}</span>
+      </div>
+      <div class="actions">
+        <button class="btn" data-action="checkout">Checkout</button>
+        <button class="btn" data-action="branch">New branch here</button>
+        <button class="btn warn" data-action="reset">Reset --hard here</button>
+        <button class="btn ghost" data-action="blame">Blame</button>
+      </div>
+    `;
+    card.addEventListener('click', (e) => {
+      const action = e.target?.dataset?.action;
+      if (!action) return;
+      if (action === 'checkout') checkoutCommit(c.id);
+      if (action === 'branch') {
+        branchNameEl.value = suggestBranchName();
+        branchNameEl.dataset.from = c.id;
+      }
+      if (action === 'reset') resetHardTo(c.id);
+      if (action === 'blame') {
+        blameCommitEl.value = c.id;
+        showBlame(c.id);
+        card.remove();
+      }
+    });
+    svg.parentElement.appendChild(card);
+    state.cardEl = card;
+  }
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));
+  }
+  // Actions
+  function commit(message, { amend = false } = {}) {
+    const head = getHeadCommit();
+    const parent = head ? head.id : null;
+    const branchName = state.repo.head.type === 'branch' ? state.repo.head.name : null;
+    if (amend && parent) {
+      // Modify last commit (keep same id)
+      const last = getCommit(parent);
+      if (last) {
+        last.message = message || last.message;
+        last.author = 'You';
+        last.timestamp = Date.now();
+        touchRefresh();
+        return;
+      }
+    }
+    const c = newCommit(message || defaultCommitMsg(), 'You');
+    c.parents = parent ? [parent] : [];
+    if (branchName) c.branch = branchName;
+    if (state.repo.head.type === 'branch') {
+      const br = getBranchByName(branchName);
+      br.head = c.id;
+    } else if (state.repo.head.type === 'detached') {
+      state.repo.head.commitId = c.id;
+    }
+    state.repo.commits.set(c.id, c);
+    touchRefresh();
+  }
+  function defaultCommitMsg() {
+    const n = (state.nextCommitIndex % 8);
+    const msgs = [
+      'Make it work',
+      'Improve naming',
+      'Add tests',
+      'Refactor utils',
+      'Optimize performance',
+      'Fix edge cases',
+      'Polish UI',
+      'Document code'
+    ];
+    return msgs[n];
+  }
+  function createBranch(name, fromCommitId) {
+    if (!name) return alert('Enter a branch name.');
+    if (state.repo.branches.has(name)) return alert('Branch already exists.');
+    const from = fromCommitId || getHeadCommit()?.id || null;
+    const br = newBranch(name, from);
+    state.repo.branches.set(name, br);
+    touchRefresh();
+  }
+  function checkout(branchName) {
+    if (!state.repo.branches.has(branchName)) return alert('Branch not found.');
+    state.repo.head = { type: 'branch', name: branchName };
+    touchRefresh();
+  }
+  function checkoutCommit(commitId) {
+    if (!getCommit(commitId)) return alert('Commit not found.');
+    state.repo.head = { type: 'detached', commitId };
+    touchRefresh();
+  }
+  function mergeIntoCurrent(targetBranchName) {
+    const curName = state.repo.head.type === 'branch' ? state.repo.head.name : null;
+    if (!curName) return alert('You can only merge while on a branch.');
+    const target = getBranchByName(targetBranchName);
+    if (!target || !target.head) return alert('Target branch has no commits.');
+    const curHead = getBranchByName(curName).head;
+    const targetHead = target.head;
+    if (curHead

style.css CHANGED Viewed

@@ -1,28 +1,343 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+:root {
+  --primary: #6366f1;
+  --primary-600: #4f46e5;
+  --primary-50: #eef2ff;
+  --bg: #0b1020;
+  --bg-elev: #11182c;
+  --bg-soft: #0f172a;
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --card: #0f172a;
+  --border: #1f2a44;
+  --success: #16a34a;
+  --warn: #f59e0b;
+  --danger: #ef4444;
+}
+:root[data-theme="light"] {
+  --bg: #f8fafc;
+  --bg-elev: #ffffff;
+  --bg-soft: #f1f5f9;
+  --text: #0f172a;
+  --muted: #475569;
+  --card: #ffffff;
+  --border: #e2e8f0;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
 body {
+  margin: 0;
+  color: var(--text);
+  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  line-height: 1.35;
+}
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 18px;
+  background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 14%, transparent), transparent 60%),
+              var(--bg-elev);
+  border-bottom: 1px solid var(--border);
+  backdrop-filter: blur(6px);
+}
+.brand {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+.logo {
+  width: 40px; height: 40px;
+  border-radius: 10px;
+  display: grid; place-items: center;
+  background: radial-gradient(75% 75% at 30% 30%, var(--primary) 0%, transparent 70%),
+              radial-gradient(65% 65% at 70% 70%, var(--secondary) 0%, transparent 70%);
+  color: white;
+  font-weight: 800;
+  letter-spacing: -1px;
+  box-shadow: 0 4px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
+}
+.title h1 {
+  margin: 0; font-size: 18px; letter-spacing: .2px;
+}
+.title p {
+  margin: 2px 0 0;
+  color: var(--muted); font-size: 12px;
+}
+.customization {
+  display: flex; gap: 10px; align-items: center;
+}
+.chip {
+  display: inline-flex; gap: 8px; align-items: center;
+  padding: 6px 8px; border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+}
+.chip label { font-size: 12px; color: var(--muted); }
+.chip input[type="color"], .chip select {
+  appearance: none;
+  width: 28px; height: 24px; border: none; background: transparent; padding: 0;
+  cursor: pointer;
+}
+.app {
+  display: grid;
+  grid-template-columns: 360px 1fr;
+  gap: 14px;
+  padding: 14px;
+  min-height: calc(100vh - 88px);
+}
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  max-height: calc(100vh - 120px);
+  overflow: auto;
+}
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,.18);
+}
+.panel h2 {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: var(--muted);
+  font-weight: 700;
+  letter-spacing: .3px;
+}
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-top: 6px;
+}
+.field { display: grid; gap: 6px; }
+.field label { font-size: 12px; color: var(--muted); }
+.field input, .field select {
+  border: 1px solid var(--border);
+  background: var(--bg-soft);
+  color: var(--text);
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 13px;
+  outline: none;
+}
+.field input:focus, .field select:focus {
+  border-color: color-mix(in oklab, var(--primary) 50%, var(--border));
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
+}
+.grid {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 8px;
+  align-items: end;
+  margin-top: 8px;
 }
+.btn {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft));
+  color: var(--text);
+  padding: 8px 12px;
+  border-radius: 10px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform .06s ease, background .2s ease, border-color .2s ease;
 }
+.btn:hover { transform: translateY(-1px); }
+.btn:active { transform: translateY(0); }
+.btn.primary {
+  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 35%, var(--bg-elev)), color-mix(in oklab, var(--primary) 22%, var(--bg-soft)));
+  border-color: color-mix(in oklab, var(--primary) 55%, var(--border));
+  color: white;
+}
+.btn.ghost {
+  background: transparent;
+}
+.btn.warn { border-color: color-mix(in oklab, var(--warn) 60%, var(--border)); color: color-mix(in oklab, var(--warn) 90%, white); }
+.btn.danger { border-color: color-mix(in oklab, var(--danger) 60%, var(--border)); color: color-mix(in oklab, var(--danger) 90%, white); }
+.list { list-style: none; margin: 6px 0 0; padding: 0; }
+.list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-soft); margin-bottom: 6px; }
+.list.compact li { padding: 4px 6px; font-size: 12px; }
+.list .left { display: flex; gap: 8px; align-items: center; overflow: hidden; }
+.badge {
+  display: inline-flex; gap: 6px; align-items: center;
+  padding: 2px 6px; border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--bg-elev);
+  font-size: 12px;
 }
+.dot {
+  width: 10px; height: 10px; border-radius: 50%;
+  box-shadow: 0 0 0 2px rgba(255,255,255,.1) inset;
+}
+.small { font-size: 12px; color: var(--muted); }
+.graph {
+  position: relative;
+  background: radial-gradient(1200px 600px at 30% 0%, color-mix(in oklab, var(--primary) 9%, transparent), transparent),
+              radial-gradient(900px 900px at 90% 10%, color-mix(in oklab, var(--secondary) 10%, transparent), transparent),
+              var(--card);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: 0 6px 20px rgba(0,0,0,.18);
+  min-height: 520px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+.graph-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(180deg, var(--bg-elev), var(--bg-soft));
+  border-radius: 12px 12px 0 0;
+}
+.legend { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); margin-left: 10px; }
+.legend-dot {
+  width: 10px; height: 10px; border-radius: 50%;
+  background: var(--text);
+}
+.legend-branch {
+  width: 12px; height: 2px; background: var(--primary);
+}
+.legend-head {
+  width: 10px; height: 10px; border-radius: 50%;
+  outline: 2px solid var(--secondary);
+  background: transparent;
+}
+.canvas-wrapper {
+  position: relative; overflow: hidden;
+}
+#graphSvg {
+  width: 100%; height: 100%;
+  background-image:
+    radial-gradient(circle at 25px 25px, rgba(255,255,255,.06) 1px, transparent 0),
+    radial-gradient(circle at 25px 25px, rgba(255,255,255,.05) 1px, transparent 0);
+  background-size: 50px 50px, 10px 10px;
 }
+/* Graph nodes and links */
+.link {
+  stroke: color-mix(in oklab, var(--muted) 25%, var(--text));
+  stroke-opacity: .5;
+  stroke-width: 2.5;
+  fill: none;
+  transition: stroke .15s ease;
+}
+.link.merge {
+  stroke: color-mix(in oklab, var(--secondary) 65%, var(--muted));
+  stroke-opacity: .7;
+  stroke-dasharray: 4 3;
+}
+.node {
+  cursor: pointer;
+  transition: transform .08s ease;
+}
+.node:hover { transform: scale(1.06); }
+.node circle {
+  fill: var(--text);
+  stroke: var(--bg-elev);
+  stroke-width: 2;
+}
+.node .label {
+  font-size: 11px;
+  fill: var(--muted);
+}
+.node .branch {
+  font-size: 11px;
+  fill: var(--muted);
 }
+.node .head {
+  fill: var(--secondary);
+  stroke: var(--bg-elev);
+  stroke-width: 2.5;
+}
+.node .diamond {
+  fill: var(--secondary);
+  opacity: .85;
+  stroke: var(--bg-elev);
+  stroke-width: 2;
+}
+.node .id {
+  font-size: 10px;
+  fill: var(--muted);
+}
+/* Commit card */
+.commit-card {
+  position: absolute;
+  background: var(--bg-elev);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  width: 260px;
+  box-shadow: 0 8px 26px rgba(0,0,0,.25);
+}
+.commit-card h3 {
+  margin: 0 0 4px 0;
+  font-size: 13px;
+}
+.commit-card .meta { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
+.commit-card .meta .tag {
+  background: var(--bg-soft);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 1px 6px;
+}
+.commit-card .message {
+  font-size: 12px;
+  margin-bottom: 8px;
+}
+.commit-card .actions { display: flex; gap: 6px; flex-wrap: wrap; }
+.commit-card .actions .btn { padding: 6px 8px; font-size: 12px; }
+/* Code/blame */
+.code {
+  background: var(--bg-soft);
+  border: 1px dashed var(--border);
+  border-radius: 10px;
+  padding: 10px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: pre-wrap;
+  color: var(--text);
+}
+.hidden { display: none; }
+.app-footer {
+  padding: 12px 16px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-elev);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--muted);
+}
+/* Responsive */
+@media (max-width: 1080px) {
+  .app {
+    grid-template-columns: 1fr;
+  }
+  .sidebar { max-height: unset; }
+}