@chrysb/alphaclaw 0.1.24 → 0.2.0

package/lib/public/js/components/channels.js

@@ -9,7 +9,7 @@ const kChannelMeta = {
   discord: { label: 'Discord', iconSrc: '/assets/icons/discord.svg' },
 };
 
-export function Channels({ channels, onSwitchTab }) {
+export function Channels({ channels, onSwitchTab, onNavigate }) {
   return html`
     <div class="bg-surface border border-border rounded-xl p-4">
       <h2 class="card-label mb-3">Channels</h2>
@@ -17,6 +17,7 @@ export function Channels({ channels, onSwitchTab }) {
         ${channels ? ALL_CHANNELS.map(ch => {
           const info = channels[ch];
           const channelMeta = kChannelMeta[ch] || { label: ch.charAt(0).toUpperCase() + ch.slice(1), iconSrc: '' };
+          const isClickable = ch === 'telegram' && info && onNavigate;
           let badge;
           if (!info) {
             badge = html`<a
@@ -29,14 +30,24 @@ export function Channels({ channels, onSwitchTab }) {
           } else {
             badge = html`<${Badge} tone="warning">Awaiting pairing</${Badge}>`;
           }
-          return html`<div class="flex justify-between items-center py-1.5">
+          return html`<div
+            class="flex justify-between items-center py-1.5 ${isClickable ? 'cursor-pointer hover:bg-white/5 -mx-2 px-2 rounded-lg transition-colors' : ''}"
+            onclick=${isClickable ? () => onNavigate('telegram') : undefined}
+          >
             <span class="font-medium text-sm flex items-center gap-2">
               ${channelMeta.iconSrc
                 ? html`<img src=${channelMeta.iconSrc} alt="" class="w-4 h-4 rounded-sm" aria-hidden="true" />`
                 : null}
               ${channelMeta.label}
             </span>
-            ${badge}
+            <span class="flex items-center gap-2">
+              ${badge}
+              ${isClickable && html`
+                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" class="text-gray-600">
+                  <path d="M5.646 3.354a.5.5 0 01.708 0l4.5 4.5a.5.5 0 010 .708l-4.5 4.5a.5.5 0 01-.708-.708L9.793 8 5.646 3.854a.5.5 0 010-.5z"/>
+                </svg>
+              `}
+            </span>
           </div>`;
         }) : html`<div class="text-gray-500 text-sm text-center py-2">Loading...</div>`}
       </div>

package/lib/public/js/components/features.js

@@ -55,8 +55,7 @@ export const Features = ({ onSwitchTab }) => {
                       <${Badge} tone="success">Enabled</${Badge}>
                     </span>
                   `
-                : feature.hasDefault
-                  ? html`
+                : html`
                     <span class="flex items-center gap-2">
                       <a
                         href="#"
@@ -66,20 +65,7 @@ export const Features = ({ onSwitchTab }) => {
                         }}
                         class="text-xs text-gray-500 hover:text-gray-300"
                       >Add provider</a>
-                      <${Badge} tone="success">Default</${Badge}>
-                    </span>
-                  `
-                  : html`
-                    <span class="flex items-center gap-2">
-                      <a
-                        href="#"
-                        onclick=${(e) => {
-                          e.preventDefault();
-                          onSwitchTab?.("providers");
-                        }}
-                        class="text-xs text-gray-500 hover:text-gray-300"
-                      >Add provider</a>
-                      <${Badge} tone="danger">Disabled</${Badge}>
+                      <${Badge} tone=${feature.hasDefault ? "neutral" : "danger"}>Disabled</${Badge}>
                     </span>
                   `}
             </div>

package/lib/public/js/components/providers.js

@@ -23,6 +23,7 @@ import {
   kProviderLabels,
   kProviderOrder,
   kProviderFeatures,
+  kCoreProviders,
 } from "../lib/model-config.js";
 
 const html = htm.bind(h);
@@ -70,6 +71,7 @@ export const Providers = () => {
   const [savedAiValues, setSavedAiValues] = useState(() => kProvidersTabCache?.savedAiValues || {});
   const [restartRequired, setRestartRequired] = useState(false);
   const [restartingGateway, setRestartingGateway] = useState(false);
+  const [showMoreProviders, setShowMoreProviders] = useState(false);
   const codexPopupPollRef = useRef(null);
 
   const refresh = async () => {
@@ -490,7 +492,27 @@ export const Providers = () => {
         </div>
       </div>
 
-      ${otherProviders.map((provider) => renderProviderCard(provider))}
+      ${otherProviders
+        .filter((p) => kCoreProviders.has(p))
+        .map((provider) => renderProviderCard(provider))}
+
+      ${showMoreProviders
+        ? otherProviders
+            .filter((p) => !kCoreProviders.has(p))
+            .map((provider) => renderProviderCard(provider))
+        : null}
+
+      ${otherProviders.some((p) => !kCoreProviders.has(p))
+        ? html`
+            <button
+              type="button"
+              onclick=${() => setShowMoreProviders((prev) => !prev)}
+              class="w-full text-xs text-gray-500 hover:text-gray-300 py-1"
+            >
+              ${showMoreProviders ? "Hide additional providers" : "More providers"}
+            </button>
+          `
+        : null}
 
       ${restartRequired
         ? html`<div