let’s make it role-based (you + managers) and surface it cleanly in an Admin Dashboard. Here’s the tight setup:

Backend: role keys + guards
1) Secrets (Replit → Secrets)

Set two keys:

OWNER_KEY — just for you

MANAGER_KEY — for trusted managers

2) Middleware: auth + role guard

server/middleware/auth.ts

import { Request, Response, NextFunction } from "express";

export type Role = "owner" | "manager";
declare global { namespace Express { interface Request { role?: Role } } }

export function authWithKey(req: Request, res: Response, next: NextFunction) {
  const k = req.header("x-admin-key");
  const owner = process.env.OWNER_KEY;
  const manager = process.env.MANAGER_KEY;
  if (!k) return res.status(401).json({ error: "Missing admin key" });
  if (owner && k === owner) { req.role = "owner"; return next(); }
  if (manager && k === manager) { req.role = "manager"; return next(); }
  return res.status(403).json({ error: "Invalid key" });
}

export function requireRole(...allowed: Role[]) {
  return (req: Request, res: Response, next: NextFunction) => {
    if (!req.role) return res.status(401).json({ error: "Unauthenticated" });
    if (!allowed.includes(req.role)) return res.status(403).json({ error: "Forbidden" });
    next();
  };
}

3) Apply guards to routes

server/server.ts

import { authWithKey, requireRole } from "./middleware/auth";
import importIconsRoute from "./api/icons/import-from-screenshot";
import iconQueueRoute from "./api/icons/label-queue";

// Everything below is private to owner+manager
app.use("/api/icons/import-from-screenshot", authWithKey, requireRole("owner","manager"), importIconsRoute);
app.use("/api/icons", authWithKey, requireRole("owner","manager"), iconQueueRoute);

// (Optional) public read-only listing for the icon library UI:
// app.use("/api/icons/public", readOnlyIconsRoute);


You can get fancy later (e.g., only owners can delete from queue), by applying requireRole("owner") on just those endpoints.

Frontend: role + key storage, Admin Dashboard
1) Tiny client “session” helper

src/admin/useAdminSession.ts

export type Role = "owner" | "manager" | null;

export function getAdminKey(): string { return localStorage.getItem("adminKey") || ""; }
export function getAdminRole(): Role {
  const r = localStorage.getItem("adminRole"); return (r === "owner" || r === "manager") ? r : null;
}
export function setAdminSession(role: "owner"|"manager", key: string) {
  localStorage.setItem("adminRole", role);
  localStorage.setItem("adminKey", key);
}
export function clearAdminSession() {
  localStorage.removeItem("adminRole");
  localStorage.removeItem("adminKey");
}

2) Admin Dashboard page

src/pages/admin/AdminDashboard.tsx

import React, { useState } from "react";
import { getAdminRole, getAdminKey, setAdminSession, clearAdminSession } from "../../admin/useAdminSession";
import { Link } from "react-router-dom";

export default function AdminDashboard() {
  const [role, setRole] = useState(getAdminRole());
  const [key, setKey] = useState(getAdminKey());

  function save() {
    if (!key) { alert("Enter your admin key"); return; }
    const r = (document.getElementById("roleSel") as HTMLSelectElement).value as "owner"|"manager";
    setAdminSession(r, key);
    setRole(r);
    alert("Admin session saved");
  }
  function signOut() { clearAdminSession(); setRole(null); setKey(""); }

  const authed = !!role && !!key;

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">Admin Dashboard</h1>

      <div className="rounded-xl border border-white/10 bg-slate-900/60 p-4 space-y-3 max-w-xl">
        <div className="text-sm text-slate-400">Sign in to admin</div>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <label className="text-xs">Role
            <select id="roleSel" defaultValue={role || "manager"} className="mt-1 w-full rounded bg-slate-950/60 border border-white/10 p-2 text-sm">
              <option value="manager">Manager</option>
              <option value="owner">Owner</option>
            </select>
          </label>
          <label className="text-xs sm:col-span-2">Admin Key
            <input value={key} onChange={(e)=>setKey(e.target.value)}
              placeholder="Paste secret key"
              className="mt-1 w-full rounded bg-slate-950/60 border border-white/10 p-2 text-sm" />
          </label>
        </div>
        <div className="flex gap-2">
          <button onClick={save} className="px-4 py-2 rounded-lg bg-emerald-600 hover:bg-emerald-700 text-white">Save</button>
          <button onClick={signOut} className="px-4 py-2 rounded-lg border border-white/10 hover:bg-white/5">Sign out</button>
        </div>
      </div>

      {authed ? (
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
          {/* Shared tiles (owner + manager) */}
          <AdminTile title="Icon Importer" to="/admin/icon-importer" desc="Upload screenshot → slice → vectorize SVGs" />
          <AdminTile title="Icon Labeler"  to="/admin/icon-labeler"  desc="Name + tag queued icons → publish" />
          {/* Owner-only examples */}
          {role === "owner" && (
            <>
              <AdminTile title="System Settings" to="/admin/settings" desc="(owner) environment & secrets" disabled />
              <AdminTile title="Audit Logs" to="/admin/logs" desc="(owner) recent admin actions" disabled />
            </>
          )}
        </div>
      ) : (
        <p className="text-sm text-slate-400">Enter your role and key to access admin tools.</p>
      )}
    </div>
  );
}

function AdminTile({ title, to, desc, disabled=false }: {title: string; to: string; desc: string; disabled?: boolean}) {
  const content = (
    <div className={`rounded-xl border p-4 ${disabled ? "border-white/10 bg-slate-900/40 opacity-60" : "border-white/10 bg-slate-900/60 hover:bg-white/5"}`}>
      <div className="font-medium">{title}</div>
      <div className="text-xs text-slate-400 mt-1">{desc}</div>
    </div>
  );
  return disabled ? content : <Link to={to}>{content}</Link>;
}