zele 0.3.10 → 0.3.12

package/dist/mail-tui.js

@@ -10,23 +10,33 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // window.fetch → gets undefined → "fetchImpl is not a function". Fix: ensure
 // window.fetch is set to the native Bun fetch.
 const globalWithWindow = globalThis;
-if (typeof globalThis.fetch === 'function' && typeof globalWithWindow.window?.fetch !== 'function') {
-    globalWithWindow.window = { ...globalWithWindow.window, fetch: globalThis.fetch };
+if (typeof globalThis.fetch === 'function' &&
+    typeof globalWithWindow.window?.fetch !== 'function') {
+    globalWithWindow.window = {
+        ...globalWithWindow.window,
+        fetch: globalThis.fetch,
+    };
 }
 import { Action, ActionPanel, Color, Detail, Form, Icon, List, showToast, Toast, useNavigation, showFailureToast, } from 'termcast';
 import { useTerminalDimensions } from '@opentui/react';
 import { useCachedPromise } from '@termcast/utils';
 import { useState, useMemo, useCallback, useEffect } from 'react';
-import { getClients, getClient, listAccounts, login, logout } from './auth.js';
+import { getClients, getClient, listAccounts, login, logout, } from './auth.js';
 import { isTruthy } from './api-utils.js';
-import { renderEmailBody, replyParser, formatDate, formatSender } from './output.js';
+import { renderEmailBody, replyParser, formatDate, formatSender, } from './output.js';
 // ---------------------------------------------------------------------------
 // Constants
 // ---------------------------------------------------------------------------
 const DEFAULT_PAGE_SIZE = 25;
 const MIN_PAGE_SIZE = 10;
 const VISIBLE_ROWS_OFFSET = 6;
-const ACCOUNT_COLORS = [Color.Blue, Color.Green, Color.Purple, Color.Orange, Color.Magenta];
+const ACCOUNT_COLORS = [
+    Color.Blue,
+    Color.Green,
+    Color.Purple,
+    Color.Orange,
+    Color.Magenta,
+];
 const ADD_ACCOUNT = '__add_account__';
 const MANAGE_ACCOUNTS = '__manage_accounts__';
 // ---------------------------------------------------------------------------
@@ -64,16 +74,24 @@ function dateSection(dateStr) {
         return 'This Month';
     return 'Older';
 }
-const SECTION_ORDER = ['Last 10 Minutes', 'Last Hour', 'Today', 'Yesterday', 'This Week', 'This Month', 'Older'];
+const SECTION_ORDER = [
+    'Last 10 Minutes',
+    'Last Hour',
+    'Today',
+    'Yesterday',
+    'This Week',
+    'This Month',
+    'Older',
+];
 function threadStatusIcon(thread) {
     const unread = thread.unread;
     const starred = thread.labelIds?.includes('STARRED') ?? false;
     if (unread && starred)
         return { source: Icon.Star, tintColor: Color.Red };
     if (unread)
-        return { source: Icon.CircleFilled, tintColor: Color.Orange };
+        return { source: Icon.CircleFilled, tintColor: Color.Yellow };
     if (starred)
-        return { source: Icon.Star, tintColor: Color.Yellow };
+        return { source: Icon.Star, tintColor: Color.Orange };
     return { source: Icon.Circle, tintColor: Color.SecondaryText };
 }
 function getPageSizeFromTerminalHeight(rows) {
@@ -95,7 +113,7 @@ function useAccounts() {
 // ---------------------------------------------------------------------------
 function AccountDropdown({ accounts, value, onChange, onAdded, onRemoved, }) {
     const { push } = useNavigation();
-    return (_jsxs(List.Dropdown, { tooltip: "Account", value: value, onChange: (newValue) => {
+    return (_jsxs(List.Dropdown, { tooltip: 'Account', value: value, onChange: (newValue) => {
             if (newValue === ADD_ACCOUNT) {
                 push(_jsx(AddAccount, { onAdded: onAdded }));
                 return;
@@ -105,7 +123,10 @@ function AccountDropdown({ accounts, value, onChange, onAdded, onRemoved, }) {
                 return;
             }
             onChange(newValue);
-        }, children: [_jsx(List.Dropdown.Item, { title: "All Accounts", value: "all", icon: Icon.Globe }), _jsx(List.Dropdown.Section, { title: "Accounts", children: accounts.map((a) => (_jsx(List.Dropdown.Item, { title: a.email, value: a.email, icon: { source: Icon.Person, tintColor: accountColor(a.email) } }, a.email))) }), _jsxs(List.Dropdown.Section, { children: [_jsx(List.Dropdown.Item, { title: "Add Account", value: ADD_ACCOUNT, icon: Icon.Plus }), _jsx(List.Dropdown.Item, { title: "Manage Accounts", value: MANAGE_ACCOUNTS, icon: Icon.Gear })] })] }));
+        }, children: [_jsx(List.Dropdown.Item, { title: 'All Accounts', value: 'all', icon: Icon.Globe }), _jsx(List.Dropdown.Section, { title: 'Accounts', children: accounts.map((a) => (_jsx(List.Dropdown.Item, { title: a.email, value: a.email, icon: {
+                        source: Icon.Person,
+                        tintColor: accountColor(a.email),
+                    } }, a.email))) }), _jsxs(List.Dropdown.Section, { children: [_jsx(List.Dropdown.Item, { title: 'Add Account', value: ADD_ACCOUNT, icon: Icon.Plus }), _jsx(List.Dropdown.Item, { title: 'Manage Accounts', value: MANAGE_ACCOUNTS, icon: Icon.Gear })] })] }));
 }
 // ---------------------------------------------------------------------------
 // Add Account (interactive login)
@@ -129,7 +150,10 @@ function AddAccount({ onAdded, }) {
             return;
         }
         await onAdded?.(result.email);
-        await showToast({ style: Toast.Style.Success, title: `Added ${result.email}` });
+        await showToast({
+            style: Toast.Style.Success,
+            title: `Added ${result.email}`,
+        });
         pop();
     };
     useEffect(() => {
@@ -138,7 +162,7 @@ function AddAccount({ onAdded, }) {
         setDidAutoStart(true);
         void handleLogin();
     }, [didAutoStart]);
-    return (_jsx(Detail, { navigationTitle: "Add Account", markdown: `# Add Account\n\n` +
+    return (_jsx(Detail, { navigationTitle: 'Add Account', markdown: `# Add Account\n\n` +
             `The browser opens automatically for Google sign-in.\n\n` +
             `Complete login in the browser, then come back here. ` +
             `This screen waits for the localhost callback and will finish automatically.`, actions: _jsx(ActionPanel, { children: _jsx(Action, { title: isLoggingIn ? 'Waiting for Login...' : 'Open Browser Again', icon: Icon.Globe, onAction: handleLogin }) }) }));
@@ -155,14 +179,29 @@ function ManageAccounts({ onAdded, onRemoved, }) {
     const handleRemoved = async (email) => {
         const result = await logout(email);
         if (result instanceof Error) {
-            await showFailureToast(result, { title: `Failed to remove ${email}` });
+            await showFailureToast(result, {
+                title: `Failed to remove ${email}`,
+            });
             return;
         }
         await accounts.revalidate();
         await onRemoved?.(email);
-        await showToast({ style: Toast.Style.Success, title: `Removed ${email}` });
+        await showToast({
+            style: Toast.Style.Success,
+            title: `Removed ${email}`,
+        });
     };
-    return (_jsxs(List, { navigationTitle: "Manage Accounts", isLoading: accounts.isLoading, children: [accounts.data?.map((a) => (_jsx(List.Item, { title: a.email, icon: { source: Icon.Person, tintColor: accountColor(a.email) }, accessories: [{ tag: { value: a.appId.slice(0, 12) + '...', color: Color.SecondaryText } }], actions: _jsxs(ActionPanel, { children: [_jsx(Action.CopyToClipboard, { title: "Copy Email", content: a.email }), _jsx(Action, { title: "Logout Account", icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleRemoved(a.email) })] }) }, `${a.email}-${a.appId}`))), _jsx(List.Item, { title: "Add Account", icon: Icon.Plus, actions: _jsx(ActionPanel, { children: _jsx(Action.Push, { title: "Add Account", target: _jsx(AddAccount, { onAdded: handleAdded }) }) }) }, "add-account")] }));
+    return (_jsxs(List, { navigationTitle: 'Manage Accounts', isLoading: accounts.isLoading, children: [accounts.data?.map((a) => (_jsx(List.Item, { title: a.email, icon: {
+                    source: Icon.Person,
+                    tintColor: accountColor(a.email),
+                }, accessories: [
+                    {
+                        tag: {
+                            value: a.appId.slice(0, 12) + '...',
+                            color: Color.SecondaryText,
+                        },
+                    },
+                ], actions: _jsxs(ActionPanel, { children: [_jsx(Action.CopyToClipboard, { title: 'Copy Email', content: a.email }), _jsx(Action, { title: 'Logout Account', icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleRemoved(a.email) })] }) }, `${a.email}-${a.appId}`))), _jsx(List.Item, { title: 'Add Account', icon: Icon.Plus, actions: _jsx(ActionPanel, { children: _jsx(Action.Push, { title: 'Add Account', target: _jsx(AddAccount, { onAdded: handleAdded }) }) }) }, 'add-account')] }));
 }
 // ---------------------------------------------------------------------------
 // Reply Form
@@ -172,7 +211,10 @@ function ReplyForm({ threadId, account, replyAll, revalidate, }) {
     const [isLoading, setIsLoading] = useState(false);
     const handleSubmit = async (values) => {
         if (!values.body?.trim()) {
-            await showToast({ style: Toast.Style.Failure, title: 'Body is required' });
+            await showToast({
+                style: Toast.Style.Failure,
+                title: 'Body is required',
+            });
             return;
         }
         setIsLoading(true);
@@ -191,7 +233,7 @@ function ReplyForm({ threadId, account, replyAll, revalidate, }) {
         revalidate();
         pop();
     };
-    return (_jsx(Form, { isLoading: isLoading, navigationTitle: replyAll ? 'Reply All' : 'Reply', actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: "Send Reply", onSubmit: handleSubmit }) }), children: _jsx(Form.TextArea, { id: "body", title: "Message", placeholder: "Type your reply..." }) }));
+    return (_jsx(Form, { isLoading: isLoading, navigationTitle: replyAll ? 'Reply All' : 'Reply', actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: 'Send Reply', onSubmit: handleSubmit }) }), children: _jsx(Form.TextArea, { id: 'body', title: 'Message', placeholder: 'Type your reply...' }) }));
 }
 // ---------------------------------------------------------------------------
 // Forward Form
@@ -201,11 +243,17 @@ function ForwardForm({ threadId, account, revalidate, }) {
     const [isLoading, setIsLoading] = useState(false);
     const handleSubmit = async (values) => {
         if (!values.to?.trim()) {
-            await showToast({ style: Toast.Style.Failure, title: 'Recipient is required' });
+            await showToast({
+                style: Toast.Style.Failure,
+                title: 'Recipient is required',
+            });
             return;
         }
         setIsLoading(true);
-        const recipients = values.to.split(',').map((e) => ({ email: e.trim() })).filter((e) => e.email);
+        const recipients = values.to
+            .split(',')
+            .map((e) => ({ email: e.trim() }))
+            .filter((e) => e.email);
         const { client } = await getClient([account]);
         const result = await client.forwardThread({
             threadId,
@@ -217,11 +265,14 @@ function ForwardForm({ threadId, account, revalidate, }) {
             await showFailureToast(result, { title: 'Failed to forward' });
             return;
         }
-        await showToast({ style: Toast.Style.Success, title: `Forwarded to ${values.to}` });
+        await showToast({
+            style: Toast.Style.Success,
+            title: `Forwarded to ${values.to}`,
+        });
         revalidate();
         pop();
     };
-    return (_jsxs(Form, { isLoading: isLoading, navigationTitle: "Forward", actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: "Forward", onSubmit: handleSubmit }) }), children: [_jsx(Form.TextField, { id: "to", title: "To", placeholder: "recipient@example.com" }), _jsx(Form.TextArea, { id: "body", title: "Message", placeholder: "Optional message to prepend..." })] }));
+    return (_jsxs(Form, { isLoading: isLoading, navigationTitle: 'Forward', actions: _jsx(ActionPanel, { children: _jsx(Action.SubmitForm, { title: 'Forward', onSubmit: handleSubmit }) }), children: [_jsx(Form.TextField, { id: 'to', title: 'To', placeholder: 'recipient@example.com' }), _jsx(Form.TextArea, { id: 'body', title: 'Message', placeholder: 'Optional message to prepend...' })] }));
 }
 // ---------------------------------------------------------------------------
 // Thread Detail (full thread view, pushed via Enter)
@@ -235,7 +286,7 @@ function ThreadDetail({ threadId, account, revalidate, }) {
         return result.parsed;
     }, [threadId, account]);
     if (thread.isLoading || !thread.data) {
-        return _jsx(Detail, { markdown: "", navigationTitle: "Loading..." });
+        return _jsx(Detail, { markdown: '', navigationTitle: 'Loading...' });
     }
     const t = thread.data;
     const messages = t.messages;
@@ -255,7 +306,9 @@ function ThreadDetail({ threadId, account, revalidate, }) {
         else {
             body = renderEmailBody(msg.body, msg.mimeType);
         }
-        return [heading, attachmentLine, '', body].filter((l) => l !== null).join('\n');
+        return [heading, attachmentLine, '', body]
+            .filter((l) => l !== null)
+            .join('\n');
     });
     const markdown = `# ${t.subject}\n\n---\n\n` + parts.join('\n\n---\n\n');
     // Collect unique participants
@@ -269,7 +322,10 @@ function ThreadDetail({ threadId, account, revalidate, }) {
         .filter((l) => typeof l === 'string' && !l.startsWith('Label_')) // skip internal IDs
         .slice(0, 10);
     const latestMsg = messages[messages.length - 1];
-    return (_jsx(Detail, { navigationTitle: t.subject, markdown: markdown, metadata: _jsxs(Detail.Metadata, { children: [_jsx(Detail.Metadata.Label, { title: "From", text: formatSender(latestMsg.from) }), _jsx(Detail.Metadata.Label, { title: "To", text: latestMsg.to.map((r) => r.name || r.email).join(', ') }), latestMsg.cc && latestMsg.cc.length > 0 && (_jsx(Detail.Metadata.Label, { title: "Cc", text: latestMsg.cc.map((r) => r.name || r.email).join(', ') })), _jsx(Detail.Metadata.Label, { title: "Date", text: latestMsg.date }), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: "Messages", text: String(t.messageCount) }), _jsx(Detail.Metadata.Label, { title: "Participants", text: [...participants.values()].join(', ') }), labels.length > 0 && (_jsx(Detail.Metadata.TagList, { title: "Labels", children: labels.map((l) => (_jsx(Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: "Thread ID", text: t.id }), _jsx(Detail.Metadata.Label, { title: "Account", text: account })] }), actions: _jsxs(ActionPanel, { children: [_jsxs(ActionPanel.Section, { title: "Reply & Forward", children: [_jsx(Action.Push, { title: "Reply", icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ReplyForm, { threadId: threadId, account: account, revalidate: revalidate }) }), _jsx(Action.Push, { title: "Reply All", icon: Icon.Reply, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, target: _jsx(ReplyForm, { threadId: threadId, account: account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: "Forward", icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ForwardForm, { threadId: threadId, account: account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: "Copy", children: [_jsx(Action.CopyToClipboard, { title: "Copy Thread ID", content: t.id }), _jsx(Action.CopyToClipboard, { title: "Copy Subject", content: t.subject }), latestMsg && (_jsx(Action.CopyToClipboard, { title: "Copy Email Body", content: renderEmailBody(latestMsg.body, latestMsg.mimeType) }))] })] }) }));
+    return (_jsx(Detail, { navigationTitle: t.subject, markdown: markdown, metadata: _jsxs(Detail.Metadata, { children: [_jsx(Detail.Metadata.Label, { title: 'From', text: formatSender(latestMsg.from) }), _jsx(Detail.Metadata.Label, { title: 'To', text: latestMsg.to.map((r) => r.name || r.email).join(', ') }), latestMsg.cc && latestMsg.cc.length > 0 && (_jsx(Detail.Metadata.Label, { title: 'Cc', text: latestMsg.cc.map((r) => r.name || r.email).join(', ') })), _jsx(Detail.Metadata.Label, { title: 'Date', text: latestMsg.date }), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Messages', text: String(t.messageCount) }), _jsx(Detail.Metadata.Label, { title: 'Participants', text: [...participants.values()].join(', ') }), labels.length > 0 && (_jsx(Detail.Metadata.TagList, { title: 'Labels', children: labels.map((l) => (_jsx(Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(Detail.Metadata.Separator, {}), _jsx(Detail.Metadata.Label, { title: 'Thread ID', text: t.id }), _jsx(Detail.Metadata.Label, { title: 'Account', text: account })] }), actions: _jsxs(ActionPanel, { children: [_jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ReplyForm, { threadId: threadId, account: account, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: {
+                                modifiers: ['ctrl', 'shift'],
+                                key: 'r',
+                            }, target: _jsx(ReplyForm, { threadId: threadId, account: account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ForwardForm, { threadId: threadId, account: account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: t.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: t.subject }), latestMsg && (_jsx(Action.CopyToClipboard, { title: 'Copy Email Body', content: renderEmailBody(latestMsg.body, latestMsg.mimeType) }))] })] }) }));
 }
 // ---------------------------------------------------------------------------
 // Main Command
@@ -298,10 +354,15 @@ export default function Command() {
                     pageToken: pageToken || undefined,
                 });
                 if (result instanceof Error) {
-                    await showFailureToast(result, { title: 'Failed to fetch emails' });
+                    await showFailureToast(result, {
+                        title: 'Failed to fetch emails',
+                    });
                     return { data: [], hasMore: false };
                 }
-                const data = result.threads.map((t) => ({ ...t, account: email }));
+                const data = result.threads.map((t) => ({
+                    ...t,
+                    account: email,
+                }));
                 return {
                     data,
                     hasMore: !!result.nextPageToken,
@@ -354,7 +415,10 @@ export default function Command() {
             return {
                 data: merged,
                 hasMore,
-                cursor: { mode: 'multi', nextByAccount },
+                cursor: {
+                    mode: 'multi',
+                    nextByAccount,
+                },
             };
         };
     }, [searchText, selectedAccount, pageSize], { keepPreviousData: true });
@@ -390,7 +454,9 @@ export default function Command() {
     const multiAccount = accountList.length > 1;
     // Selection helpers
     const toggleSelection = useCallback((threadId) => {
-        setSelectedThreads((prev) => prev.includes(threadId) ? prev.filter((id) => id !== threadId) : [...prev, threadId]);
+        setSelectedThreads((prev) => prev.includes(threadId)
+            ? prev.filter((id) => id !== threadId)
+            : [...prev, threadId]);
     }, []);
     // Bulk actions
     const handleBulkAction = useCallback(async (actionName, fn) => {
@@ -410,68 +476,127 @@ export default function Command() {
             const { client } = await getClient([acct]);
             const result = await fn(client, ids);
             if (result instanceof Error) {
-                await showFailureToast(result, { title: `Failed to ${actionName}` });
+                await showFailureToast(result, {
+                    title: `Failed to ${actionName}`,
+                });
                 return;
             }
         }
-        await showToast({ style: Toast.Style.Success, title: `${actionName}: ${selectedThreads.length} thread(s)` });
+        await showToast({
+            style: Toast.Style.Success,
+            title: `${actionName}: ${selectedThreads.length} thread(s)`,
+        });
         setSelectedThreads([]);
         revalidate();
     }, [selectedThreads, allThreads, revalidate]);
-    return (_jsx(List, { isLoading: isLoading || accounts.isLoading, isShowingDetail: isShowingDetail, searchBarPlaceholder: "Search emails...", onSearchTextChange: setSearchText, throttle: true, pagination: pagination ? { ...pagination, pageSize } : undefined, searchBarAccessory: accountList.length > 0 ? (_jsx(AccountDropdown, { accounts: accountList, value: selectedAccount, onChange: setSelectedAccount, onAdded: handleAccountAdded, onRemoved: handleAccountRemoved })) : undefined, children: sections.map((section) => (_jsx(List.Section, { title: section.name, children: section.threads.map((thread) => {
+    return (_jsx(List, { isLoading: isLoading || accounts.isLoading, isShowingDetail: isShowingDetail, searchBarPlaceholder: 'Search emails...', onSearchTextChange: setSearchText, throttle: true, pagination: pagination ? { ...pagination, pageSize } : undefined, searchBarAccessory: accountList.length > 0 ? (_jsx(AccountDropdown, { accounts: accountList, value: selectedAccount, onChange: setSelectedAccount, onAdded: handleAccountAdded, onRemoved: handleAccountRemoved })) : undefined, children: sections.map((section) => (_jsx(List.Section, { title: section.name, children: section.threads.map((thread) => {
                 const isSelected = selectedThreads.includes(thread.id);
                 const hasSelection = selectedThreads.length > 0;
                 // Icon: selection mode or status
                 const icon = hasSelection
-                    ? { source: isSelected ? Icon.CheckCircle : Icon.Circle, tintColor: isSelected ? Color.Blue : Color.SecondaryText }
+                    ? {
+                        source: isSelected ? Icon.CheckCircle : Icon.Circle,
+                        tintColor: isSelected ? Color.Blue : Color.SecondaryText,
+                    }
                     : threadStatusIcon(thread);
                 // Accessories
                 const accessories = [];
                 if (thread.messageCount > 1) {
-                    accessories.push({ tag: { value: String(thread.messageCount), color: Color.SecondaryText } });
+                    accessories.push({
+                        tag: {
+                            value: String(thread.messageCount),
+                            color: Color.SecondaryText,
+                        },
+                    });
                 }
                 if (multiAccount || selectedAccount === 'all') {
-                    accessories.push({ tag: { value: thread.account.split('@')[0] ?? thread.account, color: accountColor(thread.account) } });
+                    accessories.push({
+                        tag: {
+                            value: thread.account.split('@')[0] ?? thread.account,
+                            color: accountColor(thread.account),
+                        },
+                    });
                 }
                 accessories.push({ text: formatDate(thread.date) });
                 // Detail panel: latest message body as markdown
-                const detail = isShowingDetail ? (_jsx(List.Item.Detail, { markdown: `# ${thread.subject}\n\n${thread.snippet}`, metadata: _jsxs(List.Item.Detail.Metadata, { children: [_jsx(List.Item.Detail.Metadata.Label, { title: "From", text: formatSender(thread.from) }), _jsx(List.Item.Detail.Metadata.Label, { title: "Date", text: thread.date }), _jsx(List.Item.Detail.Metadata.Separator, {}), thread.labelIds.length > 0 && (_jsx(List.Item.Detail.Metadata.TagList, { title: "Labels", children: thread.labelIds
+                const detail = isShowingDetail ? (_jsx(List.Item.Detail, { markdown: `# ${thread.subject}\n\n${thread.snippet}`, metadata: _jsxs(List.Item.Detail.Metadata, { children: [_jsx(List.Item.Detail.Metadata.Label, { title: 'From', text: formatSender(thread.from) }), _jsx(List.Item.Detail.Metadata.Label, { title: 'Date', text: thread.date }), _jsx(List.Item.Detail.Metadata.Separator, {}), thread.labelIds.length > 0 && (_jsx(List.Item.Detail.Metadata.TagList, { title: 'Labels', children: thread.labelIds
                                     .filter((l) => !l.startsWith('Label_'))
                                     .slice(0, 8)
-                                    .map((l) => (_jsx(List.Item.Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(List.Item.Detail.Metadata.Separator, {}), _jsx(List.Item.Detail.Metadata.Label, { title: "Messages", text: String(thread.messageCount) }), _jsx(List.Item.Detail.Metadata.Label, { title: "Thread ID", text: thread.id }), multiAccount && (_jsx(List.Item.Detail.Metadata.Label, { title: "Account", text: thread.account }))] }) })) : undefined;
-                return (_jsx(List.Item, { title: thread.subject || '(no subject)', subtitle: formatSender(thread.from), icon: icon, accessories: accessories, keywords: [thread.from.email, thread.from.name ?? '', thread.account], detail: detail, actions: _jsxs(ActionPanel, { children: [hasSelection && (_jsxs(ActionPanel.Section, { title: "Selection", children: [_jsx(Action, { title: isSelected ? 'Deselect Thread' : 'Select Thread', icon: isSelected ? Icon.CheckCircle : Icon.Circle, onAction: () => toggleSelection(thread.id) }), _jsx(Action, { title: `Archive ${selectedThreads.length} Selected`, icon: Icon.Tray, onAction: () => handleBulkAction('Archived', (c, ids) => c.archive({ threadIds: ids })) }), _jsx(Action, { title: `Mark ${selectedThreads.length} as Read`, icon: Icon.Eye, onAction: () => handleBulkAction('Marked as read', (c, ids) => c.markAsRead({ threadIds: ids })) }), _jsx(Action, { title: `Star ${selectedThreads.length} Selected`, icon: Icon.Star, onAction: () => handleBulkAction('Starred', (c, ids) => c.star({ threadIds: ids })) }), _jsx(Action, { title: `Trash ${selectedThreads.length} Selected`, icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleBulkAction('Trashed', async (c, ids) => {
+                                    .map((l) => (_jsx(List.Item.Detail.Metadata.TagList.Item, { text: l, color: labelColor(l) }, l))) })), _jsx(List.Item.Detail.Metadata.Separator, {}), _jsx(List.Item.Detail.Metadata.Label, { title: 'Messages', text: String(thread.messageCount) }), _jsx(List.Item.Detail.Metadata.Label, { title: 'Thread ID', text: thread.id }), multiAccount && (_jsx(List.Item.Detail.Metadata.Label, { title: 'Account', text: thread.account }))] }) })) : undefined;
+                return (_jsx(List.Item, { title: thread.subject || '(no subject)', subtitle: formatSender(thread.from), icon: icon, accessories: accessories, keywords: [
+                        thread.from.email,
+                        thread.from.name ?? '',
+                        thread.account,
+                    ], detail: detail, actions: _jsxs(ActionPanel, { children: [hasSelection && (_jsxs(ActionPanel.Section, { title: 'Selection', children: [_jsx(Action, { title: isSelected ? 'Deselect Thread' : 'Select Thread', icon: isSelected ? Icon.CheckCircle : Icon.Circle, onAction: () => toggleSelection(thread.id) }), _jsx(Action, { title: `Archive ${selectedThreads.length} Selected`, icon: Icon.Tray, onAction: () => handleBulkAction('Archived', (c, ids) => c.archive({
+                                            threadIds: ids,
+                                        })) }), _jsx(Action, { title: `Mark ${selectedThreads.length} as Read`, icon: Icon.Eye, onAction: () => handleBulkAction('Marked as read', (c, ids) => c.markAsRead({
+                                            threadIds: ids,
+                                        })) }), _jsx(Action, { title: `Star ${selectedThreads.length} Selected`, icon: Icon.Star, onAction: () => handleBulkAction('Starred', (c, ids) => c.star({
+                                            threadIds: ids,
+                                        })) }), _jsx(Action, { title: `Trash ${selectedThreads.length} Selected`, icon: Icon.Trash, style: Action.Style.Destructive, onAction: () => handleBulkAction('Trashed', async (c, ids) => {
                                             for (const id of ids) {
-                                                await c.trash({ threadId: id });
+                                                await c.trash({
+                                                    threadId: id,
+                                                });
                                             }
-                                        }) }), _jsx(Action, { title: "Deselect All", icon: Icon.XMarkCircle, onAction: () => setSelectedThreads([]) })] })), _jsxs(ActionPanel.Section, { children: [_jsx(Action.Push, { title: "Open Thread", icon: Icon.Eye, target: _jsx(ThreadDetail, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), !hasSelection && (_jsx(Action, { title: "Select Thread", icon: Icon.CheckCircle, shortcut: { modifiers: ['ctrl'], key: 'x' }, onAction: () => toggleSelection(thread.id) })), _jsx(Action, { title: thread.unread ? 'Mark as Read' : 'Mark as Unread', icon: thread.unread ? Icon.Eye : Icon.EyeDisabled, shortcut: { modifiers: ['ctrl'], key: 'u' }, onAction: async () => {
+                                        }) }), _jsx(Action, { title: 'Deselect All', icon: Icon.XMarkCircle, onAction: () => setSelectedThreads([]) })] })), _jsxs(ActionPanel.Section, { children: [_jsx(Action.Push, { title: 'Open Thread', icon: Icon.Eye, target: _jsx(ThreadDetail, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), !hasSelection && (_jsx(Action, { title: 'Select Thread', icon: Icon.CheckCircle, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'x',
+                                        }, onAction: () => toggleSelection(thread.id) })), _jsx(Action, { title: thread.unread ? 'Mark as Read' : 'Mark as Unread', icon: thread.unread ? Icon.Eye : Icon.EyeDisabled, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'u',
+                                        }, onAction: async () => {
                                             const { client } = await getClient([thread.account]);
                                             const result = thread.unread
-                                                ? await client.markAsRead({ threadIds: [thread.id] })
-                                                : await client.markAsUnread({ threadIds: [thread.id] });
+                                                ? await client.markAsRead({
+                                                    threadIds: [thread.id],
+                                                })
+                                                : await client.markAsUnread({
+                                                    threadIds: [thread.id],
+                                                });
                                             if (result instanceof Error) {
                                                 await showFailureToast(result);
                                                 return;
                                             }
                                             await showToast({
                                                 style: Toast.Style.Success,
-                                                title: thread.unread ? 'Marked as read' : 'Marked as unread',
+                                                title: thread.unread
+                                                    ? 'Marked as read'
+                                                    : 'Marked as unread',
                                             });
                                             revalidate();
-                                        } }), _jsx(Action, { title: "Archive", icon: Icon.Tray, shortcut: { modifiers: ['ctrl'], key: 'e' }, onAction: async () => {
+                                        } }), _jsx(Action, { title: 'Archive', icon: Icon.Tray, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'e',
+                                        }, onAction: async () => {
                                             const { client } = await getClient([thread.account]);
-                                            const result = await client.archive({ threadIds: [thread.id] });
+                                            const result = await client.archive({
+                                                threadIds: [thread.id],
+                                            });
                                             if (result instanceof Error) {
                                                 await showFailureToast(result);
                                                 return;
                                             }
-                                            await showToast({ style: Toast.Style.Success, title: 'Archived' });
+                                            await showToast({
+                                                style: Toast.Style.Success,
+                                                title: 'Archived',
+                                            });
                                             revalidate();
-                                        } }), _jsx(Action, { title: thread.labelIds.includes('STARRED') ? 'Unstar' : 'Star', icon: Icon.Star, shortcut: { modifiers: ['ctrl'], key: 's' }, onAction: async () => {
+                                        } }), _jsx(Action, { title: thread.labelIds.includes('STARRED')
+                                            ? 'Unstar'
+                                            : 'Star', icon: Icon.Star, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 's',
+                                        }, onAction: async () => {
                                             const { client } = await getClient([thread.account]);
                                             const isStarred = thread.labelIds.includes('STARRED');
                                             const result = isStarred
-                                                ? await client.unstar({ threadIds: [thread.id] })
-                                                : await client.star({ threadIds: [thread.id] });
+                                                ? await client.unstar({
+                                                    threadIds: [thread.id],
+                                                })
+                                                : await client.star({
+                                                    threadIds: [thread.id],
+                                                });
                                             if (result instanceof Error) {
                                                 await showFailureToast(result);
                                                 return;
@@ -481,12 +606,35 @@ export default function Command() {
                                                 title: isStarred ? 'Unstarred' : 'Starred',
                                             });
                                             revalidate();
-                                        } })] }), _jsxs(ActionPanel.Section, { title: "Reply & Forward", children: [_jsx(Action.Push, { title: "Reply", icon: Icon.Reply, shortcut: { modifiers: ['ctrl'], key: 'r' }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), _jsx(Action.Push, { title: "Reply All", icon: Icon.Reply, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: "Forward", icon: Icon.Forward, shortcut: { modifiers: ['ctrl'], key: 'f' }, target: _jsx(ForwardForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: "Copy", children: [_jsx(Action.CopyToClipboard, { title: "Copy Thread ID", content: thread.id }), _jsx(Action.CopyToClipboard, { title: "Copy Subject", content: thread.subject }), _jsx(Action.CopyToClipboard, { title: "Copy Sender Email", content: thread.from.email })] }), _jsx(ActionPanel.Section, { children: _jsx(Action, { title: "Trash", icon: Icon.Trash, style: Action.Style.Destructive, shortcut: { modifiers: ['ctrl'], key: 'backspace' }, onAction: async () => {
+                                        } })] }), _jsxs(ActionPanel.Section, { title: 'Reply & Forward', children: [_jsx(Action.Push, { title: 'Reply', icon: Icon.Reply, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'r',
+                                        }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Reply All', icon: Icon.Reply, shortcut: {
+                                            modifiers: ['ctrl', 'shift'],
+                                            key: 'r',
+                                        }, target: _jsx(ReplyForm, { threadId: thread.id, account: thread.account, replyAll: true, revalidate: revalidate }) }), _jsx(Action.Push, { title: 'Forward', icon: Icon.Forward, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'f',
+                                        }, target: _jsx(ForwardForm, { threadId: thread.id, account: thread.account, revalidate: revalidate }) })] }), _jsxs(ActionPanel.Section, { title: 'Copy', children: [_jsx(Action.CopyToClipboard, { title: 'Copy Thread ID', content: thread.id }), _jsx(Action.CopyToClipboard, { title: 'Copy Subject', content: thread.subject }), _jsx(Action.CopyToClipboard, { title: 'Copy Sender Email', content: thread.from.email })] }), _jsx(ActionPanel.Section, { children: _jsx(Action, { title: 'Trash', icon: Icon.Trash, style: Action.Style.Destructive, shortcut: {
+                                        modifiers: ['ctrl'],
+                                        key: 'backspace',
+                                    }, onAction: async () => {
                                         const { client } = await getClient([thread.account]);
-                                        await client.trash({ threadId: thread.id });
-                                        await showToast({ style: Toast.Style.Success, title: 'Trashed' });
+                                        await client.trash({
+                                            threadId: thread.id,
+                                        });
+                                        await showToast({
+                                            style: Toast.Style.Success,
+                                            title: 'Trashed',
+                                        });
                                         revalidate();
-                                    } }) }), _jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: "Refresh", icon: Icon.ArrowClockwise, shortcut: { modifiers: ['ctrl', 'shift'], key: 'r' }, onAction: () => revalidate() }), _jsx(Action, { title: "Toggle Detail", icon: Icon.Sidebar, shortcut: { modifiers: ['ctrl'], key: 'd' }, onAction: () => setIsShowingDetail((v) => !v) })] })] }) }, `${thread.account}-${thread.id}`));
+                                    } }) }), _jsxs(ActionPanel.Section, { children: [_jsx(Action, { title: 'Refresh', icon: Icon.ArrowClockwise, shortcut: {
+                                            modifiers: ['ctrl', 'shift'],
+                                            key: 'r',
+                                        }, onAction: () => revalidate() }), _jsx(Action, { title: 'Toggle Detail', icon: Icon.Sidebar, shortcut: {
+                                            modifiers: ['ctrl'],
+                                            key: 'd',
+                                        }, onAction: () => setIsShowingDetail((v) => !v) })] })] }) }, `${thread.account}-${thread.id}`));
             }) }, section.name))) }));
 }
 // ---------------------------------------------------------------------------