@chrysb/alphaclaw 0.5.2 → 0.5.4-beta.0

package/lib/public/js/components/agent-send-modal.js

@@ -5,6 +5,7 @@ import { ModalShell } from "./modal-shell.js";
 import { ActionButton } from "./action-button.js";
 import { PageHeader } from "./page-header.js";
 import { CloseIcon } from "./icons.js";
+import { SessionSelectField } from "./session-select-field.js";
 import { useAgentSessions } from "../hooks/useAgentSessions.js";
 
 const html = htm.bind(h);
@@ -83,31 +84,16 @@ export const AgentSendModal = ({
           </button>
         `}
       />
-      <div class="space-y-2">
-        <label class="text-xs text-gray-500">Send to session</label>
-        <select
-          value=${selectedSessionKey}
-          onChange=${(event) =>
-            setSelectedSessionKey(String(event.currentTarget?.value || ""))}
-          disabled=${loadingSessions || sending}
-          class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 focus:border-gray-500"
-        >
-          ${sessions.length === 0
-            ? html`<option value="">No sessions available</option>`
-            : null}
-          ${sessions.map(
-            (sessionRow) => html`
-              <option value=${String(sessionRow?.key || "")}>
-                ${String(sessionRow?.label || sessionRow?.key || "Session")}
-              </option>
-            `,
-          )}
-        </select>
-        ${loadingSessions
-          ? html`<div class="text-xs text-gray-500">Loading sessions...</div>`
-          : null}
-        ${loadError ? html`<div class="text-xs text-red-400">${loadError}</div>` : null}
-      </div>
+      <${SessionSelectField}
+        label="Send to session"
+        sessions=${sessions}
+        selectedSessionKey=${selectedSessionKey}
+        onChangeSessionKey=${setSelectedSessionKey}
+        disabled=${loadingSessions || sending}
+        loading=${loadingSessions}
+        error=${loadError}
+        emptyOptionLabel="No sessions available"
+      />
       <div class="space-y-2">
         <label class="text-xs text-gray-500">${messageLabel}</label>
         <textarea

package/lib/public/js/components/doctor/index.js

@@ -523,11 +523,12 @@ export const DoctorTab = ({ isActive = false, onOpenFile = () => {} }) => {
               ${selectedRunIsInProgress
                 ? html`
                     <div class="ac-surface-inset rounded-xl p-4">
-                      <div class="text-xs leading-5 text-gray-400">
-                        <span
-                          >Run in progress. Findings will appear when analysis
-                          completes.</span
-                        >
+                      <div class="flex items-center gap-2 text-xs leading-5 text-gray-400">
+                        <${LoadingSpinner} className="h-3.5 w-3.5" />
+                        <span>
+                          Run in progress. Findings will appear when analysis
+                          completes.
+                        </span>
                       </div>
                     </div>
                   `

package/lib/public/js/components/file-tree.js

@@ -42,10 +42,12 @@ import {
   FolderAddLineIcon,
   DeleteBinLineIcon,
   DownloadLineIcon,
+  FileCopyLineIcon,
 } from "./icons.js";
 import { LoadingSpinner } from "./loading-spinner.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
 import { showToast } from "./toast.js";
+import { copyTextToClipboard } from "../lib/clipboard.js";
 
 const html = htm.bind(h);
 const kTreeIndentPx = 9;
@@ -226,6 +228,7 @@ const TreeContextMenu = ({
   isLocked,
   onNewFile,
   onNewFolder,
+  onCopyPath,
   onDownload,
   onDelete,
   onClose,
@@ -255,6 +258,7 @@ const TreeContextMenu = ({
   const isRoot = targetType === "root";
   const contextFolder = isFolder ? targetPath : "";
   const canCreate = !isLocked && (isFolder || isRoot);
+  const canCopyPath = Boolean((isFolder || isFile) && targetPath);
   const canDownload = isFile && targetPath;
   const canDelete = !isLocked && (isFolder || isFile) && targetPath;
 
@@ -282,11 +286,22 @@ const TreeContextMenu = ({
             </button>
           `
         : null}
-      ${canDownload || canDelete
+      ${canCopyPath || canDownload || canDelete
         ? html`
             ${canCreate
               ? html`<div class="tree-context-menu-sep"></div>`
               : null}
+            ${canCopyPath
+              ? html`
+                  <button
+                    class="tree-context-menu-item"
+                    onclick=${() => { onCopyPath(targetPath); onClose(); }}
+                  >
+                    <${FileCopyLineIcon} className="tree-context-menu-icon" />
+                    <span>Copy Path</span>
+                  </button>
+                `
+              : null}
             ${canDownload
               ? html`
                   <button
@@ -970,6 +985,15 @@ export const FileTree = ({
     }
   };
 
+  const copyPath = async (targetPath) => {
+    const copied = await copyTextToClipboard(targetPath);
+    if (copied) {
+      showToast("Path copied", "success");
+      return;
+    }
+    showToast("Could not copy path", "error");
+  };
+
   const handleDragDrop = async (action, sourcePath, targetFolder) => {
     if (action === "start") {
       setDragSourcePath(sourcePath);
@@ -1236,6 +1260,7 @@ export const FileTree = ({
               isLocked=${!!contextMenu.isLocked}
               onNewFile=${(folder) => requestCreate(folder, "file")}
               onNewFolder=${(folder) => requestCreate(folder, "folder")}
+              onCopyPath=${copyPath}
               onDownload=${requestDownload}
               onDelete=${requestDelete}
               onClose=${closeContextMenu}

package/lib/public/js/components/file-viewer/constants.js

@@ -5,3 +5,5 @@ export {
 export const kLoadingIndicatorDelayMs = 1000;
 export const kFileRefreshIntervalMs = 5000;
 export const kSqlitePageSize = 50;
+export const kLargeFileSimpleEditorCharThreshold = 250000;
+export const kLargeFileSimpleEditorLineThreshold = 5000;

package/lib/public/js/components/file-viewer/index.js

@@ -146,6 +146,7 @@ export const FileViewer = ({
                               editorLineNumbers=${derived.editorLineNumbers}
                               editorLineNumbersRef=${refs.editorLineNumbersRef}
                               editorLineNumberRowRefs=${refs.editorLineNumberRowRefs}
+                              shouldUseHighlightedEditor=${derived.shouldUseHighlightedEditor}
                               highlightedEditorLines=${derived.highlightedEditorLines}
                               editorHighlightRef=${refs.editorHighlightRef}
                               editorHighlightLineRefs=${refs.editorHighlightLineRefs}

package/lib/public/js/components/file-viewer/markdown-split-view.js

@@ -12,6 +12,7 @@ export const MarkdownSplitView = ({
   editorLineNumbers,
   editorLineNumbersRef,
   editorLineNumberRowRefs,
+  shouldUseHighlightedEditor,
   highlightedEditorLines,
   editorHighlightRef,
   editorHighlightLineRefs,
@@ -37,7 +38,7 @@ export const MarkdownSplitView = ({
     editorLineNumbers=${editorLineNumbers}
     editorLineNumbersRef=${editorLineNumbersRef}
     editorLineNumberRowRefs=${editorLineNumberRowRefs}
-    shouldUseHighlightedEditor=${true}
+    shouldUseHighlightedEditor=${shouldUseHighlightedEditor}
     highlightedEditorLines=${highlightedEditorLines}
     editorHighlightRef=${editorHighlightRef}
     editorHighlightLineRefs=${editorHighlightLineRefs}

package/lib/public/js/components/file-viewer/use-file-viewer.js

@@ -18,9 +18,14 @@ import {
   normalizeBrowsePolicyPath,
 } from "../../lib/browse-file-policies.js";
 import { showToast } from "../toast.js";
-import { kFileViewerModeStorageKey, kLoadingIndicatorDelayMs } from "./constants.js";
+import {
+  kFileViewerModeStorageKey,
+  kLargeFileSimpleEditorCharThreshold,
+  kLargeFileSimpleEditorLineThreshold,
+  kLoadingIndicatorDelayMs,
+} from "./constants.js";
 import { readStoredFileViewerMode, writeStoredEditorSelection } from "./storage.js";
-import { parsePathSegments } from "./utils.js";
+import { countTextLines, parsePathSegments, shouldUseSimpleEditorMode } from "./utils.js";
 import { useScrollSync } from "./scroll-sync.js";
 import { useFileLoader } from "./use-file-loader.js";
 import { useFileDiff } from "./use-file-diff.js";
@@ -149,7 +154,19 @@ export const useFileViewer = ({
     !isDeleteBlocked;
   const syntaxKind = useMemo(() => getFileSyntaxKind(normalizedPath), [normalizedPath]);
   const isMarkdownFile = syntaxKind === "markdown";
-  const shouldUseHighlightedEditor = syntaxKind !== "plain";
+  const editorLineCount = useMemo(() => countTextLines(renderContent), [renderContent]);
+  const useSimpleEditor = useMemo(
+    () =>
+      shouldUseSimpleEditorMode({
+        contentLength: renderContent.length,
+        lineCount: editorLineCount,
+        charThreshold: kLargeFileSimpleEditorCharThreshold,
+        lineThreshold: kLargeFileSimpleEditorLineThreshold,
+      }),
+    [renderContent, editorLineCount],
+  );
+  const shouldUseHighlightedEditor = syntaxKind !== "plain" && !useSimpleEditor;
+  const shouldRenderLineNumbers = !useSimpleEditor;
   const parsedFrontmatter = useMemo(
     () => (isMarkdownFile ? parseFrontmatter(renderContent) : { entries: [], body: renderContent }),
     [renderContent, isMarkdownFile],
@@ -159,9 +176,9 @@ export const useFileViewer = ({
     [renderContent, shouldUseHighlightedEditor, syntaxKind],
   );
   const editorLineNumbers = useMemo(() => {
-    const lineCount = String(renderContent || "").split("\n").length;
-    return Array.from({ length: lineCount }, (_, index) => index + 1);
-  }, [renderContent]);
+    if (!shouldRenderLineNumbers) return [];
+    return Array.from({ length: editorLineCount }, (_, index) => index + 1);
+  }, [editorLineCount, shouldRenderLineNumbers]);
   const previewHtml = useMemo(
     () =>
       isMarkdownFile
@@ -475,6 +492,7 @@ export const useFileViewer = ({
       isProtectedFile,
       isProtectedLocked,
       shouldUseHighlightedEditor,
+      shouldRenderLineNumbers,
       parsedFrontmatter,
       highlightedEditorLines,
       editorLineNumbers,

package/lib/public/js/components/file-viewer/utils.js

@@ -9,3 +9,22 @@ export const clampSelectionIndex = (value, maxValue) => {
   if (!Number.isFinite(numericValue)) return 0;
   return Math.max(0, Math.min(maxValue, numericValue));
 };
+
+export const countTextLines = (content) => {
+  const text = String(content || "");
+  if (!text) return 1;
+  let lineCount = 1;
+  for (let index = 0; index < text.length; index += 1) {
+    if (text.charCodeAt(index) === 10) lineCount += 1;
+  }
+  return lineCount;
+};
+
+export const shouldUseSimpleEditorMode = ({
+  contentLength = 0,
+  lineCount = 1,
+  charThreshold = 250000,
+  lineThreshold = 5000,
+}) =>
+  Number(contentLength) > Number(charThreshold) ||
+  Number(lineCount) > Number(lineThreshold);

package/lib/public/js/components/google/gmail-setup-wizard.js

@@ -1,13 +1,24 @@
 import { h } from "https://esm.sh/preact";
-import { useCallback, useEffect, useMemo, useState } from "https://esm.sh/preact/hooks";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { ModalShell } from "../modal-shell.js";
 import { PageHeader } from "../page-header.js";
 import { CloseIcon } from "../icons.js";
 import { ActionButton } from "../action-button.js";
+import { SessionSelectField } from "../session-select-field.js";
 import { sendAgentMessage } from "../../lib/api.js";
 import { showToast } from "../toast.js";
 import { useAgentSessions } from "../../hooks/useAgentSessions.js";
+import {
+  kDestinationSessionFilter,
+  kNoDestinationSessionValue,
+  useDestinationSessionSelection,
+} from "../../hooks/use-destination-session-selection.js";
 
 const html = htm.bind(h);
 
@@ -44,12 +55,7 @@ const kStepTitles = [
   "Build with your Agent",
 ];
 const kTotalSteps = kStepTitles.length;
-const kNoSessionSelectedValue = "__none__";
-
-const kDirectOrGroupFilter = (sessionRow) => {
-  const key = String(sessionRow?.key || "").toLowerCase();
-  return key.includes(":direct:") || key.includes(":group:");
-};
+const kNoSessionSelectedValue = kNoDestinationSessionValue;
 
 const renderCommandBlock = (command = "", onCopy = () => {}) => html`
   <div class="rounded-lg border border-border bg-black/30 p-3">
@@ -89,12 +95,23 @@ export const GmailSetupWizard = ({
   const [agentMessageSent, setAgentMessageSent] = useState(false);
 
   const {
-    sessions: selectableAgentSessions,
     selectedSessionKey,
     setSelectedSessionKey,
     loading: loadingAgentSessions,
     error: agentSessionsError,
-  } = useAgentSessions({ enabled: visible, filter: kDirectOrGroupFilter });
+  } = useAgentSessions({
+    enabled: visible,
+    filter: kDestinationSessionFilter,
+  });
+  const {
+    sessions: selectableAgentSessions,
+    destinationSessionKey,
+    setDestinationSessionKey,
+    selectedDestination,
+  } = useDestinationSessionSelection({
+    enabled: visible,
+    resetKey: String(account?.id || ""),
+  });
 
   useEffect(() => {
     if (!visible) return;
@@ -118,6 +135,9 @@ export const GmailSetupWizard = ({
     String(projectIdInput || "").trim() ||
     String(clientConfig?.projectId || "").trim() ||
     "<project-id>";
+  const hasExistingWebhookSetup = Boolean(
+    clientConfig?.configured && clientConfig?.transformExists,
+  );
   const client =
     String(account?.client || clientConfig?.client || "default").trim() ||
     "default";
@@ -151,6 +171,7 @@ export const GmailSetupWizard = ({
       await onFinish({
         client,
         projectId: String(projectIdInput || "").trim(),
+        destination: selectedDestination,
       });
       setWatchEnabled(true);
       setStep((prev) => Math.min(prev + 1, kTotalSteps - 1));
@@ -184,7 +205,8 @@ export const GmailSetupWizard = ({
     if (sendingToAgent || agentMessageSent) return;
     try {
       setSendingToAgent(true);
-      const accountEmail = String(account?.email || "this account").trim() || "this account";
+      const accountEmail =
+        String(account?.email || "this account").trim() || "this account";
       const message =
         `I just enabled Gmail watch for "${accountEmail}", set up the webhook, ` +
         `and created the transform file. Help me set up what I want to do ` +
@@ -242,7 +264,9 @@ export const GmailSetupWizard = ({
                 class="rounded-lg border border-border bg-black/20 p-3 space-y-2"
               >
                 <div class="text-sm">
-                  ${editingProjectId ? "Change project ID" : "Project ID required"}
+                  ${editingProjectId
+                    ? "Change project ID"
+                    : "Project ID required"}
                 </div>
                 <div class="text-xs text-gray-500">
                   Find it in the${" "}
@@ -320,9 +344,37 @@ export const GmailSetupWizard = ({
       }
       ${
         !needsProjectId && step === 3
-          ? renderCommandBlock(commands?.createSubscription || "", () =>
-              handleCopy(commands?.createSubscription || ""),
-            )
+          ? html`
+              ${renderCommandBlock(commands?.createSubscription || "", () =>
+                handleCopy(commands?.createSubscription || ""),
+              )}
+              <div
+                class="rounded-lg border border-border bg-black/20 p-3 space-y-2"
+              >
+                <${SessionSelectField}
+                  label="Deliver to"
+                  sessions=${selectableAgentSessions}
+                  selectedSessionKey=${destinationSessionKey}
+                  onChangeSessionKey=${setDestinationSessionKey}
+                  disabled=${hasExistingWebhookSetup ||
+                  loadingAgentSessions ||
+                  saving}
+                  loading=${loadingAgentSessions}
+                  error=${agentSessionsError}
+                  allowNone=${true}
+                  noneValue=${kNoSessionSelectedValue}
+                  noneLabel="Default"
+                  loadingLabel="Loading sessions..."
+                  helperText=${hasExistingWebhookSetup
+                    ? "This Gmail webhook has already been created. To edit delivery routing, ask your agent."
+                    : null}
+                  selectClassName="w-full bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+                  helperClassName="text-xs text-gray-500"
+                  statusClassName="text-[11px] text-gray-500"
+                  errorClassName="text-[11px] text-red-400"
+                />
+              </div>
+            `
           : null
       }
       ${
@@ -338,21 +390,29 @@ export const GmailSetupWizard = ({
                     incoming email to continue the setup.
                   </div>
                   <div class="pt-2 space-y-2">
-                    <div class="text-[11px] text-gray-500">Send this to session</div>
+                    <div class="text-[11px] text-gray-500">
+                      Send this to session
+                    </div>
                     <div class="flex items-center gap-2">
                       <select
                         value=${selectedSessionKey || kNoSessionSelectedValue}
                         oninput=${(event) => {
                           const nextValue = String(event.target.value || "");
                           setSelectedSessionKey(
-                            nextValue === kNoSessionSelectedValue ? "" : nextValue,
+                            nextValue === kNoSessionSelectedValue
+                              ? ""
+                              : nextValue,
                           );
                         }}
-                        disabled=${loadingAgentSessions || sendingToAgent || agentMessageSent}
+                        disabled=${loadingAgentSessions ||
+                        sendingToAgent ||
+                        agentMessageSent}
                         class="flex-1 min-w-0 bg-black/30 border border-border rounded-lg px-2.5 py-2 text-xs font-mono focus:border-gray-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
                       >
                         ${!selectedSessionKey
-                          ? html`<option value=${kNoSessionSelectedValue}>Select a session...</option>`
+                          ? html`<option value=${kNoSessionSelectedValue}>
+                              Select a session...
+                            </option>`
                           : null}
                         ${selectableAgentSessions.map(
                           (sessionRow) => html`
@@ -366,7 +426,6 @@ export const GmailSetupWizard = ({
                         onClick=${handleSendToAgent}
                         disabled=${!selectedSessionKey || agentMessageSent}
                         loading=${sendingToAgent}
-                        loadingMode="inline"
                         idleLabel=${agentMessageSent ? "Sent" : "Send to Agent"}
                         loadingLabel="Sending..."
                         tone="primary"
@@ -375,10 +434,14 @@ export const GmailSetupWizard = ({
                       />
                     </div>
                     ${loadingAgentSessions
-                      ? html`<div class="text-[11px] text-gray-500">Loading sessions...</div>`
+                      ? html`<div class="text-[11px] text-gray-500">
+                          Loading sessions...
+                        </div>`
                       : null}
                     ${agentSessionsError
-                      ? html`<div class="text-[11px] text-red-400">${agentSessionsError}</div>`
+                      ? html`<div class="text-[11px] text-red-400">
+                          ${agentSessionsError}
+                        </div>`
                       : null}
                   </div>
                 </div>
@@ -387,24 +450,26 @@ export const GmailSetupWizard = ({
           : null
       }
       <div class="grid grid-cols-2 gap-2 pt-2">
-        ${step === 0
-          ? html`${!needsProjectId
-              ? html`<button
-                  type="button"
-                  onclick=${handleChangeProjectId}
-                  class="justify-self-start text-xs px-2 py-1 rounded-lg ac-btn-ghost"
-                >
-                  Change project ID
-                </button>`
-              : html`<div></div>`}`
-          : html`<${ActionButton}
-              onClick=${() => setStep((prev) => Math.max(prev - 1, 0))}
-              disabled=${saving}
-              idleLabel="Back"
-              tone="secondary"
-              size="md"
-              className="w-full justify-center"
-            />`}
+        ${
+          step === 0
+            ? html`${!needsProjectId
+                ? html`<button
+                    type="button"
+                    onclick=${handleChangeProjectId}
+                    class="justify-self-start text-xs px-2 py-1 rounded-lg ac-btn-ghost"
+                  >
+                    Change project ID
+                  </button>`
+                : html`<div></div>`}`
+            : html`<${ActionButton}
+                onClick=${() => setStep((prev) => Math.max(prev - 1, 0))}
+                disabled=${saving}
+                idleLabel="Back"
+                tone="secondary"
+                size="md"
+                className="w-full justify-center"
+              />`
+        }
         ${
           step < kTotalSteps - 2
             ? html`<${ActionButton}
@@ -417,23 +482,25 @@ export const GmailSetupWizard = ({
               />`
             : step === kTotalSteps - 2
               ? html`<${ActionButton}
-                  onClick=${handleFinish}
+                  onClick=${hasExistingWebhookSetup ? handleNext : handleFinish}
                   disabled=${false}
                   loading=${saving}
-                  idleLabel="Enable watch"
-                  loadingLabel="Enabling..."
+                  idleLabel=${hasExistingWebhookSetup ? "Next" : "Enable watch"}
+                  loadingLabel=${hasExistingWebhookSetup
+                    ? "Loading..."
+                    : "Enabling..."}
                   tone="primary"
                   size="md"
                   className="w-full justify-center"
                 />`
-            : html`<${ActionButton}
-                onClick=${onClose}
-                disabled=${saving || sendingToAgent}
-                idleLabel="Done"
-                tone="secondary"
-                size="md"
-                className="w-full justify-center"
-              />`
+              : html`<${ActionButton}
+                  onClick=${onClose}
+                  disabled=${saving || sendingToAgent}
+                  idleLabel="Done"
+                  tone="secondary"
+                  size="md"
+                  className="w-full justify-center"
+                />`
         }
       </div>
     </${ModalShell}>

package/lib/public/js/components/google/index.js

@@ -16,7 +16,6 @@ import { getDefaultScopes, toggleScopeLogic } from "../scope-picker.js";
 import { CredentialsModal } from "../credentials-modal.js";
 import { ConfirmDialog } from "../confirm-dialog.js";
 import { showToast } from "../toast.js";
-import { PageHeader } from "../page-header.js";
 import { ActionButton } from "../action-button.js";
 import { GoogleAccountRow } from "./account-row.js";
 import { AddGoogleAccountModal } from "./add-account-modal.js";
@@ -397,7 +396,11 @@ export const Google = ({
     }
   };
 
-  const handleFinishGmailSetupWizard = async ({ client, projectId }) => {
+  const handleFinishGmailSetupWizard = async ({
+    client,
+    projectId,
+    destination = null,
+  }) => {
     const accountId = String(gmailWizardState.accountId || "").trim();
     if (!accountId) return;
     await saveClientSetup({
@@ -405,7 +408,7 @@ export const Google = ({
       projectId,
       regeneratePushToken: false,
     });
-    await startWatchForAccount(accountId);
+    await startWatchForAccount(accountId, { destination });
     showToast("Gmail setup complete and watch enabled", "success");
   };
 
@@ -447,48 +450,46 @@ export const Google = ({
 
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
-      <${PageHeader}
-        title="Google Accounts"
-        actions=${html`
-          ${accounts.length
-            ? html`
-                <div class="relative">
-                  <button
-                    type="button"
-                    onclick=${() => setAddMenuOpen((prev) => !prev)}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
-                  >
-                    + Add Account
-                  </button>
-                  ${addMenuOpen
-                    ? html`
-                        <div
-                          class="absolute right-0 top-full mt-2 min-w-[210px] rounded-lg border border-border bg-modal p-1 z-20"
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="card-label">Google Accounts</h2>
+        ${accounts.length
+          ? html`
+              <div class="relative">
+                <button
+                  type="button"
+                  onclick=${() => setAddMenuOpen((prev) => !prev)}
+                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
+                >
+                  + Add Account
+                </button>
+                ${addMenuOpen
+                  ? html`
+                      <div
+                        class="absolute right-0 top-full mt-2 min-w-[210px] rounded-lg border border-border bg-modal p-1 z-20"
+                      >
+                        <button
+                          type="button"
+                          onclick=${handleAddCompanyClick}
+                          class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
                         >
-                          <button
-                            type="button"
-                            onclick=${handleAddCompanyClick}
-                            class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
-                          >
-                            Company account
-                          </button>
-                          ${!hasPersonalAccount
-                            ? html`<button
-                                type="button"
-                                onclick=${handleAddPersonalClick}
-                                class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
-                              >
-                                Personal account
-                              </button>`
-                            : null}
-                        </div>
-                      `
-                    : null}
-                </div>
-              `
-            : null}
-        `}
-      />
+                          Company account
+                        </button>
+                        ${!hasPersonalAccount
+                          ? html`<button
+                              type="button"
+                              onclick=${handleAddPersonalClick}
+                              class="w-full text-left px-2.5 py-1.5 text-xs rounded-md hover:bg-black/30"
+                            >
+                              Personal account
+                            </button>`
+                          : null}
+                      </div>
+                    `
+                  : null}
+              </div>
+            `
+          : null}
+      </div>
       ${loading
         ? html`<div class="text-gray-500 text-sm text-center py-2">
             Loading...