feat: configurable UI base path via BASE_PATH build arg (#58)

Serves the UI under /ui instead of /. This pairs with the argocd route simplification (argocd-apps#201) where /ui → UI service and everything else → API.

- Vite: `base` set from `BASE_PATH` env var at build time
- React Router: `basename` set from injected `__BASE_PATH__`
- Nginx: location block uses `${BASE_PATH}`, substituted by sed at build
- Dockerfile: `ARG BASE_PATH=/` (default preserves existing behavior)
- Woodpecker: passes `BASE_PATH=/ui` to docker-web build

Tested: assets serve at `/ui/assets/...`, SPA routing works at `/ui/remotes`, etc.
Reviewed-on: #58
Co-authored-by: Ben Vincent <ben@unkin.net>
Co-committed-by: Ben Vincent <ben@unkin.net>

.pre-commit-config.yaml

@@ -0,0 +1,24 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+      - id: end-of-file-fixer
+      - id: check-yaml
+      - id: check-added-large-files
+      - id: check-merge-conflict
+
+  - repo: https://github.com/dnephin/pre-commit-golang
+    rev: v0.5.1
+    hooks:
+      - id: go-fmt
+      - id: go-mod-tidy
+
+  - repo: local
+    hooks:
+      - id: go-vet
+        name: go vet
+        entry: go vet ./...
+        language: system
+        types: [go]
+        pass_filenames: false

.woodpecker/docker.yaml

@@ -22,6 +22,8 @@ steps:
       repo: git.unkin.net/unkin/artifactapi-ui
       dockerfile: ui/Dockerfile.ui
       context: ui
+      build_args:
+        - BASE_PATH=/ui
       username: droneci
       password:
         from_secret: DRONECI_PASSWORD

.woodpecker/pre-commit.yaml

@@ -3,7 +3,15 @@ when:
 
 steps:
   - name: pre-commit
-    image: golang:1.25
+    image: git.unkin.net/unkin/almalinux9-gobuilder:20260606
     commands:
-      - test -z "$(gofmt -l .)"
-      - go vet ./...
+      - uvx pre-commit run --all-files
+    backend_options:
+      kubernetes:
+        resources:
+          requests:
+            memory: 512Mi
+            cpu: 1
+          limits:
+            memory: 2Gi
+            cpu: 2

internal/api/v1/proxy.go

@@ -37,6 +37,20 @@ func (h *ProxyHandler) Routes() chi.Router {
 	return r
 }
 
+func (h *ProxyHandler) DockerV2Routes() chi.Router {
+	r := chi.NewRouter()
+	r.Get("/", h.handleDockerPing)
+	r.Head("/", h.handleDockerPing)
+	r.Get("/{remoteName}/*", h.handleProxy)
+	r.Head("/{remoteName}/*", h.handleProxy)
+	return r
+}
+
+func (h *ProxyHandler) handleDockerPing(w http.ResponseWriter, r *http.Request) {
+	w.Header().Set("Docker-Distribution-Api-Version", "registry/2.0")
+	w.WriteHeader(http.StatusOK)
+}
+
 func (h *ProxyHandler) handleProxy(w http.ResponseWriter, r *http.Request) {
 	remoteName := chi.URLParam(r, "remoteName")
 	path := chi.URLParam(r, "*")

internal/database/rpm_metadata.go

@@ -33,29 +33,29 @@ func (db *DB) InsertRPMMetadata(ctx context.Context, meta *provider.RPMMetadata)
 }
 
 type RPMMetadataRow struct {
-	RepoName    string
-	FilePath    string
-	ContentHash string
-	Name        string
-	Epoch       int
-	Version     string
-	Release     string
-	Arch        string
-	Summary     string
-	Description string
-	RPMSize     int64
+	RepoName      string
+	FilePath      string
+	ContentHash   string
+	Name          string
+	Epoch         int
+	Version       string
+	Release       string
+	Arch          string
+	Summary       string
+	Description   string
+	RPMSize       int64
 	InstalledSize int64
-	License     string
-	Vendor      string
-	Group       string
-	BuildHost   string
-	SourceRPM   string
-	URL         string
-	Packager    string
-	Requires    json.RawMessage
-	Provides    json.RawMessage
-	Files       json.RawMessage
-	Changelogs  json.RawMessage
+	License       string
+	Vendor        string
+	Group         string
+	BuildHost     string
+	SourceRPM     string
+	URL           string
+	Packager      string
+	Requires      json.RawMessage
+	Provides      json.RawMessage
+	Files         json.RawMessage
+	Changelogs    json.RawMessage
 }
 
 func (db *DB) ListRPMMetadataEntries(ctx context.Context, repoName string) ([]provider.RPMMetadata, error) {

internal/server/server.go

@@ -96,6 +96,7 @@ func (s *Server) routes() chi.Router {
 
 	proxyHandler := v1.NewProxyHandler(s.engine, s.virtEngine, s.db, s.store, s.localHandler)
 	r.Mount("/api/v1", proxyHandler.Routes())
+	r.Mount("/v2", proxyHandler.DockerV2Routes())
 
 	remotesHandler := v2.NewRemotesHandler(s.db)
 	virtualsHandler := v2.NewVirtualsHandler(s.db)

internal/virtual/engine.go

@@ -79,7 +79,7 @@ func (e *Engine) fetchMemberIndexes(ctx context.Context, virt models.Virtual, pa
 					results[idx] = result{err: fmt.Errorf("local index %q: %w", name, err)}
 					return
 				}
-				results[idx] = result{index: MemberIndex{RemoteName: name, RepoType: remote.RepoType, Body: body}}
+				results[idx] = result{index: MemberIndex{RemoteName: name, RepoType: remote.RepoType, BaseURL: remote.BaseURL, Body: body}}
 				return
 			}
 
@@ -102,7 +102,7 @@ func (e *Engine) fetchMemberIndexes(ctx context.Context, virt models.Virtual, pa
 				return
 			}
 
-			results[idx] = result{index: MemberIndex{RemoteName: name, RepoType: remote.RepoType, Body: body}}
+			results[idx] = result{index: MemberIndex{RemoteName: name, RepoType: remote.RepoType, BaseURL: remote.BaseURL, Body: body}}
 		}(i, memberName)
 	}
 

internal/virtual/helm_merger.go

@@ -54,15 +54,26 @@ func (m *HelmMerger) MergeIndexes(members []MemberIndex, proxyBaseURL string) ([
 				seen[chart][ver.Version] = true
 
 				if proxyBaseURL != "" {
+					routePrefix := "remote"
+					if member.RepoType == "local" {
+						routePrefix = "local"
+					}
+					baseHost := extractHost(member.BaseURL)
+
 					for i, u := range ver.URLs {
 						if strings.HasPrefix(u, "http://") || strings.HasPrefix(u, "https://") {
-							ver.URLs[i] = fmt.Sprintf("%s/api/v1/remote/%s/%s",
+							if baseHost != "" && extractHost(u) != baseHost {
+								continue
+							}
+							ver.URLs[i] = fmt.Sprintf("%s/api/v1/%s/%s/%s",
 								strings.TrimRight(proxyBaseURL, "/"),
+								routePrefix,
 								member.RemoteName,
 								extractPath(u))
 						} else {
-							ver.URLs[i] = fmt.Sprintf("%s/api/v1/remote/%s/%s",
+							ver.URLs[i] = fmt.Sprintf("%s/api/v1/%s/%s/%s",
 								strings.TrimRight(proxyBaseURL, "/"),
+								routePrefix,
 								member.RemoteName,
 								u)
 						}
@@ -78,6 +89,19 @@ func (m *HelmMerger) MergeIndexes(members []MemberIndex, proxyBaseURL string) ([
 	return yaml.Marshal(merged)
 }
 
+func extractHost(rawURL string) string {
+	idx := strings.Index(rawURL, "://")
+	if idx == -1 {
+		return ""
+	}
+	rest := rawURL[idx+3:]
+	slashIdx := strings.Index(rest, "/")
+	if slashIdx == -1 {
+		return rest
+	}
+	return rest[:slashIdx]
+}
+
 func extractPath(rawURL string) string {
 	idx := strings.Index(rawURL, "://")
 	if idx == -1 {

internal/virtual/merger.go

@@ -9,6 +9,7 @@ import (
 type MemberIndex struct {
 	RemoteName string
 	RepoType   models.RepoType
+	BaseURL    string
 	Body       []byte
 }
 

ui/Dockerfile.ui

@@ -6,13 +6,20 @@ COPY package.json package-lock.json* ./
 RUN npm ci
 
 COPY . .
+
+ARG BASE_PATH=/
+ENV BASE_PATH=${BASE_PATH}
 RUN npm run build
 
 FROM nginx:alpine
 
+ARG BASE_PATH=/
+
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 
+RUN sed -i "s|\${BASE_PATH}|${BASE_PATH}|g" /etc/nginx/conf.d/default.conf
+
 EXPOSE 80
 
 CMD ["nginx", "-g", "daemon off;"]

ui/nginx.conf

@@ -5,33 +5,7 @@ server {
     root /usr/share/nginx/html;
     index index.html;
 
-    location /api/ {
-        proxy_pass http://artifactapi:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_buffering off;
-    }
-
-    location /v2/ {
-        proxy_pass http://artifactapi:8000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
-        proxy_buffering off;
-    }
-
-    location /health {
-        proxy_pass http://artifactapi:8000;
-    }
-
-    location /metrics {
-        proxy_pass http://artifactapi:8000;
-    }
-
-    location / {
+    location ${BASE_PATH} {
         try_files $uri $uri/ /index.html;
     }
 }

ui/src/App.tsx

@@ -2,6 +2,8 @@ import { Routes, Route, NavLink } from 'react-router-dom';
 import { Dashboard } from './pages/Dashboard';
 import { Remotes } from './pages/Remotes';
 import { RemoteDetail } from './pages/RemoteDetail';
+import { Locals } from './pages/Locals';
+import { LocalDetail } from './pages/LocalDetail';
 import { Virtuals } from './pages/Virtuals';
 import { Objects } from './pages/Objects';
 import { Probe } from './pages/Probe';
@@ -18,6 +20,7 @@ export function App() {
         <div className="sidebar-nav">
           <NavLink to="/" end>Dashboard</NavLink>
           <NavLink to="/remotes">Remotes</NavLink>
+          <NavLink to="/locals">Locals</NavLink>
           <NavLink to="/virtuals">Virtuals</NavLink>
           <NavLink to="/probe">Test Remote</NavLink>
         </div>
@@ -31,6 +34,9 @@ export function App() {
           <Route path="/remotes" element={<Remotes />} />
           <Route path="/remotes/:name" element={<RemoteDetail />} />
           <Route path="/remotes/:name/objects" element={<Objects />} />
+          <Route path="/locals" element={<Locals />} />
+          <Route path="/locals/:name" element={<LocalDetail />} />
+          <Route path="/locals/:name/objects" element={<Objects />} />
           <Route path="/virtuals" element={<Virtuals />} />
           <Route path="/probe" element={<Probe />} />
         </Routes>

ui/src/main.tsx

@@ -4,9 +4,13 @@ import { BrowserRouter } from 'react-router-dom';
 import { App } from './App';
 import './index.css';
 
+declare const __BASE_PATH__: string;
+
+const basename = __BASE_PATH__.replace(/\/+$/, '') || '/';
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename={basename}>
       <App />
     </BrowserRouter>
   </StrictMode>,

ui/src/pages/LocalDetail.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { api } from '../api/client';
+import type { Remote } from '../api/types';
+import { Badge } from '../components/Badge';
+import './RemoteDetail.css';
+
+export function LocalDetail() {
+  const { name } = useParams<{ name: string }>();
+  const [remote, setRemote] = useState<Remote | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!name) return;
+    api.getRemote(name)
+      .then(setRemote)
+      .catch(e => setError(e.message));
+  }, [name]);
+
+  if (error) return <div className="error-banner">{error}</div>;
+  if (!remote) return <div className="loading">Loading...</div>;
+
+  return (
+    <div>
+      <div className="detail-header">
+        <Link to="/locals" className="back-link">&larr; Locals</Link>
+        <h1 className="page-title">{remote.name}</h1>
+        <div className="detail-badges">
+          <Badge variant="blue">{remote.package_type}</Badge>
+          <Badge variant="default">local</Badge>
+          {remote.managed_by && <Badge variant="green">managed by {remote.managed_by}</Badge>}
+        </div>
+      </div>
+
+      {remote.description && (
+        <p className="detail-description">{remote.description}</p>
+      )}
+
+      <div className="detail-actions">
+        <Link to={`/locals/${remote.name}/objects`} className="btn btn-primary">
+          Browse Files
+        </Link>
+      </div>
+    </div>
+  );
+}

ui/src/pages/Locals.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../api/client';
+import type { Remote } from '../api/types';
+import { Badge } from '../components/Badge';
+import { DataTable } from '../components/DataTable';
+import './Remotes.css';
+
+const typeColors: Record<string, 'blue' | 'green' | 'yellow' | 'red' | 'default'> = {
+  docker: 'blue',
+  helm: 'green',
+  rpm: 'yellow',
+  pypi: 'blue',
+  npm: 'red',
+  generic: 'default',
+  alpine: 'green',
+  puppet: 'yellow',
+  terraform: 'blue',
+  goproxy: 'green',
+};
+
+export function Locals() {
+  const navigate = useNavigate();
+  const [remotes, setRemotes] = useState<Remote[]>([]);
+  const [filter, setFilter] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.listRemotes()
+      .then(r => setRemotes((r || []).filter(x => x.repo_type === 'local')))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const filtered = remotes.filter(r => {
+    if (filter && !r.name.toLowerCase().includes(filter.toLowerCase())) return false;
+    return true;
+  });
+
+  return (
+    <div>
+      <h1 className="page-title">Local Repositories</h1>
+
+      <div className="remotes-toolbar">
+        <input
+          className="search-input"
+          placeholder="Filter by name..."
+          value={filter}
+          onChange={e => setFilter(e.target.value)}
+        />
+        <span className="result-count">{filtered.length} locals</span>
+      </div>
+
+      {loading ? (
+        <div className="loading">Loading...</div>
+      ) : (
+        <DataTable
+          columns={[
+            {
+              key: 'name',
+              header: 'Name',
+              render: (r: Remote) => <span className="mono">{r.name}</span>,
+            },
+            {
+              key: 'type',
+              header: 'Type',
+              render: (r: Remote) => (
+                <Badge variant={typeColors[r.package_type] || 'default'}>
+                  {r.package_type}
+                </Badge>
+              ),
+              width: '110px',
+            },
+            {
+              key: 'description',
+              header: 'Description',
+              render: (r: Remote) => r.description || <span className="text-muted">—</span>,
+            },
+            {
+              key: 'managed',
+              header: 'Managed',
+              render: (r: Remote) =>
+                r.managed_by ? <Badge variant="blue">{r.managed_by}</Badge> : <span className="text-muted">—</span>,
+              width: '100px',
+            },
+          ]}
+          data={filtered}
+          emptyMessage="No local repositories configured"
+          onRowClick={(r) => navigate(`/locals/${r.name}`)}
+        />
+      )}
+    </div>
+  );
+}

ui/src/pages/Objects.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState, useCallback, useMemo } from 'react';
-import { useParams, Link } from 'react-router-dom';
+import { useParams, useLocation, Link } from 'react-router-dom';
 import { api } from '../api/client';
 import type { Artifact } from '../api/types';
 import { formatBytes, timeAgo, truncateHash } from '../components/format';
@@ -171,6 +171,9 @@ function TreeRow({ node, depth, expanded, onToggle, onEvict }: TreeRowProps) {
 
 export function Objects() {
   const { name } = useParams<{ name: string }>();
+  const location = useLocation();
+  const isLocal = location.pathname.startsWith('/locals/');
+  const backLink = isLocal ? `/locals/${name}` : `/remotes/${name}`;
   const [artifacts, setArtifacts] = useState<Artifact[]>([]);
   const [loading, setLoading] = useState(true);
   const [filter, setFilter] = useState('');
@@ -233,7 +236,7 @@ export function Objects() {
   return (
     <div>
       <div className="detail-header">
-        <Link to={`/remotes/${name}`} className="back-link">&larr; {name}</Link>
+        <Link to={backLink} className="back-link">&larr; {name}</Link>
         <h1 className="page-title">Cached Objects</h1>
       </div>
 

ui/src/pages/Remotes.tsx

@@ -32,9 +32,10 @@ export function Remotes() {
       .finally(() => setLoading(false));
   }, []);
 
-  const types = [...new Set(remotes.map(r => r.package_type))].sort();
+  const remoteOnly = remotes.filter(r => r.repo_type !== 'local');
+  const types = [...new Set(remoteOnly.map(r => r.package_type))].sort();
 
-  const filtered = remotes.filter(r => {
+  const filtered = remoteOnly.filter(r => {
     if (typeFilter && r.package_type !== typeFilter) return false;
     if (filter && !r.name.toLowerCase().includes(filter.toLowerCase())) return false;
     return true;

ui/src/pages/Virtuals.tsx

@@ -1,21 +1,38 @@
 import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
 import { api } from '../api/client';
-import type { Virtual } from '../api/types';
+import type { Remote, Virtual } from '../api/types';
 import { Badge } from '../components/Badge';
 import { DataTable } from '../components/DataTable';
 import './Virtuals.css';
 
 export function Virtuals() {
   const [virtuals, setVirtuals] = useState<Virtual[]>([]);
+  const [remoteMap, setRemoteMap] = useState<Record<string, Remote>>({});
   const [loading, setLoading] = useState(true);
   const [expanded, setExpanded] = useState<string | null>(null);
 
   useEffect(() => {
-    api.listVirtuals()
-      .then(v => setVirtuals(v || []))
+    Promise.all([api.listVirtuals(), api.listRemotes()])
+      .then(([v, r]) => {
+        setVirtuals(v || []);
+        const map: Record<string, Remote> = {};
+        for (const remote of r || []) {
+          map[remote.name] = remote;
+        }
+        setRemoteMap(map);
+      })
       .finally(() => setLoading(false));
   }, []);
 
+  function memberLink(name: string) {
+    const remote = remoteMap[name];
+    if (remote?.repo_type === 'local') {
+      return `/locals/${name}`;
+    }
+    return `/remotes/${name}`;
+  }
+
   return (
     <div>
       <h1 className="page-title">Virtual Repositories</h1>
@@ -40,7 +57,7 @@ export function Virtuals() {
               key: 'members',
               header: 'Members',
               render: (v: Virtual) => (
-                <span className="member-count">{v.members?.length || 0} remotes</span>
+                <span className="member-count">{v.members?.length || 0} repos</span>
               ),
               width: '110px',
             },
@@ -69,12 +86,17 @@ export function Virtuals() {
           <ul className="member-list">
             {virtuals
               .find(v => v.name === expanded)
-              ?.members?.map((m, i) => (
-                <li key={m}>
-                  <span className="member-priority">{i + 1}</span>
-                  <a href={`/remotes/${m}`} className="mono">{m}</a>
-                </li>
-              ))}
+              ?.members?.map((m, i) => {
+                const remote = remoteMap[m];
+                const typeLabel = remote?.repo_type === 'local' ? 'local' : 'remote';
+                return (
+                  <li key={m}>
+                    <span className="member-priority">{i + 1}</span>
+                    <Link to={memberLink(m)} className="mono">{m}</Link>
+                    <Badge variant={typeLabel === 'local' ? 'yellow' : 'default'}>{typeLabel}</Badge>
+                  </li>
+                );
+              })}
           </ul>
         </div>
       )}

ui/vite.config.ts

@@ -1,7 +1,10 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
+const basePath = process.env.BASE_PATH || '/'
+
 export default defineConfig({
+  base: basePath,
   plugins: [react()],
   server: {
     proxy: {
@@ -11,4 +14,7 @@ export default defineConfig({
       '/metrics': 'http://localhost:8000',
     },
   },
+  define: {
+    '__BASE_PATH__': JSON.stringify(basePath),
+  },
 })