vectrumVectrumPublic

Build Vectrum with the MetalUI "Soft Hardware" theme

Adds the Vectrum app (repositories, code browsing, editing, issues,
settings, SSH and HTTPS git) and styles the whole UI with MetalUI
(@unlocalhosted/metalui): bone and graphite colorways, Sidebar, Menu,
CommandPalette search, Tabs, Switcher, Select, Popover, Dialog,
AlertDialog, DropZone, Attachment, Field, Textarea, EmptyState, Toasts
and MetalUI icons. Pieces without a MetalUI component are drawn with its
theme utilities (materials, wells, engraved labels, type roles).

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Browse Files

JjohannSocommitted 2 weeks ago1 parent 11bb49ccommitaecb85c

Showing 131 changed files with 11757 additions and 111 deletions.

+3−0.gitignoreView File

@@ -39,3 +39,6 @@ yarn-error.log*
39	39	# typescript
40	40	*.tsbuildinfo
41	41	next-env.d.ts
	42	+
	43	+ # git repositories and issue data
	44	+ /data/

+78−20README.mdView File

@@ -1,36 +1,94 @@
1		- This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
	1	+ # Vectrum
2	2
3		- ## Getting Started
	3	+ [vectrum.cc](https://vectrum.cc) · A self-hosted, multi-user GitHub built with Next.js. Repositories are real bare
	4	+ git repositories on disk, and you push to them with plain git over SSH or
	5	+ HTTPS.
4	6
5		- First, run the development server:
	7	+ ## Features
	8	+
	9	+ - Accounts: sign up, sign in, profiles, password change (scrypt-hashed passwords, database-backed sessions)
	10	+ - Repositories: public or private, rename, delete, optional README on creation
	11	+ - Collaborators: give other users push access to a repository
	12	+ - Git over SSH: built-in SSH server (default port 2222). Add public keys under Settings → SSH keys
	13	+ - Git over HTTPS: smart HTTP protocol (v0 and v2). Authenticate with API tokens
	14	+ - API tokens: read-only or read & write, for all repositories or selected ones, with expiry. Only a hash is stored
	15	+ - Web editor: CodeMirror with syntax highlighting and markdown preview. Create, edit, rename, upload and delete files, committing to the current branch or a new one
	16	+ - Code browsing: file tree, highlighting (Shiki), rendered READMEs (sanitized HTML), raw files, image previews
	17	+ - History: commit log per branch or file, commit diffs, branches overview, recent-activity dashboard
	18	+ - Issues as a Linear-style project tracker, per repository:
	19	+ - Workflow statuses (Backlog → Todo → In Progress → In Review → Done / Canceled), priorities, assignees, labels, estimates and due dates
	20	+ - List view grouped by status, priority or assignee, and a kanban board with drag and drop
	21	+ - Filters (assignee, priority, label, "My issues"), scopes (All / Active / Backlog) and orderings, kept in the URL so views can be shared
	22	+ - Quick-create dialog and keyboard shortcuts: `C` new issue, `J`/`K` move, `Enter` open, `S`/`P`/`A`/`L` set status, priority, assignee, labels
	23	+ - Inline editing of every property, with an activity feed of changes next to the markdown comments
	24	+ - Anyone who can read a repository can open issues and comment, but only collaborators and the owner can change an issue (title, description, status and all other properties). Only an issue's creator and the repository owner can delete it. Labels are managed under Settings → Labels or created from the label menu
	25	+ - Light and dark mode
	26	+
	27	+ ## Getting started
	28	+
	29	+ Requires Node.js 22.5+ (for the built-in `node:sqlite`) and `git` on the `PATH`.
6	30
7	31	```bash
8		- npm run dev
9		- # or
10		- yarn dev
11		- # or
12		- pnpm dev
13		- # or
	32	+ bun install
14	33	bun dev
15	34	```
16	35
17		- Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
	36	+ Open http://localhost:3000, sign up, and create a repository.
	37	+
	38	+ ### Pushing over SSH
	39	+
	40	+ 1. Add your public key (`~/.ssh/id_ed25519.pub`) under Settings → SSH keys.
	41	+ 2. Check the connection: `ssh -T -p 2222 git@localhost`
	42	+ 3. Push:
	43	+ ```bash
	44	+ git remote add origin ssh://git@localhost:2222/<you>/<repo>.git
	45	+ git push -u origin main
	46	+ ```
	47	+
	48	+ ### Pushing over HTTPS
18	49
19		- You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
	50	+ Generate a token under Settings → API tokens and use it as the password
	51	+ when git asks (any username works):
20	52
21		- This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
	53	+ ```bash
	54	+ git clone http://localhost:3000/<you>/<repo>.git
	55	+ # Username: <you> Password: vec_…
	56	+ ```
	57	+
	58	+ Anonymous users can clone public repositories without a token.
22	59
23		- ## Learn More
	60	+ ## Configuration
24	61
25		- To learn more about Next.js, take a look at the following resources:
	62	+ \| Variable \| Default \| Purpose \|
	63	+ \| ----------------- \| ----------- \| --------------------------------------------------------- \|
	64	+ \| `DATA_ROOT` \| `./data` \| Where repositories, the database and the SSH host key live \|
	65	+ \| `SSH_PORT` \| `2222` \| Port of the built-in SSH server \|
	66	+ \| `SSH_LISTEN_HOST` \| `0.0.0.0` \| Interface the SSH server binds to \|
	67	+ \| `SSH_HOST` \| request host \| Host name shown in SSH clone URLs, e.g. `vectrum.cc` \|
	68	+ \| `SSH_DISABLED` \| — \| Set to `1` to not start the SSH server \|
26	69
27		- - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28		- - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
	70	+ Data layout:
	71	+
	72	+ ```
	73	+ data/
	74	+ app.db users, sessions, keys, tokens, repos, issues (SQLite)
	75	+ ssh_host_ed25519_key generated on first start
	76	+ repos/<owner>/<repo>.git bare git repositories
	77	+ ```
29	78
30		- You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
	79	+ ## Security notes
31	80
32		- ## Deploy on Vercel
	81	+ - Serve the web UI over HTTPS if it's reachable beyond localhost. Session cookies become `Secure` when `X-Forwarded-Proto: https` is set.
	82	+ - Private repositories show a 404 page to anyone without access, so their existence isn't revealed.
	83	+ - Raw files are served with `nosniff` and a sandboxing CSP, so repository HTML/SVG can't run scripts in the app's origin.
33	84
34		- The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
	85	+ ## Layout
35	86
36		- Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
	87	+ - `lib/db.ts`: SQLite schema and connection
	88	+ - `lib/users.ts`, `lib/auth.ts`: accounts, password hashing, sessions
	89	+ - `lib/repos.ts`: repository records, permissions (`repoAccess`), collaborators
	90	+ - `lib/issues.ts`, `lib/issue-meta.ts`: issue tracker data and its shared vocabulary (statuses, priorities); UI in `components/issues/`
	91	+ - `lib/keys.ts`, `lib/tokens.ts`: SSH keys and API tokens
	92	+ - `lib/git.ts`, `lib/git-write.ts`: reading from and committing to bare repositories
	93	+ - `lib/git-http.ts`, `lib/ssh-server.ts`: git transports (started from `instrumentation.ts`)
	94	+ - `app/actions/*`: server actions, each re-checking the session and permissions

+111−0app/[owner]/[repo]/blob/[...segments]/page.tsxaddedView File

++ import Link from "next/link";
++ import { notFound, redirect } from "next/navigation";
++ import { BranchSelect } from "@/components/branch-select";
++ import { Breadcrumbs } from "@/components/breadcrumbs";
++ import { CopyButton } from "@/components/clone-button";
++ import { CodeView } from "@/components/code-view";
++ import { FileActions } from "@/components/editor-file-actions";
++ import { LatestCommitBar } from "@/components/file-table";
++ import { Markdown } from "@/components/markdown";
++ import { Box, Segmented, segmentClass } from "@/components/ui";
++ import { lastCommit, listBranches, objectType, readBlob } from "@/lib/git";
++ import { encodePath, formatBytes } from "@/lib/format";
++ import { languageFor } from "@/lib/languages";
++ import { getRefAndPath, getRepo } from "@/lib/repo";
++ import { IMAGE_TYPES } from "@/lib/mime";
++ export default async function BlobPage({ params, searchParams }: PageProps<"/[owner]/[repo]/blob/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const { plain } = await searchParams;
++   const repo = await getRepo(owner, repoParam);
++   const { ref, path } = await getRefAndPath(repo, segments);
++   const type = await objectType(repo.dir, ref, path);
++   if (type === "tree") redirect(`${repo.base}/tree/${encodePath(ref)}/${encodePath(path)}`);
++   if (type !== "blob") notFound();
++   const [blob, commit, branches] = await Promise.all([
++     readBlob(repo.dir, ref, path),
++     lastCommit(repo.dir, ref, path),
++     listBranches(repo.dir),
++   ]);
++   const filename = path.split("/").pop()!;
++   const ext = filename.split(".").pop()!.toLowerCase();
++   const rawHref = `${repo.base}/raw/${encodePath(ref)}/${encodePath(path)}`;
++   const text = blob.binary || blob.tooLarge ? null : blob.content.toString("utf8");
++   const isMarkdown = /\.(md|markdown)$/i.test(filename);
++   const showRendered = isMarkdown && plain !== "1";
++   const lines = text === null ? 0 : text.split("\n").length - (text.endsWith("\n") ? 1 : 0);
++   const editable = repo.canWrite && branches.some((b) => b.name === ref);
++   const selfHref = `${repo.base}/blob/${encodePath(ref)}/${encodePath(path)}`;
++   const language = languageFor(filename)?.name;
++   const meta = [text !== null && `${lines} line${lines === 1 ? "" : "s"}`, formatBytes(blob.size), language].filter(Boolean).join(" · ");
++   let content;
++   if (ext in IMAGE_TYPES) {
++     content = (
++       <div className="p-3">
++         <div className="well flex justify-center rounded-plate bg-[repeating-conic-gradient(var(--mu-s-lo)_0_25%,var(--mu-s-hi)_0_50%)] bg-[length:20px_20px] p-8">
++           {/* eslint-disable-next-line @next/next/no-img-element */}
++           <img src={rawHref} alt={filename} className="max-w-full rounded-row shadow-lift" />
++         </div>
++       </div>
++     );
++   } else if (text === null) {
++     content = (
++       <p className="px-6 py-12 text-center type-body text-ink2">
++         {blob.tooLarge ? "This file is too large to display." : "Binary file not shown."}{" "}
++         <Link href={rawHref} prefetch={false} className="text-ink underline decoration-rule underline-offset-2 hover:decoration-current">
++           View raw
++         </Link>
++       </p>
++     );
++   } else if (showRendered) {
++     const dir = path.split("/").slice(0, -1).join("/");
++     content = (
++       <div className="px-6 py-8 md:px-10">
++         <Markdown context={{ base: repo.base, gitRef: ref, dir }}>{text}</Markdown>
++       </div>
++     );
++   } else {
++     content = <CodeView code={text} filename={filename} />;
++   }
++   return (
++     <div>
++       <div className="mb-4 flex flex-wrap items-center gap-3">
++         <BranchSelect base={repo.base} kind="blob" current={ref} branches={branches.map((b) => b.name)} path={path} />
++         <Breadcrumbs base={repo.base} name={repo.name} gitRef={ref} path={path} />
++         <CopyButton text={path} label="Copy path" />
++       </div>
++       {commit && (
++         <div className="mb-4">
++           <LatestCommitBar repo={repo} commit={commit} gitRef={ref} path={path} />
++         </div>
++       )}
++       <Box className="overflow-hidden">
++         <div className="rule-b flex min-h-12 flex-wrap items-center gap-3 px-3 py-2">
++           {isMarkdown && (
++             <Segmented>
++               <Link href={selfHref} className={segmentClass(showRendered)} aria-current={showRendered ? "page" : undefined}>
++                 Preview
++               </Link>
++               <Link href={`${selfHref}?plain=1`} className={segmentClass(!showRendered)} aria-current={showRendered ? undefined : "page"}>
++                 Code
++               </Link>
++             </Segmented>
++           )}
++           <span className="px-1 type-readout text-ink2 tabular-nums">{meta}</span>
++           <div className="ml-auto">
++             <FileActions
++               rawHref={rawHref}
++               text={text}
++               editHref={editable && text !== null ? `${repo.base}/edit/${encodePath(ref)}/${encodePath(path)}` : undefined}
++               deleteHref={editable ? `${repo.base}/delete/${encodePath(ref)}/${encodePath(path)}` : undefined}
++             />
++           </div>
++         </div>
++         {content}
++       </Box>
++     </div>
++   );
++ }

+57−0app/[owner]/[repo]/branches/page.tsxaddedView File

++ import Link from "next/link";
++ import type { Metadata } from "next";
++ import { BranchIcon, HistoryIcon } from "@/components/icons";
++ import { liftRowClass, plateHeadingClass } from "@/components/repo-rows";
++ import { Blankslate, Box, ButtonLink, Label, PageTitle, RefChip } from "@/components/ui";
++ import { listBranches } from "@/lib/git";
++ import { encodePath, timeAgo } from "@/lib/format";
++ import { getRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "Branches" };
++ export default async function BranchesPage({ params }: PageProps<"/[owner]/[repo]/branches">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const branches = await listBranches(repo.dir);
++   return (
++     <div>
++       <PageTitle title="Branches" />
++       <Box className="p-1.5">
++         <h2 className={plateHeadingClass}>
++           All branches <span className="type-readout text-ink3 [text-shadow:none]">{branches.length}</span>
++         </h2>
++         {branches.length === 0 && (
++           <Blankslate icon={<BranchIcon />} title="No branches yet">
++             Push to this repository to create one.
++           </Blankslate>
++         )}
++         <ul>
++           {branches.map((b) => (
++             <li key={b.name} className={`${liftRowClass} flex min-h-13 items-center gap-3 px-3 py-2`}>
++               <span className="icon-tile size-8 shrink-0 rounded-row">
++                 <BranchIcon width={15} height={15} />
++               </span>
++               <Link href={`${repo.base}/tree/${encodePath(b.name)}`} className="shrink-0 rounded-[7px] transition-opacity hover:opacity-80 focus-visible:focus-ring">
++                 <RefChip>{b.name}</RefChip>
++               </Link>
++               {b.name === repo.defaultBranch && <Label tone="accent">default</Label>}
++               <span className="min-w-0 truncate type-ui text-ink2">{b.subject}</span>
++               <span className="ml-auto hidden shrink-0 type-meta text-ink3 sm:inline">
++                 Updated <time dateTime={new Date(b.date).toISOString()} className="type-readout">{timeAgo(b.date)}</time>
++               </span>
++               <ButtonLink
++                 href={`${repo.base}/commits/${encodePath(b.name)}`}
++                 variant="invisible"
++                 icon={<HistoryIcon width={14} height={14} />}
++                 className="shrink-0 max-sm:ml-auto"
++               >
++                 Commits
++               </ButtonLink>
++             </li>
++           ))}
++         </ul>
++       </Box>
++     </div>
++   );
++ }

+165−0app/[owner]/[repo]/commit/[sha]/page.tsxaddedView File

++ import { notFound } from "next/navigation";
++ import { ShaChip } from "@/components/file-table";
++ import { CodeIcon, FileIcon } from "@/components/icons";
++ import { Avatar, Box, ButtonLink, Label, RefChip } from "@/components/ui";
++ import { diffCommit, getCommit, type FileDiff } from "@/lib/git";
++ import { encodePath, shortSha, timeAgo } from "@/lib/format";
++ import { getRepo } from "@/lib/repo";
++ const MAX_RENDERED_LINES = 3000;
++ const lineStyles = {
++   add: { row: "bg-[var(--diff-add)]", num: "bg-[var(--diff-add-num)]", sign: "+" },
++   del: { row: "bg-[var(--diff-del)]", num: "bg-[var(--diff-del-num)]", sign: "-" },
++   ctx: { row: "", num: "", sign: " " },
++ };
++ /** The change as five lamps: green for the added share, red for the deleted, dark when nothing changed. */
++ function DiffStat({ additions, deletions }: { additions: number; deletions: number }) {
++   const total = additions + deletions;
++   const greens = total ? Math.round((additions / total) * 5) : 0;
++   return (
++     <span className="flex shrink-0 items-center gap-2 type-readout">
++       <span className="text-success-emphasis">+{additions}</span>
++       <span className="text-danger">−{deletions}</span>
++       <span aria-hidden className="flex gap-[2px]">
++         {Array.from({ length: 5 }, (_, i) => (
++           <span
++             key={i}
++             className={`size-2 rounded-[2.5px] ${i < greens ? "bg-success-emphasis" : i < (total ? 5 : 0) ? "bg-danger" : "material-well"}`}
++           />
++         ))}
++       </span>
++     </span>
++   );
++ }
++ function FileDiffView({ file, base, sha, budget }: { file: FileDiff; base: string; sha: string; budget: number }) {
++   const name = file.status === "renamed" ? `${file.oldPath} → ${file.newPath}` : file.newPath;
++   const truncated = file.lines.length > budget;
++   return (
++     <section id={encodeURIComponent(file.newPath)} aria-label={name} className="mb-4 scroll-mt-20">
++       <Box className="overflow-clip">
++         <div className="rule-b sticky top-14 z-10 flex min-h-11 items-center gap-3 bg-[var(--mu-frost-strong)] py-1.5 pr-2 pl-4 backdrop-blur-md">
++           <DiffStat additions={file.additions} deletions={file.deletions} />
++           <span className="min-w-0 truncate font-mono text-[11.5px] font-medium text-ink">{name}</span>
++           {file.status !== "modified" && (
++             <Label tone={file.status === "added" ? "success" : file.status === "deleted" ? "danger" : "default"}>{file.status}</Label>
++           )}
++           {file.status !== "deleted" && (
++             <ButtonLink
++               href={`${base}/blob/${sha}/${encodePath(file.newPath)}`}
++               variant="invisible"
++               icon={<FileIcon width={14} height={14} />}
++               className="ml-auto shrink-0"
++             >
++               View File
++             </ButtonLink>
++           )}
++         </div>
++         {file.binary ? (
++           <p className="p-6 text-center type-ui text-ink3">Binary file not shown.</p>
++         ) : file.lines.length === 0 ? (
++           <p className="p-6 text-center type-ui text-ink3">File mode or name changed only.</p>
++         ) : truncated ? (
++           <p className="p-6 text-center type-ui text-ink3">Large diffs are not rendered by default.</p>
++         ) : (
++           <div className="overflow-x-auto">
++             <table className="w-full border-collapse font-mono text-[11.5px] leading-[22px] text-ink">
++               <tbody>
++                 {file.lines.map((line, i) =>
++                   line.kind === "hunk" ? (
++                     <tr key={i} className="bg-[var(--diff-hunk)] text-ink3">
++                       <td colSpan={3} className="px-4 py-1.5">
++                         {line.text}
++                       </td>
++                     </tr>
++                   ) : (
++                     <tr key={i} className={lineStyles[line.kind].row}>
++                       <td className={`w-12 min-w-12 select-none px-2 text-right text-ink3 tabular-nums ${lineStyles[line.kind].num}`}>
++                         {line.oldNo}
++                       </td>
++                       <td className={`w-12 min-w-12 select-none px-2 text-right text-ink3 tabular-nums ${lineStyles[line.kind].num}`}>
++                         {line.newNo}
++                       </td>
++                       <td className="px-2 whitespace-pre">
++                         <span className="select-none text-ink3">{lineStyles[line.kind].sign} </span>
++                         {line.text}
++                       </td>
++                     </tr>
++                   ),
++                 )}
++               </tbody>
++             </table>
++           </div>
++         )}
++       </Box>
++     </section>
++   );
++ }
++ export default async function CommitPage({ params }: PageProps<"/[owner]/[repo]/commit/[sha]">) {
++   const { owner, repo: repoParam, sha } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const commit = await getCommit(repo.dir, sha);
++   if (!commit) notFound();
++   const files = await diffCommit(repo.dir, commit);
++   const additions = files.reduce((n, f) => n + f.additions, 0);
++   const deletions = files.reduce((n, f) => n + f.deletions, 0);
++   // Each file may render only the diff lines left over from the files above it.
++   const budgets = files.map((_, i) => MAX_RENDERED_LINES - files.slice(0, i).reduce((n, f) => n + f.lines.length, 0));
++   return (
++     <div>
++       <Box className="mb-6 overflow-hidden">
++         <div className="flex flex-wrap items-start gap-4 p-6">
++           <div className="min-w-0 flex-1">
++             <h1 className="text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">{commit.subject}</h1>
++             {commit.body && <pre className="mt-3 font-mono text-[11.5px] leading-relaxed whitespace-pre-wrap text-ink2">{commit.body}</pre>}
++           </div>
++           <ButtonLink href={`${repo.base}/tree/${commit.sha}`} icon={<CodeIcon />}>
++             Browse Files
++           </ButtonLink>
++         </div>
++         <div className="rule-t flex flex-wrap items-center gap-2 px-6 py-3 type-ui">
++           <Avatar name={commit.authorName} size={22} />
++           <span className="font-medium text-ink" title={commit.authorEmail}>
++             {commit.authorName}
++           </span>
++           <span className="text-ink2">
++             committed <time dateTime={new Date(commit.date).toISOString()}>{timeAgo(commit.date)}</time>
++           </span>
++           <span className="ml-auto flex flex-wrap items-center gap-1.5 type-meta text-ink3">
++             {commit.parents.length > 0 && (
++               <>
++                 <span className="type-label engraved">
++                   {commit.parents.length} parent{commit.parents.length > 1 && "s"}
++                 </span>
++                 {commit.parents.map((p) => (
++                   <ShaChip key={p} sha={p} href={`${repo.base}/commit/${p}`} className="mr-1.5" />
++                 ))}
++               </>
++             )}
++             <span className="type-label engraved">commit</span>
++             <RefChip>{shortSha(commit.sha)}</RefChip>
++           </span>
++         </div>
++       </Box>
++       <p className="mb-4 px-1 type-ui text-ink2">
++         Showing <strong className="font-semibold text-ink">{files.length} changed file{files.length === 1 ? "" : "s"}</strong> with{" "}
++         <strong className="font-semibold text-success-emphasis">{additions} addition{additions === 1 ? "" : "s"}</strong> and{" "}
++         <strong className="font-semibold text-danger">{deletions} deletion{deletions === 1 ? "" : "s"}</strong>.
++       </p>
++       {commit.parents.length > 1 && (
++         <p className="mb-4 px-1 type-meta text-ink3">Merge commit — showing changes against the first parent.</p>
++       )}
++       {files.map((file, i) => (
++         <FileDiffView key={file.newPath} file={file} base={repo.base} sha={commit.sha} budget={budgets[i]} />
++       ))}
++     </div>
++   );
++ }

+117−0app/[owner]/[repo]/commits/[...segments]/page.tsxaddedView File

++ import Link from "next/link";
++ import { Tooltip } from "@unlocalhosted/metalui";
++ import { BranchSelect } from "@/components/branch-select";
++ import { CopyButton } from "@/components/clone-button";
++ import { ShaChip } from "@/components/file-table";
++ import { ChevronLeftIcon, ChevronRightIcon, CodeIcon, CommitIcon, HistoryIcon } from "@/components/icons";
++ import { ghostIconLinkClass, liftRowClass } from "@/components/repo-rows";
++ import { Avatar, Blankslate, Box, ButtonLink, RefChip } from "@/components/ui";
++ import { listBranches, log, type Commit } from "@/lib/git";
++ import { encodePath, formatDate, timeAgo } from "@/lib/format";
++ import { getRefAndPath, getRepo } from "@/lib/repo";
++ const PAGE_SIZE = 35;
++ function groupByDay(commits: Commit[]) {
++   const groups = new Map<string, Commit[]>();
++   for (const c of commits) {
++     const day = formatDate(c.date);
++     groups.set(day, [...(groups.get(day) ?? []), c]);
++   }
++   return [...groups];
++ }
++ export default async function CommitsPage({ params, searchParams }: PageProps<"/[owner]/[repo]/commits/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const page = Math.max(1, Number((await searchParams).page) || 1);
++   const repo = await getRepo(owner, repoParam);
++   const { ref, path } = await getRefAndPath(repo, segments);
++   const [commits, branches] = await Promise.all([
++     log(repo.dir, ref, { path, limit: PAGE_SIZE + 1, skip: (page - 1) * PAGE_SIZE }),
++     listBranches(repo.dir),
++   ]);
++   const hasNext = commits.length > PAGE_SIZE;
++   const selfHref = `${repo.base}/commits/${encodePath(ref)}${path ? `/${encodePath(path)}` : ""}`;
++   return (
++     <div>
++       <div className="mb-6 flex flex-wrap items-center gap-3">
++         <h1 className="mr-2 text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink">Commits</h1>
++         <BranchSelect base={repo.base} kind="commits" current={ref} branches={branches.map((b) => b.name)} path={path} />
++         {path && (
++           <span className="flex items-center gap-1.5 type-ui text-ink2">
++             History for <RefChip>{path}</RefChip>
++           </span>
++         )}
++       </div>
++       {commits.length === 0 && (
++         <Box>
++           <Blankslate icon={<HistoryIcon />} title="No commits found" />
++         </Box>
++       )}
++       <div className="space-y-6">
++         {groupByDay(commits.slice(0, PAGE_SIZE)).map(([day, dayCommits]) => (
++           <section key={day}>
++             <h2 className="mb-2 flex items-center gap-2 px-3 type-label engraved">
++               <CommitIcon width={13} height={13} className="text-ink3" />
++               {day}
++             </h2>
++             <Box className="p-1.5">
++               <ul>
++                 {dayCommits.map((c) => (
++                   <li key={c.sha} className={`${liftRowClass} flex items-center gap-3.5 px-3 py-2.5`}>
++                     <Avatar name={c.authorName} size={32} className="hidden sm:inline-flex" />
++                     <div className="min-w-0 flex-1">
++                       <Link
++                         href={`${repo.base}/commit/${c.sha}`}
++                         className="block truncate type-title text-ink decoration-ink3 underline-offset-4 hover:underline"
++                       >
++                         {c.subject}
++                       </Link>
++                       <div className="mt-0.5 flex items-center gap-1 type-meta text-ink3">
++                         <span className="font-medium text-ink2">{c.authorName}</span> committed{" "}
++                         <time dateTime={new Date(c.date).toISOString()}>{timeAgo(c.date)}</time>
++                       </div>
++                     </div>
++                     <div className="flex shrink-0 items-center gap-1">
++                       <ShaChip sha={c.sha} href={`${repo.base}/commit/${c.sha}`} className="mr-1" />
++                       <CopyButton text={c.sha} label="Copy full SHA" />
++                       <Tooltip label="Browse files">
++                         <Link
++                           href={`${repo.base}/tree/${c.sha}`}
++                           aria-label="Browse the repository at this point in the history"
++                           className={ghostIconLinkClass}
++                         >
++                           <CodeIcon />
++                         </Link>
++                       </Tooltip>
++                     </div>
++                   </li>
++                 ))}
++               </ul>
++             </Box>
++           </section>
++         ))}
++       </div>
++       {(page > 1 || hasNext) && (
++         <div className="mt-8 flex justify-center gap-2">
++           {page > 1 ? (
++             <ButtonLink href={`${selfHref}?page=${page - 1}`} icon={<ChevronLeftIcon />}>
++               Newer
++             </ButtonLink>
++           ) : null}
++           {hasNext ? (
++             <ButtonLink href={`${selfHref}?page=${page + 1}`}>
++               Older
++               <ChevronRightIcon />
++             </ButtonLink>
++           ) : null}
++         </div>
++       )}
++     </div>
++   );
++ }

+16−0app/[owner]/[repo]/commits/page.tsxaddedView File

++ import { redirect } from "next/navigation";
++ import { HistoryIcon } from "@/components/icons";
++ import { Blankslate, Box } from "@/components/ui";
++ import { encodePath } from "@/lib/format";
++ import { getRepo } from "@/lib/repo";
++ export default async function CommitsIndex({ params }: PageProps<"/[owner]/[repo]/commits">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   if (repo.defaultBranch) redirect(`${repo.base}/commits/${encodePath(repo.defaultBranch)}`);
++   return (
++     <Box>
++       <Blankslate icon={<HistoryIcon />} title="No commits yet">This repository is empty.</Blankslate>
++     </Box>
++   );
++ }

+26−0app/[owner]/[repo]/delete/[...segments]/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { notFound } from "next/navigation";
++ import { deleteFileAction } from "@/app/actions/files";
++ import { DeleteFileForm } from "@/components/delete-file-form";
++ import { objectType, revParse } from "@/lib/git";
++ import { encodePath } from "@/lib/format";
++ import { getBranchAndPath, getWritableRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "Delete file" };
++ export default async function DeleteFilePage({ params }: PageProps<"/[owner]/[repo]/delete/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const repo = await getWritableRepo(owner, repoParam);
++   const { branch, path } = await getBranchAndPath(repo, segments);
++   if (!path || (await objectType(repo.dir, branch, path)) !== "blob") notFound();
++   return (
++     <DeleteFileForm
++       action={deleteFileAction.bind(null, repo.owner, repo.name)}
++       branch={branch}
++       baseSha={(await revParse(repo.dir, `refs/heads/${branch}`))!}
++       path={path}
++       cancelHref={`${repo.base}/blob/${encodePath(branch)}/${encodePath(path)}`}
++     />
++   );
++ }

+37−0app/[owner]/[repo]/edit/[...segments]/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { notFound } from "next/navigation";
++ import { saveFileAction } from "@/app/actions/files";
++ import { FileEditor } from "@/components/file-editor";
++ import { FileIcon } from "@/components/icons";
++ import { Blankslate } from "@/components/ui";
++ import { objectType, readBlob, revParse } from "@/lib/git";
++ import { encodePath } from "@/lib/format";
++ import { getBranchAndPath, getWritableRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "Editing" };
++ export default async function EditPage({ params }: PageProps<"/[owner]/[repo]/edit/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const repo = await getWritableRepo(owner, repoParam);
++   const { branch, path } = await getBranchAndPath(repo, segments);
++   if (!path || (await objectType(repo.dir, branch, path)) !== "blob") notFound();
++   const blob = await readBlob(repo.dir, branch, path);
++   if (blob.binary || blob.tooLarge) {
++     return <Blankslate icon={<FileIcon />} title="This file can’t be edited in the browser">Binary and very large files can only be changed with git.</Blankslate>;
++   }
++   const baseSha = (await revParse(repo.dir, `refs/heads/${branch}`))!;
++   return (
++     <FileEditor
++       action={saveFileAction.bind(null, repo.owner, repo.name)}
++       repoName={repo.name}
++       branch={branch}
++       baseSha={baseSha}
++       originalPath={path}
++       initialPath={path}
++       initialContent={blob.content.toString("utf8")}
++       cancelHref={`${repo.base}/blob/${encodePath(branch)}/${encodePath(path)}`}
++     />
++   );
++ }

+6−0app/[owner]/[repo]/git-receive-pack/route.tsaddedView File

++ import { handleServiceRpc } from "@/lib/git-http";
++ export async function POST(request: Request, ctx: RouteContext<"/[owner]/[repo]/git-receive-pack">) {
++   const { owner, repo } = await ctx.params;
++   return handleServiceRpc(request, owner, repo, "git-receive-pack");
++ }

+6−0app/[owner]/[repo]/git-upload-pack/route.tsaddedView File

++ import { handleServiceRpc } from "@/lib/git-http";
++ export async function POST(request: Request, ctx: RouteContext<"/[owner]/[repo]/git-upload-pack">) {
++   const { owner, repo } = await ctx.params;
++   return handleServiceRpc(request, owner, repo, "git-upload-pack");
++ }

+22−0app/[owner]/[repo]/image/route.tsaddedView File

++ import { getViewer } from "@/lib/auth";
++ import { normalizeRepoName } from "@/lib/git";
++ import { findRepo, getRepoImage, repoAccess } from "@/lib/repos";
++ /** The repository's uploaded image. URLs carry `?v=<upload time>`, so responses can be cached for good. */
++ export async function GET(_request: Request, ctx: RouteContext<"/[owner]/[repo]/image">) {
++   const { owner, repo: repoParam } = await ctx.params;
++   const repo = findRepo(owner, normalizeRepoName(repoParam));
++   const viewer = await getViewer();
++   if (!repo || !repoAccess(repo, viewer?.id)) return new Response("Not found", { status: 404 });
++   const image = getRepoImage(repo.id);
++   if (!image) return new Response("Not found", { status: 404 });
++   return new Response(new Uint8Array(image.data), {
++     headers: {
++       "Content-Type": image.contentType,
++       "X-Content-Type-Options": "nosniff",
++       "Cache-Control": `${repo.visibility === "private" ? "private" : "public"}, max-age=31536000, immutable`,
++       "Content-Security-Policy": "default-src 'none'; sandbox",
++     },
++   });
++ }

+6−0app/[owner]/[repo]/info/refs/route.tsaddedView File

++ import { handleInfoRefs } from "@/lib/git-http";
++ export async function GET(request: Request, ctx: RouteContext<"/[owner]/[repo]/info/refs">) {
++   const { owner, repo } = await ctx.params;
++   return handleInfoRefs(request, owner, repo);
++ }

+227−0app/[owner]/[repo]/issues/[number]/page.tsxaddedView File

++ import Link from "next/link";
++ import { notFound } from "next/navigation";
++ import type { ReactNode } from "react";
++ import { commentAction, deleteIssueAction } from "@/app/actions/issues";
++ import { Surface, Textarea } from "@unlocalhosted/metalui";
++ import { ConfirmButton } from "@/components/confirm-button";
++ import { ArrowRightIcon, CommentIcon, TrashIcon } from "@/components/icons";
++ import { IssueDetail } from "@/components/issues/issue-detail";
++ import { PriorityIcon, StatusIcon } from "@/components/issues/issue-icons";
++ import { TrackerProvider } from "@/components/issues/tracker-context";
++ import { Markdown } from "@/components/markdown";
++ import { Avatar, Button, ButtonLink, Label } from "@/components/ui";
++ import { formatDate, timeAgo } from "@/lib/format";
++ import { STATUS_IDS, formatDay, priorityLabel, statusLabel, type Status } from "@/lib/issue-meta";
++ import { getIssue, listComments, listEvents, type IssueEvent } from "@/lib/issues";
++ import { getRepo } from "@/lib/repo";
++ import { trackerProps } from "@/lib/tracker";
++ export async function generateMetadata({ params }: PageProps<"/[owner]/[repo]/issues/[number]">) {
++   const { owner, repo: repoParam, number } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const issue = getIssue(repo.id, Number(number));
++   return { title: issue ? `${issue.title} · Issue #${issue.number}` : "Issue" };
++ }
++ function CommentBox({ author, createdAt, body, isAuthor }: { author: string; createdAt: number; body: string; isAuthor?: boolean }) {
++   return (
++     <div className="flex gap-3">
++       <Link href={`/${author}`} className="shrink-0">
++         <Avatar name={author} size={32} />
++       </Link>
++       <Surface material="raise-lite" radius="plate" className="min-w-0 flex-1">
++         <div className="rule-b flex h-10 items-center gap-2 px-4">
++           <Link href={`/${author}`} className="type-ui text-ink hover:underline">
++             {author}
++           </Link>
++           <span className="type-label engraved" title={formatDate(createdAt)}>
++             commented {timeAgo(createdAt)}
++           </span>
++           {isAuthor && (
++             <span className="ml-auto">
++               <Label tone="accent">Author</Label>
++             </span>
++           )}
++         </div>
++         <div className="px-5 py-4">
++           <Markdown>{body}</Markdown>
++         </div>
++       </Surface>
++     </div>
++   );
++ }
++ /** A point on the activity rail: a small sunk well on the page, holding the event's glyph or an unlit dot. */
++ function TimelineDot({ children }: { children?: ReactNode }) {
++   return (
++     <span className="well flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-full -ml-[3px]">
++       {children ?? <span className="h-1.5 w-1.5 rounded-full bg-ink3" />}
++     </span>
++   );
++ }
++ const isStatus = (value: string | null): value is Status => !!value && (STATUS_IDS as string[]).includes(value);
++ function StatusName({ value }: { value: string | null }) {
++   if (!isStatus(value)) return <strong className="font-medium text-ink">{value ?? "none"}</strong>;
++   return (
++     <strong className="inline-flex items-center gap-1 align-middle font-medium text-ink">
++       <StatusIcon status={value} size={12} /> {statusLabel(value)}
++     </strong>
++   );
++ }
++ /** One line in the activity feed describing a property change. */
++ function describe(e: IssueEvent): { icon: ReactNode; text: ReactNode } {
++   const strong = (s: ReactNode) => <strong className="font-medium text-ink">{s}</strong>;
++   switch (e.field) {
++     case "status":
++       return {
++         icon: isStatus(e.newValue) ? <StatusIcon status={e.newValue} size={12} /> : null,
++         text: (
++           <>
++             changed status from <StatusName value={e.oldValue} /> to <StatusName value={e.newValue} />
++           </>
++         ),
++       };
++     case "priority":
++       return {
++         icon: <PriorityIcon priority={Number(e.newValue)} size={12} />,
++         text: e.newValue === "0" ? <>removed the priority</> : <>set priority to {strong(priorityLabel(Number(e.newValue)))}</>,
++       };
++     case "assignee":
++       return {
++         icon: <Avatar name={e.newValue ?? e.oldValue ?? "?"} size={14} />,
++         text: !e.newValue ? (
++           <>unassigned {strong(e.oldValue)}</>
++         ) : e.newValue === e.actor && !e.oldValue ? (
++           <>self-assigned the issue</>
++         ) : e.oldValue ? (
++           <>
++             reassigned from {strong(e.oldValue)} to {strong(e.newValue)}
++           </>
++         ) : (
++           <>assigned {strong(e.newValue)}</>
++         ),
++       };
++     case "label":
++       return { icon: null, text: e.newValue ? <>added label {strong(e.newValue)}</> : <>removed label {strong(e.oldValue)}</> };
++     case "estimate":
++       return { icon: null, text: e.newValue ? <>set the estimate to {strong(`${e.newValue} points`)}</> : <>removed the estimate</> };
++     case "due_date":
++       return { icon: null, text: e.newValue ? <>set the due date to {strong(formatDay(e.newValue, true))}</> : <>removed the due date</> };
++     case "title":
++       return { icon: null, text: <>renamed this from {strong(`“${e.oldValue}”`)}</> };
++     default:
++       return { icon: null, text: <>changed {e.field}</> };
++   }
++ }
++ export default async function IssuePage({ params }: PageProps<"/[owner]/[repo]/issues/[number]">) {
++   const { owner, repo: repoParam, number } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const issue = getIssue(repo.id, Number(number));
++   if (!issue) notFound();
++   const viewer = repo.viewer;
++   const action = commentAction.bind(null, repo.owner, repo.name, issue.number);
++   // Comments and property changes, oldest first.
++   const activity = [
++     ...listComments(issue.id).map((c) => ({ kind: "comment" as const, at: c.createdAt, comment: c })),
++     ...listEvents(issue.id).map((e) => ({ kind: "event" as const, at: e.createdAt, event: e })),
++   ].sort((a, b) => a.at - b.at);
++   return (
++     <div className="mx-auto max-w-6xl">
++       <TrackerProvider {...trackerProps(repo)}>
++         <IssueDetail
++           issue={issue}
++           description={<Markdown>{issue.body}</Markdown>}
++           sidebarFooter={
++             <div className="space-y-2">
++               <p className="flex items-center gap-1.5">
++                 <Avatar name={issue.author} size={16} />
++                 <Link href={`/${issue.author}`} className="font-medium text-ink hover:underline">
++                   {issue.author}
++                 </Link>
++                 opened {timeAgo(issue.createdAt)}
++               </p>
++               <p title={formatDate(issue.updatedAt)}>Updated {timeAgo(issue.updatedAt)}</p>
++               {(repo.isAdmin || viewer?.id === issue.authorId) && (
++                 <div className="pt-1.5">
++                   <ConfirmButton
++                     action={deleteIssueAction.bind(null, repo.owner, repo.name, issue.number)}
++                     message={`Delete issue #${issue.number}? This can't be undone.`}
++                   >
++                     <TrashIcon /> Delete issue
++                   </ConfirmButton>
++                 </div>
++               )}
++             </div>
++           }
++         >
++           <h2 className="rule-t mb-4 pt-6 type-label engraved">Activity</h2>
++           <div className="relative space-y-4 before:absolute before:top-2 before:bottom-2 before:left-4 before:w-px before:bg-line">
++             <p className="relative flex items-center gap-2 pl-2.5 type-body text-ink2">
++               <TimelineDot />
++               <strong className="font-medium text-ink">{issue.author}</strong> created the issue · {timeAgo(issue.createdAt)}
++             </p>
++             {activity.map((item) => {
++               if (item.kind === "comment") {
++                 const c = item.comment;
++                 return (
++                   <div key={`c${c.id}`} className="relative">
++                     <CommentBox author={c.author} createdAt={c.createdAt} body={c.body} isAuthor={c.author === issue.author} />
++                   </div>
++                 );
++               }
++               const { icon, text } = describe(item.event);
++               return (
++                 <p key={`e${item.event.id}`} className="relative flex flex-wrap items-center gap-x-1.5 gap-y-1 pl-2.5 type-body text-ink2">
++                   <TimelineDot>{icon}</TimelineDot>
++                   <strong className="font-medium text-ink">{item.event.actor}</strong> {text} · {timeAgo(item.event.createdAt)}
++                 </p>
++               );
++             })}
++             <div className="relative flex gap-3 pt-2">
++               {viewer ? (
++                 <>
++                   <Avatar name={viewer.username} size={32} />
++                   <Surface material="raise-lite" radius="plate" className="min-w-0 flex-1 p-3">
++                     <form action={action} className="space-y-3">
++                       <Textarea
++                         name="body"
++                         minRows={4}
++                         maxRows={16}
++                         required
++                         aria-label="Comment"
++                         placeholder="Leave a comment… Markdown is supported."
++                       />
++                       <div className="flex justify-end">
++                         <Button type="submit" variant="primary" icon={<CommentIcon />}>
++                           Comment
++                         </Button>
++                       </div>
++                     </form>
++                   </Surface>
++                 </>
++               ) : (
++                 <Surface material="raise-lite" radius="plate" className="flex w-full flex-wrap items-center justify-between gap-3 p-5">
++                   <span className="type-body text-ink2">Sign in to join the conversation.</span>
++                   <ButtonLink
++                     href={`/login?next=${encodeURIComponent(`${repo.base}/issues/${issue.number}`)}`}
++                     variant="primary"
++                     icon={<ArrowRightIcon />}
++                   >
++                     Sign in to comment
++                   </ButtonLink>
++                 </Surface>
++               )}
++             </div>
++           </div>
++         </IssueDetail>
++       </TrackerProvider>
++     </div>
++   );
++ }

+16−0app/[owner]/[repo]/issues/new/form.tsxaddedView File

++ "use client";
++ import { useRouter } from "next/navigation";
++ import { IssueComposer } from "@/components/issues/issue-composer";
++ import { useTracker } from "@/components/issues/tracker-context";
++ import { Box } from "@/components/ui";
++ export function NewIssueForm() {
++   const router = useRouter();
++   const { base } = useTracker();
++   return (
++     <Box>
++       <IssueComposer onCreated={(number) => router.push(`${base}/issues/${number}`)} onCancel={() => router.push(`${base}/issues`)} />
++     </Box>
++   );
++ }

+23−0app/[owner]/[repo]/issues/new/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { TrackerProvider } from "@/components/issues/tracker-context";
++ import { PageTitle } from "@/components/ui";
++ import { requireViewer } from "@/lib/auth";
++ import { getRepo } from "@/lib/repo";
++ import { trackerProps } from "@/lib/tracker";
++ import { NewIssueForm } from "./form";
++ export const metadata: Metadata = { title: "New issue" };
++ export default async function NewIssuePage({ params }: PageProps<"/[owner]/[repo]/issues/new">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   await requireViewer(`${repo.base}/issues/new`);
++   return (
++     <div className="max-w-3xl">
++       <PageTitle title="Create new issue" />
++       <TrackerProvider {...trackerProps(repo)}>
++         <NewIssueForm />
++       </TrackerProvider>
++     </div>
++   );
++ }

+20−0app/[owner]/[repo]/issues/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { IssueTracker } from "@/components/issues/issue-tracker";
++ import { TrackerProvider } from "@/components/issues/tracker-context";
++ import { parseView } from "@/components/issues/view";
++ import { listIssues } from "@/lib/issues";
++ import { getRepo } from "@/lib/repo";
++ import { trackerProps } from "@/lib/tracker";
++ export const metadata: Metadata = { title: "Issues" };
++ export default async function IssuesPage({ params, searchParams }: PageProps<"/[owner]/[repo]/issues">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   return (
++     <TrackerProvider {...trackerProps(repo)}>
++       <IssueTracker issues={listIssues(repo.id)} initialView={parseView(await searchParams)} />
++     </TrackerProvider>
++   );
++ }

+46−0app/[owner]/[repo]/layout.tsxaddedView File

++ import Link from "next/link";
++ import { RepoTabs } from "@/components/repo-tabs";
++ import { Label, RepoAvatar, VisibilityLabel } from "@/components/ui";
++ import { openIssueCount } from "@/lib/issues";
++ import { getRepo } from "@/lib/repo";
++ export async function generateMetadata({ params }: LayoutProps<"/[owner]/[repo]">) {
++   const { owner, repo } = await params;
++   const r = await getRepo(owner, repo);
++   return {
++     title: { default: `${r.owner}/${r.name}`, template: `%s · ${r.owner}/${r.name}` },
++     description: r.description || undefined,
++   };
++ }
++ export default async function RepoLayout({ params, children }: LayoutProps<"/[owner]/[repo]">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   return (
++     <>
++       <div className="rule-b">
++         <div className="flex min-h-12 flex-wrap items-center gap-x-6 gap-y-1.5 px-4 py-1.5 md:px-5 xl:grid xl:grid-cols-[1fr_auto_1fr]">
++           <div className="flex min-w-0 items-center gap-2">
++             <Link href={repo.base} aria-label={`${repo.owner}/${repo.name}`} className="shrink-0 rounded-key transition-opacity hover:opacity-80 focus-visible:focus-ring">
++               <RepoAvatar repo={repo} size={22} />
++             </Link>
++             <Link href={`/${repo.owner}`} className="hidden shrink-0 text-[15px] text-ink2 transition-colors hover:text-ink sm:inline">
++               {repo.owner}
++             </Link>
++             <span aria-hidden className="hidden text-[15px] text-ink3 sm:inline">
++               /
++             </span>
++             <Link href={repo.base} className="truncate text-[15px] font-semibold tracking-[-0.01em] text-ink transition-opacity hover:opacity-80">
++               {repo.name}
++             </Link>
++             <VisibilityLabel visibility={repo.visibility} />
++             {repo.access === "write" && <Label tone="accent">Collaborator</Label>}
++           </div>
++           <RepoTabs base={repo.base} openIssues={openIssueCount(repo.id)} showSettings={repo.isAdmin} />
++         </div>
++       </div>
++       <div className="mx-auto w-full max-w-[1600px] flex-1 px-4 py-4 md:px-5">{children}</div>
++     </>
++   );
++ }

+30−0app/[owner]/[repo]/new/[...segments]/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { notFound } from "next/navigation";
++ import { saveFileAction } from "@/app/actions/files";
++ import { FileEditor } from "@/components/file-editor";
++ import { objectType, revParse } from "@/lib/git";
++ import { encodePath } from "@/lib/format";
++ import { getBranchAndPath, getWritableRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "New file" };
++ export default async function NewFilePage({ params }: PageProps<"/[owner]/[repo]/new/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const repo = await getWritableRepo(owner, repoParam);
++   const { branch, path: dir, exists } = await getBranchAndPath(repo, segments);
++   if (exists && dir && (await objectType(repo.dir, branch, dir)) !== "tree") notFound();
++   const baseSha = exists ? ((await revParse(repo.dir, `refs/heads/${branch}`)) ?? "") : "";
++   return (
++     <FileEditor
++       action={saveFileAction.bind(null, repo.owner, repo.name)}
++       repoName={repo.name}
++       branch={branch}
++       baseSha={baseSha}
++       originalPath=""
++       initialPath={dir ? `${dir}/` : ""}
++       initialContent=""
++       cancelHref={exists ? `${repo.base}/tree/${encodePath(branch)}${dir ? `/${encodePath(dir)}` : ""}` : repo.base}
++     />
++   );
++ }

+204−0app/[owner]/[repo]/page.tsxaddedView File

++ import Link from "next/link";
++ import { AvatarGroup } from "@unlocalhosted/metalui";
++ import { CloneUrlTabs, CopyButton } from "@/components/clone-button";
++ import {
++   BranchIcon,
++   CalendarIcon,
++   HistoryIcon,
++   IssueOpenedIcon,
++   PeopleIcon,
++   PlusIcon,
++   SparkleIcon,
++   TagIcon,
++   UploadIcon,
++ } from "@/components/icons";
++ import { TreeView } from "@/components/tree-view";
++ import { Avatar, Blankslate, Box, ButtonLink } from "@/components/ui";
++ import { encodePath, formatDate } from "@/lib/format";
++ import { commitCount, listBranches, listContributors, listFilesWithSizes, listTags } from "@/lib/git";
++ import { openIssueCount } from "@/lib/issues";
++ import { languageBreakdown, type LanguageShare } from "@/lib/languages";
++ import { cloneUrls, getRepo, type Repo } from "@/lib/repo";
++ import { listCollaborators } from "@/lib/repos";
++ function CommandBlock({ title, commands }: { title: string; commands: string }) {
++   return (
++     <div className="rule-t px-6 py-5">
++       <h3 className="mb-3 type-title text-ink">{title}</h3>
++       <div className="flex items-start gap-2">
++         <pre className="well flex-1 overflow-x-auto rounded-plate px-4 py-3 font-mono text-[11.5px] leading-6 text-ink">{commands}</pre>
++         <CopyButton text={commands} label="Copy commands" />
++       </div>
++     </div>
++   );
++ }
++ async function QuickSetup({ repo }: { repo: Repo }) {
++   const urls = await cloneUrls(repo);
++   if (!repo.canWrite) {
++     return (
++       <Box>
++         <Blankslate icon={<SparkleIcon />} title="This repository is empty">
++           The owner hasn’t pushed anything yet.
++         </Blankslate>
++       </Box>
++     );
++   }
++   return (
++     <Box className="overflow-hidden">
++       <div className="p-6">
++         <h3 className="type-content font-semibold text-ink">Let’s get this repository started</h3>
++         <p className="mt-1 mb-5 type-lead text-ink2">Add a file in the browser, or push from your machine.</p>
++         <div className="mb-6 flex flex-wrap gap-2">
++           <ButtonLink href={`${repo.base}/new/main`} variant="primary" icon={<PlusIcon />}>
++             Create New File
++           </ButtonLink>
++           <ButtonLink href={`${repo.base}/upload/main`} icon={<UploadIcon />}>
++             Upload Files
++           </ButtonLink>
++         </div>
++         <div className="max-w-xl">
++           <CloneUrlTabs urls={urls} />
++         </div>
++       </div>
++       <CommandBlock
++         title="…or create a new repository on the command line"
++         commands={`echo "# ${repo.name}" >> README.md\ngit init\ngit add README.md\ngit commit -m "first commit"\ngit branch -M main\ngit remote add origin ${urls.ssh}\ngit push -u origin main`}
++       />
++       <CommandBlock
++         title="…or push an existing repository from the command line"
++         commands={`git remote add origin ${urls.ssh}\ngit branch -M main\ngit push -u origin main`}
++       />
++     </Box>
++   );
++ }
++ /** An engraved heading over a sidebar group, with an optional readout at its right. */
++ function SectionLabel({ children, count }: { children: string; count?: number }) {
++   return (
++     <h2 className="mb-2 flex items-center justify-between type-label engraved">
++       {children}
++       {count !== undefined && <span className="type-readout text-ink3 [text-shadow:none]">{count}</span>}
++     </h2>
++   );
++ }
++ function Stat({ href, icon: Icon, label, value }: { href: string; icon: typeof BranchIcon; label: string; value: number }) {
++   return (
++     <li>
++       <Link
++         href={href}
++         className="group -mx-2 flex h-8 items-center gap-2.5 rounded-row px-2 type-ui text-ink outline-none hover:recipe-row-list-hover focus-visible:focus-ring"
++       >
++         <Icon width={14} height={14} className="text-ink3 transition-colors group-hover:text-ink2" />
++         {label}
++         <span className="ml-auto type-readout text-ink2">{value}</span>
++       </Link>
++     </li>
++   );
++ }
++ function Languages({ languages }: { languages: LanguageShare[] }) {
++   // Tiny shares are unreadable in the bar and the legend; fold them into "Other".
++   const shown = languages.filter((l) => l.percent >= 0.1).slice(0, 8);
++   const other = 100 - shown.reduce((sum, l) => sum + l.percent, 0);
++   const items = other >= 0.1 ? [...shown, { name: "Other", color: "var(--mu-ink3)", percent: other }] : shown;
++   return (
++     <section>
++       <SectionLabel>Languages</SectionLabel>
++       {/* A sunk track, each language a lit segment in it. */}
++       <div
++         role="img"
++         aria-label={items.map((l) => `${l.name} ${l.percent.toFixed(1)}%`).join(", ")}
++         className="material-well flex h-3 gap-[2px] overflow-hidden rounded-pill p-[3px]"
++       >
++         {items.map((l) => (
++           <span
++             key={l.name}
++             className="min-w-[3px] rounded-pill shadow-[inset_0_1px_0_rgb(255_255_255/0.25)]"
++             style={{ width: `${l.percent}%`, background: l.color }}
++             title={`${l.name} ${l.percent.toFixed(1)}%`}
++           />
++         ))}
++       </div>
++       <ul className="mt-3 grid grid-cols-2 gap-x-4 gap-y-1.5 type-ui">
++         {items.map((l) => (
++           <li key={l.name} className="flex min-w-0 items-center gap-2">
++             <span aria-hidden className="size-1.5 shrink-0 rounded-full" style={{ background: l.color }} />
++             <span className="truncate text-ink">{l.name}</span>
++             <span className="type-readout text-ink3">{l.percent.toFixed(1)}%</span>
++           </li>
++         ))}
++       </ul>
++     </section>
++   );
++ }
++ export default async function RepoHome({ params }: PageProps<"/[owner]/[repo]">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const ref = repo.defaultBranch;
++   const [branches, tags, commits, files, contributors] = await Promise.all([
++     listBranches(repo.dir),
++     listTags(repo.dir),
++     ref ? commitCount(repo.dir, ref) : 0,
++     ref ? listFilesWithSizes(repo.dir, ref) : [],
++     ref ? listContributors(repo.dir, ref) : [],
++   ]);
++   const collaborators = listCollaborators(repo.id);
++   const languages = languageBreakdown(files);
++   const historyHref = ref ? `${repo.base}/commits/${encodePath(ref)}` : `${repo.base}/commits`;
++   return (
++     <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_260px] xl:gap-10">
++       <div className="min-w-0">
++         {ref ? <TreeView repo={repo} gitRef={ref} path="" /> : <QuickSetup repo={repo} />}
++       </div>
++       <aside className="flex flex-col gap-7">
++         <section>
++           <SectionLabel>About</SectionLabel>
++           <p className={`type-body ${repo.description ? "text-ink" : "text-ink3 italic"}`}>
++             {repo.description || "No description provided."}
++           </p>
++           <p className="mt-2 flex items-center gap-1.5 type-meta text-ink3">
++             <CalendarIcon width={12} height={12} /> Created {formatDate(repo.createdAt)}
++           </p>
++         </section>
++         <section>
++           <SectionLabel>Stats</SectionLabel>
++           <ul>
++             <Stat href={historyHref} icon={HistoryIcon} label="Commits" value={commits} />
++             <Stat href={`${repo.base}/branches`} icon={BranchIcon} label="Branches" value={branches.length} />
++             <Stat href={`${repo.base}/branches`} icon={TagIcon} label="Tags" value={tags.length} />
++             <Stat href={`${repo.base}/issues`} icon={IssueOpenedIcon} label="Open issues" value={openIssueCount(repo.id)} />
++             <Stat
++               href={repo.isAdmin ? `${repo.base}/settings/access` : `/${repo.owner}`}
++               icon={PeopleIcon}
++               label="Collaborators"
++               value={collaborators.length}
++             />
++           </ul>
++         </section>
++         {languages.length > 0 && <Languages languages={languages} />}
++         <section>
++           <SectionLabel count={contributors.length || 1}>Contributors</SectionLabel>
++           {contributors.length ? (
++             <AvatarGroup
++               aria-label="Contributors"
++               people={contributors.slice(0, 24).map((c) => ({ name: c.name }))}
++               max={8}
++               size="regular"
++             />
++           ) : (
++             <Link href={`/${repo.owner}`} title={repo.owner} className="inline-flex rounded-full focus-visible:focus-ring">
++               <Avatar name={repo.owner} size={32} />
++             </Link>
++           )}
++         </section>
++       </aside>
++     </div>
++   );
++ }

+29−0app/[owner]/[repo]/raw/[...segments]/route.tsaddedView File

++ import { getViewer } from "@/lib/auth";
++ import { normalizeRepoName, objectType, readBlob, resolveRefAndPath } from "@/lib/git";
++ import { contentTypeFor } from "@/lib/mime";
++ import { findRepo, repoAccess } from "@/lib/repos";
++ export async function GET(_request: Request, ctx: RouteContext<"/[owner]/[repo]/raw/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await ctx.params;
++   const repo = findRepo(owner, normalizeRepoName(repoParam));
++   const viewer = await getViewer();
++   if (!repo || !repoAccess(repo, viewer?.id)) return new Response("Not found", { status: 404 });
++   const resolved = await resolveRefAndPath(repo.dir, segments);
++   if (!resolved || (await objectType(repo.dir, resolved.ref, resolved.path)) !== "blob") {
++     return new Response("Not found", { status: 404 });
++   }
++   const blob = await readBlob(repo.dir, resolved.ref, resolved.path);
++   if (blob.tooLarge) return new Response("File too large", { status: 413 });
++   const filename = resolved.path.split("/").pop()!;
++   return new Response(new Uint8Array(blob.content), {
++     headers: {
++       "Content-Type": contentTypeFor(filename, blob.binary),
++       "X-Content-Type-Options": "nosniff",
++       "Cache-Control": repo.visibility === "private" ? "private, no-store" : "no-cache",
++       // Sandbox the response so things like scripted SVGs can't run in our origin.
++       "Content-Security-Policy": "default-src 'none'; img-src 'self'; style-src 'unsafe-inline'; sandbox",
++     },
++   });
++ }

+32−0app/[owner]/[repo]/settings/access/form.tsxaddedView File

++ "use client";
++ import { useActionState } from "react";
++ import type { FormState } from "@/app/actions/types";
++ import { PersonIcon, PlusIcon } from "@/components/icons";
++ import { TextField } from "@/components/settings-fields";
++ import { PlateBody } from "@/components/settings-plate";
++ import { Alert, Button } from "@/components/ui";
++ export function AddCollaboratorForm({ action }: { action: (prev: FormState, formData: FormData) => Promise<FormState> }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   return (
++     <form action={formAction}>
++       <PlateBody>
++         <div className="flex max-w-xl flex-wrap items-end gap-2">
++           <TextField
++             className="min-w-60 flex-1"
++             label="Username"
++             icon={<PersonIcon />}
++             name="username"
++             required
++           />
++           <Button variant="primary" icon={<PlusIcon />} disabled={pending}>
++             {pending ? "Adding…" : "Add Collaborator"}
++           </Button>
++         </div>
++         {state?.error && <Alert>{state.error}</Alert>}
++         {state?.success && <Alert kind="success">{state.success}</Alert>}
++       </PlateBody>
++     </form>
++   );
++ }

+79−0app/[owner]/[repo]/settings/access/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import Link from "next/link";
++ import { Label as MuLabel } from "@unlocalhosted/metalui";
++ import { addCollaboratorAction, removeCollaboratorAction } from "@/app/actions/repo";
++ import { ConfirmButton } from "@/components/confirm-button";
++ import { PeopleIcon } from "@/components/icons";
++ import { SettingsSection } from "@/components/metal";
++ import { ListRow, PlateSection } from "@/components/settings-plate";
++ import { Avatar, Blankslate, Label, PageTitle } from "@/components/ui";
++ import { timeAgo } from "@/lib/format";
++ import { getRepo } from "@/lib/repo";
++ import { listCollaborators } from "@/lib/repos";
++ import { AddCollaboratorForm } from "./form";
++ export const metadata: Metadata = { title: "Collaborators" };
++ export default async function AccessPage({ params }: PageProps<"/[owner]/[repo]/settings/access">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const collaborators = listCollaborators(repo.id);
++   return (
++     <div>
++       <PageTitle title="Collaborators" description="Collaborators can see this repository, push to it and edit files in the browser." />
++       <div className="flex flex-col gap-7">
++         <SettingsSection title={`People with access · ${collaborators.length + 1}`}>
++           <ListRow
++             lead={<Avatar name={repo.owner} size={32} />}
++             title={
++               <>
++                 <Link href={`/${repo.owner}`} className="truncate hover:underline">
++                   {repo.owner}
++                 </Link>
++                 <Label tone="accent">Owner</Label>
++               </>
++             }
++           />
++           {collaborators.map((c) => (
++             <ListRow
++               key={c.id}
++               lead={<Avatar name={c.username} size={32} />}
++               title={
++                 <>
++                   <Link href={`/${c.username}`} className="truncate hover:underline">
++                     {c.username}
++                   </Link>
++                   <Label>Write</Label>
++                 </>
++               }
++               meta={
++                 <MuLabel variant="engraved">
++                   {c.name && (
++                     <>
++                       <b>{c.name}</b> ·{" "}
++                     </>
++                   )}
++                   Added <b>{timeAgo(c.addedAt)}</b>
++                 </MuLabel>
++               }
++             >
++               <ConfirmButton
++                 action={removeCollaboratorAction.bind(null, repo.owner, repo.name, c.id)}
++                 message={`Remove ${c.username} from ${repo.owner}/${repo.name}?`}
++                 variant="default"
++               >
++                 Remove
++               </ConfirmButton>
++             </ListRow>
++           ))}
++           {collaborators.length === 0 && <Blankslate icon={<PeopleIcon />} title="You haven’t invited any collaborators yet" />}
++         </SettingsSection>
++         <PlateSection title="Add a collaborator">
++           <AddCollaboratorForm action={addCollaboratorAction.bind(null, repo.owner, repo.name)} />
++         </PlateSection>
++       </div>
++     </div>
++   );
++ }

+185−0app/[owner]/[repo]/settings/forms.tsxaddedView File

++ "use client";
++ import { useActionState, useEffect, useState } from "react";
++ import type { FormState } from "@/app/actions/types";
++ import { AlertIcon, GlobeIcon, LockIcon, PencilIcon, TrashIcon, UndoIcon, UploadIcon } from "@/components/icons";
++ import { ChoiceCards, TextField } from "@/components/settings-fields";
++ import { PlateBody, PlateFooter } from "@/components/settings-plate";
++ import { Alert, Button, buttonClass, RepoAvatar, type RepoImageRef } from "@/components/ui";
++ type Action = (prev: FormState, formData: FormData) => Promise<FormState>;
++ export function ImageForm({
++   action,
++   resetAction,
++   repo,
++ }: {
++   action: Action;
++   resetAction: () => Promise<void>;
++   repo: RepoImageRef;
++ }) {
++   const [preview, setPreview] = useState<string | null>(null);
++   const [state, formAction, pending] = useActionState(async (prev: FormState, formData: FormData) => {
++     const result = await action(prev, formData);
++     if (result?.success) setPreview(null);
++     return result;
++   }, undefined);
++   useEffect(() => () => {
++     if (preview) URL.revokeObjectURL(preview);
++   }, [preview]);
++   return (
++     <PlateBody>
++       <div className="flex flex-wrap items-start gap-5">
++         <RepoAvatar repo={repo} src={preview ?? undefined} size={72} />
++         <div className="flex min-w-60 flex-1 flex-col gap-3">
++           <p className="type-body text-ink2">
++             Shown next to the repository everywhere. Until you upload one, it’s the owner’s avatar. PNG, JPEG, GIF or WebP, up to 1&nbsp;MB.
++           </p>
++           <div className="flex flex-wrap items-center gap-2">
++             <form action={formAction} className="flex items-center gap-2">
++               {/* The file input stays a real input; its label is drawn as MetalUI's standard cap. */}
++               <label className={buttonClass("default", "has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-green-deep has-focus-visible:outline-solid")}>
++                 <UploadIcon /> {repo.imageVersion ? "Replace Image" : "Upload Image"}
++                 <input
++                   type="file"
++                   name="image"
++                   accept="image/png,image/jpeg,image/gif,image/webp"
++                   required
++                   className="sr-only"
++                   onChange={(e) => {
++                     const file = e.target.files?.[0];
++                     setPreview(file ? URL.createObjectURL(file) : null);
++                   }}
++                 />
++               </label>
++               {preview && (
++                 <Button variant="primary" disabled={pending}>
++                   {pending ? "Saving…" : "Save Image"}
++                 </Button>
++               )}
++             </form>
++             {repo.imageVersion && !preview && (
++               <form action={resetAction}>
++                 <Button variant="invisible" icon={<UndoIcon />}>
++                   Reset to Owner’s Avatar
++                 </Button>
++               </form>
++             )}
++           </div>
++           {state?.error && <Alert>{state.error}</Alert>}
++           {state?.success && !preview && <Alert kind="success">{state.success}</Alert>}
++         </div>
++       </div>
++     </PlateBody>
++   );
++ }
++ export function RenameForm({ action, name }: { action: Action; name: string }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   return (
++     <form action={formAction}>
++       <PlateBody>
++         <div className="flex max-w-xl flex-wrap items-end gap-2">
++           <TextField className="min-w-60 flex-1" label="Repository name" name="name" defaultValue={name} required />
++           <Button icon={<PencilIcon />} disabled={pending}>
++             Rename
++           </Button>
++         </div>
++         {state?.error && <Alert>{state.error}</Alert>}
++       </PlateBody>
++     </form>
++   );
++ }
++ export function GeneralForm({
++   action,
++   description,
++   visibility,
++ }: {
++   action: Action;
++   description: string;
++   visibility: "public" | "private";
++ }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   return (
++     <form action={formAction}>
++       <PlateBody className="max-w-xl">
++         <TextField label="Description" name="description" defaultValue={description} maxLength={350} />
++         <div className="flex flex-col gap-1.5">
++           <span id="repo-visibility" className="type-ui text-ink">
++             Visibility
++           </span>
++           <ChoiceCards
++             name="visibility"
++             aria-labelledby="repo-visibility"
++             defaultValue={visibility}
++             columns={1}
++             choices={[
++               { value: "public", icon: <GlobeIcon />, title: "Public", description: "Anyone can see and clone this repository." },
++               { value: "private", icon: <LockIcon />, title: "Private", description: "Only you and collaborators can see it." },
++             ]}
++           />
++         </div>
++         {state?.error && <Alert>{state.error}</Alert>}
++         {state?.success && <Alert kind="success">{state.success}</Alert>}
++       </PlateBody>
++       <PlateFooter>
++         <Button variant="primary" disabled={pending}>
++           {pending ? "Saving…" : "Save Changes"}
++         </Button>
++       </PlateFooter>
++     </form>
++   );
++ }
++ /** Deleting the repository: one red cap opens the type-to-confirm form, whose red cap does it. */
++ export function DangerZone({ action, fullName }: { action: Action; fullName: string }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   const [confirm, setConfirm] = useState("");
++   const [open, setOpen] = useState(false);
++   return (
++     <>
++       <div className="flex min-h-[52px] flex-wrap items-center gap-4 px-6 py-4">
++         <div className="flex min-w-0 flex-1 flex-col gap-0.5">
++           <p className="type-title text-ink">Delete this repository</p>
++           <p className="type-body text-ink2">Once you delete a repository, there is no going back. Please be certain.</p>
++         </div>
++         {!open && (
++           <Button type="button" variant="danger" icon={<TrashIcon />} onClick={() => setOpen(true)}>
++             Delete Repository
++           </Button>
++         )}
++       </div>
++       {open && (
++         <form action={formAction}>
++           <PlateBody className="pt-0">
++             <p className="flex items-start gap-2 type-body text-red">
++               <AlertIcon className="mt-px shrink-0" />
++               <span>
++                 This will permanently delete <strong>{fullName}</strong>, its history, issues and access settings.
++               </span>
++             </p>
++             <TextField
++               className="max-w-xl"
++               label={`To confirm, type “${fullName}” below:`}
++               name="confirm"
++               value={confirm}
++               onChange={(e) => setConfirm(e.target.value)}
++               autoFocus
++             />
++             {state?.error && <Alert>{state.error}</Alert>}
++           </PlateBody>
++           <PlateFooter>
++             <Button type="button" onClick={() => setOpen(false)}>
++               Cancel
++             </Button>
++             <Button variant="danger" icon={<TrashIcon />} disabled={confirm !== fullName || pending}>
++               {pending ? "Deleting…" : "I Understand, Delete This Repository"}
++             </Button>
++           </PlateFooter>
++         </form>
++       )}
++     </>
++   );
++ }

+68−0app/[owner]/[repo]/settings/labels/form.tsxaddedView File

++ "use client";
++ import { useActionState, useState } from "react";
++ import type { FormState } from "@/app/actions/types";
++ import { PlusIcon } from "@/components/icons";
++ import { LabelChip } from "@/components/issues/issue-icons";
++ import { TextField } from "@/components/settings-fields";
++ import { PlateBody } from "@/components/settings-plate";
++ import { Alert, Button } from "@/components/ui";
++ import { LABEL_COLORS } from "@/lib/issue-meta";
++ export function NewLabelForm({ action }: { action: (prev: FormState, formData: FormData) => Promise<FormState> }) {
++   const [state, formAction, pending] = useActionState(action, undefined);
++   const [name, setName] = useState("");
++   const [color, setColor] = useState<string>(LABEL_COLORS[1]);
++   return (
++     <form action={formAction}>
++       <PlateBody>
++         <div className="flex max-w-xl flex-wrap items-end gap-2">
++           <TextField
++             className="min-w-60 flex-1"
++             label="Name"
++             name="name"
++             required
++             maxLength={50}
++             value={name}
++             onChange={(e) => setName(e.target.value)}
++             placeholder="e.g. bug"
++           />
++           <Button variant="primary" icon={<PlusIcon />} disabled={pending}>
++             {pending ? "Creating…" : "Create Label"}
++           </Button>
++         </div>
++         <div className="flex flex-wrap items-center gap-x-6 gap-y-3">
++           <fieldset className="flex flex-col gap-1.5">
++             <legend className="mb-1.5 type-ui text-ink">Color</legend>
++             {/* Colour keys: each a small raised disc; the chosen one is ringed in the focus green (intent). */}
++             <div className="flex items-center gap-2 rounded-pill recipe-well-track p-1.5">
++               {LABEL_COLORS.map((c) => (
++                 <label key={c} className="cursor-pointer" title={c}>
++                   <input
++                     type="radio"
++                     name="color"
++                     value={c}
++                     checked={color === c}
++                     onChange={() => setColor(c)}
++                     aria-label={c}
++                     className="peer sr-only"
++                   />
++                   <span
++                     className="block size-5 rounded-full shadow-[var(--mu-raise-sm)] transition-[outline-color] duration-150 outline-2 outline-offset-2 outline-transparent outline-solid peer-checked:outline-green-deep peer-focus-visible:outline-green-deep/60"
++                     style={{ background: c }}
++                   />
++                 </label>
++               ))}
++             </div>
++           </fieldset>
++           <div className="flex flex-col gap-1.5">
++             <span className="type-label engraved">Preview</span>
++             <LabelChip name={name.trim() || "label"} color={color} />
++           </div>
++         </div>
++         {state?.error && <Alert>{state.error}</Alert>}
++         {state?.success && <Alert kind="success">{state.success}</Alert>}
++       </PlateBody>
++     </form>
++   );
++ }

+69−0app/[owner]/[repo]/settings/labels/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import Link from "next/link";
++ import { createLabelFormAction, deleteLabelAction } from "@/app/actions/issues";
++ import { ConfirmButton } from "@/components/confirm-button";
++ import { TagIcon } from "@/components/icons";
++ import { LabelChip } from "@/components/issues/issue-icons";
++ import { SettingsSection } from "@/components/metal";
++ import { PlateSection } from "@/components/settings-plate";
++ import { Blankslate, PageTitle } from "@/components/ui";
++ import { labelUsage, listLabels } from "@/lib/issues";
++ import { getRepo } from "@/lib/repo";
++ import { NewLabelForm } from "./form";
++ export const metadata: Metadata = { title: "Labels" };
++ export default async function LabelsPage({ params }: PageProps<"/[owner]/[repo]/settings/labels">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const labels = listLabels(repo.id);
++   const usage = labelUsage(repo.id);
++   return (
++     <div>
++       <PageTitle
++         title="Labels"
++         description="Labels categorize issues. Collaborators can also create them right from an issue’s label menu."
++       />
++       <div className="flex flex-col gap-7">
++         {labels.length === 0 ? (
++           <PlateSection title="Labels">
++             <Blankslate icon={<TagIcon />} title="No labels yet">
++               Create labels like bug, feature or design to filter and group issues.
++             </Blankslate>
++           </PlateSection>
++         ) : (
++           <SettingsSection title={`Labels · ${labels.length}`}>
++             {labels.map((label) => {
++               const count = usage.get(label.id) ?? 0;
++               return (
++                 <div key={label.id} className="flex min-h-[52px] items-center gap-3 px-[18px] py-2.5">
++                   <LabelChip name={label.name} color={label.color} />
++                   <Link
++                     href={`${repo.base}/issues?label=${label.id}`}
++                     className="rounded-key px-1 type-label engraved hover:text-ink focus-visible:focus-ring"
++                   >
++                     {count} issue{count === 1 ? "" : "s"}
++                   </Link>
++                   <div className="ml-auto">
++                     <ConfirmButton
++                       action={deleteLabelAction.bind(null, repo.owner, repo.name, label.id)}
++                       message={`Delete the label "${label.name}"? It will be removed from ${count} issue${count === 1 ? "" : "s"}.`}
++                       variant="default"
++                     >
++                       Delete Label
++                     </ConfirmButton>
++                   </div>
++                 </div>
++               );
++             })}
++           </SettingsSection>
++         )}
++         <PlateSection title="New label">
++           <NewLabelForm action={createLabelFormAction.bind(null, repo.owner, repo.name)} />
++         </PlateSection>
++       </div>
++     </div>
++   );
++ }

+23−0app/[owner]/[repo]/settings/layout.tsxaddedView File

++ import { forbidden } from "next/navigation";
++ import { SettingsNav } from "@/components/settings-nav";
++ import { GearIcon, PeopleIcon, TagIcon } from "@/components/icons";
++ import { getRepo } from "@/lib/repo";
++ export default async function RepoSettingsLayout({ params, children }: LayoutProps<"/[owner]/[repo]/settings">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   if (!repo.isAdmin) forbidden();
++   return (
++     <div className="grid gap-8 md:grid-cols-[200px_1fr]">
++       <SettingsNav
++         title="Repository"
++         items={[
++           { href: `${repo.base}/settings`, label: "General", icon: <GearIcon /> },
++           { href: `${repo.base}/settings/access`, label: "Collaborators", icon: <PeopleIcon /> },
++           { href: `${repo.base}/settings/labels`, label: "Labels", icon: <TagIcon /> },
++         ]}
++       />
++       <div className="min-w-0">{children}</div>
++     </div>
++   );
++ }

+40−0app/[owner]/[repo]/settings/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { deleteRepoAction, removeRepoImageAction, renameRepoAction, updateRepoAction, updateRepoImageAction } from "@/app/actions/repo";
++ import { PlateSection } from "@/components/settings-plate";
++ import { PageTitle } from "@/components/ui";
++ import { getRepo } from "@/lib/repo";
++ import { DangerZone, GeneralForm, ImageForm, RenameForm } from "./forms";
++ export const metadata: Metadata = { title: "Settings" };
++ export default async function RepoSettingsPage({ params }: PageProps<"/[owner]/[repo]/settings">) {
++   const { owner, repo: repoParam } = await params;
++   const repo = await getRepo(owner, repoParam);
++   return (
++     <div>
++       <PageTitle title="General" />
++       <div className="flex flex-col gap-7">
++         <PlateSection title="Name">
++           <RenameForm action={renameRepoAction.bind(null, repo.owner, repo.name)} name={repo.name} />
++         </PlateSection>
++         <PlateSection title="Repository image">
++           <ImageForm
++             action={updateRepoImageAction.bind(null, repo.owner, repo.name)}
++             resetAction={removeRepoImageAction.bind(null, repo.owner, repo.name)}
++             repo={{ owner: repo.owner, name: repo.name, imageVersion: repo.imageVersion }}
++           />
++         </PlateSection>
++         <PlateSection title="Details">
++           <GeneralForm
++             action={updateRepoAction.bind(null, repo.owner, repo.name)}
++             description={repo.description}
++             visibility={repo.visibility}
++           />
++         </PlateSection>
++         <PlateSection title="Danger zone">
++           <DangerZone action={deleteRepoAction.bind(null, repo.owner, repo.name)} fullName={`${repo.owner}/${repo.name}`} />
++         </PlateSection>
++       </div>
++     </div>
++   );
++ }

+15−0app/[owner]/[repo]/tree/[...segments]/page.tsxaddedView File

++ import { notFound, redirect } from "next/navigation";
++ import { TreeView } from "@/components/tree-view";
++ import { objectType } from "@/lib/git";
++ import { encodePath } from "@/lib/format";
++ import { getRefAndPath, getRepo } from "@/lib/repo";
++ export default async function TreePage({ params }: PageProps<"/[owner]/[repo]/tree/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const repo = await getRepo(owner, repoParam);
++   const { ref, path } = await getRefAndPath(repo, segments);
++   const type = await objectType(repo.dir, ref, path);
++   if (type === "blob") redirect(`${repo.base}/blob/${encodePath(ref)}/${encodePath(path)}`);
++   if (type !== "tree") notFound();
++   return <TreeView repo={repo} gitRef={ref} path={path} />;
++ }

+28−0app/[owner]/[repo]/upload/[...segments]/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { notFound } from "next/navigation";
++ import { uploadFilesAction } from "@/app/actions/files";
++ import { UploadForm } from "@/components/upload-form";
++ import { objectType, revParse } from "@/lib/git";
++ import { encodePath } from "@/lib/format";
++ import { getBranchAndPath, getWritableRepo } from "@/lib/repo";
++ export const metadata: Metadata = { title: "Upload files" };
++ export default async function UploadPage({ params }: PageProps<"/[owner]/[repo]/upload/[...segments]">) {
++   const { owner, repo: repoParam, segments } = await params;
++   const repo = await getWritableRepo(owner, repoParam);
++   const { branch, path: dir, exists } = await getBranchAndPath(repo, segments);
++   if (exists && dir && (await objectType(repo.dir, branch, dir)) !== "tree") notFound();
++   const baseSha = exists ? ((await revParse(repo.dir, `refs/heads/${branch}`)) ?? "") : "";
++   return (
++     <UploadForm
++       action={uploadFilesAction.bind(null, repo.owner, repo.name)}
++       repoName={repo.name}
++       branch={branch}
++       baseSha={baseSha}
++       dir={dir}
++       cancelHref={exists ? `${repo.base}/tree/${encodePath(branch)}${dir ? `/${encodePath(dir)}` : ""}` : repo.base}
++     />
++   );
++ }

+92−0app/[owner]/page.tsxaddedView File

++ import { notFound } from "next/navigation";
++ import { Field } from "@unlocalhosted/metalui";
++ import { CalendarIcon, PencilIcon, PlusIcon, RepoIcon, SearchIcon } from "@/components/icons";
++ import { FieldIcon, FieldInput } from "@/components/metal";
++ import { RepoList } from "@/components/repo-list";
++ import { Avatar, Blankslate, Box, ButtonLink, Counter } from "@/components/ui";
++ import { getViewer } from "@/lib/auth";
++ import { formatDate } from "@/lib/format";
++ import { withActivity } from "@/lib/listing";
++ import { listReposByOwner } from "@/lib/repos";
++ import { getUserByUsername } from "@/lib/users";
++ export async function generateMetadata({ params }: PageProps<"/[owner]">) {
++   const user = getUserByUsername((await params).owner);
++   return { title: user ? (user.name ? `${user.username} (${user.name})` : user.username) : "Not found" };
++ }
++ const heading = "text-[22px] leading-7 font-semibold tracking-[-0.025em] text-ink";
++ export default async function ProfilePage({ params, searchParams }: PageProps<"/[owner]">) {
++   const user = getUserByUsername((await params).owner);
++   if (!user) notFound();
++   const q = String((await searchParams).q ?? "").trim().toLowerCase();
++   const viewer = await getViewer();
++   const all = await withActivity(listReposByOwner(user.id, viewer?.id ?? null));
++   const repos = q ? all.filter((r) => r.name.toLowerCase().includes(q) || r.description.toLowerCase().includes(q)) : all;
++   const isSelf = viewer?.id === user.id;
++   const publicCount = all.filter((r) => r.visibility === "public").length;
++   return (
++     <div className="mx-auto grid w-full max-w-[1280px] gap-8 px-4 py-10 md:grid-cols-[300px_1fr] md:px-6">
++       <aside>
++         <Box className="p-6 md:sticky md:top-20">
++           <Avatar name={user.username} size={88} />
++           <h1 className="mt-5">
++             {user.name && <span className={`block ${heading}`}>{user.name}</span>}
++             <span className={`block ${user.name ? "mt-1 type-readout text-ink3" : heading}`}>@{user.username}</span>
++           </h1>
++           {user.bio && <p className="mt-3 type-body text-ink2">{user.bio}</p>}
++           <dl className="mt-5 grid grid-cols-2 gap-2">
++             <div className="well flex flex-col-reverse gap-1 rounded-row px-3 py-2.5">
++               <dt className="type-label engraved">Repositories</dt>
++               <dd className="type-stat text-ink">{all.length}</dd>
++             </div>
++             <div className="well flex flex-col-reverse gap-1 rounded-row px-3 py-2.5">
++               <dt className="type-label engraved">Public</dt>
++               <dd className="type-stat text-ink">{publicCount}</dd>
++             </div>
++           </dl>
++           <p className="mt-4 flex items-center gap-2 type-meta text-ink3">
++             <CalendarIcon width={14} height={14} /> Joined {formatDate(user.createdAt)}
++           </p>
++           {isSelf && (
++             <ButtonLink href="/settings/profile" icon={<PencilIcon />} className="mt-5 w-full">
++               Edit Profile
++             </ButtonLink>
++           )}
++         </Box>
++       </aside>
++       <main className="min-w-0">
++         <div className="mb-5 flex flex-wrap items-center gap-3">
++           <h2 className="flex items-center gap-2 type-display text-ink">
++             <RepoIcon className="text-ink2" /> Repositories <Counter>{all.length}</Counter>
++           </h2>
++           <div className="ml-auto flex w-full items-center gap-2 sm:w-auto">
++             <form role="search" className="flex-1 sm:w-72">
++               <Field size="regular">
++                 <FieldIcon>
++                   <SearchIcon />
++                 </FieldIcon>
++                 <FieldInput name="q" defaultValue={q} placeholder="Find a repository…" aria-label="Find a repository" />
++               </Field>
++             </form>
++             {isSelf && (
++               <ButtonLink href="/new" variant="primary" icon={<PlusIcon />}>
++                 New
++               </ButtonLink>
++             )}
++           </div>
++         </div>
++         {repos.length > 0 ? (
++           <RepoList repos={repos} showOwner={false} />
++         ) : (
++           <Box>
++             <Blankslate icon={<RepoIcon />} title={q ? "No matching repositories" : `${user.username} doesn’t have any repositories yet.`} />
++           </Box>
++         )}
++       </main>
++     </div>
++   );
++ }

+34−0app/actions/auth.tsaddedView File

++ "use server";
++ import { redirect } from "next/navigation";
++ import { endSession, safeNext, startSession } from "@/lib/auth";
++ import { authenticateUser, createUser, UserError } from "@/lib/users";
++ import type { FormState } from "./types";
++ export async function signupAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   try {
++     const user = await createUser({
++       username: String(formData.get("username") ?? ""),
++       email: String(formData.get("email") ?? ""),
++       password: String(formData.get("password") ?? ""),
++       name: String(formData.get("name") ?? ""),
++     });
++     await startSession(user.id);
++   } catch (e) {
++     if (e instanceof UserError) return { error: e.message };
++     throw e;
++   }
++   redirect(safeNext(formData.get("next")));
++ }
++ export async function loginAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   const user = await authenticateUser(String(formData.get("login") ?? ""), String(formData.get("password") ?? ""));
++   if (!user) return { error: "Incorrect username or password." };
++   await startSession(user.id);
++   redirect(safeNext(formData.get("next")));
++ }
++ export async function logoutAction() {
++   await endSession();
++   redirect("/");
++ }

+143−0app/actions/files.tsaddedView File

++ "use server";
++ import { redirect } from "next/navigation";
++ import { git, GitError, objectType, revParse } from "@/lib/git";
++ import { cleanRepoPath, commitFiles, isValidBranchName, type FileChange } from "@/lib/git-write";
++ import { encodePath } from "@/lib/format";
++ import { markPushed, type RepoRecord } from "@/lib/repos";
++ import type { User } from "@/lib/users";
++ import { ActionError, repoForAction } from "./guard";
++ import type { FormState } from "./types";
++ const str = (formData: FormData, key: string) => String(formData.get(key) ?? "").trim();
++ /** Blob sha of a path at a commit, or null if it doesn't exist there. */
++ async function blobAt(dir: string, commit: string, path: string) {
++   return (await git(dir, ["rev-parse", "--verify", "--quiet", `${commit}:${path}`]).catch(() => "")).trim() || null;
++ }
++ /**
++  * Commits `changes` from the web UI, either directly to `branch` or to a new
++  * branch, and returns the branch that received the commit. `touched` lists the
++  * paths whose content the user saw; if any changed on the branch since the page
++  * was loaded (`baseSha`), the commit is refused instead of overwriting them.
++  */
++ async function commitFromForm(
++   repo: RepoRecord,
++   viewer: User,
++   formData: FormData,
++   changes: FileChange[],
++   touched: string[],
++   defaultMessage: string,
++ ) {
++   const branch = str(formData, "branch");
++   const baseSha = str(formData, "baseSha");
++   const head = await revParse(repo.dir, `refs/heads/${branch}`);
++   if (baseSha) {
++     if (!head) throw new ActionError(`Branch ${branch} no longer exists.`);
++     if (head !== baseSha) {
++       for (const path of touched) {
++         if ((await blobAt(repo.dir, baseSha, path)) !== (await blobAt(repo.dir, head, path))) {
++           throw new ActionError(`${path} was changed on ${branch} since you started editing. Reload to get the latest version.`);
++         }
++       }
++     }
++   } else if (head) {
++     throw new ActionError(`Branch ${branch} was created by someone else in the meantime. Reload and try again.`);
++   }
++   const summary = str(formData, "message") || defaultMessage;
++   const description = str(formData, "description");
++   const message = `${summary}${description ? `\n\n${description}` : ""}\n`;
++   const author = { name: viewer.name || viewer.username, email: viewer.email };
++   let target = branch;
++   if (formData.get("target") === "branch") {
++     target = str(formData, "newBranch");
++     if (!(await isValidBranchName(repo.dir, target))) throw new ActionError(`${target || "That"} is not a valid branch name.`);
++     await commitFiles(repo.dir, { branch: target, parent: head, expectedHead: null, changes, message, author });
++   } else {
++     await commitFiles(repo.dir, { branch, parent: head, changes, message, author });
++   }
++   markPushed(repo.id);
++   return target;
++ }
++ async function handle(fn: () => Promise<string>): Promise<FormState> {
++   let destination: string;
++   try {
++     destination = await fn();
++   } catch (e) {
++     if (e instanceof ActionError || e instanceof GitError) return { error: e.message };
++     throw e;
++   }
++   redirect(destination);
++ }
++ export async function saveFileAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return handle(async () => {
++     const { repo, viewer } = await repoForAction(owner, name, "write");
++     const path = cleanRepoPath(str(formData, "path"));
++     if (!path) throw new ActionError("That file name is invalid.");
++     const originalPath = str(formData, "originalPath");
++     const content = Buffer.from(String(formData.get("content") ?? ""));
++     const head = await revParse(repo.dir, `refs/heads/${str(formData, "branch")}`);
++     // Refuse to silently overwrite a different existing file.
++     if (path !== originalPath && head && (await objectType(repo.dir, head, path))) {
++       throw new ActionError(`A file named ${path} already exists.`);
++     }
++     const changes: FileChange[] = [{ path, content }];
++     if (originalPath && originalPath !== path) changes.unshift({ path: originalPath, delete: true });
++     const filename = path.split("/").pop()!;
++     const verb = !originalPath ? "Create" : originalPath !== path ? "Rename" : "Update";
++     const branch = await commitFromForm(repo, viewer, formData, changes, originalPath ? [originalPath] : [], `${verb} ${filename}`);
++     return `/${repo.owner}/${repo.name}/blob/${encodePath(branch)}/${encodePath(path)}`;
++   });
++ }
++ export async function deleteFileAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return handle(async () => {
++     const { repo, viewer } = await repoForAction(owner, name, "write");
++     const path = cleanRepoPath(str(formData, "path"));
++     if (!path) throw new ActionError("That file name is invalid.");
++     const branch = await commitFromForm(repo, viewer, formData, [{ path, delete: true }], [path], `Delete ${path.split("/").pop()}`);
++     // Go to the closest directory that still exists.
++     const parts = path.split("/").slice(0, -1);
++     while (parts.length && (await objectType(repo.dir, `refs/heads/${branch}`, parts.join("/"))) !== "tree") parts.pop();
++     const suffix = parts.length ? `/${encodePath(parts.join("/"))}` : "";
++     const hasFiles = await revParse(repo.dir, `refs/heads/${branch}`);
++     return hasFiles ? `/${repo.owner}/${repo.name}/tree/${encodePath(branch)}${suffix}` : `/${repo.owner}/${repo.name}`;
++   });
++ }
++ const MAX_UPLOAD_BYTES = 10 * 1024 * 1024;
++ export async function uploadFilesAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return handle(async () => {
++     const { repo, viewer } = await repoForAction(owner, name, "write");
++     const dir = str(formData, "dir");
++     const files = formData.getAll("files").filter((f): f is File => f instanceof File && f.size > 0);
++     if (files.length === 0) throw new ActionError("Choose at least one file to upload.");
++     const changes: FileChange[] = [];
++     for (const file of files) {
++       if (file.size > MAX_UPLOAD_BYTES) throw new ActionError(`${file.name} is larger than 10 MB.`);
++       const path = cleanRepoPath(dir ? `${dir}/${file.name}` : file.name);
++       if (!path) throw new ActionError(`${file.name} is not a valid file name.`);
++       changes.push({ path, content: Buffer.from(await file.arrayBuffer()) });
++     }
++     const branch = await commitFromForm(
++       repo,
++       viewer,
++       formData,
++       changes,
++       changes.map((c) => c.path),
++       files.length === 1 ? `Add ${files[0].name}` : `Add ${files.length} files`,
++     );
++     return `/${repo.owner}/${repo.name}/tree/${encodePath(branch)}${dir ? `/${encodePath(dir)}` : ""}`;
++   });
++ }

+22−0app/actions/guard.tsaddedView File

++ import "server-only";
++ import { getViewer } from "@/lib/auth";
++ import { canWrite, findRepo, repoAccess, type Access } from "@/lib/repos";
++ export class ActionError extends Error {}
++ export async function viewerOrThrow() {
++   const viewer = await getViewer();
++   if (!viewer) throw new ActionError("You must be signed in to do that.");
++   return viewer;
++ }
++ /** Loads a repository for a server action and checks the viewer's access level. */
++ export async function repoForAction(owner: string, name: string, need: "read" | "write" | "admin") {
++   const viewer = await viewerOrThrow();
++   const repo = findRepo(owner, name);
++   const access: Access = repo ? repoAccess(repo, viewer.id) : null;
++   if (!repo || !access) throw new ActionError("Repository not found.");
++   if (need === "write" && !canWrite(access)) throw new ActionError("You don't have push access to this repository.");
++   if (need === "admin" && access !== "admin") throw new ActionError("Only the owner can change these settings.");
++   return { repo, viewer, access };
++ }

+176−0app/actions/issues.tsaddedView File

++ "use server";
++ import { revalidatePath } from "next/cache";
++ import { redirect } from "next/navigation";
++ import {
++   ESTIMATES,
++   STATUS_IDS,
++   isValidDay,
++   type ActionResult,
++   type IssueLabel,
++   type IssuePatch,
++   type NewIssueInput,
++ } from "@/lib/issue-meta";
++ import {
++   addComment,
++   createIssue,
++   createLabel,
++   deleteIssue,
++   deleteLabel,
++   getIssue,
++   LabelError,
++   listLabels,
++   listMembers,
++   updateIssue,
++ } from "@/lib/issues";
++ import { canWrite, type RepoRecord } from "@/lib/repos";
++ import { ActionError, repoForAction } from "./guard";
++ import type { FormState } from "./types";
++ const MAX_BODY = 65_536;
++ function revalidateIssues(repo: RepoRecord) {
++   revalidatePath(`/${repo.owner}/${repo.name}`, "layout");
++ }
++ /**
++  * Validates untrusted issue properties from the browser. Only the fields that
++  * are present are checked; anything invalid throws.
++  */
++ function validate(repo: RepoRecord, patch: IssuePatch): IssuePatch {
++   const out: IssuePatch = {};
++   if (patch.title !== undefined) {
++     const title = String(patch.title).trim().slice(0, 256);
++     if (!title) throw new ActionError("Title can't be blank.");
++     out.title = title;
++   }
++   if (patch.body !== undefined) out.body = String(patch.body).trim().slice(0, MAX_BODY);
++   if (patch.status !== undefined) {
++     if (!STATUS_IDS.includes(patch.status)) throw new ActionError("Unknown status.");
++     out.status = patch.status;
++   }
++   if (patch.priority !== undefined) {
++     if (!Number.isInteger(patch.priority) || patch.priority < 0 || patch.priority > 4) throw new ActionError("Unknown priority.");
++     out.priority = patch.priority;
++   }
++   if (patch.assigneeId !== undefined) {
++     if (patch.assigneeId !== null && !listMembers(repo.id, repo.ownerId).some((m) => m.id === patch.assigneeId)) {
++       throw new ActionError("Only the owner and collaborators can be assigned.");
++     }
++     out.assigneeId = patch.assigneeId;
++   }
++   if (patch.estimate !== undefined) {
++     if (patch.estimate !== null && !(ESTIMATES as readonly number[]).includes(patch.estimate)) throw new ActionError("Unknown estimate.");
++     out.estimate = patch.estimate;
++   }
++   if (patch.dueDate !== undefined) {
++     if (patch.dueDate !== null && !isValidDay(String(patch.dueDate))) throw new ActionError("Invalid due date.");
++     out.dueDate = patch.dueDate;
++   }
++   if (patch.labelIds !== undefined) {
++     if (!Array.isArray(patch.labelIds)) throw new ActionError("Invalid labels.");
++     const known = new Set(listLabels(repo.id).map((l) => l.id));
++     const ids = [...new Set(patch.labelIds)];
++     if (!ids.every((id) => known.has(id))) throw new ActionError("Unknown label.");
++     out.labelIds = ids;
++   }
++   if (patch.sortOrder !== undefined) {
++     if (typeof patch.sortOrder !== "number" || !Number.isFinite(patch.sortOrder)) throw new ActionError("Invalid order.");
++     out.sortOrder = patch.sortOrder;
++   }
++   return out;
++ }
++ // Permissions: anyone who can read a repository may open issues and comment.
++ // Changing an issue in any way (title, description, status, triage, order) needs
++ // push access. Deleting is reserved for the issue's creator and the repository owner.
++ export async function createIssueAction(
++   owner: string,
++   name: string,
++   input: NewIssueInput,
++ ): Promise<ActionResult & { number?: number }> {
++   try {
++     const { repo, viewer, access } = await repoForAction(owner, name, "read");
++     const { title, body, ...properties } = validate(repo, { ...input, sortOrder: undefined });
++     if (!title) return { error: "Title can't be blank." };
++     const number = createIssue(repo.id, viewer.id, {
++       title,
++       body: body ?? "",
++       ...(canWrite(access) ? properties : {}),
++     });
++     revalidateIssues(repo);
++     return { number };
++   } catch (e) {
++     if (e instanceof ActionError) return { error: e.message };
++     throw e;
++   }
++ }
++ export async function updateIssueAction(owner: string, name: string, number: number, patch: IssuePatch): Promise<ActionResult> {
++   try {
++     const { repo, viewer, access } = await repoForAction(owner, name, "read");
++     const issue = getIssue(repo.id, number);
++     if (!issue) return { error: "Issue not found." };
++     if (!canWrite(access)) return { error: "Only collaborators can change issues. You can still comment." };
++     const clean = validate(repo, patch);
++     updateIssue(issue, clean, viewer.id);
++     revalidateIssues(repo);
++     return {};
++   } catch (e) {
++     if (e instanceof ActionError) return { error: e.message };
++     throw e;
++   }
++ }
++ export async function commentAction(owner: string, name: string, number: number, formData: FormData) {
++   const { repo, viewer } = await repoForAction(owner, name, "read");
++   const issue = getIssue(repo.id, number);
++   if (!issue) throw new ActionError("Issue not found");
++   const body = String(formData.get("body") ?? "").trim().slice(0, MAX_BODY);
++   if (body) addComment(issue.id, { body, authorId: viewer.id });
++   revalidateIssues(repo);
++ }
++ export async function deleteIssueAction(owner: string, name: string, number: number) {
++   const { repo, viewer, access } = await repoForAction(owner, name, "read");
++   const issue = getIssue(repo.id, number);
++   if (!issue) throw new ActionError("Issue not found.");
++   if (issue.authorId !== viewer.id && access !== "admin") {
++     throw new ActionError("Only the issue's creator and the repository owner can delete it.");
++   }
++   deleteIssue(issue.id);
++   revalidateIssues(repo);
++   redirect(`/${repo.owner}/${repo.name}/issues`);
++ }
++ export async function createLabelAction(
++   owner: string,
++   name: string,
++   input: { name: string; color: string },
++ ): Promise<ActionResult & { label?: IssueLabel }> {
++   try {
++     const { repo } = await repoForAction(owner, name, "write");
++     const label = createLabel(repo.id, { name: String(input.name ?? ""), color: String(input.color ?? "") });
++     revalidateIssues(repo);
++     return { label };
++   } catch (e) {
++     if (e instanceof ActionError || e instanceof LabelError) return { error: e.message };
++     throw e;
++   }
++ }
++ /** For the labels settings form. */
++ export async function createLabelFormAction(owner: string, name: string, _prev: FormState, formData: FormData): Promise<FormState> {
++   const result = await createLabelAction(owner, name, {
++     name: String(formData.get("name") ?? ""),
++     color: String(formData.get("color") ?? ""),
++   });
++   return result.error ? { error: result.error } : { success: `Created label "${result.label!.name}".` };
++ }
++ export async function deleteLabelAction(owner: string, name: string, labelId: number) {
++   const { repo } = await repoForAction(owner, name, "write");
++   deleteLabel(repo.id, labelId);
++   revalidateIssues(repo);
++ }

+114−0app/actions/repo.tsaddedView File

++ "use server";
++ import { revalidatePath } from "next/cache";
++ import { redirect } from "next/navigation";
++ import {
++   addCollaborator,
++   createRepo,
++   deleteRepo,
++   removeCollaborator,
++   removeRepoImage,
++   renameRepo,
++   RepoError,
++   setRepoImage,
++   updateRepo,
++   type Visibility,
++ } from "@/lib/repos";
++ import { ActionError, repoForAction, viewerOrThrow } from "./guard";
++ import type { FormState } from "./types";
++ const visibilityOf = (v: FormDataEntryValue | null): Visibility => (v === "private" ? "private" : "public");
++ async function attempt(fn: () => Promise<FormState | void> | FormState | void): Promise<FormState> {
++   try {
++     return (await fn()) ?? undefined;
++   } catch (e) {
++     if (e instanceof RepoError || e instanceof ActionError) return { error: e.message };
++     throw e;
++   }
++ }
++ export async function createRepoAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   let path = "";
++   const result = await attempt(async () => {
++     const viewer = await viewerOrThrow();
++     const repo = await createRepo(viewer, {
++       name: String(formData.get("name") ?? ""),
++       description: String(formData.get("description") ?? ""),
++       visibility: visibilityOf(formData.get("visibility")),
++       readme: formData.get("readme") === "on",
++     });
++     path = `/${repo.owner}/${repo.name}`;
++   });
++   if (result?.error) return result;
++   redirect(path);
++ }
++ export async function updateRepoAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return attempt(async () => {
++     const { repo } = await repoForAction(owner, name, "admin");
++     updateRepo(repo.id, {
++       description: String(formData.get("description") ?? ""),
++       visibility: visibilityOf(formData.get("visibility")),
++     });
++     revalidatePath(`/${repo.owner}/${repo.name}`, "layout");
++     return { success: "Settings saved." };
++   });
++ }
++ export async function updateRepoImageAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return attempt(async () => {
++     const { repo } = await repoForAction(owner, name, "admin");
++     const file = formData.get("image");
++     if (!(file instanceof File)) throw new RepoError("Choose an image to upload.");
++     setRepoImage(repo.id, new Uint8Array(await file.arrayBuffer()));
++     // The image shows up in sidebars and lists everywhere, not just on this repository's pages.
++     revalidatePath("/", "layout");
++     return { success: "Repository image updated." };
++   });
++ }
++ export async function removeRepoImageAction(owner: string, name: string) {
++   const { repo } = await repoForAction(owner, name, "admin");
++   removeRepoImage(repo.id);
++   revalidatePath("/", "layout");
++ }
++ export async function renameRepoAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   let path = "";
++   const result = await attempt(async () => {
++     const { repo } = await repoForAction(owner, name, "admin");
++     const renamed = await renameRepo(repo, String(formData.get("name") ?? ""));
++     path = `/${renamed.owner}/${renamed.name}/settings`;
++   });
++   if (result?.error) return result;
++   redirect(path);
++ }
++ export async function deleteRepoAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   const result = await attempt(async () => {
++     const { repo } = await repoForAction(owner, name, "admin");
++     if (formData.get("confirm") !== `${repo.owner}/${repo.name}`) {
++       return { error: `Type ${repo.owner}/${repo.name} to confirm.` };
++     }
++     await deleteRepo(repo);
++   });
++   if (result?.error) return result;
++   redirect("/");
++ }
++ export async function addCollaboratorAction(owner: string, name: string, _prev: FormState, formData: FormData) {
++   return attempt(async () => {
++     const { repo } = await repoForAction(owner, name, "admin");
++     const username = String(formData.get("username") ?? "").trim();
++     addCollaborator(repo, username);
++     revalidatePath(`/${repo.owner}/${repo.name}/settings`);
++     return { success: `${username} can now push to this repository.` };
++   });
++ }
++ export async function removeCollaboratorAction(owner: string, name: string, userId: number) {
++   const { repo } = await repoForAction(owner, name, "admin");
++   removeCollaborator(repo.id, userId);
++   revalidatePath(`/${repo.owner}/${repo.name}/settings`);
++ }

+91−0app/actions/settings.tsaddedView File

++ "use server";
++ import { revalidatePath } from "next/cache";
++ import { addSshKey, deleteSshKey, KeyError } from "@/lib/keys";
++ import { canWrite, findRepoById, repoAccess } from "@/lib/repos";
++ import { createToken, deleteToken, TokenError, type TokenPermission } from "@/lib/tokens";
++ import { setPassword, updateProfile, UserError, validatePassword, verifyUserPassword } from "@/lib/users";
++ import { viewerOrThrow } from "./guard";
++ import type { FormState } from "./types";
++ export async function updateProfileAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   const viewer = await viewerOrThrow();
++   try {
++     updateProfile(viewer.id, {
++       name: String(formData.get("name") ?? ""),
++       email: String(formData.get("email") ?? ""),
++       bio: String(formData.get("bio") ?? ""),
++     });
++   } catch (e) {
++     if (e instanceof UserError) return { error: e.message };
++     throw e;
++   }
++   revalidatePath("/", "layout");
++   return { success: "Profile updated." };
++ }
++ export async function changePasswordAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   const viewer = await viewerOrThrow();
++   const current = String(formData.get("current") ?? "");
++   const next = String(formData.get("password") ?? "");
++   if (!(await verifyUserPassword(viewer.id, current))) return { error: "Your current password is incorrect." };
++   if (next !== formData.get("confirm")) return { error: "The new passwords don't match." };
++   const problem = validatePassword(next);
++   if (problem) return { error: problem };
++   await setPassword(viewer.id, next);
++   return { success: "Password changed." };
++ }
++ export async function addSshKeyAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   const viewer = await viewerOrThrow();
++   try {
++     addSshKey(viewer.id, String(formData.get("title") ?? ""), String(formData.get("key") ?? ""));
++   } catch (e) {
++     if (e instanceof KeyError) return { error: e.message };
++     throw e;
++   }
++   revalidatePath("/settings/keys");
++   return { success: "SSH key added." };
++ }
++ export async function deleteSshKeyAction(keyId: number) {
++   const viewer = await viewerOrThrow();
++   deleteSshKey(viewer.id, keyId);
++   revalidatePath("/settings/keys");
++ }
++ export async function createTokenAction(_prev: FormState, formData: FormData): Promise<FormState> {
++   const viewer = await viewerOrThrow();
++   const permission: TokenPermission = formData.get("permission") === "read" ? "read" : "write";
++   const expiry = String(formData.get("expiry") ?? "30");
++   let repoIds: number[] | null = null;
++   if (formData.get("scope") === "selected") {
++     repoIds = formData
++       .getAll("repos")
++       .map(Number)
++       .filter((id) => {
++         const repo = findRepoById(id);
++         const access = repo ? repoAccess(repo, viewer.id) : null;
++         return access && (permission === "read" || canWrite(access));
++       });
++   }
++   try {
++     const token = createToken(viewer.id, {
++       name: String(formData.get("name") ?? ""),
++       permission,
++       expiresInDays: expiry === "never" ? null : Number(expiry) || 30,
++       repoIds,
++     });
++     revalidatePath("/settings/tokens");
++     return { token };
++   } catch (e) {
++     if (e instanceof TokenError) return { error: e.message };
++     throw e;
++   }
++ }
++ export async function deleteTokenAction(tokenId: number) {
++   const viewer = await viewerOrThrow();
++   deleteToken(viewer.id, tokenId);
++   revalidatePath("/settings/tokens");
++ }

+1−0app/actions/types.tsaddedView File

@@ -0,0 +1 @@
	1	+ export type FormState = { error?: string; success?: string; token?: string } \| undefined;

+0−0app/apple-icon.pngaddedView File

Binary file not shown.

+54−0app/explore/page.tsxaddedView File

++ import type { Metadata } from "next";
++ import { Field } from "@unlocalhosted/metalui";
++ import { CompassIcon, SearchIcon } from "@/components/icons";
++ import { FieldIcon, FieldInput } from "@/components/metal";
++ import { RepoList } from "@/components/repo-list";
++ import { Blankslate, Box, Counter } from "@/components/ui";
++ import { getViewer } from "@/lib/auth";
++ import { withActivity } from "@/lib/listing";
++ import { searchRepos } from "@/lib/repos";
++ export const metadata: Metadata = { title: "Explore" };
++ export default async function ExplorePage({ searchParams }: PageProps<"/explore">) {
++   const q = String((await searchParams).q ?? "").trim();
++   const viewer = await getViewer();
++   const repos = await withActivity(searchRepos(q, viewer?.id ?? null));
++   return (
++     <main className="w-full">
++       <section className="rule-b">
++         <div className="mx-auto max-w-5xl px-4 pt-16 pb-14 text-center">
++           <span className="icon-tile mx-auto size-14 rounded-[18px]">
++             <CompassIcon width={24} height={24} />
++           </span>
++           <p className="mt-6 type-label engraved">Public repositories</p>
++           <h1 className="mt-2 text-[36px] leading-[1.05] font-semibold tracking-[-0.04em] text-ink">Explore Vectrum</h1>
++           <p className="mt-2 type-lead text-ink2">Discover repositories hosted here.</p>
++           <form role="search" className="mx-auto mt-8 max-w-xl text-left">
++             <Field size="large" className="focus-within:focus-ring-flush">
++               <FieldIcon>
++                 <SearchIcon />
++               </FieldIcon>
++               <FieldInput name="q" defaultValue={q} placeholder="Search by name, owner or description" aria-label="Search repositories" />
++             </Field>
++           </form>
++         </div>
++       </section>
++       <div className="mx-auto max-w-5xl px-4 py-10">
++         <h2 className="mb-4 flex items-center gap-2 type-display text-ink">
++           {q ? <>Results for “{q}”</> : "Recently updated"} <Counter>{repos.length}</Counter>
++         </h2>
++         {repos.length ? (
++           <RepoList repos={repos} />
++         ) : (
++           <Box>
++             <Blankslate icon={<SearchIcon />} title="No repositories found">
++               {q ? "Try a different search." : "Nobody has created a public repository yet."}
++             </Blankslate>
++           </Box>
++         )}
++       </div>
++     </main>
++   );
++ }

+0−0app/favicon.icoView File

Binary file not shown.

+19−0app/forbidden.tsxaddedView File

++ import { StatusPage } from "@/components/home-status";
++ import { HomeIcon } from "@/components/icons";
++ import { ButtonLink } from "@/components/ui";
++ export default function Forbidden() {
++   return (
++     <StatusPage
++       code="403"
++       label="Forbidden"
++       title="You don’t have access to this page"
++       description="Ask the repository owner to add you as a collaborator."
++       actions={
++         <ButtonLink href="/" icon={<HomeIcon />}>
++           Go Home
++         </ButtonLink>
++       }
++     />
++   );
++ }

+318−14app/globals.cssView File

   @import "tailwindcss";
++ /* MetalUI's Tailwind theme: its type roles (type-ui, type-label…), inks (text-ink, text-ink2…), materials
++    (material-raised, material-well, material-cap…) and radii, for the parts of the app MetalUI has no
++    component for. The components' own CSS comes from @unlocalhosted/metalui/styles.css (see layout). */
++ @import "@unlocalhosted/metalui/theme.css";
++ /*
++  * Soft Hardware: bone (light) and graphite (dark) colorways from MetalUI. The app's older token names
++  * are kept as aliases of MetalUI's so every surface follows the colorway:
++  *   sheet / canvas / subtle / inset  →  surface lo → hi, and the sunk well
++  *   fg / muted / dim                 →  ink, ink2, ink3
++  *   line                             →  the engraved rule
++  * Green is intent (focus, selection, live), never a call to action; red is destructive only.
++  *
++  * The colorway follows the system unless <html data-mu-colorway="bone|graphite"> overrides it.
++  */
   :root {
+-   --background: #ffffff;
+-   --foreground: #171717;
+- }
++   --mu-sans: var(--font-geist), "Geist", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
++   --mu-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
++   --mu-pixel: var(--font-doto), "Martian Mono", ui-monospace, monospace;
+- @theme inline {
+-   --color-background: var(--background);
+-   --color-foreground: var(--foreground);
+-   --font-sans: var(--font-geist-sans);
+-   --font-mono: var(--font-geist-mono);
++   --page: var(--mu-page);
++   --sheet: var(--mu-s);
++   --canvas: var(--mu-s-hi);
++   --canvas-subtle: var(--mu-s-lo);
++   --canvas-inset: var(--mu-well-top);
++   --header: var(--mu-page);
++   --border: var(--mu-rule);
++   --border-muted: color-mix(in srgb, var(--mu-rule) 70%, transparent);
++   --fg: var(--mu-ink);
++   --fg-muted: var(--mu-ink2);
++   --fg-dim: var(--mu-ink3);
++   --accent: var(--mu-ink);
++   --accent-strong: var(--mu-ink);
++   --accent-2: var(--mu-cue-url-ink);
++   --accent-3: var(--mu-ink2);
++   --success-emphasis: #2B7A52;
++   --done: var(--mu-tint-iris);
++   --danger: var(--mu-red);
++   --attention: #9A6A12;
++   --diff-add: rgba(63, 185, 122, .10);
++   --diff-add-num: rgba(63, 185, 122, .18);
++   --diff-del: rgba(216, 69, 59, .08);
++   --diff-del-num: rgba(216, 69, 59, .15);
++   --diff-hunk: rgba(40, 38, 32, .04);
+  }
++ [data-mu-colorway="graphite"] {
++   --page: #19191B;
++   --success-emphasis: var(--mu-green);
++   --attention: var(--mu-warning);
++   --diff-hunk: rgba(255, 255, 255, .04);
++ }
   @media (prefers-color-scheme: dark) {
+-   :root {
+-     --background: #0a0a0a;
+-     --foreground: #ededed;
++   :root:not([data-mu-colorway="bone"]) {
++     --page: #19191B;
++     --success-emphasis: var(--mu-green);
++     --attention: var(--mu-warning);
++     --diff-hunk: rgba(255, 255, 255, .04);
++   }
++   :root:not([data-mu-colorway="bone"]) .shiki,
++   :root:not([data-mu-colorway="bone"]) .shiki span {
++     color: var(--shiki-dark) !important;
++     background-color: transparent !important;
+    }
+  }
++ [data-mu-colorway="graphite"] .shiki,
++ [data-mu-colorway="graphite"] .shiki span {
++   color: var(--shiki-dark) !important;
++   background-color: transparent !important;
++ }
++ /* Tailwind's `dark:` variant follows the colorway. */
++ @custom-variant dark {
++   &:where([data-mu-colorway="graphite"], [data-mu-colorway="graphite"] *) {
++     @slot;
++   }
++   @media (prefers-color-scheme: dark) {
++     &:where(:root:not([data-mu-colorway="bone"]), :root:not([data-mu-colorway="bone"]) *) {
++       @slot;
++     }
++   }
++ }
++ /* App aliases. `page`, `green`, `success` and `red` come from MetalUI's theme as they are. */
++ @theme inline {
++   --color-sheet: var(--sheet);
++   --color-canvas: var(--canvas);
++   --color-subtle: var(--canvas-subtle);
++   --color-inset: var(--canvas-inset);
++   --color-header: var(--header);
++   --color-line: var(--border);
++   --color-line-muted: var(--border-muted);
++   --color-fg: var(--fg);
++   --color-muted: var(--fg-muted);
++   --color-dim: var(--fg-dim);
++   --color-accent: var(--accent);
++   --color-accent-strong: var(--accent-strong);
++   --color-accent-2: var(--accent-2);
++   --color-accent-3: var(--accent-3);
++   --color-success-emphasis: var(--success-emphasis);
++   --color-done: var(--done);
++   --color-danger: var(--danger);
++   --color-attention: var(--attention);
++   --font-sans: var(--mu-sans);
++   --font-mono: var(--mu-mono);
++   --shadow-card: var(--mu-raise-sm);
++   --shadow-lift: var(--mu-raise-lite);
++   --shadow-float: var(--mu-raise);
++   --animate-pop: pop 180ms var(--mu-ease-slide);
++   --animate-fade-up: fade-up 500ms var(--mu-ease-slide) both;
++ }
++ @keyframes pop {
++   from { opacity: 0; transform: translateY(-6px) scale(0.985); }
++   to { opacity: 1; transform: none; }
++ }
++ @keyframes fade-up {
++   from { opacity: 0; transform: translateY(6px); }
++   to { opacity: 1; transform: none; }
++ }
   body {
+-   background: var(--background);
+-   color: var(--foreground);
+-   font-family: Arial, Helvetica, sans-serif;
++   background: var(--page);
++   color: var(--mu-ink);
++   font-family: var(--mu-sans);
++ }
++ @layer components {
++   /* The engraved label role: uppercase mono with a lip, e.g. "PULL REQUEST · #8" */
++   .mono-label {
++     font: 400 9.5px/12px var(--mu-mono);
++     text-transform: uppercase;
++     letter-spacing: 0.11em;
++     color: var(--mu-engrave);
++     text-shadow: var(--mu-lip-shadow);
++   }
++   /* A section heading, engraved above its plate: "ABOUT" */
++   .section-label {
++     font: 400 9.5px/12px var(--mu-mono);
++     text-transform: uppercase;
++     letter-spacing: 0.11em;
++     color: var(--mu-engrave);
++     text-shadow: var(--mu-lip-shadow);
++   }
++   /* A raised plate in the colorway (Surface material="raise-lite"), for server-rendered blocks. */
++   .plate {
++     background: linear-gradient(var(--mu-s-hi), var(--mu-s));
++     box-shadow: var(--mu-raise-lite);
++   }
++   /* A sunk well (the field look): inputs, code, quiet insets. */
++   .well {
++     background: linear-gradient(var(--mu-well-top), var(--mu-well-bot));
++     box-shadow: var(--mu-well);
++   }
++   /* An engraved hairline with its lip. */
++   .rule-b { border-bottom: 1px solid var(--mu-rule); box-shadow: 0 1px 0 var(--mu-rule-lip); }
++   .rule-t { border-top: 1px solid var(--mu-rule); box-shadow: inset 0 1px 0 var(--mu-rule-lip); }
++ }
++ ::selection {
++   background: color-mix(in srgb, var(--mu-green) 35%, transparent);
++ }
++ :focus-visible {
++   outline: 2px solid var(--mu-focus);
++   outline-offset: 2px;
++ }
++ /* Menus and dialogs rise in on the surface spring */
++ details[open] > .menu-panel { animation: var(--animate-pop); }
++ dialog[open] { animation: var(--animate-pop); }
++ dialog::backdrop { background: var(--mu-scrim); backdrop-filter: blur(2px); }
++ /* Code viewer: shiki output with line numbers */
++ .code-view .shiki {
++   background: transparent !important;
++   padding: 12px 0;
++   overflow-x: auto;
++   font-size: 12.5px;
++   line-height: 21px;
++   counter-reset: line;
++ }
++ .code-view .shiki code {
++   display: block;
++   min-width: max-content;
++   font-family: var(--mu-mono);
++ }
++ .code-view .line {
++   display: inline-block;
++   width: 100%;
++   padding-right: 24px;
++ }
++ .code-view .line:hover {
++   background: var(--mu-menu-row-hover);
++ }
++ .code-view .line::before {
++   counter-increment: line;
++   content: counter(line);
++   display: inline-block;
++   width: 60px;
++   padding-right: 20px;
++   margin-right: 4px;
++   text-align: right;
++   color: var(--mu-syn-line);
++   user-select: none;
++ }
++ .code-view .line:hover::before { color: var(--mu-ink2); }
++ /* Rendered markdown (README, issues) */
++ .markdown {
++   font-size: 14px;
++   line-height: 1.7;
++   letter-spacing: -0.005em;
++   overflow-wrap: break-word;
++ }
++ .markdown > *:first-child { margin-top: 0; }
++ .markdown > *:last-child { margin-bottom: 0; }
++ .markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table {
++   margin: 0 0 16px;
++ }
++ .markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
++   margin: 26px 0 10px;
++   font-weight: 600;
++   line-height: 1.25;
++   letter-spacing: -0.02em;
++ }
++ .markdown h1 { font-size: 1.6em; }
++ .markdown h2 { font-size: 1.3em; }
++ .markdown h3 { font-size: 1.1em; }
++ .markdown h4 { font-size: 1em; }
++ .markdown a {
++   color: inherit;
++   text-decoration: underline;
++   text-decoration-thickness: 1px;
++   text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
++   text-underline-offset: 3px;
++   transition: text-decoration-color .16s;
++ }
++ .markdown a:hover { text-decoration-color: currentColor; }
++ .markdown ul { list-style: disc; padding-left: 1.6em; }
++ .markdown ol { list-style: decimal; padding-left: 1.6em; }
++ .markdown li::marker { color: var(--mu-ink3); }
++ .markdown li + li { margin-top: .3em; }
++ .markdown li > input[type="checkbox"] { margin-right: .5em; accent-color: var(--mu-green-deep); }
++ .markdown blockquote {
++   padding: .6em 1em;
++   color: var(--mu-ink2);
++   background: linear-gradient(var(--mu-well-top), var(--mu-well-bot));
++   box-shadow: var(--mu-well);
++   border-radius: 12px;
++ }
++ .markdown code {
++   padding: .15em .45em;
++   font-size: 85%;
++   background: linear-gradient(var(--mu-well-top), var(--mu-well-bot));
++   box-shadow: var(--mu-well);
++   border-radius: 6px;
++   font-family: var(--mu-mono);
++ }
++ .markdown pre {
++   padding: 14px 16px;
++   overflow: auto;
++   font-size: 85%;
++   line-height: 1.7;
++   background: linear-gradient(var(--mu-well-top), var(--mu-well-bot));
++   box-shadow: var(--mu-well);
++   border-radius: 14px;
++ }
++ .markdown pre code { padding: 0; background: transparent; box-shadow: none; font-size: 100%; }
++ .markdown table {
++   border-collapse: separate;
++   border-spacing: 0;
++   display: block;
++   overflow: auto;
++ }
++ .markdown th, .markdown td { padding: 9px 14px; border-bottom: 1px solid var(--mu-rule); }
++ .markdown tr:last-child td { border-bottom: 0; }
++ .markdown th {
++   font: 400 9.5px/12px var(--mu-mono);
++   text-transform: uppercase;
++   letter-spacing: 0.11em;
++   color: var(--mu-engrave);
++   text-align: left;
++ }
++ .markdown img { max-width: 100%; display: inline; border-radius: 10px; }
++ .markdown hr { height: 1px; margin: 32px 0; background: var(--mu-rule); border: 0; box-shadow: 0 1px 0 var(--mu-rule-lip); }
++ /* A quiet light from above, behind marketing-style headers */
++ .aurora {
++   background: radial-gradient(40rem 18rem at 50% -4rem, color-mix(in srgb, var(--mu-s-hi) 90%, transparent), transparent 70%);
++ }
++ /* Hairline grid that fades out towards the edges, like a cutting mat */
++ .dot-grid {
++   background-image:
++     linear-gradient(to right, color-mix(in srgb, var(--mu-rule) 55%, transparent) 1px, transparent 1px),
++     linear-gradient(to bottom, color-mix(in srgb, var(--mu-rule) 55%, transparent) 1px, transparent 1px);
++   background-size: 48px 48px;
++   mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, black 30%, transparent 75%);
++ }
++ .text-gradient {
++   background: linear-gradient(180deg, var(--mu-ink) 20%, color-mix(in srgb, var(--mu-ink) 50%, transparent) 110%);
++   -webkit-background-clip: text;
++   background-clip: text;
++   color: transparent;
++ }
++ /* A raised plate for highlighted cards */
++ .ring-gradient {
++   background: linear-gradient(var(--mu-s-hi), var(--mu-s));
++   box-shadow: var(--mu-raise);
++ }
++ /* A glyph sunk in a well, like the empty state's */
++ .icon-tile {
++   display: flex;
++   align-items: center;
++   justify-content: center;
++   background: linear-gradient(var(--mu-well-top), var(--mu-well-bot));
++   box-shadow: var(--mu-well);
++   color: var(--mu-ink3);
++ }
++ /* CodeMirror editor sizing */
++ .cm-theme, .cm-editor { height: 100%; }
++ .cm-editor { font-size: 12.5px; }
++ .cm-editor .cm-scroller { font-family: var(--mu-mono); line-height: 21px; }
++ .cm-editor.cm-focused { outline: none !important; }
++ @media (prefers-reduced-motion: reduce) {
++   *, *::before, *::after { animation: none !important; transition: none !important; }
+  }

+4−0app/icon.svgaddedView File

++ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
++   <style>path { fill: #171717 } @media (prefers-color-scheme: dark) { path { fill: #dcdcdc } }</style>
++   <path fill-rule="evenodd" d="M2 13a8.5 8.5 0 1 0 17 0a8.5 8.5 0 1 0-17 0ZM11.54 7.69Q10 4 14 4H26Q30 4 28.46 7.69L21.54 24.31Q20 28 18.46 24.31Z"/>
++ </svg>

+80−8app/layout.tsxView File