All the channel approval

deploy/patch-i18n-channel-users.mjs

@@ -0,0 +1,66 @@
+#!/usr/bin/env node
+/**
+ * Run: node patch-i18n-channel-users.mjs
+ * Adds channelUsers i18n keys to all 4 message files.
+ * Run from the pieced-portal root.
+ */
+import { readFileSync, writeFileSync } from "fs";
+
+const newKeys = {
+  en: {
+    title: "Authorized Users",
+    description: "Manage which users can interact with your assistant on each channel. Add their numeric user ID to authorize access.",
+    users: "users",
+    placeholder: "Enter numeric user ID…",
+    add: "Add",
+    remove: "Remove",
+    alreadyAdded: "This user ID is already authorized.",
+    telegramIdHelp: "To find your Telegram user ID:\n1. Open Telegram and message @userinfobot\n2. It instantly replies with your numeric ID\n3. Enter that number here",
+    discordIdHelp: "To find your Discord user ID:\n1. Enable Developer Mode in Discord settings (Advanced)\n2. Right-click your name → Copy User ID\n3. Enter that number here",
+    emailIdHelp: "Enter the email address that should be authorized to interact with the assistant.",
+  },
+  de: {
+    title: "Autorisierte Benutzer",
+    description: "Verwalten Sie, welche Benutzer mit Ihrem Assistenten auf jedem Kanal interagieren können. Fügen Sie die numerische Benutzer-ID hinzu, um den Zugang zu autorisieren.",
+    users: "Benutzer",
+    placeholder: "Numerische Benutzer-ID eingeben…",
+    add: "Hinzufügen",
+    remove: "Entfernen",
+    alreadyAdded: "Diese Benutzer-ID ist bereits autorisiert.",
+    telegramIdHelp: "So finden Sie Ihre Telegram-Benutzer-ID:\n1. Öffnen Sie Telegram und schreiben Sie @userinfobot\n2. Der Bot antwortet sofort mit Ihrer numerischen ID\n3. Geben Sie diese Nummer hier ein",
+    discordIdHelp: "So finden Sie Ihre Discord-Benutzer-ID:\n1. Aktivieren Sie den Entwicklermodus in den Discord-Einstellungen (Erweitert)\n2. Rechtsklick auf Ihren Namen → Benutzer-ID kopieren\n3. Geben Sie diese Nummer hier ein",
+    emailIdHelp: "Geben Sie die E-Mail-Adresse ein, die zur Interaktion mit dem Assistenten autorisiert werden soll.",
+  },
+  fr: {
+    title: "Utilisateurs autorisés",
+    description: "Gérez les utilisateurs pouvant interagir avec votre assistant sur chaque canal. Ajoutez leur identifiant numérique pour autoriser l'accès.",
+    users: "utilisateurs",
+    placeholder: "Entrez l'identifiant numérique…",
+    add: "Ajouter",
+    remove: "Supprimer",
+    alreadyAdded: "Cet identifiant est déjà autorisé.",
+    telegramIdHelp: "Pour trouver votre identifiant Telegram :\n1. Ouvrez Telegram et envoyez un message à @userinfobot\n2. Il répond instantanément avec votre identifiant numérique\n3. Entrez ce numéro ici",
+    discordIdHelp: "Pour trouver votre identifiant Discord :\n1. Activez le mode développeur dans les paramètres Discord (Avancé)\n2. Clic droit sur votre nom → Copier l'identifiant\n3. Entrez ce numéro ici",
+    emailIdHelp: "Entrez l'adresse e-mail qui doit être autorisée à interagir avec l'assistant.",
+  },
+  it: {
+    title: "Utenti autorizzati",
+    description: "Gestisci quali utenti possono interagire con il tuo assistente su ogni canale. Aggiungi il loro ID numerico per autorizzare l'accesso.",
+    users: "utenti",
+    placeholder: "Inserisci l'ID numerico…",
+    add: "Aggiungi",
+    remove: "Rimuovi",
+    alreadyAdded: "Questo ID utente è già autorizzato.",
+    telegramIdHelp: "Per trovare il tuo ID Telegram:\n1. Apri Telegram e invia un messaggio a @userinfobot\n2. Risponde istantaneamente con il tuo ID numerico\n3. Inserisci quel numero qui",
+    discordIdHelp: "Per trovare il tuo ID Discord:\n1. Attiva la Modalità sviluppatore nelle impostazioni Discord (Avanzate)\n2. Clic destro sul tuo nome → Copia ID utente\n3. Inserisci quel numero qui",
+    emailIdHelp: "Inserisci l'indirizzo e-mail che deve essere autorizzato a interagire con l'assistente.",
+  },
+};
+
+for (const [lang, keys] of Object.entries(newKeys)) {
+  const path = `src/messages/${lang}.json`;
+  const json = JSON.parse(readFileSync(path, "utf8"));
+  json.channelUsers = keys;
+  writeFileSync(path, JSON.stringify(json, null, 2) + "\n");
+  console.log(`Patched ${path} — added channelUsers section`);
+}

src/app/[locale]/tenants/[name]/page.tsx

@@ -6,6 +6,9 @@ import { StatusBadge } from "@/components/ui/status-badge";
 import { UsageDisplay } from "@/components/dashboard/usage-display";
 import { PackageList } from "@/components/packages/package-list";
 import { WorkspaceEditor } from "@/components/packages/workspace-editor";
+import { ChannelUsers } from "@/components/channel-users/channel-users";
+
+const CHANNEL_PACKAGES = ["telegram", "discord", "email"];
 
 export default async function TenantDetailPage({
   params,
@@ -20,7 +23,6 @@ export default async function TenantDetailPage({
 
   const tenant = await getTenant(name);
   if (!tenant) notFound();
-  console.log("tenant spec:", JSON.stringify(tenant.spec));
 
   // Scope check
   if (
@@ -32,6 +34,10 @@ export default async function TenantDetailPage({
 
   const enabledPackages = tenant.spec.packages || [];
   const workspaceFiles = tenant.spec.workspaceFiles || {};
+  const enabledChannels = enabledPackages.filter((pkg) =>
+    CHANNEL_PACKAGES.includes(pkg)
+  );
+  const channelUsers = tenant.spec.channelUsers || {};
 
   return (
     <div>
@@ -70,8 +76,19 @@ export default async function TenantDetailPage({
         />
       </section>
 
+      {/* Channel Users (authorized users per channel) */}
+      {enabledChannels.length > 0 && (
+        <section className="mb-8 animate-in animate-in-delay-3">
+          <ChannelUsers
+            tenantName={name}
+            enabledChannels={enabledChannels}
+            initialChannelUsers={channelUsers}
+          />
+        </section>
+      )}
+
       {/* Workspace files */}
-      <section className="animate-in animate-in-delay-3">
+      <section className="animate-in animate-in-delay-4">
         <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
           {t("workspaceFiles")}
         </h2>

src/app/api/tenants/[name]/route.ts

@@ -67,6 +67,8 @@ export async function PATCH(
     if (body.displayName !== undefined)
       specPatch.displayName = body.displayName;
     if (body.agentName !== undefined) specPatch.agentName = body.agentName;
+    if (body.channelUsers !== undefined)
+      specPatch.channelUsers = body.channelUsers;
 
     const updated = await patchTenantSpec(name, specPatch);
     return NextResponse.json(updated);

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

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+
+/** Maps channel IDs to the instructions for finding the user ID. */
+const CHANNEL_ID_HELP: Record<string, string> = {
+  telegram: "telegramIdHelp",
+  discord: "discordIdHelp",
+  email: "emailIdHelp",
+};
+
+interface ChannelUsersProps {
+  tenantName: string;
+  /** Currently enabled channel packages (e.g. ["telegram", "discord"]) */
+  enabledChannels: string[];
+  /** Current channelUsers from the PiecedTenant spec */
+  initialChannelUsers: Record<string, string[]>;
+}
+
+export function ChannelUsers({
+  tenantName,
+  enabledChannels,
+  initialChannelUsers,
+}: ChannelUsersProps) {
+  const t = useTranslations("channelUsers");
+  const router = useRouter();
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState("");
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
+  const [channelUsers, setChannelUsers] =
+    useState<Record<string, string[]>>(initialChannelUsers);
+
+  const updateChannelUsers = useCallback(
+    async (updated: Record<string, string[]>) => {
+      setSaving(true);
+      setError("");
+      try {
+        const res = await fetch(`/api/tenants/${tenantName}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ channelUsers: updated }),
+        });
+        if (!res.ok) {
+          const data = await res.json();
+          throw new Error(data.error || "Update failed");
+        }
+        setChannelUsers(updated);
+        router.refresh();
+      } catch (e: any) {
+        setError(e.message);
+      } finally {
+        setSaving(false);
+      }
+    },
+    [tenantName, router]
+  );
+
+  const handleAdd = useCallback(
+    (channel: string) => {
+      const userId = inputValues[channel]?.trim();
+      if (!userId) return;
+
+      const current = channelUsers[channel] || [];
+      if (current.includes(userId)) {
+        setError(t("alreadyAdded"));
+        return;
+      }
+
+      const updated = {
+        ...channelUsers,
+        [channel]: [...current, userId],
+      };
+      setInputValues((prev) => ({ ...prev, [channel]: "" }));
+      updateChannelUsers(updated);
+    },
+    [channelUsers, inputValues, updateChannelUsers, t]
+  );
+
+  const handleRemove = useCallback(
+    (channel: string, userId: string) => {
+      const current = channelUsers[channel] || [];
+      const updated = {
+        ...channelUsers,
+        [channel]: current.filter((id) => id !== userId),
+      };
+      updateChannelUsers(updated);
+    },
+    [channelUsers, updateChannelUsers]
+  );
+
+  if (enabledChannels.length === 0) return null;
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-1">
+          {t("title")}
+        </h3>
+        <p className="text-xs text-text-muted mb-4">{t("description")}</p>
+      </div>
+
+      {error && (
+        <div className="text-xs text-red-400 bg-red-400/10 border border-red-400/20 rounded-lg px-3 py-2">
+          {error}
+          <button
+            onClick={() => setError("")}
+            className="ml-2 text-red-300 hover:text-red-200"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
+      {enabledChannels.map((channel) => {
+        const users = channelUsers[channel] || [];
+        const helpKey = CHANNEL_ID_HELP[channel];
+
+        return (
+          <div
+            key={channel}
+            className="bg-surface-2 border border-border rounded-lg p-4"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <h4 className="text-sm font-medium text-text-primary capitalize">
+                {channel}
+              </h4>
+              <span className="text-xs text-text-muted tabular-nums">
+                {users.length} {t("users")}
+              </span>
+            </div>
+
+            {helpKey && (
+              <p className="text-xs text-text-secondary bg-surface-1 border border-border rounded-lg p-3 mb-3 whitespace-pre-line">
+                {t(helpKey)}
+              </p>
+            )}
+
+            {/* Current users */}
+            {users.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 mb-3">
+                {users.map((userId) => (
+                  <span
+                    key={userId}
+                    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>
+                  </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>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/messages/de.json

@@ -237,5 +237,17 @@
     "statusHealthy": "OK",
     "statusDown": "Ausgefallen",
     "spendChf": "Kosten (CHF)"
+  },
+  "channelUsers": {
+    "title": "Autorisierte Benutzer",
+    "description": "Verwalten Sie, welche Benutzer mit Ihrem Assistenten auf jedem Kanal interagieren können. Fügen Sie die numerische Benutzer-ID hinzu, um den Zugang zu autorisieren.",
+    "users": "Benutzer",
+    "placeholder": "Numerische Benutzer-ID eingeben…",
+    "add": "Hinzufügen",
+    "remove": "Entfernen",
+    "alreadyAdded": "Diese Benutzer-ID ist bereits autorisiert.",
+    "telegramIdHelp": "So finden Sie Ihre Telegram-Benutzer-ID:\n1. Öffnen Sie Telegram und schreiben Sie @userinfobot\n2. Der Bot antwortet sofort mit Ihrer numerischen ID\n3. Geben Sie diese Nummer hier ein",
+    "discordIdHelp": "So finden Sie Ihre Discord-Benutzer-ID:\n1. Aktivieren Sie den Entwicklermodus in den Discord-Einstellungen (Erweitert)\n2. Rechtsklick auf Ihren Namen → Benutzer-ID kopieren\n3. Geben Sie diese Nummer hier ein",
+    "emailIdHelp": "Geben Sie die E-Mail-Adresse ein, die zur Interaktion mit dem Assistenten autorisiert werden soll."
   }
 }

src/messages/en.json

@@ -237,5 +237,17 @@
     "statusHealthy": "Healthy",
     "statusDown": "Down",
     "spendChf": "Spend (CHF)"
+  },
+  "channelUsers": {
+    "title": "Authorized Users",
+    "description": "Manage which users can interact with your assistant on each channel. Add their numeric user ID to authorize access.",
+    "users": "users",
+    "placeholder": "Enter numeric user ID…",
+    "add": "Add",
+    "remove": "Remove",
+    "alreadyAdded": "This user ID is already authorized.",
+    "telegramIdHelp": "To find your Telegram user ID:\n1. Open Telegram and message @userinfobot\n2. It instantly replies with your numeric ID\n3. Enter that number here",
+    "discordIdHelp": "To find your Discord user ID:\n1. Enable Developer Mode in Discord settings (Advanced)\n2. Right-click your name → Copy User ID\n3. Enter that number here",
+    "emailIdHelp": "Enter the email address that should be authorized to interact with the assistant."
   }
 }

src/messages/fr.json

@@ -237,5 +237,17 @@
     "statusHealthy": "OK",
     "statusDown": "Hors service",
     "spendChf": "Coûts (CHF)"
+  },
+  "channelUsers": {
+    "title": "Utilisateurs autorisés",
+    "description": "Gérez les utilisateurs pouvant interagir avec votre assistant sur chaque canal. Ajoutez leur identifiant numérique pour autoriser l'accès.",
+    "users": "utilisateurs",
+    "placeholder": "Entrez l'identifiant numérique…",
+    "add": "Ajouter",
+    "remove": "Supprimer",
+    "alreadyAdded": "Cet identifiant est déjà autorisé.",
+    "telegramIdHelp": "Pour trouver votre identifiant Telegram :\n1. Ouvrez Telegram et envoyez un message à @userinfobot\n2. Il répond instantanément avec votre identifiant numérique\n3. Entrez ce numéro ici",
+    "discordIdHelp": "Pour trouver votre identifiant Discord :\n1. Activez le mode développeur dans les paramètres Discord (Avancé)\n2. Clic droit sur votre nom → Copier l'identifiant\n3. Entrez ce numéro ici",
+    "emailIdHelp": "Entrez l'adresse e-mail qui doit être autorisée à interagir avec l'assistant."
   }
 }

src/messages/it.json

@@ -237,5 +237,17 @@
     "statusHealthy": "OK",
     "statusDown": "Non disponibile",
     "spendChf": "Costi (CHF)"
+  },
+  "channelUsers": {
+    "title": "Utenti autorizzati",
+    "description": "Gestisci quali utenti possono interagire con il tuo assistente su ogni canale. Aggiungi il loro ID numerico per autorizzare l'accesso.",
+    "users": "utenti",
+    "placeholder": "Inserisci l'ID numerico…",
+    "add": "Aggiungi",
+    "remove": "Rimuovi",
+    "alreadyAdded": "Questo ID utente è già autorizzato.",
+    "telegramIdHelp": "Per trovare il tuo ID Telegram:\n1. Apri Telegram e invia un messaggio a @userinfobot\n2. Risponde istantaneamente con il tuo ID numerico\n3. Inserisci quel numero qui",
+    "discordIdHelp": "Per trovare il tuo ID Discord:\n1. Attiva la Modalità sviluppatore nelle impostazioni Discord (Avanzate)\n2. Clic destro sul tuo nome → Copia ID utente\n3. Inserisci quel numero qui",
+    "emailIdHelp": "Inserisci l'indirizzo e-mail che deve essere autorizzato a interagire con l'assistente."
   }
 }

src/types/index.ts

@@ -29,6 +29,7 @@ export interface PiecedTenantSpec {
   plan?: string;
   packages?: string[];
   workspaceFiles?: Record<string, string>;
+  channelUsers?: Record<string, string[]>;
   suspend?: boolean;
 }