);
diff --git a/src/components/repo-detail/CodeView.tsx b/src/components/repo-detail/CodeView.tsx
index dd00040..5c75de0 100644
--- a/src/components/repo-detail/CodeView.tsx
+++ b/src/components/repo-detail/CodeView.tsx
@@ -69,11 +69,11 @@ export function CodeView({ content, path, wrap = false }: CodeViewProps) {
const inRange = range !== null && n >= range[0] && n <= range[1];
return (
- |
+ |
handleGutterClick(e, n)}
- className="text-dim tabular-nums hover:text-muted-foreground"
+ className="text-muted tabular-nums hover:text-muted"
>
{n}
diff --git a/src/components/repo-detail/CommitList.tsx b/src/components/repo-detail/CommitList.tsx
index 43e2f9c..7bb9312 100644
--- a/src/components/repo-detail/CommitList.tsx
+++ b/src/components/repo-detail/CommitList.tsx
@@ -1,12 +1,5 @@
+import { Table } from '@heroui/react';
import type { RepoCommit } from '../../types/repo';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '../ui/table';
interface CommitListProps {
commits: RepoCommit[];
@@ -16,7 +9,7 @@ export function CommitList({ commits }: CommitListProps) {
if (commits.length === 0) {
return (
- no commits yet
+ no commits yet
-
-
-
- Hash
-
-
- Message
-
-
- Author
-
-
- When
-
-
-
-
- {commits.map(commit => (
-
-
-
- {commit.shortHash}
-
-
-
-
- {commit.message}
-
-
-
-
- {commit.author ?? '—'}
-
-
-
-
- {commit.time}
-
-
-
- ))}
-
+
+
+
+
+ Hash
+
+
+ Message
+
+
+ Author
+
+
+ When
+
+
+
+ {commits.map(commit => (
+
+
+
+ {commit.shortHash}
+
+
+
+
+ {commit.message}
+
+
+
+
+ {commit.author ?? '—'}
+
+
+
+
+ {commit.time}
+
+
+
+ ))}
+
+
+
);
diff --git a/src/components/repo-detail/CommitStrip.tsx b/src/components/repo-detail/CommitStrip.tsx
index f5b885c..4a4661b 100644
--- a/src/components/repo-detail/CommitStrip.tsx
+++ b/src/components/repo-detail/CommitStrip.tsx
@@ -9,13 +9,13 @@ export function CommitStrip({ commit }: CommitStripProps) {
return (
latest commit
-
+
{commit.shortHash}
{commit.message}
-
+
{commit.time}
diff --git a/src/components/repo-detail/DetailHeader.tsx b/src/components/repo-detail/DetailHeader.tsx
index 0529fab..78a9c1d 100644
--- a/src/components/repo-detail/DetailHeader.tsx
+++ b/src/components/repo-detail/DetailHeader.tsx
@@ -18,7 +18,7 @@ export function DetailHeader({ repo }: DetailHeaderProps) {
{/* Title */}
- {shortDid(repo.owner)}/
+ {shortDid(repo.owner)}/
{repo.name}
@@ -32,7 +32,7 @@ export function DetailHeader({ repo }: DetailHeaderProps) {
{/* Description */}
{repo.description && (
-
+
{repo.description}
)}
@@ -40,10 +40,10 @@ export function DetailHeader({ repo }: DetailHeaderProps) {
{/* Owner/dates panel */}
{/* Owner row — middle-truncated for display, copy yields the full DID */}
-
+
owner
- {truncatedDid.slice(0, didSplitAt)}
+ {truncatedDid.slice(0, didSplitAt)}
{truncatedDid.slice(didSplitAt)}
diff --git a/src/components/repo-detail/DetailTabs.tsx b/src/components/repo-detail/DetailTabs.tsx
index 76b3839..c56d5b5 100644
--- a/src/components/repo-detail/DetailTabs.tsx
+++ b/src/components/repo-detail/DetailTabs.tsx
@@ -10,7 +10,7 @@ import { EventList } from './EventList';
import { CertList } from './CertList';
import { ReadmePanel } from './ReadmePanel';
import { Pill } from '../ui/Pill';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Tabs, Button } from '@heroui/react';
import {
getBlob,
fetchSubtree,
@@ -58,7 +58,7 @@ const LAZY_FETCHERS: Record
- no {label} yet
+ no {label} yet
);
}
@@ -66,7 +66,7 @@ function EmptyTab({ label }: { label: string }) {
function TabLoading() {
return (
);
}
@@ -74,16 +74,13 @@ function TabLoading() {
function TabError({ message, onRetry }: { message: string; onRetry: () => void }) {
return (
- failed to load: {message}
+ failed to load: {message}
retry
);
}
-const TRIGGER_CLS =
- 'relative rounded-none border-b-2 border-transparent px-3 sm:px-4 py-3 text-[13px] font-normal lowercase ' +
- 'text-muted-foreground transition-colors whitespace-nowrap hover:text-foreground ' +
- 'data-[state=active]:border-warm data-[state=active]:text-foreground data-[state=active]:bg-transparent data-[state=active]:shadow-none';
+const TRIGGER_CLS = 'px-3 sm:px-4 py-3 text-[13px] font-normal lowercase whitespace-nowrap';
function errMsg(err: unknown): string {
return err instanceof Error ? err.message : 'request failed';
@@ -271,68 +268,68 @@ export function DetailTabs({ repo, value, onValueChange, onOpenFinder }: DetailT
const dirError = dirErrors[treePath];
return (
-
- {/* Negative margins extend the scroll zone to the page edge on mobile */}
-
-
-
-
+ handleTabChange(String(key))}>
+
+
+
code
- {repo.files.length}
-
-
+ {repo.files.length}
+
+
+
commits
- {repo.commits.length}
-
+ {repo.commits.length}
+
+
{(['pulls', 'issues', 'certs', 'events'] as const).map(id => (
-
+
{id}
{tabData[id].status === 'ready' && (
-
+
{tabData[id].items.length}
)}
-
+
+
))}
-
-
- {/* Right-edge fade — signals scrollable content on small screens */}
-
-
{showBreadcrumb && (
<>
-
{crumbSegments.map((seg, idx) => {
const isLast = idx === crumbSegments.length - 1 && !filePath;
return (
- /
+ /
{isLast ? (
{seg}
) : (
-
)}
);
})}
{filePath && (
<>
- /
+ /
{filePath.split('/').pop()}
)}
@@ -382,23 +379,23 @@ export function DetailTabs({ repo, value, onValueChange, onOpenFinder }: DetailT
/>
)}
-
+
-
+
-
-
+
+
{renderLazyTab('pulls', 'pull requests', () => )}
-
-
+
+
{renderLazyTab('issues', 'issues', () => )}
-
-
+
+
{renderLazyTab('certs', 'certificates', () => )}
-
-
+
+
{renderLazyTab('events', 'events', () => )}
-
+
);
}
diff --git a/src/components/repo-detail/EventList.tsx b/src/components/repo-detail/EventList.tsx
index 9769bb5..48fe930 100644
--- a/src/components/repo-detail/EventList.tsx
+++ b/src/components/repo-detail/EventList.tsx
@@ -8,17 +8,17 @@ export function EventList({ items }: { items: ApiRepoEvent[] }) {
{items.map(event => (
{event.type === 'local_cert' ? 'local cert' : event.type === 'gossipsub' ? 'gossip' : event.type}
{event.ref_name}
- {shortSha(event.old_sha)}
- →
- {shortSha(event.new_sha)}
+ {shortSha(event.old_sha)}
+ →
+ {shortSha(event.new_sha)}
- by {shortDid(event.pusher_did)}
-
+ by {shortDid(event.pusher_did)}
+
{timeAgo(event.timestamp)}
diff --git a/src/components/repo-detail/FileFinder.tsx b/src/components/repo-detail/FileFinder.tsx
index 29d51cc..28c317f 100644
--- a/src/components/repo-detail/FileFinder.tsx
+++ b/src/components/repo-detail/FileFinder.tsx
@@ -1,4 +1,5 @@
import { useState, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { Input, Button } from '@heroui/react';
import type { Repository } from '../../types/repo';
import { getTreeIndex, subscribeTreeIndex, ensureTreeIndex, MAX_INDEX_FILES } from '../../lib/treeIndex';
import { fuzzyFilter } from '../../lib/fuzzy';
@@ -70,44 +71,43 @@ export function FileFinder({ repo, open, onClose, onOpenFile }: FileFinderProps)
return (
- setQuery(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="find file…"
aria-label="find file"
autoComplete="off"
- spellCheck={false}
- className="w-full h-12 px-5 text-[13px] bg-transparent border-b border-border
- text-foreground placeholder:text-dim focus:outline-none"
+ spellCheck="false"
+ variant="secondary"
+ className="w-full h-12 px-5 border-b border-border rounded-none shadow-none"
/>
{results.map((path, i) => {
const [dir, base] = splitPath(path);
return (
-
-
);
})}
{results.length === 0 && index.status === 'done' && (
- - no files match
+ - no files match
)}
-
+
{index.status === 'building' ? (
indexing… {index.files.length.toLocaleString()} files
diff --git a/src/components/repo-detail/FileList.tsx b/src/components/repo-detail/FileList.tsx
index c931ef4..d6d69fe 100644
--- a/src/components/repo-detail/FileList.tsx
+++ b/src/components/repo-detail/FileList.tsx
@@ -1,94 +1,98 @@
+import { Table } from '@heroui/react';
+import { Folder, FolderOpen } from 'lucide-react';
import type { RepoFile } from '../../types/repo';
-import {
- Table,
- TableBody,
- TableCell,
- TableHead,
- TableHeader,
- TableRow,
-} from '../ui/table';
+import { getFileIcon } from '../../lib/fileIcons';
interface FileListProps {
files: RepoFile[];
onClickEntry?: (entry: RepoFile) => void;
}
-function FileIcon({ type }: { type: 'file' | 'dir' }) {
+const DIR_ICONS = new Map([
+ ['node_modules', { icon: Folder, color: '#519aba' }],
+ ['src', { icon: Folder, color: '#519aba' }],
+ ['dist', { icon: Folder, color: '#8c8c8c' }],
+ ['build', { icon: Folder, color: '#8c8c8c' }],
+ ['.git', { icon: Folder, color: '#e44d26' }],
+ ['public', { icon: Folder, color: '#8c8c8c' }],
+ ['docs', { icon: Folder, color: '#3070b0' }],
+ ['test', { icon: Folder, color: '#8bc34a' }],
+ ['tests', { icon: Folder, color: '#8bc34a' }],
+ ['__tests__', { icon: Folder, color: '#8bc34a' }],
+ ['components', { icon: FolderOpen, color: '#519aba' }],
+ ['lib', { icon: Folder, color: '#8c8c8c' }],
+ ['utils', { icon: Folder, color: '#8c8c8c' }],
+ ['hooks', { icon: Folder, color: '#519aba' }],
+ ['pages', { icon: FolderOpen, color: '#519aba' }],
+ ['api', { icon: Folder, color: '#519aba' }],
+ ['styles', { icon: Folder, color: '#cc6699' }],
+ ['assets', { icon: Folder, color: '#b06fba' }],
+ ['images', { icon: Folder, color: '#b06fba' }],
+ ['lang', { icon: Folder, color: '#8c8c8c' }],
+ ['locales', { icon: Folder, color: '#8c8c8c' }],
+]);
+
+function FileIcon({ name, type }: { name: string; type: string }) {
if (type === 'dir') {
- return (
-
- );
+ const dirIcon = DIR_ICONS.get(name);
+ const Icon = dirIcon?.icon ?? Folder;
+ const color = dirIcon?.color ?? '#7c8a9a';
+ return ;
}
- return (
-
- );
+
+ const info = getFileIcon(name);
+ const Icon = info.icon;
+ return ;
}
export function FileList({ files, onClickEntry }: FileListProps) {
if (files.length === 0) {
return (
-
- no files
+
);
}
return (
-
+
-
-
-
- Name
-
-
- Size
-
-
-
-
- {files.map(file => (
- onClickEntry(file) : undefined}
- className={`border-b border-border last:border-0 hover:bg-muted/50 transition-colors duration-100 ${onClickEntry ? 'cursor-pointer' : 'cursor-default'}`}
- >
-
-
-
-
- {onClickEntry ? (
-
- ) : (
- {file.name}
- )}
-
-
-
- {file.size && file.size !== '—' ? (
-
- {file.size}
-
- ) : null}
-
-
- ))}
-
+
+
+
+
+ Name
+
+
+ Size
+
+
+
+ {files.map(file => (
+ onClickEntry(file) : undefined}
+ className={onClickEntry ? 'cursor-pointer hover:bg-surface-secondary transition-colors' : 'cursor-default'}
+ >
+
+
+
+ {file.name}
+
+
+
+ {file.size && file.size !== '—' ? (
+
+ {file.size}
+
+ ) : null}
+
+
+ ))}
+
+
+
);
diff --git a/src/components/repo-detail/FileViewer.tsx b/src/components/repo-detail/FileViewer.tsx
index ccf692a..1dcb018 100644
--- a/src/components/repo-detail/FileViewer.tsx
+++ b/src/components/repo-detail/FileViewer.tsx
@@ -6,6 +6,7 @@ import { extractTocHeadings } from '../../lib/toc';
import { useShortcut } from '../../hooks/useShortcuts';
import { TocRail } from './TocRail';
import { CopyButton } from '../ui/CopyButton';
+import { Button, Link } from '@heroui/react';
import { Pill } from '../ui/Pill';
import { MicroLabel } from '../ui/MicroLabel';
import { Skeleton } from '../ui/Skeleton';
@@ -42,18 +43,17 @@ function RawLink({ href, children, 'aria-label': ariaLabel }: {
'aria-label'?: string;
}) {
return (
-
{children}
-
+
);
}
@@ -140,18 +140,19 @@ export function FileViewer({
{/* Header */}
-
- /
+
+ /
{path}
{lang && !markdown && {lang}}
{headSha && (
-
+
@ {shortSha(headSha)}
)}
@@ -159,10 +160,10 @@ export function FileViewer({
- {linkCopied && link copied}
+ {linkCopied && link copied}
{blob && (
-
+
{lineCount !== null ? `${lineCount.toLocaleString()} lines · ${blob.sizeLabel}` : blob.sizeLabel}
)}
@@ -184,13 +185,13 @@ export function FileViewer({
{/* Body */}
{loading && (
)}
{error && !loading && (
- {error}
+ {error}
)}
@@ -207,17 +208,17 @@ export function FileViewer({
src={blob.url}
alt={basename}
loading="lazy"
- className="inline-block max-w-full border border-border-inner"
+ className="inline-block max-w-full border border-separator"
/>
) : blob.kind === 'binary' ? (
- binary file · {blob.sizeLabel}
+ binary file · {blob.sizeLabel}
download raw ↗
) : (
- file too large to display · {blob.sizeLabel}
+ file too large to display · {blob.sizeLabel}
view raw ↗
load anyway
diff --git a/src/components/repo-detail/IssueList.tsx b/src/components/repo-detail/IssueList.tsx
index 2332b3f..d8cc003 100644
--- a/src/components/repo-detail/IssueList.tsx
+++ b/src/components/repo-detail/IssueList.tsx
@@ -6,16 +6,16 @@ export function IssueList({ items }: { items: ApiIssue[] }) {
return (
);
}
@@ -31,7 +31,7 @@ export function StatsPanel({ stars, latestCommit, created }: StatsPanelProps) {
{stars}
- {latestCommit ? latestCommit.shortHash : '—'}
+ {latestCommit ? latestCommit.shortHash : '—'}
|
{created}
diff --git a/src/components/repo-detail/TocRail.tsx b/src/components/repo-detail/TocRail.tsx
index 4d73d05..c385074 100644
--- a/src/components/repo-detail/TocRail.tsx
+++ b/src/components/repo-detail/TocRail.tsx
@@ -50,10 +50,10 @@ export function TocRail({ headings }: TocRailProps) {
href={`#${h.id}`}
className={cn(
'block text-[11.5px] leading-snug truncate transition-colors',
- 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-warm',
+ 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent',
activeId === h.id
- ? 'text-warm-text'
- : 'text-muted-foreground hover:text-foreground',
+ ? 'text-accent'
+ : 'text-muted hover:text-foreground',
)}
>
{h.text}
diff --git a/src/components/repos/RepoHero.tsx b/src/components/repos/RepoHero.tsx
index d496d18..057092f 100644
--- a/src/components/repos/RepoHero.tsx
+++ b/src/components/repos/RepoHero.tsx
@@ -1,117 +1,45 @@
-import { cn } from '../../lib/utils';
-import { Pill } from '../ui/Pill';
-import { MicroLabel } from '../ui/MicroLabel';
-
interface RepoHeroProps {
totalCount: number;
page: number;
perPage: number;
windowStart: number;
windowEnd: number;
- refreshing: boolean;
- onRefresh: () => void;
- /** Overrides for the agents page reuse */
title?: string;
- indexLabel?: string;
description?: React.ReactNode;
countNoun?: string;
- statLabel?: string;
- /** Replaces the default count/page/per-page/window cells (first 4 render in the 2×2 box). */
cells?: { label: string; value: string }[];
}
-function StatCell({ label, value, className }: { label: string; value: string; className?: string }) {
- return (
-
- {label}
-
- {value}
-
-
- {indexLabel}
-
-
- {totalCount > 0 ? `${totalCount.toLocaleString()} ${countNoun}` : '—'}
-
-
-
- {refreshing ? 'refreshing' : 'refresh'}
-
-
-
-
-
- {title}
-
-
- {description ?? (
-
- Browse live repositories hosted on this gitlawb node. Clone them over{' '}
- `gitlawb://`, inspect ownership, check star
- counts, and jump directly into the full repo surface.
-
- )}
+
+
+
+ {title}
+
+ {description ? (
+ {description}
+ ) : (
+
+ Browse {totalCount.toLocaleString()} {countNoun} hosted on this node.
+
+ )}
+ {cells && (
+
+ {cells.map(c => (
+
+ {c.value} {c.label}
+
+ ))}
-
-
- {/* 2×2 stats box */}
-
- {statCells.slice(0, 4).map((cell, i) => (
- = 2 && 'border-t border-border')}
- />
- ))}
-
+ )}
-
-
+
);
-}
+}
\ No newline at end of file
diff --git a/src/components/repos/RepoList.tsx b/src/components/repos/RepoList.tsx
index 33f0985..09ded60 100644
--- a/src/components/repos/RepoList.tsx
+++ b/src/components/repos/RepoList.tsx
@@ -36,7 +36,7 @@ export function RepoList({
{Array.from({ length: skeletonCount }, (_, i) => )}
) : repos.length === 0 ? (
- {emptyMessage}
+ {emptyMessage}
) : (
{repos.map((repo, i) => )}
diff --git a/src/components/repos/RepoPagination.tsx b/src/components/repos/RepoPagination.tsx
index 3c0c09c..8eaf2b7 100644
--- a/src/components/repos/RepoPagination.tsx
+++ b/src/components/repos/RepoPagination.tsx
@@ -1,6 +1,20 @@
+import {
+ Pagination,
+ PaginationContent,
+ PaginationItem,
+ PaginationLink,
+ PaginationPrevious,
+ PaginationNext,
+ PaginationEllipsis,
+ PaginationSummary,
+ Select,
+ SelectTrigger,
+ SelectValue,
+ SelectPopover,
+ Menu,
+ MenuItem,
+} from '@heroui/react';
import { PER_PAGE_OPTIONS } from '../../lib/constants';
-import { Pill } from '../ui/Pill';
-import { MicroLabel } from '../ui/MicroLabel';
interface RepoPaginationProps {
page: number;
@@ -14,6 +28,10 @@ interface RepoPaginationProps {
noun?: string;
}
+function range(start: number, end: number): number[] {
+ return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+
export function RepoPagination({
page,
totalPages,
@@ -25,43 +43,80 @@ export function RepoPagination({
onPerPageChange,
noun = 'repos',
}: RepoPaginationProps) {
+ const pages = totalPages <= 7
+ ? range(1, totalPages)
+ : page <= 4
+ ? [...range(1, 5), 0, totalPages]
+ : page >= totalPages - 3
+ ? [1, 0, ...range(totalPages - 4, totalPages)]
+ : [1, 0, page - 1, page, page + 1, 0, totalPages];
+
return (
-
);
diff --git a/src/components/repos/RepoRow.tsx b/src/components/repos/RepoRow.tsx
index 4a9b6f9..acfa2c1 100644
--- a/src/components/repos/RepoRow.tsx
+++ b/src/components/repos/RepoRow.tsx
@@ -1,3 +1,4 @@
+import { Circle } from 'lucide-react';
import { Link } from 'react-router-dom';
import type { Repository } from '../../types/repo';
import { shortDid } from '../../lib/api';
@@ -22,13 +23,13 @@ export function RepoRow({ repo, index }: RepoRowProps) {
{...prefetch}
className="group relative grid grid-cols-[16px_minmax(0,1fr)_auto] md:grid-cols-[24px_minmax(0,1fr)_120px_100px]
items-start gap-x-3 md:gap-x-4 px-4 sm:px-6 py-4 md:py-5
- border-b border-border-inner last:border-b-0
- hover:bg-hover transition-colors animate-fade-up motion-reduce:animate-none"
+ border-b border-separator last:border-b-0
+ hover:bg-surface-secondary transition-colors "
style={{ animationDelay: `${index * 16}ms` }}
>
{/* Status dot — aligned to the name line */}
-
- ◆
+
+
{/* Line 1: identity + pills · Line 2: description */}
@@ -39,9 +40,9 @@ export function RepoRow({ repo, index }: RepoRowProps) {
data-row-link
className="text-[14px] leading-snug outline-none min-w-0
after:absolute after:inset-0 after:content-['']
- focus-visible:after:ring-1 focus-visible:after:ring-warm focus-visible:after:ring-inset"
+ focus-visible:after:ring-1 focus-visible:after:ring-accent focus-visible:after:ring-inset"
>
- {shortDid(repo.owner)}/
+ {shortDid(repo.owner)}/
{repo.name}
@@ -50,13 +51,13 @@ export function RepoRow({ repo, index }: RepoRowProps) {
{repo.visibility}
{repo.isMirror && (
- fork
+ fork
)}
+
{repo.description}
)}
@@ -69,11 +70,11 @@ export function RepoRow({ repo, index }: RepoRowProps) {
{/* Updated + stars */}
-
+
{repo.updatedAt}
{repo.stars > 0 && (
- ★ {repo.stars}
+ ★ {repo.stars}
)}
diff --git a/src/components/repos/RepoRowSkeleton.tsx b/src/components/repos/RepoRowSkeleton.tsx
index 11e5048..7b30e8e 100644
--- a/src/components/repos/RepoRowSkeleton.tsx
+++ b/src/components/repos/RepoRowSkeleton.tsx
@@ -3,7 +3,7 @@ import { Skeleton } from '../ui/Skeleton';
export function RepoRowSkeleton() {
return (
+ items-start gap-x-3 md:gap-x-4 px-4 sm:px-6 py-4 md:py-5 border-b border-separator last:border-b-0">
diff --git a/src/components/repos/RepoToolbar.tsx b/src/components/repos/RepoToolbar.tsx
index b939e3d..2e4480a 100644
--- a/src/components/repos/RepoToolbar.tsx
+++ b/src/components/repos/RepoToolbar.tsx
@@ -1,4 +1,5 @@
import { useState } from 'react';
+import { Input, Select, SelectTrigger, SelectValue, SelectPopover, Menu, MenuItem } from '@heroui/react';
import type { RepoSort } from '../../lib/api';
import { Pill } from '../ui/Pill';
import { MicroLabel } from '../ui/MicroLabel';
@@ -67,21 +68,18 @@ export function RepoToolbar({
- handleChange(e.target.value)}
placeholder="search repos…"
autoComplete="off"
- spellCheck={false}
- className="w-full h-9 px-3 text-[13px] bg-transparent border border-border rounded-[2px]
- text-foreground placeholder:text-dim
- focus:outline-none focus-visible:ring-1 focus-visible:ring-warm focus:border-dim
- transition-colors"
+ spellCheck="false"
+ variant="secondary"
+ className="w-full h-9 px-3 rounded-[--radius]"
/>
{search && searchScope === 'page' && (
-
+
searching within this page ({loadedCount} loaded)
)}
@@ -93,18 +91,23 @@ export function RepoToolbar({
-
{/* Fork filter */}
diff --git a/src/components/tasks/TaskList.tsx b/src/components/tasks/TaskList.tsx
index 857fd7e..f4cb738 100644
--- a/src/components/tasks/TaskList.tsx
+++ b/src/components/tasks/TaskList.tsx
@@ -1,3 +1,4 @@
+import { Circle } from 'lucide-react';
import { Link } from 'react-router-dom';
import { cn } from '../../lib/utils';
import type { ApiTask } from '../../lib/api';
@@ -9,28 +10,28 @@ import { Skeleton } from '../ui/Skeleton';
function TaskRow({ task, index }: { task: ApiTask; index: number }) {
return (
- ◆
+
{/* Title + kind/capability */}
{taskTitle(task)}
-
+
{task.kind}
{task.capability && <> · {task.capability}}
· {task.status}
@@ -38,20 +39,20 @@ function TaskRow({ task, index }: { task: ApiTask; index: number }) {
{/* Delegator */}
-
+
{shortDid(task.delegator_did)} →
{/* Assignee */}
{task.assignee_did ? shortDid(task.assignee_did) : 'unclaimed'}
{/* Time */}
-
+
{timeAgo(task.created_at)}
@@ -62,7 +63,7 @@ function TaskRow({ task, index }: { task: ApiTask; index: number }) {
function TaskRowSkeleton() {
return (
+ items-center gap-x-3 md:gap-x-4 px-4 sm:px-6 py-3 border-b border-separator last:border-b-0">
@@ -101,7 +102,7 @@ export function TaskList({ tasks, loading = false, skeletonCount = 10, emptyMess
{Array.from({ length: skeletonCount }, (_, i) => )}
) : tasks.length === 0 ? (
- {emptyMessage}
+ {emptyMessage}
) : (
{tasks.map((task, i) => )}
diff --git a/src/components/tasks/status.ts b/src/components/tasks/status.ts
index a0c8baa..7ca12e7 100644
--- a/src/components/tasks/status.ts
+++ b/src/components/tasks/status.ts
@@ -6,12 +6,12 @@ export const TASK_STATUSES: TaskStatus[] = ['pending', 'claimed', 'completed', '
export function taskStatusColor(status: string): string {
switch (status) {
case 'claimed':
- return 'text-warm';
+ return 'text-accent';
case 'completed':
- return 'text-ok';
+ return 'text-success';
case 'failed':
- return 'text-destructive';
+ return 'text-danger';
default: // pending & unknown
- return 'text-status-dot';
+ return 'text-muted';
}
}
diff --git a/src/components/ui/CopyButton.tsx b/src/components/ui/CopyButton.tsx
index 3e39562..e3a94ef 100644
--- a/src/components/ui/CopyButton.tsx
+++ b/src/components/ui/CopyButton.tsx
@@ -1,4 +1,6 @@
import { useState } from 'react';
+import { Button } from '@heroui/react';
+import { Check, Copy } from 'lucide-react';
import { cn } from '../../lib/utils';
interface CopyButtonProps {
@@ -8,29 +10,10 @@ interface CopyButtonProps {
className?: string;
}
-function CheckIcon() {
- return (
-
- );
-}
-
-function CopyIcon() {
- return (
-
- );
-}
-
export function CopyButton({ value, label = 'copy', size = 'sm', className }: CopyButtonProps) {
const [copied, setCopied] = useState(false);
- const handleCopy = async (e: React.MouseEvent) => {
- e.stopPropagation();
- e.preventDefault();
+ const handleCopy = async () => {
try {
await navigator.clipboard.writeText(value);
setCopied(true);
@@ -39,23 +22,19 @@ export function CopyButton({ value, label = 'copy', size = 'sm', className }: Co
};
return (
-
+ {copied ? : }
+
);
}
diff --git a/src/components/ui/MicroLabel.tsx b/src/components/ui/MicroLabel.tsx
index fbba1d0..7e2ed8b 100644
--- a/src/components/ui/MicroLabel.tsx
+++ b/src/components/ui/MicroLabel.tsx
@@ -2,5 +2,5 @@ import type { ReactNode } from 'react';
import { cn } from '../../lib/utils';
export function MicroLabel({ children, className }: { children: ReactNode; className?: string }) {
- return {children};
+ return {children};
}
diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index 0141669..a0fd8fd 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -1,6 +1,12 @@
-import { useEffect, useRef, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '../../lib/utils';
+import type { ReactNode } from 'react';
+import {
+ Modal as HModal,
+ ModalBackdrop,
+ ModalContainer,
+ ModalDialog,
+ ModalBody,
+ useOverlayState,
+} from '@heroui/react';
interface ModalProps {
open: boolean;
@@ -8,63 +14,20 @@ interface ModalProps {
label: string;
children: ReactNode;
className?: string;
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'cover' | 'full';
}
-export function Modal({ open, onClose, label, children, className }: ModalProps) {
- const panelRef = useRef(null);
- const restoreFocusRef = useRef(null);
-
- useEffect(() => {
- if (!open) return;
- restoreFocusRef.current = document.activeElement as HTMLElement | null;
- document.body.style.overflow = 'hidden';
-
- // Focus the panel unless a child claimed focus via autoFocus
- const id = requestAnimationFrame(() => {
- if (panelRef.current && !panelRef.current.contains(document.activeElement)) {
- panelRef.current.focus();
- }
- });
-
- const onKey = (e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- e.stopPropagation();
- onClose();
- }
- };
- window.addEventListener('keydown', onKey, true);
-
- return () => {
- cancelAnimationFrame(id);
- window.removeEventListener('keydown', onKey, true);
- document.body.style.overflow = '';
- restoreFocusRef.current?.focus();
- };
- }, [open, onClose]);
-
- if (!open) return null;
-
- return createPortal(
-
- e.stopPropagation()}
- className={cn(
- 'mx-auto mt-[12vh] mb-8 w-[calc(100%-2rem)] max-w-[640px] border border-border bg-surface',
- 'animate-fade-up motion-reduce:animate-none focus:outline-none',
- className,
- )}
- >
- {children}
-
-
+
+ accent
+
+ {accentKeys.map(key => (
+
+
+
+
+ base
+
+ {baseKeys.map(key => (
+
+
+
+
+ font
+
+ {fontKeys.map(key => (
+
+ ))}
+
+
+
+
+ radius
+
+ {radiusKeys.map(key => (
+
+ ))}
+
+
+
-))
-BreadcrumbList.displayName = "BreadcrumbList"
-
-const BreadcrumbItem = React.forwardRef<
- HTMLLIElement,
- React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
-
-))
-BreadcrumbItem.displayName = "BreadcrumbItem"
-
-const BreadcrumbLink = React.forwardRef<
- HTMLAnchorElement,
- React.ComponentPropsWithoutRef<"a"> & {
- asChild?: boolean
- }
->(({ asChild, className, ...props }, ref) => {
- const Comp = asChild ? Slot : "a"
-
- return (
-
- )
-})
-BreadcrumbLink.displayName = "BreadcrumbLink"
-
-const BreadcrumbPage = React.forwardRef<
- HTMLSpanElement,
- React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
-
-))
-BreadcrumbPage.displayName = "BreadcrumbPage"
-
-const BreadcrumbSeparator = ({
- children,
- className,
- ...props
-}: React.ComponentProps<"li">) => (
- - svg]:w-3.5 [&>svg]:h-3.5", className)}
- {...props}
- >
- {children ?? }
-
-)
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
-
-const BreadcrumbEllipsis = ({
- className,
- ...props
-}: React.ComponentProps<"span">) => (
-
-
- More
-
-)
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
-
-export {
- Breadcrumb,
- BreadcrumbList,
- BreadcrumbItem,
- BreadcrumbLink,
- BreadcrumbPage,
- BreadcrumbSeparator,
- BreadcrumbEllipsis,
-}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
deleted file mode 100644
index 36496a2..0000000
--- a/src/components/ui/button.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-10 px-4 py-2",
- sm: "h-9 rounded-md px-3",
- lg: "h-11 rounded-md px-8",
- icon: "h-10 w-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
-
-export interface ButtonProps
- extends React.ButtonHTMLAttributes,
- VariantProps {
- asChild?: boolean
-}
-
-const Button = React.forwardRef(
- ({ className, variant, size, asChild = false, ...props }, ref) => {
- const Comp = asChild ? Slot : "button"
- return (
-
- )
- }
-)
-Button.displayName = "Button"
-
-export { Button, buttonVariants }
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
deleted file mode 100644
index f62edea..0000000
--- a/src/components/ui/card.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Card = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-Card.displayName = "Card"
-
-const CardHeader = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardHeader.displayName = "CardHeader"
-
-const CardTitle = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardTitle.displayName = "CardTitle"
-
-const CardDescription = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardDescription.displayName = "CardDescription"
-
-const CardContent = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardContent.displayName = "CardContent"
-
-const CardFooter = React.forwardRef<
- HTMLDivElement,
- React.HTMLAttributes
->(({ className, ...props }, ref) => (
-
-))
-CardFooter.displayName = "CardFooter"
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/src/components/ui/input-group.tsx b/src/components/ui/input-group.tsx
deleted file mode 100644
index db3ff18..0000000
--- a/src/components/ui/input-group.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as React from "react"
-
-// ShadCN Input Group pattern — https://ui.shadcn.com/docs/components/radix/input-group
-// DOM order: InputGroupInput first, then InputGroupAddon (use align prop for visual position).
-// Focus state is managed via CSS :focus-within on the InputGroup container.
-
-type InputGroupAddonAlign =
- | "inline-start"
- | "inline-end"
- | "block-start"
- | "block-end"
-
-export function InputGroup({
- className = "",
- ...props
-}: React.ComponentProps<"div">) {
- return (
-
- )
-}
-
-export function InputGroupInput({
- className = "",
- ...props
-}: React.ComponentProps<"input">) {
- return (
-
- )
-}
-
-export function InputGroupAddon({
- align = "inline-start",
- className = "",
- ...props
-}: React.ComponentProps<"div"> & { align?: InputGroupAddonAlign }) {
- const positionClass =
- align === "inline-start"
- ? "left-0 inset-y-0 pl-4"
- : align === "inline-end"
- ? "right-0 inset-y-0 pr-4"
- : align === "block-start"
- ? "top-0 inset-x-0 pt-3"
- : "bottom-0 inset-x-0 pb-3"
-
- return (
-
- )
-}
diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx
deleted file mode 100644
index 6d7f122..0000000
--- a/src/components/ui/separator.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
-
-import { cn } from "@/lib/utils"
-
-const Separator = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(
- (
- { className, orientation = "horizontal", decorative = true, ...props },
- ref
- ) => (
-
- )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
deleted file mode 100644
index 650979b..0000000
--- a/src/components/ui/table.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-// Official ShadCN Table component — https://ui.shadcn.com/docs/components/table
-import * as React from 'react';
-import { cn } from '../../lib/utils';
-
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
- return (
-
- );
-}
-
-function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
- return (
-
- );
-}
-
-function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
- return (
-
- );
-}
-
-function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
- return (
- tr]:last:border-b-0', className)}
- {...props}
- />
- );
-}
-
-function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
- return (
- |
- );
-}
-
-function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
- return (
- [role=checkbox]]:translate-y-[2px]',
- className
- )}
- {...props}
- />
- );
-}
-
-function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
- return (
- | [role=checkbox]]:translate-y-[2px]',
- className
- )}
- {...props}
- />
- );
-}
-
-function TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {
- return (
-
- );
-}
-
-export {
- Table,
- TableBody,
- TableCaption,
- TableCell,
- TableFooter,
- TableHead,
- TableHeader,
- TableRow,
-};
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
deleted file mode 100644
index f57fffd..0000000
--- a/src/components/ui/tabs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
-
-import { cn } from "@/lib/utils"
-
-const Tabs = TabsPrimitive.Root
-
-const TabsList = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-TabsList.displayName = TabsPrimitive.List.displayName
-
-const TabsTrigger = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
-
-const TabsContent = React.forwardRef<
- React.ElementRef,
- React.ComponentPropsWithoutRef
->(({ className, ...props }, ref) => (
-
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/src/hooks/useAgents.ts b/src/hooks/useAgents.ts
index c7377f1..01723e2 100644
--- a/src/hooks/useAgents.ts
+++ b/src/hooks/useAgents.ts
@@ -2,9 +2,10 @@ import { useState, useEffect, useMemo } from 'react';
import { fetchAgents } from '../lib/api';
import type { ApiAgent } from '../lib/api';
import { useDebouncedValue } from './useDebouncedValue';
+import { useAutoRefresh } from './useAutoRefresh';
// The agents endpoint is unpaginated, so the full list is fetched once per
-// session and paged/filtered client-side.
+// refetch cycle and paged/filtered client-side.
let agentsCache: ApiAgent[] | null = null;
let agentsPromise: Promise | null = null;
@@ -38,7 +39,6 @@ interface Options {
page: number;
perPage: number;
search?: string;
- refreshKey?: number;
}
interface Result {
@@ -51,24 +51,26 @@ interface Result {
error: string | null;
}
-export function useAgents({ page, perPage, search = '', refreshKey = 0 }: Options): Result {
+export function useAgents({ page, perPage, search = '' }: Options): Result {
+ const tick = useAutoRefresh(60_000, true);
const [all, setAll] = useState(agentsCache);
const [loading, setLoading] = useState(agentsCache === null);
const [error, setError] = useState(null);
const debouncedSearch = useDebouncedValue(search.trim().toLowerCase(), 300);
- // Render-phase reset on refresh (react-hooks/set-state-in-effect)
- const [prevRefreshKey, setPrevRefreshKey] = useState(refreshKey);
- if (prevRefreshKey !== refreshKey) {
- setPrevRefreshKey(refreshKey);
+ // Render-phase reset on tick or when the search query resolves to a new page.
+ const fetchKey = `${tick}|${debouncedSearch}`;
+ const [prevFetchKey, setPrevFetchKey] = useState(fetchKey);
+ if (prevFetchKey !== fetchKey) {
+ setPrevFetchKey(fetchKey);
setLoading(true);
setError(null);
}
useEffect(() => {
let cancelled = false;
- loadAgents(refreshKey > 0)
+ loadAgents(tick > 0)
.then(agents => {
if (cancelled) return;
setAll(agents);
@@ -80,7 +82,7 @@ export function useAgents({ page, perPage, search = '', refreshKey = 0 }: Option
setLoading(false);
});
return () => { cancelled = true; };
- }, [refreshKey]);
+ }, [tick, debouncedSearch, page, perPage]);
const derived = useMemo(() => {
if (!all) {
diff --git a/src/hooks/useNetwork.ts b/src/hooks/useNetwork.ts
index 03c3b6f..b923470 100644
--- a/src/hooks/useNetwork.ts
+++ b/src/hooks/useNetwork.ts
@@ -16,17 +16,11 @@ interface Result {
* coverage from the nodes' ref-update feeds. Unreachable nodes stay in the
* result (rendered as offline) and are excluded from replication analysis.
*/
-export function useNetwork(refreshKey = 0): Result {
+export function useNetwork(): Result {
const tick = useAutoRefresh(60_000, true);
const [snapshots, setSnapshots] = useState(null);
const [loading, setLoading] = useState(true);
- const [prevRefreshKey, setPrevRefreshKey] = useState(refreshKey);
- if (prevRefreshKey !== refreshKey) {
- setPrevRefreshKey(refreshKey);
- setLoading(true);
- }
-
useEffect(() => {
const controller = new AbortController();
Promise.all(FEDERATED_NODES.map(n => fetchNodeSnapshot(n, controller.signal)))
@@ -40,7 +34,7 @@ export function useNetwork(refreshKey = 0): Result {
if (!controller.signal.aborted) setLoading(false);
});
return () => controller.abort();
- }, [refreshKey, tick]);
+ }, [tick]);
const replication = useMemo(() => {
if (!snapshots) return null;
diff --git a/src/hooks/useNodeOverview.ts b/src/hooks/useNodeOverview.ts
index b556617..9b673bd 100644
--- a/src/hooks/useNodeOverview.ts
+++ b/src/hooks/useNodeOverview.ts
@@ -31,7 +31,7 @@ const nullOnError = (p: Promise): Promise => p.catch(() => null
* independently (a failed corner renders as "—", never breaks the page) and
* the whole sweep re-runs on a visibility-aware 60s tick.
*/
-export function useNodeOverview(refreshKey = 0): NodeOverview {
+export function useNodeOverview(): NodeOverview {
const tick = useAutoRefresh(60_000, true);
const [state, setState] = useState>({
node: null,
@@ -44,13 +44,6 @@ export function useNodeOverview(refreshKey = 0): NodeOverview {
});
const [loaded, setLoaded] = useState(false);
- // Render-phase reset on manual refresh only (ticks refresh in place).
- const [prevRefreshKey, setPrevRefreshKey] = useState(refreshKey);
- if (prevRefreshKey !== refreshKey) {
- setPrevRefreshKey(refreshKey);
- setLoaded(false);
- }
-
useEffect(() => {
const controller = new AbortController();
const { signal } = controller;
@@ -70,7 +63,7 @@ export function useNodeOverview(refreshKey = 0): NodeOverview {
});
return () => controller.abort();
- }, [refreshKey, tick]);
+ }, [tick]);
const unreachable =
loaded &&
diff --git a/src/hooks/useNodeStatus.ts b/src/hooks/useNodeStatus.ts
index e96ae53..6983576 100644
--- a/src/hooks/useNodeStatus.ts
+++ b/src/hooks/useNodeStatus.ts
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { fetchNodeInfo, fetchStats } from '../lib/api';
import type { NodeInfo, NodeStats } from '../lib/api';
+import { useAutoRefresh } from './useAutoRefresh';
interface NodeStatus {
node: NodeInfo | null;
@@ -9,13 +10,14 @@ interface NodeStatus {
}
// One fetch per session — the chrome must never break the page, so failures
-// simply leave the fields null.
+// simply leave the fields null. On each visibility-aware tick the cache is
+// bypassed so the chrome stays current.
type CachedStatus = { node: NodeInfo | null; stats: NodeStats | null };
let cached: CachedStatus | null = null;
let inflight: Promise | null = null;
-function load(): Promise {
- if (cached) return Promise.resolve(cached);
+function load(force = false): Promise {
+ if (!force && cached) return Promise.resolve(cached);
if (!inflight) {
inflight = Promise.all([
fetchNodeInfo().catch(() => null),
@@ -31,6 +33,7 @@ function load(): Promise {
}
export function useNodeStatus(): NodeStatus {
+ const tick = useAutoRefresh(60_000, true);
const [status, setStatus] = useState({
node: cached?.node ?? null,
stats: cached?.stats ?? null,
@@ -38,15 +41,14 @@ export function useNodeStatus(): NodeStatus {
});
useEffect(() => {
- if (cached) return;
let cancelled = false;
- load().then(result => {
+ load(tick > 0).then(result => {
if (!cancelled && result) {
setStatus({ node: result.node, stats: result.stats, loading: false });
}
});
return () => { cancelled = true; };
- }, []);
+ }, [tick]);
return status;
}
diff --git a/src/hooks/usePeers.ts b/src/hooks/usePeers.ts
index 349c097..40521d7 100644
--- a/src/hooks/usePeers.ts
+++ b/src/hooks/usePeers.ts
@@ -8,7 +8,6 @@ interface Options {
page: number;
perPage: number;
search?: string;
- refreshKey?: number;
}
interface Result {
@@ -29,7 +28,7 @@ interface Result {
* filtered/paged client-side, re-fetched on a visibility-aware 60s tick.
* Reachable peers sort first, then by most recent last_seen.
*/
-export function usePeers({ page, perPage, search = '', refreshKey = 0 }: Options): Result {
+export function usePeers({ page, perPage, search = '' }: Options): Result {
const tick = useAutoRefresh(60_000, true);
const [all, setAll] = useState(null);
const [p2p, setP2p] = useState(null);
@@ -38,13 +37,6 @@ export function usePeers({ page, perPage, search = '', refreshKey = 0 }: Options
const debouncedSearch = useDebouncedValue(search.trim().toLowerCase(), 300);
- const [prevRefreshKey, setPrevRefreshKey] = useState(refreshKey);
- if (prevRefreshKey !== refreshKey) {
- setPrevRefreshKey(refreshKey);
- setLoading(true);
- setError(null);
- }
-
useEffect(() => {
const controller = new AbortController();
Promise.all([
@@ -63,7 +55,7 @@ export function usePeers({ page, perPage, search = '', refreshKey = 0 }: Options
setLoading(false);
});
return () => controller.abort();
- }, [refreshKey, tick]);
+ }, [tick]);
const derived = useMemo(() => {
if (!all) {
diff --git a/src/hooks/useRefUpdates.ts b/src/hooks/useRefUpdates.ts
index d1b8bf0..0b7e2c6 100644
--- a/src/hooks/useRefUpdates.ts
+++ b/src/hooks/useRefUpdates.ts
@@ -13,7 +13,6 @@ interface Options {
source?: EventSourceFilter;
/** Auto-refresh the feed (visibility-aware, 30s). */
live?: boolean;
- refreshKey?: number;
}
interface Result {
@@ -30,7 +29,7 @@ interface Result {
}
export function useRefUpdates({
- page, perPage, search = '', source = 'all', live = true, refreshKey = 0,
+ page, perPage, search = '', source = 'all', live = true,
}: Options): Result {
const tick = useAutoRefresh(30_000, live);
const [all, setAll] = useState(null);
@@ -39,13 +38,6 @@ export function useRefUpdates({
const debouncedSearch = useDebouncedValue(search.trim().toLowerCase(), 300);
- const [prevRefreshKey, setPrevRefreshKey] = useState(refreshKey);
- if (prevRefreshKey !== refreshKey) {
- setPrevRefreshKey(refreshKey);
- setLoading(true);
- setError(null);
- }
-
useEffect(() => {
const controller = new AbortController();
fetchRefUpdates(MAX_EVENT_LIMIT, controller.signal)
@@ -61,7 +53,7 @@ export function useRefUpdates({
setLoading(false);
});
return () => controller.abort();
- }, [refreshKey, tick]);
+ }, [tick]);
const derived = useMemo(() => {
if (!all) {
diff --git a/src/hooks/useRefreshKey.ts b/src/hooks/useRefreshKey.ts
deleted file mode 100644
index 29987f0..0000000
--- a/src/hooks/useRefreshKey.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useState, useCallback } from 'react';
-
-export function useRefreshKey() {
- const [refreshKey, setRefreshKey] = useState(0);
- const refresh = useCallback(() => setRefreshKey(k => k + 1), []);
- return { refreshKey, refresh };
-}
diff --git a/src/hooks/useRepositories.ts b/src/hooks/useRepositories.ts
index 52c1487..9cbcee3 100644
--- a/src/hooks/useRepositories.ts
+++ b/src/hooks/useRepositories.ts
@@ -4,6 +4,7 @@ import type { ApiRepo, RepoSort } from '../lib/api';
import type { Repository } from '../types/repo';
import { DEFAULT_PER_PAGE } from '../lib/constants';
import { useDebouncedValue } from './useDebouncedValue';
+import { useAutoRefresh } from './useAutoRefresh';
interface Options {
page: number;
@@ -11,7 +12,6 @@ interface Options {
search?: string;
sort?: RepoSort;
owner?: string;
- refreshKey?: number;
}
interface Result {
@@ -55,8 +55,8 @@ export function useRepositories({
search = '',
sort = 'updated',
owner = '',
- refreshKey = 0,
}: Options): Result {
+ const tick = useAutoRefresh(60_000, true);
const [apiRepos, setApiRepos] = useState(null);
const [totalCount, setTotalCount] = useState(0);
const [loading, setLoading] = useState(true);
@@ -66,9 +66,9 @@ export function useRepositories({
const serverQuery = SERVER_SEARCH_ENABLED ? debouncedSearch : '';
const serverSort: RepoSort = SERVER_SEARCH_ENABLED ? sort : 'updated';
- // Render-phase reset: flip to loading as soon as the query inputs change,
+ // Render-phase reset: flip to loading as soon as the query inputs or tick change,
// without a cascading effect (react-hooks/set-state-in-effect).
- const fetchKey = `${page}|${perPage}|${owner}|${serverQuery}|${serverSort}|${refreshKey}`;
+ const fetchKey = `${page}|${perPage}|${owner}|${serverQuery}|${serverSort}|${tick}`;
const [prevFetchKey, setPrevFetchKey] = useState(fetchKey);
if (prevFetchKey !== fetchKey) {
setPrevFetchKey(fetchKey);
@@ -97,7 +97,7 @@ export function useRepositories({
setLoading(false);
});
return () => controller.abort();
- }, [page, perPage, owner, serverQuery, serverSort, refreshKey]);
+ }, [page, perPage, owner, serverQuery, serverSort, tick]);
const derived = useMemo(() => {
if (!apiRepos) {
diff --git a/src/hooks/useTasks.ts b/src/hooks/useTasks.ts
index 3013df5..888144b 100644
--- a/src/hooks/useTasks.ts
+++ b/src/hooks/useTasks.ts
@@ -10,7 +10,6 @@ interface Options {
/** Server-side filter — refetches when it changes. */
status?: TaskStatus;
search?: string;
- refreshKey?: number;
}
interface Result {
@@ -24,7 +23,7 @@ interface Result {
error: string | null;
}
-export function useTasks({ page, perPage, status, search = '', refreshKey = 0 }: Options): Result {
+export function useTasks({ page, perPage, status, search = '' }: Options): Result {
const tick = useAutoRefresh(30_000, true);
const [all, setAll] = useState(null);
const [loading, setLoading] = useState(true);
@@ -33,7 +32,7 @@ export function useTasks({ page, perPage, status, search = '', refreshKey = 0 }:
const debouncedSearch = useDebouncedValue(search.trim().toLowerCase(), 300);
// Render-phase reset when the fetch key changes (manual refresh or filter).
- const fetchKey = `${refreshKey}|${status ?? ''}`;
+ const fetchKey = `${tick}|${status ?? ''}`;
const [prevFetchKey, setPrevFetchKey] = useState(fetchKey);
if (prevFetchKey !== fetchKey) {
setPrevFetchKey(fetchKey);
@@ -56,7 +55,7 @@ export function useTasks({ page, perPage, status, search = '', refreshKey = 0 }:
setLoading(false);
});
return () => controller.abort();
- }, [refreshKey, status, tick]);
+ }, [tick, status]);
const derived = useMemo(() => {
if (!all) {
diff --git a/src/hooks/useTheme.ts b/src/hooks/useTheme.ts
index 0844d71..45a37f4 100644
--- a/src/hooks/useTheme.ts
+++ b/src/hooks/useTheme.ts
@@ -16,6 +16,7 @@ export function useTheme() {
useEffect(() => {
const root = document.documentElement;
root.classList.toggle('dark', theme === 'dark');
+ root.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}, [theme]);
diff --git a/src/index.css b/src/index.css
index aebc655..e34dfaa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,104 +1,7 @@
@import "tailwindcss";
+@import "@heroui/styles";
-/* Class-based dark mode — toggled by adding/removing .dark on */
-@custom-variant dark (&:is(.dark, .dark *));
-
-/* ── ShadCN theme bridge ────────────────────────────────────────────────────── */
-/* Maps project CSS variables to Tailwind v4 utility classes.
- @theme inline keeps values as var() refs so dark-mode overrides resolve at runtime. */
-@theme inline {
- --font-sans: var(--font-mono-stack);
- --font-mono: var(--font-mono-stack);
- --color-background: var(--color-background);
- --color-foreground: var(--color-foreground);
- --color-surface: var(--color-surface);
- --color-muted: var(--color-muted);
- --color-muted-foreground: var(--color-muted-foreground);
- --color-border: var(--color-border);
- --color-border-inner: var(--color-border-inner);
- --color-accent: var(--color-accent);
- --color-accent-foreground: var(--color-foreground);
- --color-warm: var(--color-warm);
- --color-warm-text: var(--color-warm-text);
- --color-ok: var(--color-ok);
- --color-dim: var(--color-text-dim);
- --color-hover: var(--color-hover);
- --color-status-dot: var(--color-status-dot);
- --color-surface-2: var(--color-surface-2);
- /* ShadCN card */
- --color-card: var(--color-surface);
- --color-card-foreground: var(--color-foreground);
- /* ShadCN primary — white text on dark */
- --color-primary: var(--color-foreground);
- --color-primary-foreground: var(--color-background);
- /* ShadCN secondary */
- --color-secondary: var(--color-muted);
- --color-secondary-foreground: var(--color-foreground);
- /* ShadCN destructive */
- --color-destructive: #ef4444;
- --color-destructive-foreground: #fafafa;
- /* ShadCN popover */
- --color-popover: var(--color-surface);
- --color-popover-foreground: var(--color-foreground);
- /* ShadCN input / ring */
- --color-input: var(--color-border);
- --color-ring: var(--color-warm);
- /* radius — near-square, terminal pills */
- --radius: 0.125rem;
-}
-
-/* ── Design tokens ─────────────────────────────────────────────────────────── */
-
-:root {
- --font-mono-stack: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-
- /* Light mode (secondary theme — same structure as dark) */
- --color-background: #fafafa;
- --color-foreground: #111111;
- --color-surface: #f4f4f4;
- --color-surface-2: #efefef;
- --color-muted: #ececec;
- --color-muted-foreground: #6b6b6b;
- --color-border: #e2e2e2;
- --color-border-inner: #ebebeb;
- --color-grid: #ededed;
- --color-text-primary: #111111;
- --color-text-mid: #4a4a4a;
- --color-text-muted: #6b6b6b;
- --color-text-dim: #9a9a9a;
- --color-text-faint: #cccccc;
- --color-warm: #c9a96e;
- --color-warm-text: #a07840;
- --color-accent: #5e6ad2;
- --color-ok: #16a34a;
- --color-hover: rgba(0, 0, 0, 0.03);
- --color-status-dot: #cfcfcf;
-}
-
-.dark {
- --color-background: #0a0a0a;
- --color-foreground: #f2f2f2;
- --color-surface: #0d0d0d;
- --color-surface-2: #0b0b0b;
- --color-muted: #161616;
- --color-muted-foreground: #8a8a8a;
- --color-border: #1c1c1c;
- --color-border-inner: #141414;
- --color-grid: #131313;
- --color-text-primary: #f2f2f2;
- --color-text-mid: #a3a3a3;
- --color-text-muted: #8a8a8a;
- --color-text-dim: #555555;
- --color-text-faint: #3a3a3a;
- --color-warm: #c9a96e;
- --color-warm-text: #c9a96e;
- --color-accent: #5e6ad2;
- --color-ok: #4ade80;
- --color-hover: rgba(255, 255, 255, 0.025);
- --color-status-dot: #2e2e2e;
-}
-
-/* ── Base ──────────────────────────────────────────────────────────────────── */
+@custom-variant dark (&:where(.dark, .dark *));
*, *::before, *::after {
box-sizing: border-box;
@@ -119,9 +22,7 @@ html {
body {
background-color: var(--color-background);
color: var(--color-foreground);
- font-family: var(--font-mono-stack);
- font-size: 14px;
- line-height: 1.6;
+ font-family: var(--font-sans, 'JetBrains Mono', monospace);
}
#root {
@@ -129,306 +30,87 @@ body {
}
::selection {
- background: rgba(201, 169, 110, 0.28);
-}
-
-::-webkit-scrollbar {
- width: 5px;
- height: 5px;
-}
-::-webkit-scrollbar-track {
- background: transparent;
-}
-::-webkit-scrollbar-thumb {
- background: var(--color-border);
- border-radius: 999px;
-}
-::-webkit-scrollbar-thumb:hover {
- background: var(--color-border);
- filter: brightness(1.2);
-}
-
-/* ── Terminal utilities ────────────────────────────────────────────────────── */
-
-/* Hide scrollbars on horizontally scrollable chrome (section tab bar) */
-.scrollbar-none {
- scrollbar-width: none;
-}
-.scrollbar-none::-webkit-scrollbar {
- display: none;
-}
-
-/* Uppercase letter-spaced micro-label, as in the reference mockups */
-.micro-label {
- font-size: 10px;
- font-weight: 500;
- letter-spacing: 0.2em;
- text-transform: uppercase;
- color: var(--color-muted-foreground);
+ background: color-mix(in oklch, var(--color-accent) 28%, transparent);
}
-/* Blueprint grid texture for hero panels */
-.grid-lines {
- background-image:
- repeating-linear-gradient(to right, var(--color-grid) 0 1px, transparent 1px 80px),
- repeating-linear-gradient(to bottom, var(--color-grid) 0 1px, transparent 1px 80px);
-}
-
-/* Keyboard key chip (cheatsheet, hints) */
-.kbd {
- font-family: var(--font-mono-stack);
- font-size: 11px;
- line-height: 1;
- color: var(--color-foreground);
- border: 1px solid var(--color-text-dim);
- border-bottom-width: 2px;
- border-radius: 2px;
- padding: 3px 6px;
- min-width: 22px;
- text-align: center;
- display: inline-block;
-}
-
-/* Native select chevron (replaces per-component inline background-image) */
-.select-chevron {
- appearance: none;
- background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888888' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: right 8px center;
-}
-
-/* ── README / markdown typography (.markdown-gl) ─────────────────────────────
- Ported from web/src/app/globals.css, re-based on explorer tokens (terminal
- scale, 2px radii, warm-accent links, class-based dark mode). */
.markdown-gl {
- font-family: var(--font-mono-stack);
+ color: var(--color-foreground);
font-size: 14px;
- line-height: 1.6;
- color: var(--color-text-mid);
+ line-height: 1.7;
word-wrap: break-word;
}
-.markdown-gl > *:first-child { margin-top: 0 !important; }
-.markdown-gl > *:last-child { margin-bottom: 0 !important; }
-
-.markdown-gl p, .markdown-gl blockquote, .markdown-gl ul, .markdown-gl ol,
-.markdown-gl table, .markdown-gl pre, .markdown-gl details {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-.markdown-gl h1, .markdown-gl h2, .markdown-gl h3,
-.markdown-gl h4, .markdown-gl h5, .markdown-gl h6 {
- margin-top: 1.5rem;
- margin-bottom: 1rem;
+.markdown-gl h1, .markdown-gl h2, .markdown-gl h3, .markdown-gl h4 {
+ margin-top: 24px;
+ margin-bottom: 12px;
font-weight: 700;
- line-height: 1.25;
+ line-height: 1.3;
color: var(--color-foreground);
- scroll-margin-top: 4rem;
}
-.markdown-gl h1 { font-size: 1.75em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
-.markdown-gl h2 { font-size: 1.4em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); }
-.markdown-gl h3 { font-size: 1.2em; }
-.markdown-gl h4 { font-size: 1em; }
-.markdown-gl h5 { font-size: 0.875em; }
-.markdown-gl h6 { font-size: 0.85em; color: var(--color-muted-foreground); }
-
-.markdown-gl strong { color: var(--color-foreground); font-weight: 700; }
-.markdown-gl a {
- color: var(--color-foreground);
- text-decoration: underline;
- text-underline-offset: 3px;
- text-decoration-color: color-mix(in srgb, var(--color-warm) 45%, transparent);
-}
-.markdown-gl a:hover { color: var(--color-warm-text); text-decoration-color: var(--color-warm); }
-.markdown-gl del { color: var(--color-muted-foreground); }
-
+.markdown-gl h1 { font-size: 1.6em; border-bottom: 1px solid var(--color-separator); padding-bottom: 8px; }
+.markdown-gl h2 { font-size: 1.3em; border-bottom: 1px solid var(--color-separator); padding-bottom: 6px; }
+.markdown-gl h3 { font-size: 1.1em; }
+.markdown-gl p, .markdown-gl ul, .markdown-gl ol, .markdown-gl dl, .markdown-gl blockquote,
+.markdown-gl pre, .markdown-gl table, .markdown-gl hr { margin-top: 0; margin-bottom: 16px; }
.markdown-gl ul, .markdown-gl ol { padding-left: 2em; }
-.markdown-gl ul { list-style: disc; }
-.markdown-gl ol { list-style: decimal; }
-.markdown-gl li + li { margin-top: 0.25em; }
-.markdown-gl li > ul, .markdown-gl li > ol { margin: 0.25rem 0 0; }
-.markdown-gl li > p { margin-bottom: 0.5rem; }
-.markdown-gl li:has(> input[type="checkbox"]:first-child) { list-style: none; margin-left: -1.5em; }
-.markdown-gl input[type="checkbox"] { margin-right: 0.5em; accent-color: var(--color-warm); }
-
-.markdown-gl blockquote {
- padding: 0 1em;
- border-left: 0.25em solid var(--color-border);
- color: var(--color-muted-foreground);
-}
-.markdown-gl blockquote > :last-child { margin-bottom: 0; }
-
-.markdown-gl hr {
- height: 1px;
- padding: 0;
- margin: 1.5rem 0;
- background: var(--color-border);
- border: 0;
-}
-
+.markdown-gl li { margin-top: 0.25em; }
+.markdown-gl li > p { margin-bottom: 0; }
+.markdown-gl a { color: var(--color-accent); text-decoration: none; }
+.markdown-gl a:hover { text-decoration: underline; }
.markdown-gl code {
- font-family: var(--font-mono-stack);
- font-size: 85%;
- color: var(--color-foreground);
- background: var(--color-muted);
- padding: 0.2em 0.4em;
- border-radius: 2px;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 0.875em;
+ background: var(--color-surface-secondary);
+ color: var(--color-accent);
}
.markdown-gl pre {
- font-family: var(--font-mono-stack);
- font-size: 12.5px;
- line-height: 1.45;
- color: var(--color-text-mid);
+ padding: 16px;
+ border-radius: 6px;
+ overflow-x: auto;
background: var(--color-surface);
border: 1px solid var(--color-border);
- border-radius: 2px;
- padding: 1rem;
- overflow-x: auto;
}
.markdown-gl pre code {
- display: inline;
padding: 0;
- font-size: 100%;
background: transparent;
- border: 0;
- color: inherit;
+ color: var(--color-foreground);
+ border-radius: 0;
+}
+.markdown-gl blockquote {
+ padding: 0 1em;
+ border-left: 3px solid var(--color-separator);
+ color: var(--color-muted);
}
-
.markdown-gl table {
display: block;
- width: max-content;
- max-width: 100%;
overflow-x: auto;
- border-spacing: 0;
border-collapse: collapse;
- font-size: 1em;
+ width: 100%;
}
-.markdown-gl th, .markdown-gl td {
- padding: 6px 13px;
+.markdown-gl table th, .markdown-gl table td {
+ padding: 8px 12px;
border: 1px solid var(--color-border);
+ text-align: left;
}
-.markdown-gl th { color: var(--color-foreground); font-weight: 700; text-align: left; }
-.markdown-gl tbody tr:nth-child(2n) { background: var(--color-hover); }
-
-.markdown-gl img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; }
-
-.markdown-gl details { border: 1px solid var(--color-border); border-radius: 2px; padding: 0.5rem 1rem; }
-.markdown-gl details[open] { padding-bottom: 1rem; }
-.markdown-gl summary { cursor: pointer; color: var(--color-foreground); font-weight: 700; }
-
-.markdown-gl kbd {
- font-family: var(--font-mono-stack);
- font-size: 0.8125em;
- border: 1px solid var(--color-text-dim);
- border-bottom-width: 2px;
- border-radius: 2px;
- padding: 0.1em 0.4em;
-}
-
-/* GitHub-style alerts (marked-alert) — monochrome: hierarchy via border
- weight + ::before glyph. \FE0E forces text presentation. */
-.markdown-gl .markdown-alert {
- padding: 0.5rem 1em;
- margin-bottom: 1rem;
- border-left: 0.25em solid var(--color-text-dim);
- color: var(--color-muted-foreground);
-}
-.markdown-gl .markdown-alert > :last-child { margin-bottom: 0; }
-.markdown-gl .markdown-alert-title {
- display: flex;
- align-items: center;
- gap: 0.5em;
- margin-bottom: 0.25rem;
- font-weight: 700;
- font-size: 0.875rem;
- letter-spacing: 0.02em;
- color: var(--color-foreground);
-}
-.markdown-gl .markdown-alert-title::before { font-family: var(--font-mono-stack); line-height: 1; }
-.markdown-gl .markdown-alert-note .markdown-alert-title::before { content: "\2139\FE0E"; }
-.markdown-gl .markdown-alert-tip .markdown-alert-title::before { content: "\2726"; }
-.markdown-gl .markdown-alert-important .markdown-alert-title::before { content: "\203C\FE0E"; }
-.markdown-gl .markdown-alert-warning .markdown-alert-title::before { content: "\26A0\FE0E"; }
-.markdown-gl .markdown-alert-caution .markdown-alert-title::before { content: "\2715"; }
-.markdown-gl .markdown-alert-warning,
-.markdown-gl .markdown-alert-caution { border-left-color: var(--color-warm); }
-
-/* Footnotes (marked-footnote) */
-.markdown-gl .footnotes {
- margin-top: 2rem;
- padding-top: 1rem;
- border-top: 1px solid var(--color-border);
- font-size: 0.875rem;
- color: var(--color-muted-foreground);
-}
-.markdown-gl .footnotes ol { margin-bottom: 0; }
-.markdown-gl .footnotes p { display: inline; margin: 0; }
-.markdown-gl sup a[data-footnote-ref] { text-decoration: none; font-weight: 700; padding: 0 0.15em; }
-.markdown-gl a[data-footnote-backref] { text-decoration: none; }
-.markdown-gl .sr-only {
- position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
- overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
-}
-
-/* ── Syntax tokens (shiki sentinel colors → semantic classes) ────────────────
- src/lib/highlight.ts emits class-only spans; these own the real colors.
- Light values in :root, dark overrides under .dark. */
-.tok-kw { color: #2563eb; }
-.tok-str { color: #15803d; }
-.tok-type { color: #a16207; }
-.tok-num { color: #a16207; }
-.tok-fn { color: var(--color-foreground); }
-.tok-prop { color: var(--color-text-mid); }
-.tok-cmt { color: var(--color-text-dim); font-style: italic; }
-.tok-punc { color: var(--color-muted-foreground); }
-.dark .tok-kw { color: #60a5fa; }
-.dark .tok-str { color: #4ade80; }
-.dark .tok-type { color: #facc15; }
-.dark .tok-num { color: #facc15; }
-
-/* ── Code viewer table ──────────────────────────────────────────────────────── */
-.code-table { border-collapse: collapse; }
-.code-table td { padding-top: 0; padding-bottom: 0; }
-.code-table tr:target { background: color-mix(in srgb, var(--color-warm) 12%, transparent); }
-.code-table tr:target td:first-child a { color: var(--color-warm-text); }
-/* Class-driven range highlight (#L10-L25 + gutter clicks); :target stays as
- a no-JS fallback for bare #L37 links */
-.code-table tr.line-hl { background: color-mix(in srgb, var(--color-warm) 12%, transparent); }
-.code-table tr.line-hl td:first-child a { color: var(--color-warm-text); }
-
-/* ── Animations ────────────────────────────────────────────────────────────── */
-
-@keyframes fadeUp {
- from { opacity: 0; transform: translateY(5px); }
- to { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes fadeIn {
- from { opacity: 0; }
- to { opacity: 1; }
-}
-
-@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
-}
-
-.animate-fade-up {
- animation: fadeUp 0.18s ease-out both;
-}
-
-.animate-fade-in {
- animation: fadeIn 0.15s ease-out both;
-}
-
-.animate-spin-icon {
- animation: spin 0.7s linear infinite;
- display: inline-block;
-}
-
-@media (prefers-reduced-motion: reduce) {
- .animate-fade-up,
- .animate-fade-in {
- animation: none;
- }
+.markdown-gl table th {
+ font-weight: 600;
+ background: var(--color-surface-secondary);
}
+.markdown-gl tr:nth-child(even) { background: var(--color-surface); }
+.markdown-gl hr {
+ height: 0;
+ border: 0;
+ border-top: 1px solid var(--color-separator);
+}
+.markdown-gl img { max-width: 100%; box-sizing: border-box; }
+.markdown-gl .task-list-item { list-style: none; }
+.markdown-gl .task-list-item input { margin: 0 0.2em 0.25em -1.4em; vertical-align: middle; }
+
+.tok-kw { color: #60a5fa; }
+.tok-str { color: #4ade80; }
+.tok-type { color: #facc15; }
+.tok-num { color: #facc15; }
+.tok-cmt { color: #777778; font-style: italic; }
+.tok-fn { color: #f0f0f1; }
+.tok-prop { color: #d0d0d1; }
+.tok-punc { color: #909091; }
diff --git a/src/lib/fileIcons.tsx b/src/lib/fileIcons.tsx
new file mode 100644
index 0000000..a241b0c
--- /dev/null
+++ b/src/lib/fileIcons.tsx
@@ -0,0 +1,105 @@
+import {
+ FileCode, FileJson, FileText, Terminal, Database, Image,
+ Lock, Scale, BookOpen, File,
+ type LucideIcon,
+} from 'lucide-react';
+
+interface FileIconInfo {
+ icon: LucideIcon;
+ color: string;
+}
+
+const DOT = new Map([
+ ['js', { icon: FileCode, color: '#519aba' }],
+ ['mjs', { icon: FileCode, color: '#519aba' }],
+ ['cjs', { icon: FileCode, color: '#519aba' }],
+ ['ts', { icon: FileCode, color: '#3070b0' }],
+ ['tsx', { icon: FileCode, color: '#3070b0' }],
+ ['jsx', { icon: FileCode, color: '#519aba' }],
+ ['css', { icon: FileCode, color: '#cc6699' }],
+ ['scss', { icon: FileCode, color: '#cc6699' }],
+ ['less', { icon: FileCode, color: '#563d7c' }],
+ ['html', { icon: FileCode, color: '#e44d26' }],
+ ['htm', { icon: FileCode, color: '#e44d26' }],
+ ['json', { icon: FileJson, color: '#c9a54b' }],
+ ['jsonc', { icon: FileJson, color: '#c9a54b' }],
+ ['md', { icon: BookOpen, color: '#3070b0' }],
+ ['mdx', { icon: BookOpen, color: '#3070b0' }],
+ ['py', { icon: FileCode, color: '#3572A5' }],
+ ['rs', { icon: FileCode, color: '#dea584' }],
+ ['go', { icon: FileCode, color: '#00ADD8' }],
+ ['rb', { icon: FileCode, color: '#cc342d' }],
+ ['php', { icon: FileCode, color: '#4F5D95' }],
+ ['java', { icon: FileCode, color: '#b07219' }],
+ ['kt', { icon: FileCode, color: '#A97BFF' }],
+ ['swift', { icon: FileCode, color: '#F05138' }],
+ ['c', { icon: FileCode, color: '#555555' }],
+ ['h', { icon: FileCode, color: '#555555' }],
+ ['cpp', { icon: FileCode, color: '#f34b7d' }],
+ ['cxx', { icon: FileCode, color: '#f34b7d' }],
+ ['hpp', { icon: FileCode, color: '#f34b7d' }],
+ ['cs', { icon: FileCode, color: '#178600' }],
+ ['yaml', { icon: FileCode, color: '#cb171e' }],
+ ['yml', { icon: FileCode, color: '#cb171e' }],
+ ['toml', { icon: FileCode, color: '#8c8c8c' }],
+ ['sh', { icon: Terminal, color: '#4dab4d' }],
+ ['bash', { icon: Terminal, color: '#4dab4d' }],
+ ['zsh', { icon: Terminal, color: '#4dab4d' }],
+ ['fish', { icon: Terminal, color: '#4dab4d' }],
+ ['ps1', { icon: Terminal, color: '#4dab4d' }],
+ ['bat', { icon: Terminal, color: '#4dab4d' }],
+ ['sql', { icon: Database, color: '#4682b4' }],
+ ['svg', { icon: Image, color: '#b06fba' }],
+ ['png', { icon: Image, color: '#b06fba' }],
+ ['jpg', { icon: Image, color: '#b06fba' }],
+ ['jpeg', { icon: Image, color: '#b06fba' }],
+ ['gif', { icon: Image, color: '#b06fba' }],
+ ['ico', { icon: Image, color: '#b06fba' }],
+ ['lock', { icon: Lock, color: '#8c8c8c' }],
+ ['woff', { icon: FileText, color: '#8c8c8c' }],
+ ['woff2', { icon: FileText, color: '#8c8c8c' }],
+ ['ttf', { icon: FileText, color: '#8c8c8c' }],
+ ['eot', { icon: FileText, color: '#8c8c8c' }],
+ ['diff', { icon: FileCode, color: '#8c8c8c' }],
+ ['patch', { icon: FileCode, color: '#8c8c8c' }],
+ ['env', { icon: FileCode, color: '#f0ad4e' }],
+ ['conf', { icon: FileCode, color: '#8c8c8c' }],
+ ['cfg', { icon: FileCode, color: '#8c8c8c' }],
+ ['ini', { icon: FileCode, color: '#8c8c8c' }],
+ ['txt', { icon: FileText, color: '#8c8c8c' }],
+ ['graphql', { icon: FileCode, color: '#e10098' }],
+ ['vue', { icon: FileCode, color: '#41b883' }],
+ ['svelte', { icon: FileCode, color: '#ff3e00' }],
+ ['astro', { icon: FileCode, color: '#bd34fe' }],
+]);
+
+const NAME = new Map([
+ ['readme.md', { icon: BookOpen, color: '#3070b0' }],
+ ['readme', { icon: BookOpen, color: '#3070b0' }],
+ ['license', { icon: Scale, color: '#8bc34a' }],
+ ['makefile', { icon: FileCode, color: '#8c8c8c' }],
+ ['dockerfile', { icon: FileCode, color: '#0db7ed' }],
+ ['gemfile', { icon: FileCode, color: '#8c8c8c' }],
+ ['procfile', { icon: FileCode, color: '#8c8c8c' }],
+ ['.env', { icon: FileCode, color: '#f0ad4e' }],
+ ['.gitignore', { icon: FileCode, color: '#8c8c8c' }],
+ ['.gitattributes', { icon: FileCode, color: '#8c8c8c' }],
+ ['.gitmodules', { icon: FileCode, color: '#8c8c8c' }],
+ ['.editorconfig', { icon: FileCode, color: '#8c8c8c' }],
+ ['.dockerignore', { icon: FileCode, color: '#0db7ed' }],
+]);
+
+export function getFileIcon(name: string): { icon: LucideIcon; color: string } {
+ const lower = name.toLowerCase();
+ const byName = NAME.get(lower);
+ if (byName) return byName;
+
+ const i = lower.lastIndexOf('.');
+ if (i === -1) return { icon: File, color: '#8c8c8c' };
+
+ const ext = lower.slice(i + 1);
+ const byExt = DOT.get(ext);
+ if (byExt) return byExt;
+
+ return { icon: File, color: '#8c8c8c' };
+}
diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx
index 7cddb6d..737fa42 100644
--- a/src/pages/AgentsPage.tsx
+++ b/src/pages/AgentsPage.tsx
@@ -1,14 +1,13 @@
import { useSearchParams } from 'react-router-dom';
import { useCallback, useRef, useState } from 'react';
+import { Input } from '@heroui/react';
import { useListNav } from '../hooks/useShortcuts';
import { DEFAULT_PER_PAGE, PER_PAGE_OPTIONS } from '../lib/constants';
import { useAgents } from '../hooks/useAgents';
-import { useRefreshKey } from '../hooks/useRefreshKey';
import { AgentList } from '../components/agents/AgentList';
import { RepoPagination } from '../components/repos/RepoPagination';
import { RepoHero } from '../components/repos/RepoHero';
import { MicroLabel } from '../components/ui/MicroLabel';
-import { Pill } from '../components/ui/Pill';
export default function AgentsPage() {
const [searchParams, setSearchParams] = useSearchParams();
@@ -19,8 +18,6 @@ export default function AgentsPage() {
const rawPer = Number(searchParams.get('per'));
const perPage = PER_PAGE_OPTIONS.includes(rawPer) ? rawPer : DEFAULT_PER_PAGE;
- const { refreshKey, refresh } = useRefreshKey();
-
const setParams = useCallback(
(updates: Record, replace = false) => {
setSearchParams(prev => {
@@ -39,7 +36,6 @@ export default function AgentsPage() {
page,
perPage,
search,
- refreshKey,
});
const listRef = useRef(null);
@@ -66,16 +62,12 @@ export default function AgentsPage() {
perPage={perPage}
windowStart={windowStart}
windowEnd={windowEnd}
- refreshing={loading}
- onRefresh={refresh}
- title="agents."
- indexLabel="agent index"
+ title="agents"
countNoun="agents"
- statLabel="agents"
description={
Registered identities on this gitlawb node. Every agent is a{' '}
- did:key — inspect capabilities, trust scores,
+ did:key — inspect capabilities, trust scores,
and jump to the repositories each agent owns.
}
@@ -88,9 +80,8 @@ export default function AgentsPage() {
- {
setSearchValue(e.target.value);
@@ -98,18 +89,15 @@ export default function AgentsPage() {
}}
placeholder="search by did or capability…"
autoComplete="off"
- spellCheck={false}
- className="w-full h-9 px-3 text-[13px] bg-transparent border border-border rounded-[2px]
- text-foreground placeholder:text-dim
- focus:outline-none focus-visible:ring-1 focus-visible:ring-warm focus:border-dim
- transition-colors"
+ spellCheck="false"
+ variant="secondary"
+ className="w-full h-9 px-3 rounded-[--radius]"
/>
{error ? (
- failed to load agents: {error}
- retry
+ failed to load agents: {error}
{error ? (
- failed to load events: {error}
- retry
+ failed to load events: {error}
{value}
- )}
- {note && {note} }
-
- );
-}
+import { Pill } from '../components/ui/Pill';
+import { Circle, Database, Users, Activity, Wifi } from 'lucide-react';
function PanelHeader({ label, children }: { label: string; children?: React.ReactNode }) {
return (
- {label}
+ {label}
{children}
);
@@ -59,12 +21,12 @@ function PanelHeader({ label, children }: { label: string; children?: React.Reac
function IdentityRow({ label, value, copy }: { label: string; value: string | null; copy?: string }) {
return (
- {label}
+ {label}
{value === null ? (
) : (
<>
- {value}
+ {value}
{copy && }
)}
@@ -73,9 +35,8 @@ function IdentityRow({ label, value, copy }: { label: string; value: string | nu
}
export default function HomePage() {
- const { refreshKey, refresh } = useRefreshKey();
const { node, stats, peers, p2p, events, tasks, recentRepos, loading, unreachable } =
- useNodeOverview(refreshKey);
+ useNodeOverview();
const online = node !== null || stats !== null;
const reachablePeers = peers?.filter(p => p.reachable).length;
@@ -87,102 +48,95 @@ export default function HomePage() {
const latestTasks = tasks?.slice(0, 4) ?? [];
return (
-
-
- {/* ── Hero ─────────────────────────────────────────────────────────── */}
-
-
- node overview
-
- {!loading && (
-
- ◆
- {online ? 'online' : 'offline'}
-
- )}
- {node?.version && v{node.version}}
-
-
- {loading ? 'refreshing' : 'refresh'}
-
-
+
+
+ {/* ── Header ────────────────────────────────────────────────────────── */}
+
+
+
+ {node?.network ?? 'gitlawb'} node
+
+
+ A federated git node — repos pushed by agents, certified per ref, gossiped over libp2p.
+
+
+ {!loading && (
+
+
+ {online ? 'online' : 'offline'}
+
+ )}
+ {node?.version && v{node.version}}
+
+
-
-
-
- gitlawb node.
-
-
-
- A federated git node on the {node?.network ?? 'gitlawb'}{' '}
- network. Repos are pushed by agents over signed HTTP, certified per ref update, and
- gossiped to peer nodes over libp2p.
-
-
-
-
-
-
- {node && node.protocols.length > 0 && (
-
- protocols
- {node.protocols.map(p => (
-
- {p}
-
- ))}
-
- )}
-
+ {/* ── Stats row ─────────────────────────────────────────────────────── */}
+
+
+
+
+ {stats ? stats.repos.toLocaleString() : loading ? : '—'}
-
- {/* Stat tiles */}
-
-
-
-
-
+ repositories
+
+
+
+
+ {stats ? stats.agents.toLocaleString() : loading ? : '—'}
-
-
+ agents
+
+
+
+
+ {peers ? peers.length.toLocaleString() : loading ? : '—'}
+
+
+ peers{reachablePeers !== undefined ? ` · ${reachablePeers} reachable` : ''}
+
+
+
+
+
+ {stats ? stats.pushes.toLocaleString() : loading ? : '—'}
+
+ pushes
+
+
{unreachable && (
-
- node unreachable — every endpoint failed to answer
- retry
+
+ node unreachable — every endpoint failed to answer
)}
+ {/* ── Identity ──────────────────────────────────────────────────────── */}
+
+ node identity
+
+
+ {node && node.protocols.length > 0 && (
+
+ protocols
+ {node.protocols.map(p => (
+
+ {p}
+
+ ))}
+
+ )}
+
+
{/* ── Panels ───────────────────────────────────────────────────────── */}
-
+
{/* Recent activity */}
-
+
view all →
@@ -196,64 +150,66 @@ export default function HomePage() {
{/* Agent tasks */}
-
+
view all →
{taskCounts.map(({ status, count }, i) => (
- 0 && 'border-l border-border-inner')}>
- ◆
+ 0 && 'border-l border-separator')}>
+
+
+
{tasks ? count : '—'}
- {status}
+ {status}
))}
{latestTasks.length > 0 && (
- | | |