@chrysb/alphaclaw 0.6.2-beta.4 → 0.6.2-beta.6

package/lib/public/assets/icons/slack.svg

@@ -0,0 +1,17 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4127_70105)">
+<path d="M11.379 33.9993C11.379 37.1358 8.84512 39.6507 5.7276 39.6507C2.61008 39.6507 0.0572205 37.1168 0.0572205 33.9993C0.0572205 30.8817 2.5911 28.3479 5.70862 28.3479H11.36V33.9993H11.379Z" fill="#E01E5A"/>
+<path d="M14.1962 33.9997C14.1962 30.8632 16.7301 28.3483 19.8476 28.3483C22.9651 28.3483 25.499 30.8822 25.499 33.9997V48.1353C25.499 51.2718 22.9651 53.7867 19.8476 53.7867C16.7301 53.7867 14.1962 51.2718 14.1962 48.1353V33.9997Z" fill="#E01E5A"/>
+<path d="M19.8662 11.2673C16.7296 11.2673 14.2148 8.73347 14.2148 5.61594C14.2148 2.49842 16.7486 -0.0354538 19.8662 -0.0354538C22.9837 -0.0354538 25.5175 2.49842 25.5175 5.61594V11.2673H19.8662Z" fill="#36C5F0"/>
+<path d="M19.8682 14.1334C23.0047 14.1334 25.5196 16.6673 25.5196 19.7848C25.5196 22.9023 22.9857 25.4362 19.8682 25.4362H5.67566C2.53916 25.4362 0.0242615 22.9023 0.0242615 19.7848C0.0242615 16.6673 2.55814 14.1334 5.67566 14.1334H19.8682Z" fill="#36C5F0"/>
+<path d="M42.5323 19.7853C42.5323 16.6488 45.0662 14.1339 48.1837 14.1339C51.3012 14.1339 53.8351 16.6678 53.8351 19.7853C53.8351 22.9028 51.3012 25.4367 48.1837 25.4367H42.5323V19.7853Z" fill="#2EB67D"/>
+<path d="M39.7126 19.7934C39.7126 22.9299 37.1787 25.4448 34.0612 25.4448C30.9436 25.4448 28.4098 22.911 28.4098 19.7934V5.61986C28.4098 2.48336 30.9436 -0.0315399 34.0612 -0.0315399C37.1787 -0.0315399 39.7126 2.48336 39.7126 5.61986V19.7934Z" fill="#2EB67D"/>
+<path d="M34.0376 42.482C37.1741 42.482 39.689 45.0158 39.689 48.1334C39.689 51.2509 37.1552 53.7848 34.0376 53.7848C30.9201 53.7848 28.3862 51.2509 28.3862 48.1334V42.482H34.0376Z" fill="#ECB22E"/>
+<path d="M34.0381 39.6507C30.9016 39.6507 28.3867 37.1168 28.3867 33.9993C28.3867 30.8818 30.9206 28.3479 34.0381 28.3479H48.2306C51.3671 28.3479 53.882 30.8818 53.882 33.9993C53.882 37.1168 51.3482 39.6507 48.2306 39.6507H34.0381Z" fill="#ECB22E"/>
+</g>
+<defs>
+<clipPath id="clip0_4127_70105">
+<rect width="54" height="54" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/lib/public/css/cron.css

@@ -10,26 +10,101 @@
 }
 
 .cron-tab-header {
-  padding: 16px 20px 12px;
+  padding: 16px 0 12px;
   border-bottom: 1px solid var(--border);
 }
 
+.cron-tab-header-content {
+  width: 100%;
+  max-width: 672px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
 .cron-tab-main {
   flex: 1;
   min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.cron-tab-main-content {
+  width: min(100% - 40px, 672px);
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 0 24px;
+  min-height: 100%;
+}
+
+.cron-tab-selector-shell {
+  position: relative;
+  width: min(100%, 320px);
+}
+
+.cron-tab-selector-toggle {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.015);
+  color: var(--text);
+  text-align: left;
+  font: inherit;
+  padding: 8px 10px;
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
 }
 
-.cron-list-panel {
-  min-width: 220px;
-  max-width: 480px;
-  border-right: 1px solid var(--border);
+.cron-tab-selector-toggle:hover {
+  border-color: rgba(148, 163, 184, 0.45);
+}
+
+.cron-tab-selector-toggle.is-open {
+  border-color: rgba(99, 235, 255, 0.55);
+  background: rgba(99, 235, 255, 0.08);
+}
+
+.cron-tab-selector-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cron-tab-selector-caret {
+  color: var(--text-dim);
+  transition: transform 0.12s ease;
+}
+
+.cron-tab-selector-toggle.is-open .cron-tab-selector-caret {
+  transform: rotate(180deg);
+}
+
+.cron-tab-selector-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  width: min(100vw - 40px, 420px);
+  max-height: min(70vh, 620px);
+  border: 1px solid var(--border);
+  border-radius: 12px;
   background: var(--bg-sidebar);
-  overflow-y: auto;
+  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
+  overflow: hidden;
+  z-index: 8;
 }
 
-.cron-list-panel-inner {
+.cron-tab-selector-dropdown .cron-list-panel-inner {
   padding: 0 10px 10px;
+  max-height: min(70vh, 620px);
+  overflow-y: auto;
 }
 
 .cron-list-sticky-search {
@@ -168,49 +243,26 @@
   flex: 0 0 auto;
 }
 
-.cron-list-resizer {
-  cursor: col-resize;
-  position: relative;
-  width: 6px;
-  margin-left: -3px;
-  z-index: 4;
-}
-
-.cron-list-resizer::after {
-  content: "";
-  position: absolute;
-  left: 2px;
-  top: 0;
-  bottom: 0;
-  width: 2px;
-  background: transparent;
-  transition: background 0.12s;
-}
-
-.cron-list-resizer:hover::after,
-.cron-list-resizer.is-resizing::after {
-  background: rgba(99, 235, 255, 0.55);
-}
-
 .cron-detail-panel {
-  flex: 1;
+  height: auto;
   min-width: 0;
-  min-height: 0;
-  overflow: hidden;
+  min-height: 100%;
+  overflow: visible;
 }
 
 .cron-detail-scroll {
-  height: 100%;
-  overflow-y: auto;
+  height: auto;
+  overflow: visible;
 }
 
 .cron-detail-content {
-  padding: 16px 20px 24px;
+  padding: 16px 0 0;
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-height: 100%;
-  width: min(100%, 1024px);
+  width: 100%;
+  max-width: 672px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -227,7 +279,7 @@
 
 .cron-prompt-editor-shell .file-viewer-editor-line-num-col {
   width: 44px;
-  padding: 16px 8px 112px 0;
+  padding: 16px 10px 112px 0;
 }
 
 .cron-calendar-repeating-strip {

package/lib/public/js/components/add-channel-menu.js

@@ -0,0 +1,59 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "./action-button.js";
+import { AddLineIcon } from "./icons.js";
+import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
+
+const html = htm.bind(h);
+
+export const AddChannelMenu = ({
+  open = false,
+  onClose = () => {},
+  onToggle = () => {},
+  triggerDisabled = false,
+  channelIds = [],
+  getChannelMeta = () => ({ label: "Channel", iconSrc: "" }),
+  isChannelDisabled = () => false,
+  onSelectChannel = () => {},
+}) => html`
+  <${OverflowMenu}
+    open=${open}
+    ariaLabel="Add channel"
+    title="Add channel"
+    onClose=${onClose}
+    onToggle=${onToggle}
+    renderTrigger=${({ onToggle: handleToggle, ariaLabel, title }) => html`
+      <${ActionButton}
+        onClick=${handleToggle}
+        disabled=${triggerDisabled}
+        loading=${false}
+        loadingMode="inline"
+        tone="subtle"
+        size="sm"
+        idleLabel="Add channel"
+        loadingLabel="Opening..."
+        idleIcon=${AddLineIcon}
+        idleIconClassName="h-3.5 w-3.5"
+        iconOnly=${true}
+        title=${title}
+        ariaLabel=${ariaLabel}
+      />
+    `}
+  >
+    ${channelIds.map((channelId) => {
+      const channelMeta = getChannelMeta(channelId);
+      const disabled = !!isChannelDisabled(channelId);
+      return html`
+        <${OverflowMenuItem}
+          key=${channelId}
+          iconSrc=${channelMeta.iconSrc}
+          disabled=${disabled}
+          onClick=${() => onSelectChannel(channelId)}
+        >
+          ${channelMeta.label}
+        </${OverflowMenuItem}>
+      `;
+    })}
+  </${OverflowMenu}>
+`;
+

package/lib/public/js/components/agents-tab/agent-bindings-section/index.js

@@ -1,10 +1,11 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { isChannelProviderDisabledForAdd } from "../../../lib/channel-provider-availability.js";
+import { AddChannelMenu } from "../../add-channel-menu.js";
 import { ActionButton } from "../../action-button.js";
 import { ALL_CHANNELS, ChannelsCard, getChannelMeta } from "../../channels.js";
 import { ConfirmDialog } from "../../confirm-dialog.js";
 import { AddLineIcon } from "../../icons.js";
-import { OverflowMenu, OverflowMenuItem } from "../../overflow-menu.js";
 import { CreateChannelModal } from "../create-channel-modal.js";
 import { ChannelCardItem } from "./channel-item-trailing.js";
 import { useAgentBindings } from "./use-agent-bindings.js";
@@ -50,7 +51,7 @@ export const AgentBindingsSection = ({
     setShowCreateModal,
     showCreateModal,
   } = useAgentBindings({ agent, agents });
-  const { hasDiscordAccount, mergedChannelItems } = useChannelItems({
+  const { mergedChannelItems } = useChannelItems({
     agentId,
     agentNameMap,
     channelStatus,
@@ -108,48 +109,23 @@ export const AgentBindingsSection = ({
                   />`;
                 }}
                 actions=${html`
-                  <${OverflowMenu}
+                  <${AddChannelMenu}
                     open=${menuOpenId === "__create_channel"}
-                    ariaLabel="Add channel"
-                    title="Add channel"
                     onClose=${() => setMenuOpenId("")}
                     onToggle=${() =>
                       setMenuOpenId((current) =>
                         current === "__create_channel" ? "" : "__create_channel",
                       )}
-                    renderTrigger=${({ onToggle, ariaLabel, title }) => html`
-                      <${ActionButton}
-                        onClick=${onToggle}
-                        disabled=${saving}
-                        loading=${false}
-                        loadingMode="inline"
-                        tone="subtle"
-                        size="sm"
-                        loadingLabel="Opening..."
-                        idleIcon=${AddLineIcon}
-                        idleIconClassName="h-3.5 w-3.5"
-                        iconOnly=${true}
-                        title=${title}
-                        ariaLabel=${ariaLabel}
-                        idleLabel="Add channel"
-                      />
-                    `}
-                  >
-                    ${ALL_CHANNELS.map((channelId) => {
-                      const channelMeta = getChannelMeta(channelId);
-                      const isDisabled = channelId === "discord" && hasDiscordAccount;
-                      return html`
-                        <${OverflowMenuItem}
-                          key=${channelId}
-                          iconSrc=${channelMeta.iconSrc}
-                          disabled=${isDisabled}
-                          onClick=${() => openCreateChannelModal(channelId)}
-                        >
-                          ${channelMeta.label}
-                        </${OverflowMenuItem}>
-                      `;
-                    })}
-                  </${OverflowMenu}>
+                    triggerDisabled=${saving}
+                    channelIds=${ALL_CHANNELS}
+                    getChannelMeta=${getChannelMeta}
+                    isChannelDisabled=${(channelId) =>
+                      isChannelProviderDisabledForAdd({
+                        configuredChannelMap,
+                        provider: channelId,
+                      })}
+                    onSelectChannel=${openCreateChannelModal}
+                  />
                 `}
               />
             </div>

package/lib/public/js/components/agents-tab/agent-bindings-section/use-channel-items.js

@@ -20,11 +20,6 @@ export const useChannelItems = ({
   defaultAgentId = "",
   isDefaultAgent = false,
 }) => {
-  const hasDiscordAccount = useMemo(() => {
-    const discordChannel = configuredChannelMap.get("discord");
-    return Array.isArray(discordChannel?.accounts) && discordChannel.accounts.length > 0;
-  }, [configuredChannelMap]);
-
   const [showAssignedElsewhere, setShowAssignedElsewhere] = useState(false);
 
   const channelItemData = useMemo(() => {
@@ -205,7 +200,6 @@ export const useChannelItems = ({
   }, [assignedElsewhereItems, showAssignedElsewhere, visibleChannelItems]);
 
   return {
-    hasDiscordAccount,
     mergedChannelItems,
   };
 };