@geminilight/mindos 0.6.69 → 0.6.70

package/_standalone/components/Breadcrumb.tsx

@@ -21,7 +21,7 @@ export default function Breadcrumb({ filePath }: { filePath: string }) {
 
   if (friendly) {
     return (
-      <nav className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
+      <nav className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground flex-nowrap overflow-hidden">
         <Link
           href="/"
           className="p-1.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors shrink-0"
@@ -30,17 +30,17 @@ export default function Breadcrumb({ filePath }: { filePath: string }) {
           <Home size={14} />
         </Link>
         <ChevronRight size={12} className="text-muted-foreground/50 shrink-0" />
-        <div className="flex items-center gap-1.5 text-foreground font-medium shrink-0">
+        <span className="min-w-0 flex items-center gap-1.5 text-foreground font-medium">
           {friendly.icon}
-          <span>{friendly.getLabel(t)}</span>
-        </div>
+          <span className="block truncate max-w-[180px] sm:max-w-[260px] md:max-w-[360px]">{friendly.getLabel(t)}</span>
+        </span>
       </nav>
     );
   }
 
   const parts = filePath.split('/');
   return (
-    <nav className="flex items-center gap-2 text-xs text-muted-foreground flex-wrap">
+    <nav className="flex min-w-0 items-center gap-1 text-xs text-muted-foreground flex-nowrap overflow-hidden">
       <Link
         href="/"
         className="p-1.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors shrink-0"
@@ -52,19 +52,19 @@ export default function Breadcrumb({ filePath }: { filePath: string }) {
         const isLast = i === parts.length - 1;
         const href = '/view/' + parts.slice(0, i + 1).map(encodeURIComponent).join('/');
         return (
-          <div key={i} className="flex items-center gap-2 min-w-0">
+          <span key={i} className="flex items-center gap-1 min-w-0">
             <ChevronRight size={12} className="text-muted-foreground/50 shrink-0" />
             {isLast ? (
-              <div className="flex items-center gap-1.5 text-foreground font-medium shrink-0">
+              <span className="min-w-0 flex items-center gap-1.5 px-1 py-0.5 text-foreground font-medium">
                 <FileTypeIcon name={part} />
-                <span suppressHydrationWarning>{part}</span>
-              </div>
+                <span className="block truncate max-w-[180px] sm:max-w-[260px] md:max-w-[360px]" suppressHydrationWarning>{part}</span>
+              </span>
             ) : (
-              <Link href={href} className="px-2 py-1 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors truncate text-muted-foreground hover:text-foreground" title={part}>
+              <Link href={href} className="block px-1 py-0.5 rounded-md hover:bg-muted/50 hover:text-foreground transition-colors truncate max-w-[120px] sm:max-w-[160px] md:max-w-[200px]" title={part}>
                 <span suppressHydrationWarning>{part}</span>
               </Link>
             )}
-          </div>
+          </span>
         );
       })}
     </nav>

package/_standalone/components/FindInPage.tsx

@@ -163,7 +163,7 @@ export default function FindInPage({ containerRef, onClose }: FindInPageProps) {
           outline: 2px solid rgba(250, 204, 21, 0.5);
         }
       `}</style>
-      <div className="sticky top-[96px] md:top-[44px] z-30 flex justify-end px-4 md:px-6 pointer-events-none" data-find-in-page>
+      <div className="sticky top-[98px] md:top-[46px] z-30 flex justify-end px-4 md:px-6 pointer-events-none" data-find-in-page>
         <div className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-card shadow-lg">
           <input
             ref={inputRef}

package/_standalone/components/MarkdownView.tsx

@@ -102,6 +102,10 @@ const components: Components = {
     void node;
     return <p {...stripNonDom(rest)} suppressHydrationWarning>{children}</p>;
   },
+  span({ children, node, ...rest }) {
+    void node;
+    return <span {...stripNonDom(rest)} suppressHydrationWarning>{children}</span>;
+  },
   a({ href, children, node, ...rest }) {
     void node;
     const isExternal = href?.startsWith('http');

package/_standalone/components/Panel.tsx

@@ -2,7 +2,7 @@
 
 import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { ChevronsDownUp, ChevronsUpDown, Plus, Import, FileText, Layers, MoreHorizontal, Eye, EyeOff, Trash2, Inbox } from 'lucide-react';
+import { ChevronsDownUp, ChevronsUpDown, Plus, Import, FileText, Layers, MoreHorizontal, Eye, EyeOff, Trash2, Inbox, History } from 'lucide-react';
 import type { PanelId } from './ActivityBar';
 import type { FileNode } from '@/lib/types';
 import FileTree, { setShowHiddenFiles, useShowHiddenFiles } from './FileTree';
@@ -284,15 +284,6 @@ export default function Panel({
                   ref={morePopoverRef}
                   className="absolute top-full right-0 mt-1 min-w-[172px] bg-card border border-border rounded-lg shadow-lg py-1 z-50"
                 >
-                  <button
-                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
-                    onClick={() => { setShowHiddenFiles(!showHidden); }}
-                  >
-                    {showHidden ? <EyeOff size={14} className="shrink-0" /> : <Eye size={14} className="shrink-0" />}
-                    <span className="flex-1">{t.sidebar.showHiddenFiles}</span>
-                    {showHidden && <span className="text-[var(--amber)] text-xs">✓</span>}
-                  </button>
-                  <div className="my-1 border-t border-border/50" />
                   <button
                     className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
                     onClick={() => { setMorePopover(false); router.push('/view/Inbox/'); }}
@@ -303,6 +294,13 @@ export default function Panel({
                       <span className="text-2xs font-medium tabular-nums px-1.5 py-px rounded-full bg-[var(--amber)]/10 text-[var(--amber)]/70">{inboxCount}</span>
                     )}
                   </button>
+                  <button
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+                    onClick={() => { setMorePopover(false); router.push('/view/.mindos/change-log.json'); }}
+                  >
+                    <History size={14} className="shrink-0 text-[var(--amber)]" />
+                    <span className="flex-1">{t.changes.title}</span>
+                  </button>
                   <button
                     className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
                     onClick={() => { setMorePopover(false); router.push('/trash'); }}
@@ -313,6 +311,15 @@ export default function Panel({
                       <span className="text-xs text-muted-foreground tabular-nums">{trashCount}</span>
                     )}
                   </button>
+                  <div className="my-1 border-t border-border/50" />
+                  <button
+                    className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-foreground hover:bg-muted transition-colors text-left"
+                    onClick={() => { setShowHiddenFiles(!showHidden); }}
+                  >
+                    {showHidden ? <EyeOff size={14} className="shrink-0" /> : <Eye size={14} className="shrink-0" />}
+                    <span className="flex-1">{t.sidebar.showHiddenFiles}</span>
+                    {showHidden && <span className="text-[var(--amber)] text-xs">✓</span>}
+                  </button>
                 </div>
               )}
             </div>

package/_standalone/components/TableOfContents.tsx

@@ -34,7 +34,7 @@ function parseHeadings(content: string): Heading[] {
   return headings;
 }
 
-const TOPBAR_H = 44;
+const TOPBAR_H = 46;
 const SCROLL_OFFSET = TOPBAR_H + 12;
 const NAV_W = 212;
 
@@ -122,7 +122,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
       {/* Collapse / expand toggle — separate from aside so it stays visible */}
       <button
         onClick={() => setCollapsed(v => !v)}
-        className="hidden xl:flex fixed z-10 top-[50px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
+        className="hidden xl:flex fixed z-10 top-[46px] flex items-center justify-center w-5 h-8 rounded-l-md border border-r-0 border-border hover:bg-muted transition-colors"
         style={{
           right: `calc(var(--right-panel-width, 0px) + ${collapsed ? 0 : NAV_W}px)`,
           background: 'var(--background)',
@@ -149,17 +149,17 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
           transition: 'transform 200ms ease-in-out, right 200ms ease-out',
         }}
       >
+      <div className="flex items-center h-[46px] px-4 border-l border-b border-border" style={{ background: 'var(--background)' }}>
+        <p className="text-2xs font-semibold uppercase tracking-wider text-muted-foreground/55 shrink-0">
+          {t.view.tocTitle}
+        </p>
+      </div>
       <nav
         ref={navRef}
         aria-label={t.view.tocTitle}
-        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 py-5 pl-2 pr-3 border-l border-border"
+        className="flex flex-col gap-0.5 overflow-y-auto min-h-0 flex-1 pt-3 pb-5 pl-2 pr-3 border-l border-border"
         style={{ background: 'var(--background)' }}
       >
-        <p
-          className="text-2xs font-semibold uppercase tracking-wider px-2 mb-1 text-muted-foreground/50 shrink-0"
-        >
-          {t.view.tocTitle}
-        </p>
         {headings.map((heading, i) => {
           const indent = (heading.level - minLevel) * 14;
           const isActive = activeId === heading.id;
@@ -194,7 +194,7 @@ export default function TableOfContents({ content }: TableOfContentsProps) {
               }}
               title={heading.text}
             >
-              <span className="line-clamp-2" suppressHydrationWarning>
+              <span className="block truncate" suppressHydrationWarning>
                 {heading.text}
               </span>
             </a>

package/_standalone/components/agents/AgentsContentChannelDetail.tsx

@@ -4,7 +4,7 @@ import { useState, useEffect, useCallback } from 'react';
 import Link from 'next/link';
 import {
   ArrowLeft, CheckCircle2, XCircle, Loader2, Send,
-  Eye, EyeOff, Settings2, Trash2, AlertTriangle, AlertCircle, RefreshCw,
+  Eye, EyeOff, Settings2, Trash2, AlertTriangle, AlertCircle, RefreshCw, ExternalLink,
 } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
 import { getPlatform, type PlatformDef, type PlatformStatus } from '@/lib/im/platforms';
@@ -40,13 +40,15 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
     setError(false);
     try {
       const res = await fetch('/api/im/status');
-      if (res.ok) {
-        const data = await res.json();
-        const platforms: PlatformStatus[] = data.platforms ?? [];
-        setStatus(platforms.find(s => s.platform === platformId) ?? null);
-      } else {
+      if (!res.ok) {
         setError(true);
+        setLoading(false);
+        return;
       }
+
+      const data = await res.json();
+      const platforms: PlatformStatus[] = data.platforms ?? [];
+      setStatus(platforms.find(s => s.platform === platformId) ?? null);
     } catch {
       setError(true);
     }
@@ -67,6 +69,7 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
   }
 
   const isConnected = status?.connected ?? false;
+  const hasExistingCredentials = isConnected;
 
   const handleSave = async () => {
     setSaving(true);
@@ -166,19 +169,19 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
       </Link>
 
       {/* Platform header */}
-      <div className="flex items-center gap-3 mb-6">
-        <span className="text-2xl">{platform.icon}</span>
-        <div>
-          <h2 className="text-lg font-semibold text-foreground">{platform.name}</h2>
-          <p className="text-sm text-muted-foreground">
-            {isConnected ? (
-              <span className="inline-flex items-center gap-1.5 text-success">
-                <CheckCircle2 size={14} /> {im.statusConnected}
-              </span>
-            ) : (
-              im.notConfigured
-            )}
-          </p>
+      <div className="flex items-start gap-3 mb-6">
+        <span className="text-3xl shrink-0">{platform.icon}</span>
+        <div className="flex-1">
+          <h2 className="text-xl font-semibold text-foreground">{platform.name}</h2>
+          {isConnected ? (
+            <span className="inline-flex items-center gap-1.5 mt-1 text-xs font-medium px-2 py-0.5 rounded-md bg-success/10 text-success">
+              <CheckCircle2 size={14} /> {im.statusConnected}
+            </span>
+          ) : (
+            <span className="inline-flex items-center gap-1.5 mt-1 text-xs font-medium px-2 py-0.5 rounded-md bg-muted text-muted-foreground">
+              {im.notConfigured}
+            </span>
+          )}
         </div>
       </div>
 
@@ -186,60 +189,133 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
         /* ─── Connected View ─── */
         <div className="flex flex-col gap-6">
           {/* Status info */}
-          <div className="rounded-lg border border-border bg-card p-4">
+          <div className="rounded-lg border border-border bg-muted/30 p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-3">{im.tabStatus}</h3>
             {status?.botName && (
-              <div className="flex items-center gap-2 mb-2">
-                <span className="text-2xs text-muted-foreground uppercase tracking-wider">Bot</span>
+              <div className="flex items-center gap-2 mb-3">
+                <span className="text-xs font-medium text-muted-foreground">Bot</span>
                 <span className="text-sm text-foreground font-mono">{status.botName}</span>
               </div>
             )}
             {status?.capabilities && status.capabilities.length > 0 && (
               <div className="flex flex-wrap gap-1.5">
                 {status.capabilities.map(cap => (
-                  <span key={cap} className="text-2xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground">{cap}</span>
+                  <span key={cap} className="text-xs px-2 py-1 rounded-md bg-muted text-muted-foreground">{cap}</span>
                 ))}
               </div>
             )}
           </div>
 
+          {/* Credential update */}
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+            <h3 className="text-sm font-medium text-foreground mb-2">{im.editCredentials}</h3>
+            <p className="text-sm text-muted-foreground leading-6 mb-4 max-w-prose">{platform.editHint || im.editCredentialsHint}</p>
+            {hasExistingCredentials && (
+              <p className="text-xs text-muted-foreground/80 leading-5 mb-4 max-w-prose">{im.savedValuesHint}</p>
+            )}
+            <div className="flex flex-col gap-4">
+              {platform.fields.map(field => (
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">
+                    {field.label}
+                    <span className="text-muted-foreground/50 font-normal"> ({im.required})</span>
+                  </label>
+                  <div className="relative">
+                    <input
+                      type={showSecrets ? 'text' : 'password'}
+                      placeholder={field.placeholder}
+                      value={formValues[field.key] ?? ''}
+                      onChange={e => setFormValues(prev => ({ ...prev, [field.key]: e.target.value }))}
+                      className="h-11 w-full px-3 pr-10 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      autoComplete="off"
+                      aria-required="true"
+                      aria-describedby={field.hint ? `connected-hint-${field.key}` : undefined}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowSecrets(!showSecrets)}
+                      className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1.5 text-muted-foreground hover:text-foreground rounded transition-colors"
+                      aria-label={showSecrets ? im.hideSecret : im.showSecret}
+                      title={showSecrets ? im.hideSecret : im.showSecret}
+                    >
+                      {showSecrets ? <EyeOff size={16} /> : <Eye size={16} />}
+                    </button>
+                  </div>
+                  {field.hint && (
+                    <span id={`connected-hint-${field.key}`} className="text-xs text-muted-foreground">{field.hint}</span>
+                  )}
+                </div>
+              ))}
+              <div className="flex items-center gap-3 pt-1">
+                <button
+                  type="button"
+                  onClick={handleSave}
+                  disabled={saving || !isFormComplete}
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={saving ? im.saving : im.saveConfig}
+                >
+                  {saving ? <Loader2 size={14} className="animate-spin" /> : <Settings2 size={14} />}
+                  {saving ? im.saving : im.saveConfig}
+                </button>
+              </div>
+              {saveResult && (
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}
+                >
+                  {saveResult.ok ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
+                  <span className="break-all">{saveResult.msg}</span>
+                </div>
+              )}
+            </div>
+          </div>
+
           {/* Test send */}
-          <div className="rounded-lg border border-border bg-card p-4">
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-3">{im.testSend}</h3>
             <div className="flex flex-col gap-3">
               <div>
-                <label className="text-2xs text-muted-foreground uppercase tracking-wider mb-1 block">{im.recipientPlaceholder}</label>
+                <label className="text-xs font-medium text-muted-foreground block mb-1.5">{im.recipientPlaceholder}</label>
                 <input
                   type="text"
                   placeholder={im.recipientPlaceholder}
                   value={testRecipient}
                   onChange={e => setTestRecipient(e.target.value)}
-                  className="h-8 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="h-11 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  aria-label={im.recipientPlaceholder}
                 />
+                <p className="text-xs text-muted-foreground mt-1.5 leading-5">{im.recipientHint}</p>
               </div>
               <div>
-                <label className="text-2xs text-muted-foreground uppercase tracking-wider mb-1 block">{im.messagePlaceholder}</label>
+                <label className="text-xs font-medium text-muted-foreground block mb-1.5">{im.messagePlaceholder}</label>
                 <input
                   type="text"
                   placeholder={im.messagePlaceholder}
                   value={testMsg}
                   onChange={e => setTestMsg(e.target.value)}
-                  className="h-8 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  className="h-11 w-full px-3 text-sm bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  aria-label={im.messagePlaceholder}
                 />
               </div>
-              <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3 pt-1">
                 <button
                   type="button"
                   onClick={handleTest}
                   disabled={testStatus === 'sending' || !testRecipient.trim()}
-                  className="h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={im.sendTest}
                 >
                   {testStatus === 'sending' ? <Loader2 size={14} className="animate-spin" /> : <Send size={14} />}
                   {im.sendTest}
                 </button>
               </div>
               {testResult && (
-                <div className={`flex items-start gap-1.5 text-sm ${testStatus === 'success' ? 'text-success' : 'text-error'}`}>
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${testStatus === 'success' ? 'text-success' : 'text-error'}`}
+                >
                   {testStatus === 'success' ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
                   <span className="break-all">{testResult}</span>
                 </div>
@@ -248,18 +324,19 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
           </div>
 
           {/* Disconnect */}
-          <div className="rounded-lg border border-error/20 bg-card p-4">
+          <div className="rounded-lg border border-error/20 bg-card p-4 shadow-sm">
             <h3 className="text-sm font-medium text-foreground mb-2">{im.disconnect}</h3>
-            <p className="text-2xs text-muted-foreground mb-3">{im.disconnectHint}</p>
+            <p className="text-xs text-muted-foreground mb-3">{im.disconnectHint}</p>
             <button
               type="button"
               onClick={handleDisconnect}
               disabled={deleting}
-              className={`h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 border transition-colors ${
+              className={`h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 border transition-colors ${
                 confirmDelete
                   ? 'text-error border-error/40 bg-error/5 hover:bg-error/10'
                   : 'text-muted-foreground border-border hover:text-error hover:border-error/30'
               }`}
+              aria-label={im.disconnect}
             >
               {deleting ? <Loader2 size={14} className="animate-spin" />
                 : confirmDelete ? <><AlertTriangle size={14} /> {im.confirmDisconnect}</>
@@ -270,60 +347,97 @@ export default function AgentsContentChannelDetail({ platformId }: { platformId:
         </div>
       ) : (
         /* ─── Not Configured View ─── */
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-6">
           {/* Guide */}
           {platform.guide && (
-            <div className="rounded-lg border border-border bg-card p-4">
-              <h3 className="text-sm font-medium text-foreground mb-2">{im.setupGuide}</h3>
-              <div className="text-sm text-muted-foreground leading-relaxed whitespace-pre-line">
-                {platform.guide}
+            <div className="rounded-lg border border-border border-l-4 border-l-[var(--amber)] bg-card p-4 shadow-sm">
+              <div className="flex items-start justify-between gap-3 mb-3">
+                <h3 className="text-sm font-medium text-foreground">{im.setupGuide}</h3>
+                {platform.guideUrl && (
+                  <Link
+                    href={platform.guideUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    className="inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs bg-[var(--amber-dim)] text-[var(--amber)] hover:bg-[var(--amber-dim)]/80 shrink-0 transition-colors"
+                  >
+                    {im.guideLink}
+                    <ExternalLink size={12} />
+                  </Link>
+                )}
+              </div>
+              <div className="text-sm text-muted-foreground leading-7 space-y-1.5 max-w-prose">
+                {platform.guide.split('\n').map((line, idx) => (
+                  <div key={idx}>{line}</div>
+                ))}
               </div>
             </div>
           )}
 
           {/* Credential form */}
-          <div className="rounded-lg border border-border bg-card p-4">
-            <h3 className="text-sm font-medium text-foreground mb-3">{im.tabConfigure}</h3>
-            <div className="flex flex-col gap-3">
+          <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+            <h3 className="text-sm font-medium text-foreground mb-4">{im.tabConfigure}</h3>
+            <div className="flex flex-col gap-4">
               {platform.fields.map(field => (
-                <div key={field.key} className="flex flex-col gap-1">
-                  <label className="text-2xs text-muted-foreground uppercase tracking-wider">{field.label}</label>
+                <div key={field.key} className="flex flex-col gap-1.5">
+                  <label className="text-xs font-medium text-muted-foreground">
+                    {field.label}
+                    <span className="text-muted-foreground/50 font-normal"> ({im.required})</span>
+                  </label>
                   <div className="relative">
                     <input
                       type={showSecrets ? 'text' : 'password'}
                       placeholder={field.placeholder}
                       value={formValues[field.key] ?? ''}
                       onChange={e => setFormValues(prev => ({ ...prev, [field.key]: e.target.value }))}
-                      className="h-8 w-full px-3 pr-8 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                      className="h-11 w-full px-3 pr-10 text-sm font-mono bg-background border border-border rounded-md focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                       autoComplete="off"
+                      aria-required="true"
+                      aria-describedby={field.hint ? `hint-${field.key}` : undefined}
                     />
                     <button
                       type="button"
                       onClick={() => setShowSecrets(!showSecrets)}
-                      className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-muted-foreground hover:text-foreground rounded-sm"
+                      className="absolute right-2.5 top-1/2 -translate-y-1/2 p-1.5 text-muted-foreground hover:text-foreground rounded transition-colors"
                       aria-label={showSecrets ? im.hideSecret : im.showSecret}
+                      title={showSecrets ? im.hideSecret : im.showSecret}
                     >
-                      {showSecrets ? <EyeOff size={14} /> : <Eye size={14} />}
+                      {showSecrets ? <EyeOff size={16} /> : <Eye size={16} />}
                     </button>
                   </div>
-                  {field.hint && <span className="text-2xs text-muted-foreground/60">{field.hint}</span>}
+                  {field.hint && (
+                    <span id={`hint-${field.key}`} className="text-xs text-muted-foreground">{field.hint}</span>
+                  )}
                 </div>
               ))}
-              <div className="flex items-center gap-3 pt-1">
+              <div className="flex items-center gap-3 pt-2">
                 <button
                   type="button"
                   onClick={handleSave}
                   disabled={saving || !isFormComplete}
-                  className="h-8 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+                  className="h-11 px-4 text-sm rounded-md inline-flex items-center gap-1.5 bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm hover:opacity-90 hover:shadow disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+                  aria-label={saving ? im.saving : im.saveConfig}
                 >
                   {saving ? <Loader2 size={14} className="animate-spin" /> : <Settings2 size={14} />}
-                  {im.saveConfig}
+                  {saving ? im.saving : im.saveConfig}
                 </button>
               </div>
               {saveResult && (
-                <div className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}>
-                  {saveResult.ok ? <CheckCircle2 size={16} className="shrink-0 mt-0.5" /> : <XCircle size={16} className="shrink-0 mt-0.5" />}
-                  <span className="break-all">{saveResult.msg}</span>
+                <div 
+                  role="alert" 
+                  aria-live="polite"
+                  className={`flex items-start gap-1.5 text-sm ${saveResult.ok ? 'text-success' : 'text-error'}`}
+                >
+                  {saveResult.ok ? (
+                    <>
+                      <CheckCircle2 size={16} className="shrink-0 mt-0.5" />
+                      <span className="break-all">{saveResult.msg}</span>
+                    </>
+                  ) : (
+                    <>
+                      <XCircle size={16} className="shrink-0 mt-0.5" />
+                      <span className="break-all">{saveResult.msg}</span>
+                    </>
+                  )}
                 </div>
               )}
             </div>

package/_standalone/components/agents/AgentsContentChannels.tsx

@@ -80,22 +80,22 @@ function ChannelsOverview() {
   const getStatus = (id: string) => statuses.find(s => s.platform === id);
 
   return (
-    <div className="max-w-3xl">
+    <div className="max-w-4xl">
       {/* Stats row */}
-      <div className="grid grid-cols-3 gap-4 mb-8">
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsConnected}</div>
-          <div className="text-2xl font-semibold text-foreground tabular-nums">
-            {connected}<span className="text-sm text-muted-foreground font-normal">/{total}</span>
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsConnected}</div>
+          <div className="text-3xl font-semibold text-foreground tabular-nums">
+            {connected}<span className="text-sm text-muted-foreground font-normal ml-1">/ {total}</span>
           </div>
         </div>
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsSupported}</div>
-          <div className="text-2xl font-semibold text-foreground tabular-nums">{total}</div>
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsSupported}</div>
+          <div className="text-3xl font-semibold text-foreground tabular-nums">{total}</div>
         </div>
-        <div className="rounded-lg border border-border bg-card p-4">
-          <div className="text-2xs text-muted-foreground uppercase tracking-wider mb-1">{im.statsStatus}</div>
-          <div className="text-sm text-foreground mt-1">
+        <div className="rounded-lg border border-border bg-card p-4 shadow-sm">
+          <div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2">{im.statsStatus}</div>
+          <div className="text-sm text-foreground">
             {connected > 0 ? (
               <span className="inline-flex items-center gap-1.5 text-success">
                 <CheckCircle2 size={14} /> {im.statsReady}
@@ -108,8 +108,8 @@ function ChannelsOverview() {
       </div>
 
       {/* Platform grid — clickable */}
-      <h2 className="text-sm font-medium text-foreground mb-3">{im.platformsTitle}</h2>
-      <div className="grid grid-cols-2 gap-3">
+      <h2 className="text-sm font-medium text-foreground mb-4">{im.platformsTitle}</h2>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
         {PLATFORMS.map(({ id, name, icon }) => {
           const status = getStatus(id);
           const isConnected = status?.connected ?? false;
@@ -118,28 +118,28 @@ function ChannelsOverview() {
             <Link
               key={id}
               href={`/agents?tab=channels&platform=${id}`}
-              className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 hover:border-[var(--amber)]/40 hover:bg-card/80 transition-colors"
+              className="flex items-center gap-3 rounded-lg border border-border bg-card px-4 py-3 shadow-sm hover:border-[var(--amber)]/50 hover:bg-card/80 hover:shadow transition-all"
             >
-              <span className="text-lg">{icon}</span>
+              <span className="text-xl shrink-0">{icon}</span>
               <div className="flex-1 min-w-0">
                 <div className="text-sm font-medium text-foreground">{name}</div>
                 {isConnected && status?.botName ? (
-                  <div className="text-2xs text-muted-foreground font-mono truncate">{status.botName}</div>
+                  <div className="text-xs text-muted-foreground font-mono truncate">{status.botName}</div>
                 ) : (
-                  <div className="text-2xs text-muted-foreground">{isConnected ? im.statusConnected : im.notConfigured}</div>
+                  <div className="text-xs text-muted-foreground">{isConnected ? im.statusConnected : im.notConfigured}</div>
                 )}
                 {isConnected && status?.capabilities && status.capabilities.length > 0 && (
-                  <div className="flex flex-wrap gap-1 mt-1">
+                  <div className="flex flex-wrap gap-1 mt-1.5">
                     {status.capabilities.slice(0, 3).map(cap => (
-                      <span key={cap} className="text-2xs px-1 py-0.5 rounded bg-muted text-muted-foreground/70">{cap}</span>
+                      <span key={cap} className="text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground">{cap}</span>
                     ))}
                   </div>
                 )}
               </div>
               {isConnected ? (
-                <CheckCircle2 size={16} className="text-success shrink-0" />
+                <CheckCircle2 size={18} className="text-success shrink-0" />
               ) : (
-                <Circle size={16} className="text-border shrink-0" />
+                <Circle size={18} className="text-border shrink-0" />
               )}
             </Link>
           );