feat(phase2): channel permission overrides + expanded role UI + audit log cleanup

web/src/components/ChannelList.tsx

@@ -4,6 +4,7 @@ import { useChannelStore } from '../stores/channel.ts';
 import { VoiceChannel } from './VoiceChannel.tsx';
 import { CreateChannelModal } from './CreateChannelModal.tsx';
 import { InviteModal } from './InviteModal.tsx';
+import { ChannelSettingsModal } from './ChannelSettingsModal.tsx';
 
 export function ChannelList() {
   const activeServerId = useServerStore((state) => state.activeServerId);
@@ -14,6 +15,7 @@ export function ChannelList() {
   const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
   const [showCreate, setShowCreate] = useState(false);
   const [showInvite, setShowInvite] = useState(false);
+  const [settingsChannel, setSettingsChannel] = useState<{ id: string; name: string } | null>(null);
 
   useEffect(() => {
     if (activeServerId) {
@@ -83,16 +85,26 @@ export function ChannelList() {
                   channelName={channel.name}
                 />
               ) : (
-                <button
-                  key={channel.id}
-                  onClick={() => setActiveChannel(channel.id)}
-                  className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
-                    channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
-                  }`}
-                >
-                  <span className="text-gb-fg-f">#</span>
-                  <span className="truncate">{channel.name}</span>
-                </button>
+                <div key={channel.id} className="group">
+                  <button
+                    onClick={() => setActiveChannel(channel.id)}
+                    className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
+                      channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
+                    }`}
+                  >
+                    <span className="text-gb-fg-f">#</span>
+                    <span className="truncate flex-1">{channel.name}</span>
+                    <span
+                      onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
+                      className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100"
+                      title="Channel settings"
+                      role="button"
+                      tabIndex={0}
+                    >
+                      [⚙]
+                    </span>
+                  </button>
+                </div>
               )
             )}
           </div>
@@ -104,6 +116,14 @@ export function ChannelList() {
       {showInvite && activeServerId && activeServer && (
         <InviteModal serverId={activeServerId} serverName={activeServer.name} onClose={() => setShowInvite(false)} />
       )}
+      {settingsChannel && activeServerId && (
+        <ChannelSettingsModal
+          serverId={activeServerId}
+          channelId={settingsChannel.id}
+          channelName={settingsChannel.name}
+          onClose={() => setSettingsChannel(null)}
+        />
+      )}
     </div>
   );
 }

web/src/components/ChannelSettingsModal.tsx

@@ -0,0 +1,193 @@
+import { useEffect, useState } from 'react';
+import { usePermissionStore, PERMISSION_LABELS, PERMS, type ChannelOverride, hasPermission } from '../stores/permissions.ts';
+import { useRoleStore } from '../stores/role.ts';
+import { useMemberStore } from '../stores/member.ts';
+
+interface ChannelSettingsModalProps {
+  serverId: string;
+  channelId: string;
+  channelName: string;
+  onClose: () => void;
+}
+
+type Tab = 'permissions';
+type TargetMode = 'role' | 'user';
+
+interface OverrideFormData {
+  targetType: TargetMode;
+  targetId: string;
+  allow: number;
+  deny: number;
+}
+
+function OverrideMatrix({ allow, deny, onChange }: { allow: number; deny: number; onChange: (allow: number, deny: number) => void }) {
+  const toggle = (flag: number, state: 'allow' | 'deny' | 'inherit') => {
+    let nextAllow = allow;
+    let nextDeny = deny;
+    if (state === 'allow') {
+      nextAllow |= flag;
+      nextDeny &= ~flag;
+    } else if (state === 'deny') {
+      nextAllow &= ~flag;
+      nextDeny |= flag;
+    } else {
+      nextAllow &= ~flag;
+      nextDeny &= ~flag;
+    }
+    onChange(nextAllow, nextDeny);
+  };
+
+  const state = (flag: number): 'allow' | 'deny' | 'inherit' => {
+    if (hasPermission(allow, flag)) return 'allow';
+    if (hasPermission(deny, flag)) return 'deny';
+    return 'inherit';
+  };
+
+  return (
+    <div className="space-y-1 max-h-64 overflow-y-auto border border-gb-bg-t p-2">
+      {(Object.keys(PERMISSION_LABELS) as (keyof typeof PERMISSION_LABELS)[]).map((key) => {
+        const flag = PERMS[key];
+        const s = state(flag);
+        return (
+          <div key={key} className="flex items-center justify-between text-xs font-mono py-1">
+            <span className="text-gb-fg">{PERMISSION_LABELS[key]}</span>
+            <div className="flex gap-1">
+              {(['inherit', 'allow', 'deny'] as const).map((opt) => (
+                <button
+                  key={opt}
+                  onClick={() => toggle(flag, opt)}
+                  className={`px-2 py-0.5 border ${
+                    s === opt
+                      ? opt === 'allow' ? 'bg-gb-green text-gb-bg border-gb-green' :
+                        opt === 'deny' ? 'bg-gb-red text-gb-bg border-gb-red' :
+                        'bg-gb-orange text-gb-bg border-gb-orange'
+                      : 'border-gb-bg-t text-gb-fg-f hover:border-gb-fg-t'
+                  }`}
+                >
+                  {opt.toUpperCase()}
+                </button>
+              ))}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function ChannelSettingsModal({ serverId, channelId, channelName, onClose }: ChannelSettingsModalProps) {
+  const [tab] = useState<Tab>('permissions');
+  const [form, setForm] = useState<OverrideFormData>({ targetType: 'role', targetId: '', allow: 0, deny: 0 });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const overrides = usePermissionStore((s) => s.overridesByChannel[channelId] || []);
+  const fetchOverrides = usePermissionStore((s) => s.fetchOverrides);
+  const setOverride = usePermissionStore((s) => s.setOverride);
+  const deleteOverride = usePermissionStore((s) => s.deleteOverride);
+
+  const roles = useRoleStore((s) => s.roles);
+  const fetchRoles = useRoleStore((s) => s.fetchRoles);
+  const members = useMemberStore((s) => s.membersByServer[serverId] || []);
+  const fetchMembers = useMemberStore((s) => s.fetchMembers);
+
+  useEffect(() => {
+    fetchOverrides(channelId).catch(() => setError('Failed to load overrides'));
+    fetchRoles(serverId).catch(() => {});
+    fetchMembers(serverId).catch(() => {});
+  }, [channelId, serverId, fetchOverrides, fetchRoles, fetchMembers]);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleSave = async () => {
+    if (!form.targetId) {
+      setError('Select a target');
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      await setOverride(channelId, form.targetType, form.targetId, form.allow, form.deny);
+      setForm({ targetType: 'role', targetId: '', allow: 0, deny: 0 });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save override');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const targets = form.targetType === 'role'
+    ? roles.filter((r) => !r.is_default).map((r) => ({ id: r.id, label: r.name }))
+    : members.map((m) => ({ id: m.id, label: m.username }));
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={onClose}>
+      <div className="bg-gb-bg border border-gb-bg-t w-[600px] max-h-[80vh] flex flex-col font-mono" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gb-bg-t">
+          <span className="text-sm text-gb-orange">CHANNEL SETTINGS: #{channelName}</span>
+          <button onClick={onClose} className="text-xs text-gb-red">[x]</button>
+        </div>
+        <div className="flex border-b border-gb-bg-t">
+          <button className="px-4 py-2 text-xs text-gb-orange bg-gb-bg-s">[PERMISSIONS]</button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-4">
+          {tab === 'permissions' && (
+            <div className="space-y-3">
+              <div className="text-xs text-gb-fg-f">Existing overrides</div>
+              {overrides.length === 0 && <div className="text-xs text-gb-fg-f">[none]</div>}
+              {overrides.map((o: ChannelOverride) => (
+                <div key={o.id} className="flex items-center justify-between border border-gb-bg-t p-2 text-xs">
+                  <span className="text-gb-fg">{o.target_type}:{o.target_id}</span>
+                  <div className="flex gap-2 text-gb-fg-f">
+                    <span>allow:{o.allow_bitflags}</span>
+                    <span>deny:{o.deny_bitflags}</span>
+                    <button onClick={() => deleteOverride(channelId, o.target_type, o.target_id)} className="text-gb-red hover:text-gb-orange">[x]</button>
+                  </div>
+                </div>
+              ))}
+
+              <div className="border-t border-gb-bg-t pt-3">
+                <div className="text-xs text-gb-fg-f mb-2">New override</div>
+                <div className="flex gap-2 mb-2">
+                  <select
+                    value={form.targetType}
+                    onChange={(e) => setForm({ ...form, targetType: e.target.value as TargetMode, targetId: '' })}
+                    className="terminal-input text-xs"
+                  >
+                    <option value="role">role</option>
+                    <option value="user">user</option>
+                  </select>
+                  <select
+                    value={form.targetId}
+                    onChange={(e) => setForm({ ...form, targetId: e.target.value })}
+                    className="terminal-input text-xs flex-1"
+                  >
+                    <option value="">-- select --</option>
+                    {targets.map((t) => (
+                      <option key={t.id} value={t.id}>{t.label}</option>
+                    ))}
+                  </select>
+                </div>
+                <OverrideMatrix allow={form.allow} deny={form.deny} onChange={(a, d) => setForm({ ...form, allow: a, deny: d })} />
+                {error && <div className="text-xs text-gb-red mt-2">ERR: {error}</div>}
+                <button
+                  onClick={handleSave}
+                  disabled={saving || !form.targetId}
+                  className="mt-2 px-3 py-1 bg-gb-orange text-gb-bg text-xs disabled:opacity-50"
+                >
+                  {saving ? 'SAVING...' : '[SAVE OVERRIDE]'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/components/RoleManager.tsx

@@ -15,6 +15,17 @@ const PERMS = {
   CONNECT_VOICE: 256,
   SPEAK_VOICE: 512,
   SHARE_SCREEN: 1024,
+  MUTE_MEMBERS: 2048,
+  CREATE_INSTANT_INVITE: 4096,
+  CHANGE_NICKNAME: 8192,
+  MANAGE_NICKNAMES: 16384,
+  MANAGE_ROLES: 32768,
+  MANAGE_WEBHOOKS: 65536,
+  EMBED_LINKS: 131072,
+  ATTACH_FILES: 262144,
+  ADD_REACTIONS: 524288,
+  USE_EXTERNAL_EMOJIS: 1048576,
+  MENTION_EVERYONE: 2097152,
 } as const;
 
 const PERM_CATEGORIES = [
@@ -24,6 +35,11 @@ const PERM_CATEGORIES = [
       { key: 'VIEW_CHANNEL', label: 'View Channel', flag: PERMS.VIEW_CHANNEL },
       { key: 'SEND_MESSAGES', label: 'Send Messages', flag: PERMS.SEND_MESSAGES },
       { key: 'MANAGE_MESSAGES', label: 'Manage Messages', flag: PERMS.MANAGE_MESSAGES },
+      { key: 'ADD_REACTIONS', label: 'Add Reactions', flag: PERMS.ADD_REACTIONS },
+      { key: 'EMBED_LINKS', label: 'Embed Links', flag: PERMS.EMBED_LINKS },
+      { key: 'ATTACH_FILES', label: 'Attach Files', flag: PERMS.ATTACH_FILES },
+      { key: 'MENTION_EVERYONE', label: 'Mention @everyone', flag: PERMS.MENTION_EVERYONE },
+      { key: 'USE_EXTERNAL_EMOJIS', label: 'Use External Emojis', flag: PERMS.USE_EXTERNAL_EMOJIS },
     ],
   },
   {
@@ -31,6 +47,9 @@ const PERM_CATEGORIES = [
     perms: [
       { key: 'KICK_MEMBERS', label: 'Kick Members', flag: PERMS.KICK_MEMBERS },
       { key: 'BAN_MEMBERS', label: 'Ban Members', flag: PERMS.BAN_MEMBERS },
+      { key: 'MUTE_MEMBERS', label: 'Mute Members', flag: PERMS.MUTE_MEMBERS },
+      { key: 'MANAGE_NICKNAMES', label: 'Manage Nicknames', flag: PERMS.MANAGE_NICKNAMES },
+      { key: 'CHANGE_NICKNAME', label: 'Change Nickname', flag: PERMS.CHANGE_NICKNAME },
     ],
   },
   {
@@ -38,6 +57,9 @@ const PERM_CATEGORIES = [
     perms: [
       { key: 'MANAGE_SERVER', label: 'Manage Server', flag: PERMS.MANAGE_SERVER },
       { key: 'MANAGE_CHANNELS', label: 'Manage Channels', flag: PERMS.MANAGE_CHANNELS },
+      { key: 'MANAGE_ROLES', label: 'Manage Roles', flag: PERMS.MANAGE_ROLES },
+      { key: 'MANAGE_WEBHOOKS', label: 'Manage Webhooks', flag: PERMS.MANAGE_WEBHOOKS },
+      { key: 'CREATE_INSTANT_INVITE', label: 'Create Instant Invite', flag: PERMS.CREATE_INSTANT_INVITE },
       { key: 'ADMINISTRATOR', label: 'Administrator', flag: PERMS.ADMINISTRATOR },
     ],
   },
@@ -66,9 +88,11 @@ function permSummary(permissions: number): string {
   const active: string[] = [];
   if (hasPerm(permissions, PERMS.MANAGE_SERVER)) active.push('MGR_SERVER');
   if (hasPerm(permissions, PERMS.MANAGE_CHANNELS)) active.push('MGR_CHAN');
+  if (hasPerm(permissions, PERMS.MANAGE_ROLES)) active.push('MGR_ROLES');
   if (hasPerm(permissions, PERMS.MANAGE_MESSAGES)) active.push('MGR_MSG');
   if (hasPerm(permissions, PERMS.KICK_MEMBERS)) active.push('KICK');
   if (hasPerm(permissions, PERMS.BAN_MEMBERS)) active.push('BAN');
+  if (hasPerm(permissions, PERMS.MUTE_MEMBERS)) active.push('MUTE');
   return active.length > 0 ? active.join('+') : 'BASIC';
 }
 

web/src/stores/permissions.ts

@@ -0,0 +1,109 @@
+import { create } from 'zustand';
+import { api } from '../lib/api.ts';
+
+// ponytail: mirror backend permission bitflags exactly.
+export const PERMS = {
+  VIEW_CHANNEL: 1,
+  SEND_MESSAGES: 2,
+  MANAGE_MESSAGES: 4,
+  KICK_MEMBERS: 8,
+  BAN_MEMBERS: 16,
+  MANAGE_SERVER: 32,
+  MANAGE_CHANNELS: 64,
+  ADMINISTRATOR: 128,
+  CONNECT_VOICE: 256,
+  SPEAK_VOICE: 512,
+  SHARE_SCREEN: 1024,
+  MUTE_MEMBERS: 2048,
+  CREATE_INSTANT_INVITE: 4096,
+  CHANGE_NICKNAME: 8192,
+  MANAGE_NICKNAMES: 16384,
+  MANAGE_ROLES: 32768,
+  MANAGE_WEBHOOKS: 65536,
+  EMBED_LINKS: 131072,
+  ATTACH_FILES: 262144,
+  ADD_REACTIONS: 524288,
+  USE_EXTERNAL_EMOJIS: 1048576,
+  MENTION_EVERYONE: 2097152,
+} as const;
+
+export type PermissionKey = keyof typeof PERMS;
+
+export const PERMISSION_LABELS: Record<PermissionKey, string> = {
+  VIEW_CHANNEL: 'View Channel',
+  SEND_MESSAGES: 'Send Messages',
+  MANAGE_MESSAGES: 'Manage Messages',
+  KICK_MEMBERS: 'Kick Members',
+  BAN_MEMBERS: 'Ban Members',
+  MANAGE_SERVER: 'Manage Server',
+  MANAGE_CHANNELS: 'Manage Channels',
+  ADMINISTRATOR: 'Administrator',
+  CONNECT_VOICE: 'Connect Voice',
+  SPEAK_VOICE: 'Speak Voice',
+  SHARE_SCREEN: 'Share Screen',
+  MUTE_MEMBERS: 'Mute Members',
+  CREATE_INSTANT_INVITE: 'Create Instant Invite',
+  CHANGE_NICKNAME: 'Change Nickname',
+  MANAGE_NICKNAMES: 'Manage Nicknames',
+  MANAGE_ROLES: 'Manage Roles',
+  MANAGE_WEBHOOKS: 'Manage Webhooks',
+  EMBED_LINKS: 'Embed Links',
+  ATTACH_FILES: 'Attach Files',
+  ADD_REACTIONS: 'Add Reactions',
+  USE_EXTERNAL_EMOJIS: 'Use External Emojis',
+  MENTION_EVERYONE: 'Mention @everyone',
+};
+
+export function hasPermission(perms: number, flag: number): boolean {
+  return (perms & flag) !== 0;
+}
+
+export interface ChannelOverride {
+  id: string;
+  channel_id: string;
+  target_type: 'role' | 'user';
+  target_id: string;
+  allow_bitflags: number;
+  deny_bitflags: number;
+}
+
+interface PermissionState {
+  overridesByChannel: Record<string, ChannelOverride[]>;
+  fetchOverrides: (channelId: string) => Promise<void>;
+  setOverride: (channelId: string, targetType: 'role' | 'user', targetId: string, allow: number, deny: number) => Promise<ChannelOverride>;
+  deleteOverride: (channelId: string, targetType: 'role' | 'user', targetId: string) => Promise<void>;
+}
+
+export const usePermissionStore = create<PermissionState>((set) => ({
+  overridesByChannel: {},
+
+  fetchOverrides: async (channelId) => {
+    const overrides = await api.get<ChannelOverride[]>(`/servers/_/channels/${channelId}/permissions`);
+    set((state) => ({
+      overridesByChannel: { ...state.overridesByChannel, [channelId]: Array.isArray(overrides) ? overrides : [] },
+    }));
+  },
+
+  setOverride: async (channelId, targetType, targetId, allow, deny) => {
+    const override = await api.put<ChannelOverride>(`/servers/_/channels/${channelId}/permissions/${targetType}/${targetId}`, { allow, deny });
+    set((state) => {
+      const list = state.overridesByChannel[channelId] || [];
+      const filtered = list.filter((o) => !(o.target_type === targetType && o.target_id === targetId));
+      return { overridesByChannel: { ...state.overridesByChannel, [channelId]: [...filtered, override] } };
+    });
+    return override;
+  },
+
+  deleteOverride: async (channelId, targetType, targetId) => {
+    await api.delete(`/servers/_/channels/${channelId}/permissions/${targetType}/${targetId}`);
+    set((state) => {
+      const list = state.overridesByChannel[channelId] || [];
+      return {
+        overridesByChannel: {
+          ...state.overridesByChannel,
+          [channelId]: list.filter((o) => !(o.target_type === targetType && o.target_id === targetId)),
+        },
+      };
+    });
+  },
+}));