agent-relay 1.6.0 → 2.0.0

package/packages/dashboard/ui/react-components/channels/ChannelDialogs.tsx

@@ -0,0 +1,1411 @@
+/**
+ * Channel Dialogs
+ *
+ * Confirmation dialogs for channel actions:
+ * - Archive channel
+ * - Delete channel
+ * - Leave channel
+ * - Create channel modal
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import type { Channel, ChannelVisibility, CreateChannelRequest } from './types';
+import { getAvailableMembers, type AvailableMember } from './api';
+
+// =============================================================================
+// Archive Channel Dialog
+// =============================================================================
+
+export interface ArchiveChannelDialogProps {
+  channel: Channel;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function ArchiveChannelDialog({
+  channel,
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading = false,
+}: ArchiveChannelDialogProps) {
+  if (!isOpen) return null;
+
+  const isUnarchiving = channel.status === 'archived';
+
+  return (
+    <Dialog onClose={onClose}>
+      <div className="p-6 max-w-md">
+        <div className="flex items-center gap-3 mb-4">
+          <div className={`
+            w-10 h-10 rounded-full flex items-center justify-center
+            ${isUnarchiving ? 'bg-success/10' : 'bg-warning/10'}
+          `}>
+            {isUnarchiving ? (
+              <UnarchiveIcon className="w-5 h-5 text-success" />
+            ) : (
+              <ArchiveIcon className="w-5 h-5 text-warning" />
+            )}
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-text-primary">
+              {isUnarchiving ? 'Unarchive' : 'Archive'} #{channel.name}?
+            </h2>
+          </div>
+        </div>
+
+        <p className="text-sm text-text-secondary mb-6">
+          {isUnarchiving ? (
+            <>
+              This will restore the channel and make it visible to all members again.
+              Messages will be preserved.
+            </>
+          ) : (
+            <>
+              Archiving this channel will move it to the Archived section. Members can
+              still view message history, but no new messages can be sent. You can
+              unarchive it later.
+            </>
+          )}
+        </p>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className={`
+              px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2
+              ${isUnarchiving
+                ? 'bg-success/20 text-success hover:bg-success/30'
+                : 'bg-warning/20 text-warning hover:bg-warning/30'}
+            `}
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            {isUnarchiving ? 'Unarchive' : 'Archive'}
+          </button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Delete Channel Dialog
+// =============================================================================
+
+export interface DeleteChannelDialogProps {
+  channel: Channel;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function DeleteChannelDialog({
+  channel,
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading = false,
+}: DeleteChannelDialogProps) {
+  const [confirmText, setConfirmText] = useState('');
+
+  if (!isOpen) return null;
+
+  const canDelete = confirmText === channel.name;
+
+  return (
+    <Dialog onClose={onClose}>
+      <div className="p-6 max-w-md">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 rounded-full bg-red-500/10 flex items-center justify-center">
+            <TrashIcon className="w-5 h-5 text-red-400" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-text-primary">
+              Delete #{channel.name}?
+            </h2>
+          </div>
+        </div>
+
+        <div className="bg-red-500/10 border border-red-500/20 rounded-lg p-3 mb-4">
+          <p className="text-sm text-red-400 font-medium flex items-center gap-2">
+            <WarningIcon className="w-4 h-4" />
+            This action cannot be undone
+          </p>
+        </div>
+
+        <p className="text-sm text-text-secondary mb-4">
+          Deleting this channel will permanently remove all messages and files.
+          All {channel.memberCount} members will lose access.
+        </p>
+
+        <div className="mb-6">
+          <label className="block text-sm text-text-muted mb-2">
+            Type <span className="font-mono text-text-primary">{channel.name}</span> to confirm:
+          </label>
+          <input
+            type="text"
+            value={confirmText}
+            onChange={(e) => setConfirmText(e.target.value)}
+            placeholder={channel.name}
+            className="w-full px-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-red-500/50"
+          />
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={!canDelete || isLoading}
+            className="px-4 py-2 text-sm font-medium bg-red-500/20 text-red-400 hover:bg-red-500/30 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            Delete Channel
+          </button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Leave Channel Dialog
+// =============================================================================
+
+export interface LeaveChannelDialogProps {
+  channel: Channel;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  isLoading?: boolean;
+}
+
+export function LeaveChannelDialog({
+  channel,
+  isOpen,
+  onClose,
+  onConfirm,
+  isLoading = false,
+}: LeaveChannelDialogProps) {
+  if (!isOpen) return null;
+
+  return (
+    <Dialog onClose={onClose}>
+      <div className="p-6 max-w-md">
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 rounded-full bg-accent-cyan/10 flex items-center justify-center">
+            <LeaveIcon className="w-5 h-5 text-accent-cyan" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-text-primary">
+              Leave #{channel.name}?
+            </h2>
+          </div>
+        </div>
+
+        <p className="text-sm text-text-secondary mb-6">
+          You'll no longer receive messages from this channel. You can rejoin at
+          any time if the channel is public.
+        </p>
+
+        <div className="flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium bg-accent-cyan/20 text-accent-cyan hover:bg-accent-cyan/30 rounded-lg transition-colors disabled:opacity-50 flex items-center gap-2"
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            Leave Channel
+          </button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Create Channel Modal
+// =============================================================================
+
+export interface CreateChannelModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onCreate: (request: CreateChannelRequest) => void;
+  isLoading?: boolean;
+  existingChannels?: string[];
+  /** Available agents/users for invite suggestions (legacy - merged with fetched data) */
+  availableMembers?: string[];
+  /** Workspace ID for fetching available members */
+  workspaceId?: string;
+}
+
+export function CreateChannelModal({
+  isOpen,
+  onClose,
+  onCreate,
+  isLoading = false,
+  existingChannels = [],
+  availableMembers: legacyAvailableMembers = [],
+  workspaceId,
+}: CreateChannelModalProps) {
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [visibility, setVisibility] = useState<ChannelVisibility>('public');
+  const [inviteInput, setInviteInput] = useState('');
+  const [selectedMembers, setSelectedMembers] = useState<Array<{ id: string; type: 'user' | 'agent' }>>([]);
+  const [fetchedMembers, setFetchedMembers] = useState<AvailableMember[]>([]);
+  const [fetchedAgents, setFetchedAgents] = useState<AvailableMember[]>([]);
+  const [isFetching, setIsFetching] = useState(false);
+
+  // Fetch available members when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setIsFetching(true);
+      getAvailableMembers(workspaceId)
+        .then(({ members, agents }) => {
+          setFetchedMembers(members);
+          setFetchedAgents(agents);
+        })
+        .catch((err) => {
+          console.error('[CreateChannelModal] Failed to fetch available members:', err);
+        })
+        .finally(() => {
+          setIsFetching(false);
+        });
+    }
+  }, [isOpen, workspaceId]);
+
+  // Combine fetched data with legacy prop for backwards compatibility
+  const allMembers: AvailableMember[] = [
+    ...fetchedMembers,
+    ...fetchedAgents,
+    // Add legacy members as agents (for backwards compatibility)
+    ...legacyAvailableMembers
+      .filter(name => !fetchedAgents.some(a => a.id === name) && !fetchedMembers.some(m => m.id === name))
+      .map(name => ({ id: name, displayName: name, type: 'agent' as const })),
+  ];
+
+  const handleClose = useCallback(() => {
+    setName('');
+    setDescription('');
+    setVisibility('public');
+    setInviteInput('');
+    setSelectedMembers([]);
+    onClose();
+  }, [onClose]);
+
+  const handleAddMember = useCallback((member: AvailableMember) => {
+    if (!selectedMembers.some(m => m.id === member.id)) {
+      setSelectedMembers(prev => [...prev, { id: member.id, type: member.type }]);
+      setInviteInput('');
+    }
+  }, [selectedMembers]);
+
+  const handleRemoveMember = useCallback((memberId: string) => {
+    setSelectedMembers(prev => prev.filter(m => m.id !== memberId));
+  }, []);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    onCreate({
+      name: name.trim().toLowerCase().replace(/\s+/g, '-'),
+      description: description.trim() || undefined,
+      visibility,
+      members: selectedMembers.length > 0 ? selectedMembers : undefined,
+    });
+  }, [name, description, visibility, selectedMembers, onCreate]);
+
+  // Filter members for suggestions
+  const suggestions = allMembers.filter(m =>
+    (m.displayName?.toLowerCase().includes(inviteInput.toLowerCase()) ||
+     m.id.toLowerCase().includes(inviteInput.toLowerCase())) &&
+    !selectedMembers.some(sm => sm.id === m.id)
+  ).slice(0, 8);
+
+  if (!isOpen) return null;
+
+  // Validate channel name
+  const normalizedName = name.trim().toLowerCase().replace(/\s+/g, '-');
+  const nameExists = existingChannels.includes(`#${normalizedName}`);
+  const isValidName = normalizedName.length >= 2 && normalizedName.length <= 80 && /^[a-z0-9-]+$/.test(normalizedName);
+  const canCreate = name.trim() && isValidName && !nameExists;
+
+  return (
+    <Dialog onClose={handleClose}>
+      <form onSubmit={handleSubmit} className="p-6 w-[400px] max-w-full">
+        <h2 className="text-lg font-semibold text-text-primary mb-6">
+          Create a channel
+        </h2>
+
+        {/* Channel Name */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Channel name
+          </label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">#</span>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g., engineering"
+              className="w-full pl-7 pr-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+              autoFocus
+            />
+          </div>
+          {name && !isValidName && (
+            <p className="mt-1 text-xs text-red-400">
+              Channel names must be 2-80 characters, lowercase letters, numbers, and hyphens only
+            </p>
+          )}
+          {nameExists && (
+            <p className="mt-1 text-xs text-red-400">
+              A channel with this name already exists
+            </p>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Description <span className="text-text-muted font-normal">(optional)</span>
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What's this channel about?"
+            rows={2}
+            className="w-full px-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50 resize-none"
+          />
+        </div>
+
+        {/* Invite Members */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Invite members <span className="text-text-muted font-normal">(optional)</span>
+            {isFetching && <span className="ml-2 text-text-muted text-xs">Loading...</span>}
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={inviteInput}
+              onChange={(e) => setInviteInput(e.target.value)}
+              placeholder={allMembers.length > 0 ? "Type agent or user name..." : "No members available"}
+              className="w-full px-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+            />
+            {/* Suggestions dropdown */}
+            {inviteInput && suggestions.length > 0 && (
+              <div className="absolute z-10 w-full mt-1 bg-bg-secondary border border-border-subtle rounded-lg shadow-lg max-h-48 overflow-y-auto">
+                {suggestions.map(member => (
+                  <button
+                    key={member.id}
+                    type="button"
+                    onClick={() => handleAddMember(member)}
+                    className="w-full px-3 py-2 text-left text-sm text-text-primary hover:bg-bg-hover transition-colors flex items-center justify-between"
+                  >
+                    <span>{member.displayName || member.id}</span>
+                    <span className={`text-xs px-1.5 py-0.5 rounded ${
+                      member.type === 'agent'
+                        ? 'bg-purple-500/20 text-purple-400'
+                        : 'bg-accent-cyan/20 text-accent-cyan'
+                    }`}>
+                      {member.type === 'agent' ? 'Agent' : 'User'}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+            {/* Show all members if no input and we have members */}
+            {!inviteInput && allMembers.length > 0 && (
+              <div className="mt-2 text-xs text-text-muted">
+                {fetchedMembers.length > 0 && (
+                  <span>{fetchedMembers.length} user{fetchedMembers.length !== 1 ? 's' : ''}</span>
+                )}
+                {fetchedMembers.length > 0 && fetchedAgents.length > 0 && <span>, </span>}
+                {fetchedAgents.length > 0 && (
+                  <span>{fetchedAgents.length} agent{fetchedAgents.length !== 1 ? 's' : ''}</span>
+                )}
+                <span> available</span>
+              </div>
+            )}
+          </div>
+          {/* Selected members with type badges */}
+          {selectedMembers.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {selectedMembers.map(member => (
+                <span
+                  key={member.id}
+                  className={`inline-flex items-center gap-1 px-2 py-1 text-xs rounded-full ${
+                    member.type === 'agent'
+                      ? 'bg-purple-500/10 text-purple-400'
+                      : 'bg-accent-cyan/10 text-accent-cyan'
+                  }`}
+                >
+                  {member.id}
+                  <span className="text-[10px] opacity-70">
+                    ({member.type === 'agent' ? 'Agent' : 'User'})
+                  </span>
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveMember(member.id)}
+                    className="hover:text-red-400 transition-colors"
+                  >
+                    <XIcon className="w-3 h-3" />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Visibility */}
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-text-primary mb-2">
+            Visibility
+          </label>
+          <div className="space-y-2">
+            <label className={`
+              flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors
+              ${visibility === 'public'
+                ? 'border-accent-cyan/30 bg-accent-cyan/5'
+                : 'border-border-subtle hover:bg-bg-hover'}
+            `}>
+              <input
+                type="radio"
+                name="visibility"
+                value="public"
+                checked={visibility === 'public'}
+                onChange={() => setVisibility('public')}
+                className="mt-1"
+              />
+              <div>
+                <div className="flex items-center gap-2">
+                  <HashIcon className="w-4 h-4 text-text-primary" />
+                  <span className="text-sm font-medium text-text-primary">Public</span>
+                </div>
+                <p className="text-xs text-text-muted mt-0.5">
+                  Anyone can join and view messages
+                </p>
+              </div>
+            </label>
+
+            <label className={`
+              flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors
+              ${visibility === 'private'
+                ? 'border-accent-cyan/30 bg-accent-cyan/5'
+                : 'border-border-subtle hover:bg-bg-hover'}
+            `}>
+              <input
+                type="radio"
+                name="visibility"
+                value="private"
+                checked={visibility === 'private'}
+                onChange={() => setVisibility('private')}
+                className="mt-1"
+              />
+              <div>
+                <div className="flex items-center gap-2">
+                  <LockIcon className="w-4 h-4 text-text-primary" />
+                  <span className="text-sm font-medium text-text-primary">Private</span>
+                </div>
+                <p className="text-xs text-text-muted mt-0.5">
+                  Only invited members can join
+                </p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={!canCreate || isLoading}
+            className="px-4 py-2 text-sm font-medium bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            Create Channel
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Invite to Channel Modal
+// =============================================================================
+
+export interface InviteToChannelModalProps {
+  isOpen: boolean;
+  channelName: string;
+  onClose: () => void;
+  onInvite: (members: string[]) => void;
+  isLoading?: boolean;
+  availableMembers?: string[];
+}
+
+export function InviteToChannelModal({
+  isOpen,
+  channelName,
+  onClose,
+  onInvite,
+  isLoading = false,
+  availableMembers = [],
+}: InviteToChannelModalProps) {
+  const [inviteInput, setInviteInput] = useState('');
+  const [selectedMembers, setSelectedMembers] = useState<string[]>([]);
+
+  const handleClose = useCallback(() => {
+    setInviteInput('');
+    setSelectedMembers([]);
+    onClose();
+  }, [onClose]);
+
+  const handleAddMember = useCallback((member: string) => {
+    const normalized = member.trim();
+    if (normalized && !selectedMembers.includes(normalized)) {
+      setSelectedMembers(prev => [...prev, normalized]);
+      setInviteInput('');
+    }
+  }, [selectedMembers]);
+
+  const handleRemoveMember = useCallback((member: string) => {
+    setSelectedMembers(prev => prev.filter(m => m !== member));
+  }, []);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    if (selectedMembers.length === 0) return;
+    onInvite(selectedMembers);
+  }, [selectedMembers, onInvite]);
+
+  // Filter available members for suggestions
+  const suggestions = availableMembers.filter(m =>
+    m.toLowerCase().includes(inviteInput.toLowerCase()) &&
+    !selectedMembers.includes(m)
+  ).slice(0, 5);
+
+  if (!isOpen) return null;
+
+  return (
+    <Dialog onClose={handleClose}>
+      <form onSubmit={handleSubmit} className="p-6 w-[400px] max-w-full">
+        <h2 className="text-lg font-semibold text-text-primary mb-2">
+          Invite to #{channelName}
+        </h2>
+        <p className="text-sm text-text-muted mb-6">
+          Add agents or users to this channel
+        </p>
+
+        {/* Invite Input */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Members to invite
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={inviteInput}
+              onChange={(e) => setInviteInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && inviteInput.trim()) {
+                  e.preventDefault();
+                  handleAddMember(inviteInput);
+                }
+              }}
+              placeholder="Type agent or user name..."
+              className="w-full px-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+              autoFocus
+            />
+            {/* Suggestions dropdown */}
+            {inviteInput && suggestions.length > 0 && (
+              <div className="absolute z-10 w-full mt-1 bg-bg-secondary border border-border-subtle rounded-lg shadow-lg max-h-40 overflow-y-auto">
+                {suggestions.map(member => (
+                  <button
+                    key={member}
+                    type="button"
+                    onClick={() => handleAddMember(member)}
+                    className="w-full px-3 py-2 text-left text-sm text-text-primary hover:bg-bg-hover transition-colors"
+                  >
+                    {member}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          {/* Selected members */}
+          {selectedMembers.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {selectedMembers.map(member => (
+                <span
+                  key={member}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-accent-cyan/10 text-accent-cyan text-xs rounded-full"
+                >
+                  {member}
+                  <button
+                    type="button"
+                    onClick={() => handleRemoveMember(member)}
+                    className="hover:text-red-400 transition-colors"
+                  >
+                    <XIcon className="w-3 h-3" />
+                  </button>
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={selectedMembers.length === 0 || isLoading}
+            className="px-4 py-2 text-sm font-medium bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            Invite {selectedMembers.length > 0 ? `(${selectedMembers.length})` : ''}
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Base Dialog Component
+// =============================================================================
+
+function Dialog({
+  children,
+  onClose,
+}: {
+  children: React.ReactNode;
+  onClose: () => void;
+}) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      onClick={onClose}
+    >
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
+
+      {/* Content */}
+      <div
+        className="relative bg-bg-elevated border border-border-subtle rounded-xl shadow-2xl animate-in fade-in zoom-in-95 duration-150"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// =============================================================================
+// Icons
+// =============================================================================
+
+function LoadingSpinner({ className }: { className?: string }) {
+  return (
+    <svg className={`animate-spin ${className}`} viewBox="0 0 24 24" fill="none">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+    </svg>
+  );
+}
+
+function ArchiveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="21 8 21 21 3 21 3 8" />
+      <rect x="1" y="3" width="22" height="5" />
+      <line x1="10" y1="12" x2="14" y2="12" />
+    </svg>
+  );
+}
+
+function UnarchiveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="21 8 21 21 3 21 3 8" />
+      <rect x="1" y="3" width="22" height="5" />
+      <path d="M12 12v6" />
+      <path d="M9 15l3-3 3 3" />
+    </svg>
+  );
+}
+
+function TrashIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+      <line x1="10" y1="11" x2="10" y2="17" />
+      <line x1="14" y1="11" x2="14" y2="17" />
+    </svg>
+  );
+}
+
+function WarningIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
+function LeaveIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      <polyline points="16 17 21 12 16 7" />
+      <line x1="21" y1="12" x2="9" y2="12" />
+    </svg>
+  );
+}
+
+function HashIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="4" y1="9" x2="20" y2="9" />
+      <line x1="4" y1="15" x2="20" y2="15" />
+      <line x1="10" y1="3" x2="8" y2="21" />
+      <line x1="16" y1="3" x2="14" y2="21" />
+    </svg>
+  );
+}
+
+function LockIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+      <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+    </svg>
+  );
+}
+
+function SettingsIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+    </svg>
+  );
+}
+
+function UserPlusIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="8.5" cy="7" r="4" />
+      <line x1="20" y1="8" x2="20" y2="14" />
+      <line x1="23" y1="11" x2="17" y2="11" />
+    </svg>
+  );
+}
+
+function UserMinusIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="8.5" cy="7" r="4" />
+      <line x1="23" y1="11" x2="17" y2="11" />
+    </svg>
+  );
+}
+
+function XIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// Channel Settings Modal (Task 10)
+// =============================================================================
+
+export interface ChannelSettingsModalProps {
+  channel: Channel;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (updates: { name?: string; description?: string; isPrivate?: boolean }) => void;
+  isLoading?: boolean;
+  error?: string;
+  existingChannelNames?: string[];
+}
+
+export function ChannelSettingsModal({
+  channel,
+  isOpen,
+  onClose,
+  onSave,
+  isLoading = false,
+  error,
+  existingChannelNames = [],
+}: ChannelSettingsModalProps) {
+  const [name, setName] = useState(channel.name);
+  const [description, setDescription] = useState(channel.description || '');
+  const [isPrivate, setIsPrivate] = useState(channel.visibility === 'private');
+
+  // Reset form when channel changes
+  React.useEffect(() => {
+    setName(channel.name);
+    setDescription(channel.description || '');
+    setIsPrivate(channel.visibility === 'private');
+  }, [channel]);
+
+  const handleClose = useCallback(() => {
+    setName(channel.name);
+    setDescription(channel.description || '');
+    setIsPrivate(channel.visibility === 'private');
+    onClose();
+  }, [channel, onClose]);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+
+    // Build changes object (only include changed fields)
+    const changes: { name?: string; description?: string; isPrivate?: boolean } = {};
+    const normalizedName = name.trim().toLowerCase().replace(/\s+/g, '-');
+
+    if (normalizedName !== channel.name) {
+      changes.name = normalizedName;
+    }
+    if (description.trim() !== (channel.description || '')) {
+      changes.description = description.trim();
+    }
+    if (isPrivate !== (channel.visibility === 'private')) {
+      changes.isPrivate = isPrivate;
+    }
+
+    if (Object.keys(changes).length > 0) {
+      onSave(changes);
+    }
+  }, [name, description, isPrivate, channel, onSave]);
+
+  if (!isOpen) return null;
+
+  // Validate channel name
+  const normalizedName = name.trim().toLowerCase().replace(/\s+/g, '-');
+  const nameChanged = normalizedName !== channel.name;
+  const nameExists = nameChanged && existingChannelNames.includes(normalizedName);
+  const isValidName = normalizedName.length >= 2 && normalizedName.length <= 80 && /^[a-z0-9-]+$/.test(normalizedName);
+
+  // Check if form has changes
+  const hasChanges = nameChanged ||
+    description.trim() !== (channel.description || '') ||
+    isPrivate !== (channel.visibility === 'private');
+
+  const canSave = hasChanges && isValidName && !nameExists;
+
+  return (
+    <Dialog onClose={handleClose}>
+      <form onSubmit={handleSubmit} className="p-6 w-[400px] max-w-full">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="w-10 h-10 rounded-full bg-accent-cyan/10 flex items-center justify-center">
+            <SettingsIcon className="w-5 h-5 text-accent-cyan" />
+          </div>
+          <h2 className="text-lg font-semibold text-text-primary">
+            Channel Settings
+          </h2>
+        </div>
+
+        {error && (
+          <div className="mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg">
+            <p className="text-sm text-red-400">{error}</p>
+          </div>
+        )}
+
+        {/* Channel Name */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Channel name
+          </label>
+          <div className="relative">
+            <span className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">#</span>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="w-full pl-7 pr-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+            />
+          </div>
+          {name && !isValidName && (
+            <p className="mt-1 text-xs text-red-400">
+              Channel names must be 2-80 characters, lowercase letters, numbers, and hyphens only
+            </p>
+          )}
+          {nameExists && (
+            <p className="mt-1 text-xs text-red-400">
+              A channel with this name already exists
+            </p>
+          )}
+        </div>
+
+        {/* Description */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-text-primary mb-1.5">
+            Description <span className="text-text-muted font-normal">(optional)</span>
+          </label>
+          <textarea
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="What's this channel about?"
+            rows={2}
+            className="w-full px-3 py-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50 resize-none"
+          />
+        </div>
+
+        {/* Visibility */}
+        <div className="mb-6">
+          <label className="block text-sm font-medium text-text-primary mb-2">
+            Visibility
+          </label>
+          <div className="space-y-2">
+            <label className="flex items-start gap-3 p-3 bg-bg-tertiary rounded-lg cursor-pointer hover:bg-bg-hover transition-colors">
+              <input
+                type="radio"
+                name="visibility"
+                checked={!isPrivate}
+                onChange={() => setIsPrivate(false)}
+                className="mt-0.5"
+              />
+              <div>
+                <div className="flex items-center gap-2 text-sm font-medium text-text-primary">
+                  <HashIcon className="w-4 h-4" />
+                  Public
+                </div>
+                <p className="text-xs text-text-muted mt-0.5">
+                  Anyone in the workspace can view and join
+                </p>
+              </div>
+            </label>
+            <label className="flex items-start gap-3 p-3 bg-bg-tertiary rounded-lg cursor-pointer hover:bg-bg-hover transition-colors">
+              <input
+                type="radio"
+                name="visibility"
+                checked={isPrivate}
+                onChange={() => setIsPrivate(true)}
+                className="mt-0.5"
+              />
+              <div>
+                <div className="flex items-center gap-2 text-sm font-medium text-text-primary">
+                  <LockIcon className="w-4 h-4" />
+                  Private
+                </div>
+                <p className="text-xs text-text-muted mt-0.5">
+                  Only invited members can view and join
+                </p>
+              </div>
+            </label>
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex justify-end gap-3">
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={isLoading}
+            className="px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors disabled:opacity-50"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={!canSave || isLoading}
+            className="px-4 py-2 text-sm font-medium bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+          >
+            {isLoading && <LoadingSpinner className="w-4 h-4" />}
+            Save Changes
+          </button>
+        </div>
+      </form>
+    </Dialog>
+  );
+}
+
+// =============================================================================
+// Member Management Panel (Task 10)
+// =============================================================================
+
+export interface MemberManagementPanelProps {
+  channel: Channel;
+  members: ChannelMember[];
+  isOpen: boolean;
+  onClose: () => void;
+  onAddMember: (memberId: string, memberType: 'user' | 'agent', role: 'admin' | 'member' | 'read_only') => void;
+  onRemoveMember: (memberId: string, memberType: 'user' | 'agent') => void;
+  onUpdateRole: (memberId: string, memberType: 'user' | 'agent', role: 'admin' | 'member' | 'read_only') => void;
+  currentUserId?: string;
+  isLoading?: boolean;
+  availableUsers?: { id: string; name: string }[];
+  availableAgents?: { name: string }[];
+  /** Workspace ID for fetching available members (cloud mode) */
+  workspaceId?: string;
+}
+
+export function MemberManagementPanel({
+  channel,
+  members,
+  isOpen,
+  onClose,
+  onAddMember,
+  onRemoveMember,
+  onUpdateRole,
+  currentUserId,
+  isLoading = false,
+  availableUsers: propAvailableUsers = [],
+  availableAgents: propAvailableAgents = [],
+  workspaceId,
+}: MemberManagementPanelProps) {
+  const [showAddMember, setShowAddMember] = useState(false);
+  const [addMemberType, setAddMemberType] = useState<'user' | 'agent'>('user');
+  const [selectedMemberId, setSelectedMemberId] = useState('');
+  const [selectedRole, setSelectedRole] = useState<'admin' | 'member' | 'read_only'>('member');
+  const [fetchedUsers, setFetchedUsers] = useState<AvailableMember[]>([]);
+  const [fetchedAgents, setFetchedAgents] = useState<AvailableMember[]>([]);
+  const [isFetching, setIsFetching] = useState(false);
+
+  // Fetch available members when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      setIsFetching(true);
+      getAvailableMembers(workspaceId)
+        .then(({ members: users, agents }) => {
+          setFetchedUsers(users);
+          setFetchedAgents(agents);
+        })
+        .catch((err) => {
+          console.error('[MemberManagementPanel] Failed to fetch available members:', err);
+        })
+        .finally(() => {
+          setIsFetching(false);
+        });
+    }
+  }, [isOpen, workspaceId]);
+
+  // Combine fetched data with props for backwards compatibility
+  const availableUsers = fetchedUsers.length > 0
+    ? fetchedUsers.map(u => ({ id: u.id, name: u.displayName || u.id }))
+    : propAvailableUsers;
+  const availableAgents = fetchedAgents.length > 0
+    ? fetchedAgents.map(a => ({ name: a.displayName || a.id }))
+    : propAvailableAgents;
+
+  if (!isOpen) return null;
+
+  // Separate users and agents
+  const userMembers = members.filter(m => m.entityType === 'user');
+  const agentMembers = members.filter(m => m.entityType === 'agent');
+
+  // Get current user's role
+  const currentMember = members.find(m => m.id === currentUserId);
+  const canManageMembers = currentMember?.role === 'owner' || currentMember?.role === 'admin';
+
+  // Count admins to prevent removing the last one
+  const adminCount = members.filter(m => m.role === 'owner' || m.role === 'admin').length;
+
+  // Filter out already added members from available lists
+  const memberIds = new Set(members.map(m => m.id));
+  const filteredUsers = availableUsers.filter(u => !memberIds.has(u.id));
+  const filteredAgents = availableAgents.filter(a => !members.some(m => m.displayName === a.name && m.entityType === 'agent'));
+
+  const handleAddMember = () => {
+    if (!selectedMemberId) return;
+    onAddMember(selectedMemberId, addMemberType, selectedRole);
+    setSelectedMemberId('');
+    setShowAddMember(false);
+  };
+
+  const canRemoveMember = (member: ChannelMember) => {
+    // Cannot remove owner
+    if (member.role === 'owner') return false;
+    // Cannot remove last admin
+    if ((member.role === 'admin') && adminCount <= 1) return false;
+    // Cannot remove self (use leave channel instead)
+    if (member.id === currentUserId) return false;
+    return canManageMembers;
+  };
+
+  const canChangeRole = (member: ChannelMember) => {
+    // Cannot change owner's role
+    if (member.role === 'owner') return false;
+    // Cannot demote last admin
+    if ((member.role === 'admin') && adminCount <= 1) return false;
+    return canManageMembers;
+  };
+
+  return (
+    <Dialog onClose={onClose}>
+      <div className="p-6 w-[500px] max-w-full max-h-[80vh] overflow-hidden flex flex-col">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-full bg-accent-cyan/10 flex items-center justify-center">
+              <UserPlusIcon className="w-5 h-5 text-accent-cyan" />
+            </div>
+            <div>
+              <h2 className="text-lg font-semibold text-text-primary">
+                Members
+              </h2>
+              <p className="text-sm text-text-muted">
+                #{channel.name} · {members.length} {members.length === 1 ? 'member' : 'members'}
+              </p>
+            </div>
+          </div>
+          {canManageMembers && (
+            <button
+              onClick={() => setShowAddMember(!showAddMember)}
+              className="px-3 py-1.5 text-sm font-medium bg-accent-cyan/20 text-accent-cyan hover:bg-accent-cyan/30 rounded-lg transition-colors"
+            >
+              {showAddMember ? 'Cancel' : 'Add Member'}
+            </button>
+          )}
+        </div>
+
+        {/* Add Member Form */}
+        {showAddMember && canManageMembers && (
+          <div className="mb-4 p-4 bg-bg-tertiary rounded-lg border border-border-subtle">
+            <div className="flex gap-2 mb-3">
+              <button
+                onClick={() => setAddMemberType('user')}
+                className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+                  addMemberType === 'user'
+                    ? 'bg-accent-cyan text-bg-deep'
+                    : 'bg-bg-hover text-text-secondary hover:text-text-primary'
+                }`}
+              >
+                User
+              </button>
+              <button
+                onClick={() => setAddMemberType('agent')}
+                className={`px-3 py-1.5 text-sm rounded-lg transition-colors ${
+                  addMemberType === 'agent'
+                    ? 'bg-accent-cyan text-bg-deep'
+                    : 'bg-bg-hover text-text-secondary hover:text-text-primary'
+                }`}
+              >
+                Agent
+              </button>
+            </div>
+
+            <div className="flex gap-2 mb-3">
+              <select
+                value={selectedMemberId}
+                onChange={(e) => setSelectedMemberId(e.target.value)}
+                className="flex-1 px-3 py-2 bg-bg-deep border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+                disabled={isFetching}
+              >
+                <option value="">
+                  {isFetching ? 'Loading...' : `Select ${addMemberType}...`}
+                </option>
+                {addMemberType === 'user'
+                  ? filteredUsers.map(u => (
+                      <option key={u.id} value={u.id}>{u.name}</option>
+                    ))
+                  : filteredAgents.map(a => (
+                      <option key={a.name} value={a.name}>{a.name}</option>
+                    ))}
+              </select>
+              <select
+                value={selectedRole}
+                onChange={(e) => setSelectedRole(e.target.value as 'admin' | 'member' | 'read_only')}
+                className="px-3 py-2 bg-bg-deep border border-border-subtle rounded-lg text-text-primary text-sm focus:outline-none focus:border-accent-cyan/50"
+              >
+                <option value="member">Member</option>
+                <option value="admin">Admin</option>
+                <option value="read_only">Read Only</option>
+              </select>
+            </div>
+
+            <button
+              onClick={handleAddMember}
+              disabled={!selectedMemberId || isLoading}
+              className="w-full px-3 py-2 text-sm font-medium bg-accent-cyan text-bg-deep hover:bg-accent-cyan/90 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              Add {addMemberType === 'user' ? 'User' : 'Agent'}
+            </button>
+          </div>
+        )}
+
+        {/* Members List */}
+        <div className="flex-1 overflow-y-auto space-y-4">
+          {/* Users */}
+          {userMembers.length > 0 && (
+            <div>
+              <h3 className="text-xs font-medium text-text-muted uppercase mb-2">Users ({userMembers.length})</h3>
+              <div className="space-y-1">
+                {userMembers.map((member) => (
+                  <MemberRow
+                    key={member.id}
+                    member={member}
+                    canChangeRole={canChangeRole(member)}
+                    canRemove={canRemoveMember(member)}
+                    onChangeRole={(role) => onUpdateRole(member.id, 'user', role)}
+                    onRemove={() => onRemoveMember(member.id, 'user')}
+                    isCurrentUser={member.id === currentUserId}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Agents */}
+          {agentMembers.length > 0 && (
+            <div>
+              <h3 className="text-xs font-medium text-text-muted uppercase mb-2">Agents ({agentMembers.length})</h3>
+              <div className="space-y-1">
+                {agentMembers.map((member) => (
+                  <MemberRow
+                    key={member.id}
+                    member={member}
+                    canChangeRole={canChangeRole(member)}
+                    canRemove={canRemoveMember(member)}
+                    onChangeRole={(role) => onUpdateRole(member.id, 'agent', role)}
+                    onRemove={() => onRemoveMember(member.id, 'agent')}
+                    isAgent
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="mt-4 pt-4 border-t border-border-subtle">
+          <button
+            onClick={onClose}
+            className="w-full px-4 py-2 text-sm font-medium text-text-secondary bg-bg-tertiary hover:bg-bg-hover rounded-lg transition-colors"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </Dialog>
+  );
+}
+
+function MemberRow({
+  member,
+  canChangeRole,
+  canRemove,
+  onChangeRole,
+  onRemove,
+  isCurrentUser,
+  isAgent,
+}: {
+  member: ChannelMember;
+  canChangeRole: boolean;
+  canRemove: boolean;
+  onChangeRole: (role: 'admin' | 'member' | 'read_only') => void;
+  onRemove: () => void;
+  isCurrentUser?: boolean;
+  isAgent?: boolean;
+}) {
+  return (
+    <div className="flex items-center justify-between p-2 rounded-lg hover:bg-bg-tertiary group">
+      <div className="flex items-center gap-3">
+        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium ${
+          isAgent ? 'bg-purple-500/20 text-purple-400' : 'bg-accent-cyan/20 text-accent-cyan'
+        }`}>
+          {(member.displayName || member.id)[0].toUpperCase()}
+        </div>
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-text-primary">
+              {member.displayName || member.id}
+            </span>
+            {isCurrentUser && (
+              <span className="text-xs text-text-muted">(you)</span>
+            )}
+            {isAgent && (
+              <span className="text-xs px-1.5 py-0.5 bg-purple-500/20 text-purple-400 rounded">
+                Agent
+              </span>
+            )}
+          </div>
+          <span className={`text-xs capitalize ${
+            member.role === 'owner' ? 'text-yellow-400' :
+            member.role === 'admin' ? 'text-accent-cyan' :
+            'text-text-muted'
+          }`}>
+            {member.role}
+          </span>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        {canChangeRole && (
+          <select
+            value={member.role === 'owner' ? 'admin' : member.role}
+            onChange={(e) => onChangeRole(e.target.value as 'admin' | 'member' | 'read_only')}
+            className="px-2 py-1 text-xs bg-bg-tertiary border border-border-subtle rounded text-text-primary focus:outline-none focus:border-accent-cyan/50"
+          >
+            <option value="admin">Admin</option>
+            <option value="member">Member</option>
+            <option value="read_only">Read Only</option>
+          </select>
+        )}
+        {canRemove && (
+          <button
+            onClick={onRemove}
+            className="p-1.5 text-red-400 hover:bg-red-500/20 rounded transition-colors"
+            title="Remove member"
+          >
+            <UserMinusIcon className="w-4 h-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Type import for Channel and ChannelMember
+import type { ChannelMember } from './types';