apps/webui/src/app/dashboard/[guildId]/commands/page.tsx

@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 import { CommandsManager } from '@/components/modules/commands-manager';
-import { listGuildChannelsForDashboard, listGuildRolesForDashboard } from '@/lib/discord-guild-resources';
+import { listGuildChannelsForDashboard } from '@/lib/discord-guild-resources';
 import { getLocale, t } from '@/lib/i18n';
 import { getCommandGlobalRules } from '@/lib/module-configs/command-global-rules';
 import { listCommandOverridesDashboard } from '@/lib/module-configs/commands';
@@ -11,12 +11,11 @@ interface CommandsPageProps {
 
 export default async function CommandsPage({ params }: CommandsPageProps) {
   const { guildId } = await params;
-  const [locale, commands, globalRules, channels, roles] = await Promise.all([
+  const [locale, commands, globalRules, channels] = await Promise.all([
     getLocale(),
     listCommandOverridesDashboard(guildId),
     getCommandGlobalRules(guildId),
-    listGuildChannelsForDashboard(guildId).catch(() => []),
+    listGuildChannelsForDashboard(guildId).catch(() => [])
-    listGuildRolesForDashboard(guildId).catch(() => [])
   ]);
 
   return (
@@ -31,7 +30,6 @@ export default async function CommandsPage({ params }: CommandsPageProps) {
           initialCommands={commands}
           initialGlobalRules={globalRules}
           channels={channels}
-          roles={roles}
         />
       </Suspense>
     </div>

apps/webui/src/components/modules/birthdays-form.tsx

@@ -5,6 +5,8 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -36,8 +38,6 @@ interface BirthdaysFormProps {
 
 export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
   const t = useTranslations();
-  const channelId = useId();
-  const roleId = useId();
   const timezoneId = useId();
 
   return (
@@ -58,14 +58,22 @@ export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-birthdays-channel">
               <div className="space-y-2">
-                <Label htmlFor={channelId}>{t('modulePages.birthdays.channelId')}</Label>
+                <Label>{t('modulePages.birthdays.channelId')}</Label>
-                <Input id={channelId} value={value.channelId} onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.channelId}
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-birthdays-role">
               <div className="space-y-2">
-                <Label htmlFor={roleId}>{t('modulePages.birthdays.roleId')}</Label>
+                <Label>{t('modulePages.birthdays.roleId')}</Label>
-                <Input id={roleId} value={value.roleId} onChange={(event) => setValue((prev) => ({ ...prev, roleId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordRoleSelect
+                  guildId={guildId}
+                  value={value.roleId}
+                  onChange={(roleId) => setValue((prev) => ({ ...prev, roleId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-birthdays-timezone">

apps/webui/src/components/modules/commands-manager.tsx

@@ -3,8 +3,7 @@
 import type {
   CommandGlobalRules,
   CommandOverrideDashboard,
-  DiscordChannelOption,
+  DiscordChannelOption
-  DiscordRoleOption
 } from '@nexumi/shared';
 import { RotateCcw } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
@@ -14,6 +13,7 @@ import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 
@@ -26,15 +26,13 @@ interface CommandsManagerProps {
   initialCommands: CommandOverrideDashboard[];
   initialGlobalRules: CommandGlobalRules;
   channels: DiscordChannelOption[];
-  roles: DiscordRoleOption[];
 }
 
 export function CommandsManager({
   guildId,
   initialCommands,
   initialGlobalRules,
-  channels,
+  channels
-  roles
 }: CommandsManagerProps) {
   const t = useTranslations();
   const searchParams = useSearchParams();
@@ -48,10 +46,6 @@ export function CommandsManager({
     () => channels.map((channel) => ({ id: channel.id, name: channel.name, prefix: '#' })),
     [channels]
   );
-  const roleOptions = useMemo(
-    () => roles.map((role) => ({ id: role.id, name: role.name, prefix: '@' })),
-    [roles]
-  );
 
   useEffect(() => {
     const q = searchParams.get('q');
@@ -250,8 +244,8 @@ export function CommandsManager({
                   </div>
                   <div className="space-y-1 sm:col-span-2">
                     <p className="text-xs text-muted-foreground">{t('modulePages.commands.allowedRoleIds')}</p>
-                    <DiscordResourceMultiSelect
+                    <DiscordRoleMultiSelect
-                      options={roleOptions}
+                      guildId={guildId}
                       value={entry.allowedRoleIds}
                       onChange={(allowedRoleIds) => patchLocal(entry.commandName, { allowedRoleIds })}
                       placeholder={t('modulePages.commands.roleSearchPlaceholder')}
@@ -260,8 +254,8 @@ export function CommandsManager({
                   </div>
                   <div className="space-y-1 sm:col-span-2">
                     <p className="text-xs text-muted-foreground">{t('modulePages.commands.deniedRoleIds')}</p>
-                    <DiscordResourceMultiSelect
+                    <DiscordRoleMultiSelect
-                      options={roleOptions}
+                      guildId={guildId}
                       value={entry.deniedRoleIds}
                       onChange={(deniedRoleIds) => patchLocal(entry.commandName, { deniedRoleIds })}
                       placeholder={t('modulePages.commands.roleSearchPlaceholder')}

apps/webui/src/components/modules/feeds-manager.tsx

@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -182,17 +184,18 @@ export function FeedsManager({ guildId, initialFeeds }: FeedsManagerProps) {
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.feeds.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
-                placeholder="123456789012345678"
               />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.feeds.rolePingId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.rolePingId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, rolePingId: event.target.value }))}
+                onChange={(rolePingId) => setDraft((prev) => ({ ...prev, rolePingId }))}
                 placeholder={t('common.optional')}
               />
             </div>

apps/webui/src/components/modules/giveaways-manager.tsx

@@ -9,6 +9,8 @@ import { useTranslations } from '@/components/locale-provider';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
@@ -127,10 +129,10 @@ export function GiveawaysManager({ guildId, initialGiveaways }: GiveawaysManager
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.giveaways.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
-                placeholder="123456789012345678"
               />
             </div>
             <div className="space-y-2">
@@ -156,9 +158,10 @@ export function GiveawaysManager({ guildId, initialGiveaways }: GiveawaysManager
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.giveaways.requiredRoleId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.requiredRoleId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, requiredRoleId: event.target.value }))}
+                onChange={(requiredRoleId) => setDraft((prev) => ({ ...prev, requiredRoleId }))}
                 placeholder={t('common.optional')}
               />
             </div>

apps/webui/src/components/modules/leveling-form.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import type { LevelingConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -14,24 +15,11 @@ import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
 interface LocalLevelingValue
-  extends Omit<LevelingConfigDashboard, 'noXpChannelIds' | 'noXpRoleIds' | 'roleMultipliers' | 'channelMultipliers'> {
+  extends Omit<LevelingConfigDashboard, 'roleMultipliers' | 'channelMultipliers'> {
-  noXpChannelIdsText: string;
-  noXpRoleIdsText: string;
   roleMultipliersText: string;
   channelMultipliersText: string;
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toMultiplierText(map: Record<string, number>): string {
   return Object.entries(map)
     .map(([id, multiplier]) => `${id}:${multiplier}`)
@@ -58,11 +46,9 @@ function fromMultiplierText(text: string): { value: Record<string, number>; erro
 }
 
 function toLocal(config: LevelingConfigDashboard): LocalLevelingValue {
-  const { noXpChannelIds, noXpRoleIds, roleMultipliers, channelMultipliers, ...rest } = config;
+  const { roleMultipliers, channelMultipliers, ...rest } = config;
   return {
     ...rest,
-    noXpChannelIdsText: toCsv(noXpChannelIds),
-    noXpRoleIdsText: toCsv(noXpRoleIds),
     roleMultipliersText: toMultiplierText(roleMultipliers),
     channelMultipliersText: toMultiplierText(channelMultipliers)
   };
@@ -78,12 +64,10 @@ async function saveLeveling(guildId: string, value: LocalLevelingValue): Promise
     return { ok: false, error: channelMultipliers.error };
   }
 
-  const { noXpChannelIdsText, noXpRoleIdsText, roleMultipliersText: _roleMultipliersText, channelMultipliersText: _channelMultipliersText, ...rest } = value;
+  const { roleMultipliersText: _roleMultipliersText, channelMultipliersText: _channelMultipliersText, ...rest } = value;
 
   const payload: LevelingConfigDashboard = {
     ...rest,
-    noXpChannelIds: fromCsv(noXpChannelIdsText),
-    noXpRoleIds: fromCsv(noXpRoleIdsText),
     roleMultipliers: roleMultipliers.value,
     channelMultipliers: channelMultipliers.value
   };
@@ -111,8 +95,6 @@ interface LevelingFormProps {
 
 export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
   const t = useTranslations();
-  const noXpChannelsId = useId();
-  const noXpRolesId = useId();
 
   return (
     <SettingsForm<LocalLevelingValue>
@@ -192,23 +174,21 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
 
               <FieldAnchor id="field-leveling-no-xp-channels">
               <div className="space-y-2">
-                <Label htmlFor={noXpChannelsId}>{t('modulePages.leveling.noXpChannels')}</Label>
+                <Label>{t('modulePages.leveling.noXpChannels')}</Label>
-                <Textarea
+                <DiscordChannelMultiSelect
-                  id={noXpChannelsId}
+                  guildId={guildId}
-                  value={value.noXpChannelIdsText}
+                  value={value.noXpChannelIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, noXpChannelIdsText: event.target.value }))}
+                  onChange={(noXpChannelIds) => setValue((prev) => ({ ...prev, noXpChannelIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-leveling-no-xp-roles">
               <div className="space-y-2">
-                <Label htmlFor={noXpRolesId}>{t('modulePages.leveling.noXpRoles')}</Label>
+                <Label>{t('modulePages.leveling.noXpRoles')}</Label>
-                <Textarea
+                <DiscordRoleMultiSelect
-                  id={noXpRolesId}
+                  guildId={guildId}
-                  value={value.noXpRoleIdsText}
+                  value={value.noXpRoleIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, noXpRoleIdsText: event.target.value }))}
+                  onChange={(noXpRoleIds) => setValue((prev) => ({ ...prev, noXpRoleIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
               </FieldAnchor>
@@ -271,10 +251,10 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                 </div>
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.levelUpChannelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={value.levelUpChannelId}
-                    onChange={(event) => setValue((prev) => ({ ...prev, levelUpChannelId: event.target.value.trim() }))}
+                    onChange={(levelUpChannelId) => setValue((prev) => ({ ...prev, levelUpChannelId }))}
-                    placeholder="123456789012345678"
                   />
                 </div>
               </div>

apps/webui/src/components/modules/logging-form.tsx

@@ -2,16 +2,16 @@
 
 import type { LogChannelMapping, LogEventTypeDashboard, LoggingConfigDashboard } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
@@ -51,29 +51,18 @@ interface LocalLogChannel extends LogChannelMapping {
 interface LocalLoggingValue {
   enabled: boolean;
   ignoreBots: boolean;
-  ignoredChannelIdsText: string;
+  ignoredChannelIds: string[];
-  ignoredRoleIdsText: string;
+  ignoredRoleIds: string[];
   retentionDays: number;
   logChannels: LocalLogChannel[];
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toLocal(config: LoggingConfigDashboard): LocalLoggingValue {
   return {
     enabled: config.enabled,
     ignoreBots: config.ignoreBots,
-    ignoredChannelIdsText: toCsv(config.ignoredChannelIds),
+    ignoredChannelIds: config.ignoredChannelIds,
-    ignoredRoleIdsText: toCsv(config.ignoredRoleIds),
+    ignoredRoleIds: config.ignoredRoleIds,
     retentionDays: config.retentionDays,
     logChannels: config.logChannels.map((mapping, index) => ({ ...mapping, clientKey: `${mapping.eventType}-${index}` }))
   };
@@ -83,8 +72,8 @@ function toRemote(value: LocalLoggingValue): LoggingConfigDashboard {
   return {
     enabled: value.enabled,
     ignoreBots: value.ignoreBots,
-    ignoredChannelIds: fromCsv(value.ignoredChannelIdsText),
+    ignoredChannelIds: value.ignoredChannelIds,
-    ignoredRoleIds: fromCsv(value.ignoredRoleIdsText),
+    ignoredRoleIds: value.ignoredRoleIds,
     retentionDays: value.retentionDays,
     logChannels: value.logChannels.map(({ clientKey: _clientKey, ...rest }) => rest)
   };
@@ -114,8 +103,6 @@ interface LoggingFormProps {
 
 export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
   const t = useTranslations();
-  const ignoredChannelsId = useId();
-  const ignoredRolesId = useId();
 
   return (
     <SettingsForm<LocalLoggingValue>
@@ -150,26 +137,22 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
               </FieldAnchor>
               <FieldAnchor id="field-logging-ignored-channels">
               <div className="space-y-2">
-                <Label htmlFor={ignoredChannelsId}>{t('modulePages.logging.ignoredChannelsLabel')}</Label>
+                <Label>{t('modulePages.logging.ignoredChannelsLabel')}</Label>
-                <Textarea
+                <DiscordChannelMultiSelect
-                  id={ignoredChannelsId}
+                  guildId={guildId}
-                  value={value.ignoredChannelIdsText}
+                  value={value.ignoredChannelIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, ignoredChannelIdsText: event.target.value }))}
+                  onChange={(ignoredChannelIds) => setValue((prev) => ({ ...prev, ignoredChannelIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
-                <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-logging-ignored-roles">
               <div className="space-y-2">
-                <Label htmlFor={ignoredRolesId}>{t('modulePages.logging.ignoredRolesLabel')}</Label>
+                <Label>{t('modulePages.logging.ignoredRolesLabel')}</Label>
-                <Textarea
+                <DiscordRoleMultiSelect
-                  id={ignoredRolesId}
+                  guildId={guildId}
-                  value={value.ignoredRoleIdsText}
+                  value={value.ignoredRoleIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, ignoredRoleIdsText: event.target.value }))}
+                  onChange={(ignoredRoleIds) => setValue((prev) => ({ ...prev, ignoredRoleIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
-                <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-logging-retention">
@@ -233,17 +216,17 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                   </div>
                   <div className="flex-1 space-y-2">
                     <Label>{t('modulePages.logging.channelId')}</Label>
-                    <Input
+                    <DiscordChannelSelect
+                      guildId={guildId}
                       value={mapping.channelId}
-                      onChange={(event) =>
+                      onChange={(channelId) =>
                         setValue((prev) => ({
                           ...prev,
                           logChannels: prev.logChannels.map((entry) =>
-                            entry.clientKey === mapping.clientKey ? { ...entry, channelId: event.target.value.trim() } : entry
+                            entry.clientKey === mapping.clientKey ? { ...entry, channelId } : entry
                           )
                         }))
                       }
-                      placeholder="123456789012345678"
                     />
                   </div>
                   <Button

apps/webui/src/components/modules/scheduler-manager.tsx

@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -108,17 +110,18 @@ export function SchedulerManager({ guildId, initialSchedules }: SchedulerManager
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.scheduler.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
-                placeholder="123456789012345678"
               />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.scheduler.rolePingId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.rolePingId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, rolePingId: event.target.value }))}
+                onChange={(rolePingId) => setDraft((prev) => ({ ...prev, rolePingId }))}
                 placeholder={t('common.optional')}
               />
             </div>

apps/webui/src/components/modules/selfroles-manager.tsx

@@ -8,6 +8,7 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -164,7 +165,11 @@ export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerPro
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.selfroles.channelId')}</Label>
-              <Input value={draft.channelId} onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))} placeholder="123456789012345678" />
+              <DiscordChannelSelect
+                guildId={guildId}
+                value={draft.channelId}
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
+              />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.selfroles.panelTitle')}</Label>
@@ -237,10 +242,13 @@ export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerPro
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label>{t('modulePages.selfroles.channelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={panel.channelId}
-                    onChange={(event) =>
+                    onChange={(channelId) =>
-                      setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId: event.target.value } : entry)))
+                      setPanels((prev) =>
+                        prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId } : entry))
+                      )
                     }
                   />
                 </div>

apps/webui/src/components/modules/starboard-form.tsx

@@ -5,53 +5,19 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
-interface LocalValue {
+async function saveStarboard(guildId: string, value: StarboardConfigDashboard): Promise<SettingsSaveResult> {
-  enabled: boolean;
-  channelId: string;
-  emoji: string;
-  threshold: number;
-  allowSelfStar: boolean;
-  ignoredChannelIdsText: string;
-}
-
-function toLocal(config: StarboardConfigDashboard): LocalValue {
-  return {
-    enabled: config.enabled,
-    channelId: config.channelId,
-    emoji: config.emoji,
-    threshold: config.threshold,
-    allowSelfStar: config.allowSelfStar,
-    ignoredChannelIdsText: config.ignoredChannelIds.join(', ')
-  };
-}
-
-function toRemote(value: LocalValue): StarboardConfigDashboard {
-  return {
-    enabled: value.enabled,
-    channelId: value.channelId,
-    emoji: value.emoji,
-    threshold: value.threshold,
-    allowSelfStar: value.allowSelfStar,
-    ignoredChannelIds: value.ignoredChannelIdsText
-      .split(',')
-      .map((entry) => entry.trim())
-      .filter(Boolean)
-  };
-}
-
-async function saveStarboard(guildId: string, value: LocalValue): Promise<SettingsSaveResult> {
   try {
     const response = await fetch(`/api/guilds/${guildId}/starboard`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(toRemote(value))
+      body: JSON.stringify(value)
     });
     if (!response.ok) {
       const body = (await response.json().catch(() => null)) as { error?: string } | null;
@@ -70,13 +36,14 @@ interface StarboardFormProps {
 
 export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
   const t = useTranslations();
-  const channelId = useId();
   const emojiId = useId();
   const thresholdId = useId();
-  const ignoredId = useId();
 
   return (
-    <SettingsForm<LocalValue> initialValue={toLocal(initialValue)} onSave={(value) => saveStarboard(guildId, value)}>
+    <SettingsForm<StarboardConfigDashboard>
+      initialValue={initialValue}
+      onSave={(value) => saveStarboard(guildId, value)}
+    >
       {({ value, setValue }) => (
         <Card>
           <CardHeader>
@@ -93,8 +60,12 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-starboard-channel">
               <div className="space-y-2">
-                <Label htmlFor={channelId}>{t('modulePages.starboard.channelId')}</Label>
+                <Label>{t('modulePages.starboard.channelId')}</Label>
-                <Input id={channelId} value={value.channelId} onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.channelId}
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-starboard-emoji">
@@ -118,9 +89,12 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
             </FieldAnchor>
             <FieldAnchor id="field-starboard-ignored">
             <div className="space-y-2">
-              <Label htmlFor={ignoredId}>{t('modulePages.starboard.ignoredChannelIds')}</Label>
+              <Label>{t('modulePages.starboard.ignoredChannelIds')}</Label>
-              <Textarea id={ignoredId} value={value.ignoredChannelIdsText} onChange={(event) => setValue((prev) => ({ ...prev, ignoredChannelIdsText: event.target.value }))} />
+              <DiscordChannelMultiSelect
-              <p className="text-xs text-muted-foreground">{t('modulePages.starboard.idsHint')}</p>
+                guildId={guildId}
+                value={value.ignoredChannelIds}
+                onChange={(ignoredChannelIds) => setValue((prev) => ({ ...prev, ignoredChannelIds }))}
+              />
             </div>
             </FieldAnchor>
           </CardContent>

apps/webui/src/components/modules/stats-form.tsx

@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -35,9 +36,6 @@ interface StatsFormProps {
 
 export function StatsForm({ guildId, initialValue }: StatsFormProps) {
   const t = useTranslations();
-  const membersId = useId();
-  const onlineId = useId();
-  const boostsId = useId();
   const membersTemplateId = useId();
   const onlineTemplateId = useId();
   const boostsTemplateId = useId();
@@ -60,8 +58,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
             <div className="grid gap-4 sm:grid-cols-2">
               <FieldAnchor id="field-stats-members">
               <div className="space-y-2">
-                <Label htmlFor={membersId}>{t('modulePages.stats.membersChannelId')}</Label>
+                <Label>{t('modulePages.stats.membersChannelId')}</Label>
-                <Input id={membersId} value={value.membersChannelId} onChange={(event) => setValue((prev) => ({ ...prev, membersChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.membersChannelId}
+                  onChange={(membersChannelId) => setValue((prev) => ({ ...prev, membersChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">
@@ -70,8 +73,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
               </div>
               <FieldAnchor id="field-stats-online">
               <div className="space-y-2">
-                <Label htmlFor={onlineId}>{t('modulePages.stats.onlineChannelId')}</Label>
+                <Label>{t('modulePages.stats.onlineChannelId')}</Label>
-                <Input id={onlineId} value={value.onlineChannelId} onChange={(event) => setValue((prev) => ({ ...prev, onlineChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.onlineChannelId}
+                  onChange={(onlineChannelId) => setValue((prev) => ({ ...prev, onlineChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">
@@ -80,8 +88,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
               </div>
               <FieldAnchor id="field-stats-boosts">
               <div className="space-y-2">
-                <Label htmlFor={boostsId}>{t('modulePages.stats.boostsChannelId')}</Label>
+                <Label>{t('modulePages.stats.boostsChannelId')}</Label>
-                <Input id={boostsId} value={value.boostsChannelId} onChange={(event) => setValue((prev) => ({ ...prev, boostsChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.boostsChannelId}
+                  onChange={(boostsChannelId) => setValue((prev) => ({ ...prev, boostsChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">

apps/webui/src/components/modules/suggestions-config-form.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import type { SuggestionConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
@@ -38,9 +37,6 @@ interface SuggestionsConfigFormProps {
 
 export function SuggestionsConfigForm({ guildId, initialValue }: SuggestionsConfigFormProps) {
   const t = useTranslations();
-  const openId = useId();
-  const approvedId = useId();
-  const deniedId = useId();
 
   return (
     <SettingsForm<SuggestionConfigDashboard>
@@ -63,20 +59,34 @@ export function SuggestionsConfigForm({ guildId, initialValue }: SuggestionsConf
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-suggestions-open">
               <div className="space-y-2">
-                <Label htmlFor={openId}>{t('modulePages.suggestions.openChannelId')}</Label>
+                <Label>{t('modulePages.suggestions.openChannelId')}</Label>
-                <Input id={openId} value={value.openChannelId} onChange={(event) => setValue((prev) => ({ ...prev, openChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.openChannelId}
+                  onChange={(openChannelId) => setValue((prev) => ({ ...prev, openChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-suggestions-approved">
               <div className="space-y-2">
-                <Label htmlFor={approvedId}>{t('modulePages.suggestions.approvedChannelId')}</Label>
+                <Label>{t('modulePages.suggestions.approvedChannelId')}</Label>
-                <Input id={approvedId} value={value.approvedChannelId} onChange={(event) => setValue((prev) => ({ ...prev, approvedChannelId: event.target.value.trim() }))} placeholder={t('common.optional')} />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.approvedChannelId}
+                  onChange={(approvedChannelId) => setValue((prev) => ({ ...prev, approvedChannelId }))}
+                  placeholder={t('common.optional')}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-suggestions-denied">
               <div className="space-y-2">
-                <Label htmlFor={deniedId}>{t('modulePages.suggestions.deniedChannelId')}</Label>
+                <Label>{t('modulePages.suggestions.deniedChannelId')}</Label>
-                <Input id={deniedId} value={value.deniedChannelId} onChange={(event) => setValue((prev) => ({ ...prev, deniedChannelId: event.target.value.trim() }))} placeholder={t('common.optional')} />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.deniedChannelId}
+                  onChange={(deniedChannelId) => setValue((prev) => ({ ...prev, deniedChannelId }))}
+                  placeholder={t('common.optional')}
+                />
               </div>
               </FieldAnchor>
             </div>

apps/webui/src/components/modules/tags-manager.tsx

@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -15,17 +17,8 @@ import { Textarea } from '@/components/ui/textarea';
 
 const RESPONSE_TYPES: TagResponseType[] = ['TEXT', 'EMBED'];
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-function fromCsv(text: string): string[] {
-  return text.split(',').map((entry) => entry.trim()).filter(Boolean);
-}
-
 interface LocalTag extends TagDashboard {
   clientKey: string;
-  allowedRoleIdsText: string;
-  allowedChannelIdsText: string;
   saving?: boolean;
 }
 
@@ -34,8 +27,8 @@ const EMPTY_DRAFT = {
   content: '',
   responseType: 'TEXT' as TagResponseType,
   triggerWord: '',
-  allowedRoleIdsText: '',
+  allowedRoleIds: [] as string[],
-  allowedChannelIdsText: ''
+  allowedChannelIds: [] as string[]
 };
 
 interface TagsManagerProps {
@@ -48,9 +41,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
   const [tags, setTags] = useState<LocalTag[]>(
     initialTags.map((tag, index) => ({
       ...tag,
-      clientKey: tag.id ?? `existing-${index}`,
+      clientKey: tag.id ?? `existing-${index}`
-      allowedRoleIdsText: toCsv(tag.allowedRoleIds),
-      allowedChannelIdsText: toCsv(tag.allowedChannelIds)
     }))
   );
   const [draft, setDraft] = useState(EMPTY_DRAFT);
@@ -71,8 +62,8 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           content: draft.content.trim() || null,
           responseType: draft.responseType,
           triggerWord: draft.triggerWord.trim() || null,
-          allowedRoleIds: fromCsv(draft.allowedRoleIdsText),
+          allowedRoleIds: draft.allowedRoleIds,
-          allowedChannelIds: fromCsv(draft.allowedChannelIdsText)
+          allowedChannelIds: draft.allowedChannelIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
@@ -83,9 +74,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
       setTags((prev) => [
         {
           ...body,
-          clientKey: body.id ?? `new-${Date.now()}`,
+          clientKey: body.id ?? `new-${Date.now()}`
-          allowedRoleIdsText: toCsv(body.allowedRoleIds),
-          allowedChannelIdsText: toCsv(body.allowedChannelIds)
         },
         ...prev
       ]);
@@ -109,8 +98,8 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           content: tag.content,
           responseType: tag.responseType,
           triggerWord: tag.triggerWord,
-          allowedRoleIds: fromCsv(tag.allowedRoleIdsText),
+          allowedRoleIds: tag.allowedRoleIds,
-          allowedChannelIds: fromCsv(tag.allowedChannelIdsText)
+          allowedChannelIds: tag.allowedChannelIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
@@ -184,11 +173,19 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
-              <Input value={draft.allowedRoleIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedRoleIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
+              <DiscordRoleMultiSelect
+                guildId={guildId}
+                value={draft.allowedRoleIds}
+                onChange={(allowedRoleIds) => setDraft((prev) => ({ ...prev, allowedRoleIds }))}
+              />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.tags.allowedChannelIds')}</Label>
-              <Input value={draft.allowedChannelIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedChannelIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
+              <DiscordChannelMultiSelect
+                guildId={guildId}
+                value={draft.allowedChannelIds}
+                onChange={(allowedChannelIds) => setDraft((prev) => ({ ...prev, allowedChannelIds }))}
+              />
             </div>
           </div>
           <Button type="button" onClick={handleCreate} disabled={creating}>
@@ -242,11 +239,27 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
-                  <Input value={tag.allowedRoleIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedRoleIdsText: event.target.value } : entry)))} />
+                  <DiscordRoleMultiSelect
+                    guildId={guildId}
+                    value={tag.allowedRoleIds}
+                    onChange={(allowedRoleIds) =>
+                      setTags((prev) =>
+                        prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedRoleIds } : entry))
+                      )
+                    }
+                  />
                 </div>
                 <div className="space-y-2">
                   <Label>{t('modulePages.tags.allowedChannelIds')}</Label>
-                  <Input value={tag.allowedChannelIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedChannelIdsText: event.target.value } : entry)))} />
+                  <DiscordChannelMultiSelect
+                    guildId={guildId}
+                    value={tag.allowedChannelIds}
+                    onChange={(allowedChannelIds) =>
+                      setTags((prev) =>
+                        prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedChannelIds } : entry))
+                      )
+                    }
+                  />
                 </div>
               </div>
               <div className="flex justify-end gap-2">

apps/webui/src/components/modules/tempvoice-form.tsx

@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -35,8 +36,6 @@ interface TempVoiceFormProps {
 
 export function TempVoiceForm({ guildId, initialValue }: TempVoiceFormProps) {
   const t = useTranslations();
-  const hubId = useId();
-  const categoryId = useId();
   const nameId = useId();
   const limitId = useId();
 
@@ -58,14 +57,24 @@ export function TempVoiceForm({ guildId, initialValue }: TempVoiceFormProps) {
             <div className="grid gap-4 sm:grid-cols-2">
               <FieldAnchor id="field-tempvoice-hub">
               <div className="space-y-2">
-                <Label htmlFor={hubId}>{t('modulePages.tempvoice.hubChannelId')}</Label>
+                <Label>{t('modulePages.tempvoice.hubChannelId')}</Label>
-                <Input id={hubId} value={value.hubChannelId} onChange={(event) => setValue((prev) => ({ ...prev, hubChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.hubChannelId}
+                  onChange={(hubChannelId) => setValue((prev) => ({ ...prev, hubChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-tempvoice-category">
               <div className="space-y-2">
-                <Label htmlFor={categoryId}>{t('modulePages.tempvoice.categoryId')}</Label>
+                <Label>{t('modulePages.tempvoice.categoryId')}</Label>
-                <Input id={categoryId} value={value.categoryId} onChange={(event) => setValue((prev) => ({ ...prev, categoryId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['category']}
+                  value={value.categoryId}
+                  onChange={(categoryId) => setValue((prev) => ({ ...prev, categoryId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-tempvoice-name">

apps/webui/src/components/modules/ticket-categories-manager.tsx

@@ -8,6 +8,7 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
@@ -16,18 +17,7 @@ interface LocalCategory extends TicketCategoryDashboard {
   saving?: boolean;
 }
 
-function toCsv(ids: string[]): string {
+const EMPTY_DRAFT = { name: '', description: '', emoji: '', supportRoleIds: [] as string[] };
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
-const EMPTY_DRAFT = { name: '', description: '', emoji: '', supportRoleIdsText: '' };
 
 interface TicketCategoriesManagerProps {
   guildId: string;
@@ -56,7 +46,7 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
           name: draft.name.trim(),
           description: draft.description.trim() || null,
           emoji: draft.emoji.trim() || null,
-          supportRoleIds: fromCsv(draft.supportRoleIdsText)
+          supportRoleIds: draft.supportRoleIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TicketCategoryDashboard & { error?: string }) | null;
@@ -178,18 +168,16 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.tickets.supportRoleIds')}</Label>
-              <Input
+              <DiscordRoleMultiSelect
-                value={toCsv(category.supportRoleIds)}
+                guildId={guildId}
-                onChange={(event) =>
+                value={category.supportRoleIds}
+                onChange={(supportRoleIds) =>
                   setCategories((prev) =>
                     prev.map((entry) =>
-                      entry.clientKey === category.clientKey
+                      entry.clientKey === category.clientKey ? { ...entry, supportRoleIds } : entry
-                        ? { ...entry, supportRoleIds: fromCsv(event.target.value) }
-                        : entry
                     )
                   )
                 }
-                placeholder={t('modulePages.tickets.idsPlaceholder')}
               />
             </div>
             <div className="flex justify-end gap-2">
@@ -224,10 +212,10 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
           </div>
           <div className="space-y-2">
             <Label>{t('modulePages.tickets.supportRoleIds')}</Label>
-            <Input
+            <DiscordRoleMultiSelect
-              value={draft.supportRoleIdsText}
+              guildId={guildId}
-              onChange={(event) => setDraft((prev) => ({ ...prev, supportRoleIdsText: event.target.value }))}
+              value={draft.supportRoleIds}
-              placeholder={t('modulePages.tickets.idsPlaceholder')}
+              onChange={(supportRoleIds) => setDraft((prev) => ({ ...prev, supportRoleIds }))}
             />
           </div>
           <Button type="button" variant="outline" onClick={handleCreate} disabled={creating}>

apps/webui/src/components/modules/ticket-config-form.tsx

@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -36,8 +37,6 @@ interface TicketConfigFormProps {
 
 export function TicketConfigForm({ guildId, initialValue }: TicketConfigFormProps) {
   const t = useTranslations();
-  const categoryId = useId();
-  const logChannelId = useId();
   const inactivityId = useId();
 
   return (
@@ -80,24 +79,23 @@ export function TicketConfigForm({ guildId, initialValue }: TicketConfigFormProp
 
               <FieldAnchor id="field-tickets-category">
               <div className="space-y-2">
-                <Label htmlFor={categoryId}>{t('modulePages.tickets.categoryId')}</Label>
+                <Label>{t('modulePages.tickets.categoryId')}</Label>
-                <Input
+                <DiscordChannelSelect
-                  id={categoryId}
+                  guildId={guildId}
+                  kinds={['category']}
                   value={value.categoryId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, categoryId: event.target.value.trim() }))}
+                  onChange={(categoryId) => setValue((prev) => ({ ...prev, categoryId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>
 
               <FieldAnchor id="field-tickets-log">
               <div className="space-y-2">
-                <Label htmlFor={logChannelId}>{t('modulePages.tickets.logChannelId')}</Label>
+                <Label>{t('modulePages.tickets.logChannelId')}</Label>
-                <Input
+                <DiscordChannelSelect
-                  id={logChannelId}
+                  guildId={guildId}
                   value={value.logChannelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, logChannelId: event.target.value.trim() }))}
+                  onChange={(logChannelId) => setValue((prev) => ({ ...prev, logChannelId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>

apps/webui/src/components/modules/verification-form.tsx

@@ -4,6 +4,8 @@ import type { VerificationConfigDashboard } from '@nexumi/shared';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -104,30 +106,30 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
               <FieldAnchor id="field-verify-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.channelId')}</Label>
-                <Input
+                <DiscordChannelSelect
+                  guildId={guildId}
                   value={value.channelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))}
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-verify-role">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.verifiedRoleId')}</Label>
-                <Input
+                <DiscordRoleSelect
+                  guildId={guildId}
                   value={value.verifiedRoleId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, verifiedRoleId: event.target.value.trim() }))}
+                  onChange={(verifiedRoleId) => setValue((prev) => ({ ...prev, verifiedRoleId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-verify-unverified">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.unverifiedRoleId')}</Label>
-                <Input
+                <DiscordRoleSelect
+                  guildId={guildId}
                   value={value.unverifiedRoleId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, unverifiedRoleId: event.target.value.trim() }))}
+                  onChange={(unverifiedRoleId) => setValue((prev) => ({ ...prev, unverifiedRoleId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>

apps/webui/src/components/modules/welcome-form.tsx

@@ -1,10 +1,11 @@
 'use client';
 
 import type { WelcomeConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -13,34 +14,19 @@ import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
-interface LocalWelcomeValue extends Omit<WelcomeConfigDashboard, 'userAutoroleIds' | 'botAutoroleIds' | 'welcomeEmbed' | 'leaveEmbed'> {
+interface LocalWelcomeValue extends Omit<WelcomeConfigDashboard, 'welcomeEmbed' | 'leaveEmbed'> {
-  userAutoroleIdsText: string;
-  botAutoroleIdsText: string;
   welcomeEmbedText: string;
   leaveEmbedText: string;
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toJsonText(value: Record<string, unknown> | null | undefined): string {
   return value ? JSON.stringify(value, null, 2) : '';
 }
 
 function toLocal(config: WelcomeConfigDashboard): LocalWelcomeValue {
-  const { userAutoroleIds, botAutoroleIds, welcomeEmbed, leaveEmbed, ...rest } = config;
+  const { welcomeEmbed, leaveEmbed, ...rest } = config;
   return {
     ...rest,
-    userAutoroleIdsText: toCsv(userAutoroleIds),
-    botAutoroleIdsText: toCsv(botAutoroleIds),
     welcomeEmbedText: toJsonText(welcomeEmbed),
     leaveEmbedText: toJsonText(leaveEmbed)
   };
@@ -71,12 +57,10 @@ async function saveWelcome(guildId: string, value: LocalWelcomeValue): Promise<S
     return { ok: false, error: leaveEmbed.error };
   }
 
-  const { userAutoroleIdsText, botAutoroleIdsText, welcomeEmbedText: _welcomeEmbedText, leaveEmbedText: _leaveEmbedText, ...rest } = value;
+  const { welcomeEmbedText: _welcomeEmbedText, leaveEmbedText: _leaveEmbedText, ...rest } = value;
 
   const payload: WelcomeConfigDashboard = {
     ...rest,
-    userAutoroleIds: fromCsv(userAutoroleIdsText),
-    botAutoroleIds: fromCsv(botAutoroleIdsText),
     welcomeEmbed: welcomeEmbed.value,
     leaveEmbed: leaveEmbed.value
   };
@@ -104,8 +88,6 @@ interface WelcomeFormProps {
 
 export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
   const t = useTranslations();
-  const userAutorolesId = useId();
-  const botAutorolesId = useId();
 
   return (
     <SettingsForm<LocalWelcomeValue> initialValue={toLocal(initialValue)} onSave={(value) => saveWelcome(guildId, value)}>
@@ -130,10 +112,10 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                 <FieldAnchor id="field-welcome-channel">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.welcomeChannelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={value.welcomeChannelId}
-                    onChange={(event) => setValue((prev) => ({ ...prev, welcomeChannelId: event.target.value.trim() }))}
+                    onChange={(welcomeChannelId) => setValue((prev) => ({ ...prev, welcomeChannelId }))}
-                    placeholder="123456789012345678"
                   />
                 </div>
                 </FieldAnchor>
@@ -199,23 +181,21 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               </FieldAnchor>
               <FieldAnchor id="field-welcome-user-autoroles">
               <div className="space-y-2">
-                <Label htmlFor={userAutorolesId}>{t('modulePages.welcome.userAutoroles')}</Label>
+                <Label>{t('modulePages.welcome.userAutoroles')}</Label>
-                <Textarea
+                <DiscordRoleMultiSelect
-                  id={userAutorolesId}
+                  guildId={guildId}
-                  value={value.userAutoroleIdsText}
+                  value={value.userAutoroleIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, userAutoroleIdsText: event.target.value }))}
+                  onChange={(userAutoroleIds) => setValue((prev) => ({ ...prev, userAutoroleIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-welcome-bot-autoroles">
               <div className="space-y-2">
-                <Label htmlFor={botAutorolesId}>{t('modulePages.welcome.botAutoroles')}</Label>
+                <Label>{t('modulePages.welcome.botAutoroles')}</Label>
-                <Textarea
+                <DiscordRoleMultiSelect
-                  id={botAutorolesId}
+                  guildId={guildId}
-                  value={value.botAutoroleIdsText}
+                  value={value.botAutoroleIds}
-                  onChange={(event) => setValue((prev) => ({ ...prev, botAutoroleIdsText: event.target.value }))}
+                  onChange={(botAutoroleIds) => setValue((prev) => ({ ...prev, botAutoroleIds }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
               </FieldAnchor>
@@ -260,10 +240,10 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               <FieldAnchor id="field-leave-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.leaveChannelId')}</Label>
-                <Input
+                <DiscordChannelSelect
+                  guildId={guildId}
                   value={value.leaveChannelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, leaveChannelId: event.target.value.trim() }))}
+                  onChange={(leaveChannelId) => setValue((prev) => ({ ...prev, leaveChannelId }))}
-                  placeholder="123456789012345678"
                 />
               </div>
               </FieldAnchor>

apps/webui/src/components/settings/access-rules-form.tsx

@@ -2,12 +2,11 @@
 
 import { DASHBOARD_MODULES, type DashboardAccessRule, type DashboardModuleId } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SettingsSaveResult } from './settings-form';
@@ -54,18 +53,19 @@ async function saveAccessRules(guildId: string, rules: LocalRule[]): Promise<Set
 }
 
 function AccessRuleRow({
+  guildId,
   rule,
   onChange,
   onRemove,
   anchorIds
 }: {
+  guildId: string;
   rule: LocalRule;
   onChange: (rule: LocalRule) => void;
   onRemove: () => void;
   anchorIds?: boolean;
 }) {
   const t = useTranslations();
-  const roleInputId = useId();
 
   function toggleModule(moduleId: DashboardModuleId, checked: boolean) {
     const next = checked
@@ -77,14 +77,15 @@ function AccessRuleRow({
   const roleBlock = (
     <div className="flex items-start justify-between gap-4">
       <div className="flex-1 space-y-2">
-        <Label htmlFor={roleInputId}>{t('access.roleIdLabel')}</Label>
+        <Label>{t('access.roleIdLabel')}</Label>
-        <Input
+        <div className="max-w-xs">
-          id={roleInputId}
+          <DiscordRoleSelect
+            guildId={guildId}
             value={rule.roleId}
-          onChange={(event) => onChange({ ...rule, roleId: event.target.value.trim() })}
+            onChange={(roleId) => onChange({ ...rule, roleId })}
             placeholder={t('access.roleIdPlaceholder')}
-          className="max-w-xs"
           />
+        </div>
         <p className="text-xs text-muted-foreground">{t('access.roleIdHint')}</p>
       </div>
       <Button type="button" variant="ghost" size="icon" onClick={onRemove} aria-label={t('access.removeRule')}>
@@ -169,6 +170,7 @@ export function AccessRulesForm({ guildId, initialRules }: AccessRulesFormProps)
             {value.map((rule, index) => (
               <AccessRuleRow
                 key={rule.clientKey}
+                guildId={guildId}
                 rule={rule}
                 anchorIds={index === 0}
                 onChange={(updated) =>

apps/webui/src/components/ui/discord-channel-select.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import type { DiscordChannelOption } from '@nexumi/shared';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '@/components/locale-provider';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useGuildChannels } from '@/hooks/use-guild-channels';
+import { CHANNEL_TYPES, channelPrefix } from '@/lib/discord-guild-resources';
+import { cn } from '@/lib/utils';
+
+type ChannelKind = keyof typeof CHANNEL_TYPES;
+
+function filterChannels(
+  channels: DiscordChannelOption[],
+  kinds: ChannelKind[] | undefined
+): DiscordChannelOption[] {
+  if (!kinds || kinds.length === 0) {
+    return channels;
+  }
+  const allowed = new Set<number>(kinds.flatMap((kind) => [...CHANNEL_TYPES[kind]]));
+  return channels.filter((channel) => allowed.has(channel.type));
+}
+
+function toOptions(channels: DiscordChannelOption[]) {
+  return channels.map((channel) => ({
+    id: channel.id,
+    name: channel.name,
+    prefix: channelPrefix(channel.type)
+  }));
+}
+
+interface ChannelSelectBaseProps {
+  guildId: string;
+  kinds?: ChannelKind[];
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+interface DiscordChannelSelectProps extends ChannelSelectBaseProps {
+  value: string;
+  onChange: (next: string) => void;
+  allowClear?: boolean;
+}
+
+/** Single channel picker (searchable). Empty string = cleared. */
+export function DiscordChannelSelect({
+  guildId,
+  value,
+  onChange,
+  kinds = ['messageable'],
+  disabled = false,
+  placeholder,
+  allowClear = true
+}: DiscordChannelSelectProps) {
+  const t = useTranslations();
+  const { channels, loading } = useGuildChannels(guildId);
+  const [open, setOpen] = useState(false);
+
+  const options = useMemo(() => toOptions(filterChannels(channels, kinds)), [channels, kinds]);
+  const selected = options.find((option) => option.id === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || loading}
+          className="h-9 w-full justify-between px-3 font-normal"
+        >
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected
+              ? `${selected.prefix}${selected.name}`
+              : (placeholder ?? t('modulePages.commands.channelSearchPlaceholder'))}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder ?? t('modulePages.commands.channelSearchPlaceholder')} />
+          <CommandList>
+            <CommandEmpty>{t('common.noResults')}</CommandEmpty>
+            <CommandGroup>
+              {allowClear && value ? (
+                <CommandItem
+                  value="__clear__"
+                  onSelect={() => {
+                    onChange('');
+                    setOpen(false);
+                  }}
+                >
+                  <X className="size-4 opacity-60" />
+                  <span className="text-muted-foreground">{t('common.clearSelection')}</span>
+                </CommandItem>
+              ) : null}
+              {options.map((option) => (
+                <CommandItem
+                  key={option.id}
+                  value={`${option.prefix}${option.name} ${option.id}`}
+                  onSelect={() => {
+                    onChange(option.id);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn('size-4', value === option.id ? 'opacity-100' : 'opacity-0')} />
+                  <span className="truncate">
+                    {option.prefix}
+                    {option.name}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DiscordChannelMultiSelectProps extends ChannelSelectBaseProps {
+  value: string[];
+  onChange: (next: string[]) => void;
+}
+
+/** Multi channel picker (searchable), same UX as Commands. */
+export function DiscordChannelMultiSelect({
+  guildId,
+  value,
+  onChange,
+  kinds = ['messageable'],
+  disabled = false,
+  placeholder
+}: DiscordChannelMultiSelectProps) {
+  const t = useTranslations();
+  const { channels, loading } = useGuildChannels(guildId);
+  const options = useMemo(() => toOptions(filterChannels(channels, kinds)), [channels, kinds]);
+
+  return (
+    <DiscordResourceMultiSelect
+      options={options}
+      value={value}
+      onChange={onChange}
+      disabled={disabled || loading}
+      placeholder={placeholder ?? t('modulePages.commands.channelSearchPlaceholder')}
+    />
+  );
+}

apps/webui/src/components/ui/discord-role-select.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import type { DiscordRoleOption } from '@nexumi/shared';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '@/components/locale-provider';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useGuildRoles } from '@/hooks/use-guild-roles';
+import { cn } from '@/lib/utils';
+
+function toOptions(roles: DiscordRoleOption[]) {
+  return roles.map((role) => ({
+    id: role.id,
+    name: role.name,
+    prefix: '@'
+  }));
+}
+
+interface RoleSelectBaseProps {
+  guildId: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+interface DiscordRoleSelectProps extends RoleSelectBaseProps {
+  value: string;
+  onChange: (next: string) => void;
+  allowClear?: boolean;
+}
+
+/** Single role picker (searchable). Empty string = cleared. */
+export function DiscordRoleSelect({
+  guildId,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+  allowClear = true
+}: DiscordRoleSelectProps) {
+  const t = useTranslations();
+  const { roles, loading } = useGuildRoles(guildId);
+  const [open, setOpen] = useState(false);
+
+  const options = useMemo(() => toOptions(roles), [roles]);
+  const selected = options.find((option) => option.id === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || loading}
+          className="h-9 w-full justify-between px-3 font-normal"
+        >
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected
+              ? `${selected.prefix}${selected.name}`
+              : (placeholder ?? t('modulePages.commands.roleSearchPlaceholder'))}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder ?? t('modulePages.commands.roleSearchPlaceholder')} />
+          <CommandList>
+            <CommandEmpty>{t('common.noResults')}</CommandEmpty>
+            <CommandGroup>
+              {allowClear && value ? (
+                <CommandItem
+                  value="__clear__"
+                  onSelect={() => {
+                    onChange('');
+                    setOpen(false);
+                  }}
+                >
+                  <X className="size-4 opacity-60" />
+                  <span className="text-muted-foreground">{t('common.clearSelection')}</span>
+                </CommandItem>
+              ) : null}
+              {options.map((option) => (
+                <CommandItem
+                  key={option.id}
+                  value={`${option.prefix}${option.name} ${option.id}`}
+                  onSelect={() => {
+                    onChange(option.id);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn('size-4', value === option.id ? 'opacity-100' : 'opacity-0')} />
+                  <span className="truncate">
+                    {option.prefix}
+                    {option.name}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DiscordRoleMultiSelectProps extends RoleSelectBaseProps {
+  value: string[];
+  onChange: (next: string[]) => void;
+}
+
+/** Multi role picker (searchable). */
+export function DiscordRoleMultiSelect({
+  guildId,
+  value,
+  onChange,
+  disabled = false,
+  placeholder
+}: DiscordRoleMultiSelectProps) {
+  const t = useTranslations();
+  const { roles, loading } = useGuildRoles(guildId);
+  const options = useMemo(() => toOptions(roles), [roles]);
+
+  return (
+    <DiscordResourceMultiSelect
+      options={options}
+      value={value}
+      onChange={onChange}
+      disabled={disabled || loading}
+      placeholder={placeholder ?? t('modulePages.commands.roleSearchPlaceholder')}
+    />
+  );
+}

apps/webui/src/hooks/use-guild-channels.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import type { DiscordChannelOption } from '@nexumi/shared';
+import { useEffect, useState } from 'react';
+
+const cache = new Map<string, DiscordChannelOption[]>();
+
+export function useGuildChannels(guildId: string): {
+  channels: DiscordChannelOption[];
+  loading: boolean;
+} {
+  const [channels, setChannels] = useState<DiscordChannelOption[]>(() => cache.get(guildId) ?? []);
+  const [loading, setLoading] = useState(!cache.has(guildId));
+
+  useEffect(() => {
+    let cancelled = false;
+    const cached = cache.get(guildId);
+    if (cached) {
+      setChannels(cached);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    void fetch(`/api/guilds/${guildId}/channels`)
+      .then(async (response) => {
+        if (!response.ok) {
+          return [] as DiscordChannelOption[];
+        }
+        return (await response.json()) as DiscordChannelOption[];
+      })
+      .then((data) => {
+        if (cancelled) {
+          return;
+        }
+        cache.set(guildId, data);
+        setChannels(data);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setChannels([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guildId]);
+
+  return { channels, loading };
+}

apps/webui/src/hooks/use-guild-roles.ts

@@ -0,0 +1,56 @@
+'use client';
+
+import type { DiscordRoleOption } from '@nexumi/shared';
+import { useEffect, useState } from 'react';
+
+const cache = new Map<string, DiscordRoleOption[]>();
+
+export function useGuildRoles(guildId: string): {
+  roles: DiscordRoleOption[];
+  loading: boolean;
+} {
+  const [roles, setRoles] = useState<DiscordRoleOption[]>(() => cache.get(guildId) ?? []);
+  const [loading, setLoading] = useState(!cache.has(guildId));
+
+  useEffect(() => {
+    let cancelled = false;
+    const cached = cache.get(guildId);
+    if (cached) {
+      setRoles(cached);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    void fetch(`/api/guilds/${guildId}/roles`)
+      .then(async (response) => {
+        if (!response.ok) {
+          return [] as DiscordRoleOption[];
+        }
+        return (await response.json()) as DiscordRoleOption[];
+      })
+      .then((data) => {
+        if (cancelled) {
+          return;
+        }
+        cache.set(guildId, data);
+        setRoles(data);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRoles([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guildId]);
+
+  return { roles, loading };
+}

apps/webui/src/lib/discord-guild-resources.ts

@@ -5,17 +5,24 @@ import { redis } from './redis';
 const DISCORD_API_BASE = 'https://discord.com/api/v10';
 const CACHE_TTL_SECONDS = 60;
 
-/** Discord channel types usable for slash commands. */
+/** Channel types useful in the dashboard (text, voice, category, forum, …). */
-const COMMAND_CHANNEL_TYPES = new Set([
+const DASHBOARD_CHANNEL_TYPES = new Set([
   0, // GUILD_TEXT
+  2, // GUILD_VOICE
+  4, // GUILD_CATEGORY
   5, // GUILD_ANNOUNCEMENT
-  10, // ANNOUNCEMENT_THREAD
+  13, // GUILD_STAGE_VOICE
-  11, // PUBLIC_THREAD
-  12, // PRIVATE_THREAD
   15, // GUILD_FORUM
   16 // GUILD_MEDIA
 ]);
 
+export const CHANNEL_TYPES = {
+  text: [0, 5, 15, 16],
+  voice: [2, 13],
+  category: [4],
+  messageable: [0, 5, 15, 16]
+} as const;
+
 async function discordBotFetch<T>(path: string): Promise<T> {
   const response = await fetch(`${DISCORD_API_BASE}${path}`, {
     headers: { Authorization: `Bot ${env.BOT_TOKEN}` },
@@ -44,7 +51,7 @@ interface DiscordRoleRest {
 }
 
 export async function listGuildChannelsForDashboard(guildId: string): Promise<DiscordChannelOption[]> {
-  const cacheKey = `dashboard:guild:${guildId}:channels`;
+  const cacheKey = `dashboard:guild:${guildId}:channels:v2`;
   const cached = await redis.get(cacheKey);
   if (cached) {
     return JSON.parse(cached) as DiscordChannelOption[];
@@ -52,7 +59,7 @@ export async function listGuildChannelsForDashboard(guildId: string): Promise<Di
 
   const channels = await discordBotFetch<DiscordChannelRest[]>(`/guilds/${guildId}/channels`);
   const options = channels
-    .filter((channel) => COMMAND_CHANNEL_TYPES.has(channel.type))
+    .filter((channel) => DASHBOARD_CHANNEL_TYPES.has(channel.type))
     .map((channel) => ({
       id: channel.id,
       name: channel.name,
@@ -86,3 +93,13 @@ export async function listGuildRolesForDashboard(guildId: string): Promise<Disco
   await redis.set(cacheKey, JSON.stringify(options), 'EX', CACHE_TTL_SECONDS);
   return options;
 }
+
+export function channelPrefix(type: number): string {
+  if (type === 2 || type === 13) {
+    return '🔊 ';
+  }
+  if (type === 4) {
+    return '📁 ';
+  }
+  return '#';
+}

apps/webui/src/messages/de.json

@@ -20,7 +20,8 @@
     "comingSoon": "Demnächst verfügbar",
     "close": "Schließen",
     "searchSelect": "Suchen und auswählen…",
-    "noResults": "Keine Treffer"
+    "noResults": "Keine Treffer",
+    "clearSelection": "Auswahl löschen"
   },
   "nav": {
     "dashboard": "Dashboard",

apps/webui/src/messages/en.json

@@ -20,7 +20,8 @@
     "close": "Close",
     "optional": "Optional",
     "searchSelect": "Search and select…",
-    "noResults": "No results"
+    "noResults": "No results",
+    "clearSelection": "Clear selection"
   },
   "nav": {
     "dashboard": "Dashboard",

docs/PHASE-TRACKING.md

@@ -88,6 +88,28 @@
 - Musik- und KI-Modul (nur auf Zuruf)
 - Premium-Zahlungsanbindung
 
+## Post-Phase – Channel-Picker überall (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- `DiscordChannelSelect` / `DiscordChannelMultiSelect` + `useGuildChannels`
+- Alle Modul-Forms: Kanal-ID-Texteingaben durch durchsuchbare Channel-Auswahl ersetzt
+- Voice-/Category-Filter für TempVoice/Stats/Tickets
+
+## Post-Phase – Role-Picker überall (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- `DiscordRoleSelect` / `DiscordRoleMultiSelect` + `useGuildRoles`
+- Modul-Forms/Manager: Rollen-ID-Texteingaben durch durchsuchbare Role-Auswahl ersetzt (Welcome, Verification, Leveling, Logging, Birthdays, Giveaways, Tags, Tickets, Access Rules, Feeds, Scheduler, Commands)
+- Selfroles-Textarea (`roleId | label | emoji`) bewusst unverändert
+
+### Manuell testen
+
+- [ ] Rollen in den Modul-Settings per Dropdown setzen und speichern
+- [ ] Multi-Select (Autoroles, No-XP-Roles, Support-Roles, …) speichert string[] korrekt
+- [ ] Access-Rules: Rolle wählen und Module zuweisen
+
 ## Post-Phase – Command-Global-Rules + Channel-Picker (Status: implementiert)
 
 ### Abgeschlossen (Code)