Role split and owner gating

src/components/channel-users/channel-users.tsx

@@ -17,12 +17,15 @@ interface ChannelUsersProps {
   enabledChannels: string[];
   /** Current channelUsers from the PiecedTenant spec */
   initialChannelUsers: Record<string, string[]>;
+  /** Slice 5: when false, add inputs and remove ✕ buttons are hidden. */
+  canEdit?: boolean;
 }
 
 export function ChannelUsers({
   tenantName,
   enabledChannels,
   initialChannelUsers,
+  canEdit = true,
 }: ChannelUsersProps) {
   const t = useTranslations("channelUsers");
   const router = useRouter();
@@ -146,44 +149,48 @@ export function ChannelUsers({
                     className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full"
                   >
                     {userId}
-                    <button
-                      onClick={() => handleRemove(channel, userId)}
-                      disabled={saving}
-                      className="text-accent/60 hover:text-red-400 transition-colors disabled:opacity-50"
-                      title={t("remove")}
-                    >
-                      ✕
-                    </button>
+                    {canEdit && (
+                      <button
+                        onClick={() => handleRemove(channel, userId)}
+                        disabled={saving}
+                        className="text-accent/60 hover:text-red-400 transition-colors disabled:opacity-50"
+                        title={t("remove")}
+                      >
+                        ✕
+                      </button>
+                    )}
                   </span>
                 ))}
               </div>
             )}
 
-            {/* Add user */}
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={inputValues[channel] || ""}
-                onChange={(e) =>
-                  setInputValues((prev) => ({
-                    ...prev,
-                    [channel]: e.target.value,
-                  }))
-                }
-                onKeyDown={(e) => {
-                  if (e.key === "Enter") handleAdd(channel);
-                }}
-                placeholder={t("placeholder")}
-                className="flex-1 px-3 py-2 bg-surface-1 border border-border rounded-lg text-sm text-text-primary font-mono placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
-              />
-              <button
-                onClick={() => handleAdd(channel)}
-                disabled={saving || !inputValues[channel]?.trim()}
-                className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {saving ? "…" : t("add")}
-              </button>
-            </div>
+            {/* Add user — hidden in read-only mode */}
+            {canEdit && (
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={inputValues[channel] || ""}
+                  onChange={(e) =>
+                    setInputValues((prev) => ({
+                      ...prev,
+                      [channel]: e.target.value,
+                    }))
+                  }
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") handleAdd(channel);
+                  }}
+                  placeholder={t("placeholder")}
+                  className="flex-1 px-3 py-2 bg-surface-1 border border-border rounded-lg text-sm text-text-primary font-mono placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent transition-colors"
+                />
+                <button
+                  onClick={() => handleAdd(channel)}
+                  disabled={saving || !inputValues[channel]?.trim()}
+                  className="px-4 py-2 text-sm font-medium bg-accent text-white rounded-lg hover:bg-accent-dim transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  {saving ? "…" : t("add")}
+                </button>
+              </div>
+            )}
           </div>
         );
       })}

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>
 

src/components/packages/package-list.tsx

@@ -10,6 +10,8 @@ interface Props {
   enabledPackages: string[];
   conditions?: Array<{ type: string; status: string; reason?: string }>;
   onRefresh?: () => void;
+  /** Slice 5: when false, package toggles and edit affordances are hidden. */
+  canEdit?: boolean;
 }
 
 const CATEGORIES = [
@@ -30,7 +32,13 @@ function getPackageStatus(
   return "error";
 }
 
-export function PackageList({ tenantName, enabledPackages, conditions, onRefresh }: Props) {
+export function PackageList({
+  tenantName,
+  enabledPackages,
+  conditions,
+  onRefresh,
+  canEdit = true,
+}: Props) {
   const t = useTranslations("packages");
   const router = useRouter();
   const handleRefresh = onRefresh || (() => router.refresh());
@@ -55,6 +63,7 @@ export function PackageList({ tenantName, enabledPackages, conditions, onRefresh
                   status={getPackageStatus(pkg.id, enabledPackages.includes(pkg.id), conditions)}
                   tenantName={tenantName}
                   onToggled={handleRefresh}
+                  canEdit={canEdit}
                 />
               ))}
             </div>

src/components/packages/workspace-editor.tsx

@@ -8,9 +8,11 @@ const FILE_TABS = ["SOUL.md", "AGENTS.md", "TOOLS.md"] as const;
 interface Props {
   tenantName: string;
   files: Record<string, string>;
+  /** Slice 5: when false, save button hidden and textarea is read-only. */
+  canEdit?: boolean;
 }
 
-export function WorkspaceEditor({ tenantName, files }: Props) {
+export function WorkspaceEditor({ tenantName, files, canEdit = true }: Props) {
   const t = useTranslations("workspace");
   const [activeTab, setActiveTab] = useState<string>("SOUL.md");
   const [localFiles, setLocalFiles] = useState<Record<string, string>>(files);
@@ -19,6 +21,7 @@ export function WorkspaceEditor({ tenantName, files }: Props) {
   const [error, setError] = useState<string | null>(null);
 
   function handleChange(content: string) {
+    if (!canEdit) return;
     setLocalFiles((prev) => ({ ...prev, [activeTab]: content }));
     setDirty(true);
   }
@@ -62,20 +65,25 @@ export function WorkspaceEditor({ tenantName, files }: Props) {
             </button>
           ))}
         </div>
-        <button
-          onClick={handleSave}
-          disabled={!dirty || saving}
-          className="rounded-lg bg-accent px-3 py-1 text-xs font-medium text-surface-0 hover:bg-accent-dim disabled:opacity-40 cursor-pointer"
-        >
-          {saving ? "…" : t("save")}
-        </button>
+        {canEdit && (
+          <button
+            onClick={handleSave}
+            disabled={!dirty || saving}
+            className="rounded-lg bg-accent px-3 py-1 text-xs font-medium text-surface-0 hover:bg-accent-dim disabled:opacity-40 cursor-pointer"
+          >
+            {saving ? "…" : t("save")}
+          </button>
+        )}
       </div>
 
       <textarea
         value={localFiles[activeTab] || ""}
         onChange={(e) => handleChange(e.target.value)}
+        readOnly={!canEdit}
         spellCheck={false}
-        className="w-full min-h-[300px] resize-y bg-transparent p-4 font-mono text-sm text-text-secondary placeholder:text-text-muted focus:outline-none"
+        className={`w-full min-h-[300px] resize-y bg-transparent p-4 font-mono text-sm text-text-secondary placeholder:text-text-muted focus:outline-none ${
+          !canEdit ? "cursor-default" : ""
+        }`}
         placeholder={t("placeholder", { file: activeTab })}
       />