@chrysb/alphaclaw 0.1.25 → 0.2.1

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?.status === 'paired' && 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/onboarding/welcome-form-step.js

@@ -36,6 +36,7 @@ export const WelcomeFormStep = ({
   goBack,
   goNext,
   loading,
+  githubStepLoading,
   allValid,
   handleSubmit,
 }) => {
@@ -276,10 +277,12 @@ export const WelcomeFormStep = ({
               : html`<div class="w-full"></div>`}
             <button
               onclick=${goNext}
-              disabled=${!currentGroupValid}
+              disabled=${!currentGroupValid || githubStepLoading}
               class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-cyan"
             >
-              Next
+              ${activeGroup.id === "github" && githubStepLoading
+                ? "Checking..."
+                : "Next"}
             </button>
           `
         : html`

package/lib/public/js/components/onboarding/welcome-setup-step.js

@@ -78,7 +78,7 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
   const currentTip = kSetupTips[tipIndex];
 
   return html`
-    <div class="min-h-[320px] py-4 flex flex-col">
+    <div class="relative min-h-[320px] pt-4 pb-20 flex">
       <div
         class="flex-1 flex flex-col items-center justify-center text-center gap-4"
       >
@@ -107,7 +107,7 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
         <p class="text-sm text-gray-500">This could take 10-15 seconds</p>
       </div>
       <div
-        class="mt-3 bg-black/20 border border-border rounded-lg px-3 py-2 text-xs text-gray-500"
+        class="absolute bottom-3 left-3 right-3 bg-black/20 border border-border rounded-lg px-3 py-2 text-xs text-gray-500"
       >
         <span class="text-gray-400">${currentTip.label}: </span>
         ${currentTip.text}