Role split and owner gating

src/components/packages/package-card.tsx

@@ -10,9 +10,18 @@ interface Props {
   status?: "pending" | "active" | "error";
   tenantName: string;
   onToggled: () => void;
+  /** Slice 5: when false, the enable/disable button is hidden. */
+  canEdit?: boolean;
 }
 
-export function PackageCard({ pkg, enabled, status, tenantName, onToggled }: Props) {
+export function PackageCard({
+  pkg,
+  enabled,
+  status,
+  tenantName,
+  onToggled,
+  canEdit = true,
+}: Props) {
   const t = useTranslations();
   const [showModal, setShowModal] = useState(false);
   const [secrets, setSecrets] = useState<Record<string, string>>({});
@@ -113,17 +122,27 @@ export function PackageCard({ pkg, enabled, status, tenantName, onToggled }: Pro
           {pkg.requiresSecrets && (
             <span className="text-[10px] text-text-muted">{t("packages.requiresApiKey")}</span>
           )}
-          <button
-            onClick={enabled ? () => togglePackage(false) : handleEnable}
-            disabled={saving}
-            className={`ml-auto rounded-lg px-3 py-1.5 text-xs font-medium transition-all cursor-pointer ${
-              enabled
-                ? "bg-surface-3 text-text-secondary hover:text-text-primary hover:bg-surface-2"
-                : "bg-accent text-surface-0 hover:bg-accent-dim shadow-lg shadow-accent/20"
-            } disabled:opacity-50`}
-          >
-            {saving ? "…" : enabled ? t("packages.disable") : t("packages.enable")}
-          </button>
+          {canEdit ? (
+            <button
+              onClick={enabled ? () => togglePackage(false) : handleEnable}
+              disabled={saving}
+              className={`ml-auto rounded-lg px-3 py-1.5 text-xs font-medium transition-all cursor-pointer ${
+                enabled
+                  ? "bg-surface-3 text-text-secondary hover:text-text-primary hover:bg-surface-2"
+                  : "bg-accent text-surface-0 hover:bg-accent-dim shadow-lg shadow-accent/20"
+              } disabled:opacity-50`}
+            >
+              {saving ? "…" : enabled ? t("packages.disable") : t("packages.enable")}
+            </button>
+          ) : (
+            // Slice 5: read-only viewers see a static badge instead of a
+            // toggle. The status badge above the divider already conveys
+            // "active/pending/error"; this just clarifies "you can't change
+            // it" without duplicating the status colour.
+            <span className="ml-auto text-[10px] text-text-muted italic">
+              {enabled ? t("packages.statusEnabled") : t("packages.statusDisabled")}
+            </span>
+          )}
         </div>
       </div>