fix: claude auth changes and adding copy on mobile

src/components/provider-auth/view/ProviderLoginModal.tsx

@@ -24,7 +24,7 @@ type ProviderLoginModalProps = {
 const getProviderCommand = ({
   provider,
   customCommand,
-  isAuthenticated,
+  isAuthenticated: _isAuthenticated,
 }: {
   provider: CliProvider;
   customCommand?: string;
@@ -35,10 +35,7 @@ const getProviderCommand = ({
   }
 
   if (provider === 'claude') {
-    if (isAuthenticated) {
-      return 'claude setup-token --dangerously-skip-permissions';
-    }
-    return 'claude /login --dangerously-skip-permissions';
+    return 'claude --dangerously-skip-permissions /login';
   }
 
   if (provider === 'cursor') {

src/components/shell/view/Shell.tsx

@@ -207,15 +207,23 @@ export default function Shell({
 
   if (minimal) {
     return (
-      <ShellMinimalView
-        terminalContainerRef={terminalContainerRef}
-        authUrl={authUrl}
-        authUrlVersion={authUrlVersion}
-        initialCommand={initialCommand}
-        isConnected={isConnected}
-        openAuthUrlInBrowser={openAuthUrlInBrowser}
-        copyAuthUrlToClipboard={copyAuthUrlToClipboard}
-      />
+      <>
+        <ShellMinimalView
+          terminalContainerRef={terminalContainerRef}
+          authUrl={authUrl}
+          authUrlVersion={authUrlVersion}
+          initialCommand={initialCommand}
+          isConnected={isConnected}
+          openAuthUrlInBrowser={openAuthUrlInBrowser}
+          copyAuthUrlToClipboard={copyAuthUrlToClipboard}
+        />
+        <TerminalShortcutsPanel
+          wsRef={wsRef}
+          terminalRef={terminalRef}
+          isConnected={isConnected}
+          bottomOffset="bottom-0"
+        />
+      </>
     );
   }
 

src/components/shell/view/subcomponents/TerminalShortcutsPanel.tsx

@@ -1,61 +1,65 @@
-import { type MutableRefObject, useState, useCallback, useEffect, useRef } from 'react';
+import { type MutableRefObject, useCallback, useState } from 'react';
 import {
-  ChevronLeft,
-  ChevronRight,
-  Keyboard,
+  Clipboard,
   ArrowDownToLine,
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import type { Terminal } from '@xterm/xterm';
 import { sendSocketMessage } from '../../utils/socket';
 
-const SHORTCUTS = [
-  { id: 'escape', labelKey: 'escape', sequence: '\x1b', hint: 'Esc' },
-  { id: 'tab', labelKey: 'tab', sequence: '\t', hint: 'Tab' },
-  { id: 'shift-tab', labelKey: 'shiftTab', sequence: '\x1b[Z', hint: '\u21e7Tab' },
-  { id: 'arrow-up', labelKey: 'arrowUp', sequence: '\x1b[A', hint: '\u2191' },
-  { id: 'arrow-down', labelKey: 'arrowDown', sequence: '\x1b[B', hint: '\u2193' },
-] as const;
+type Shortcut =
+  | { type: 'key'; id: string; label: string; sequence: string }
+  | { type: 'modifier'; id: string; label: string; modifier: 'ctrl' | 'alt' }
+  | { type: 'arrow'; id: string; sequence: string; icon: 'up' | 'down' | 'left' | 'right' };
+
+const MOBILE_KEYS: Shortcut[] = [
+  { type: 'key', id: 'esc', label: 'Esc', sequence: '\x1b' },
+  { type: 'key', id: 'tab', label: 'Tab', sequence: '\t' },
+  { type: 'key', id: 'shift-tab', label: '\u21e7Tab', sequence: '\x1b[Z' },
+  { type: 'modifier', id: 'ctrl', label: 'CTRL', modifier: 'ctrl' },
+  { type: 'modifier', id: 'alt', label: 'ALT', modifier: 'alt' },
+  { type: 'arrow', id: 'arrow-up', sequence: '\x1b[A', icon: 'up' },
+  { type: 'arrow', id: 'arrow-down', sequence: '\x1b[B', icon: 'down' },
+  { type: 'arrow', id: 'arrow-left', sequence: '\x1b[D', icon: 'left' },
+  { type: 'arrow', id: 'arrow-right', sequence: '\x1b[C', icon: 'right' },
+];
+
+const ARROW_ICONS = {
+  up: ArrowUp,
+  down: ArrowDown,
+  left: ArrowLeft,
+  right: ArrowRight,
+} as const;
 
 type TerminalShortcutsPanelProps = {
   wsRef: MutableRefObject<WebSocket | null>;
   terminalRef: MutableRefObject<Terminal | null>;
   isConnected: boolean;
+  bottomOffset?: string;
 };
 
 const preventFocusSteal = (e: React.PointerEvent) => e.preventDefault();
 
+const KEY_BTN =
+  'shrink-0 rounded-md border border-gray-600 bg-gray-700 px-2.5 py-1.5 text-xs font-medium text-gray-100 transition-colors select-none active:bg-blue-600 active:text-white active:border-blue-600 disabled:cursor-not-allowed disabled:opacity-40';
+const KEY_BTN_ACTIVE =
+  'shrink-0 rounded-md border border-blue-500 bg-blue-600 px-2.5 py-1.5 text-xs font-medium text-white transition-colors select-none disabled:cursor-not-allowed disabled:opacity-40';
+const ICON_BTN =
+  'shrink-0 rounded-md border border-gray-600 bg-gray-700 p-1.5 text-gray-100 transition-colors select-none active:bg-blue-600 active:text-white active:border-blue-600 disabled:cursor-not-allowed disabled:opacity-40';
+
 export default function TerminalShortcutsPanel({
   wsRef,
   terminalRef,
   isConnected,
+  bottomOffset = 'bottom-14',
 }: TerminalShortcutsPanelProps) {
   const { t } = useTranslation('settings');
-  const [isOpen, setIsOpen] = useState(false);
-  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    return () => {
-      if (closeTimeoutRef.current) {
-        clearTimeout(closeTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  const handleToggle = useCallback(() => {
-    setIsOpen((prev) => !prev);
-  }, []);
-
-  const handleShortcutAction = useCallback((action: () => void) => {
-    action();
-    if (document.activeElement instanceof HTMLElement) {
-      document.activeElement.blur();
-    }
-    if (closeTimeoutRef.current) {
-      clearTimeout(closeTimeoutRef.current);
-    }
-    closeTimeoutRef.current = setTimeout(() => setIsOpen(false), 50);
-  }, []);
+  const [ctrlActive, setCtrlActive] = useState(false);
+  const [altActive, setAltActive] = useState(false);
 
   const sendInput = useCallback(
     (data: string) => {
@@ -68,103 +72,120 @@ export default function TerminalShortcutsPanel({
     terminalRef.current?.scrollToBottom();
   }, [terminalRef]);
 
-  return (
-    <>
-      {/* Pull Tab */}
-      <button
-        type="button"
-        onPointerDown={preventFocusSteal}
-        onClick={handleToggle}
-        className={`fixed ${
-          isOpen ? 'right-64' : 'right-0'
-        } z-50 cursor-pointer rounded-l-md border border-gray-200 bg-white p-2 shadow-lg transition-all duration-150 ease-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700`}
-        style={{ top: '50%', transform: 'translateY(-50%)' }}
-        aria-label={
-          isOpen
-            ? t('terminalShortcuts.handle.closePanel')
-            : t('terminalShortcuts.handle.openPanel')
+  const pasteFromClipboard = useCallback(async () => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard?.readText) {
+      return;
+    }
+
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text.length > 0) {
+        sendInput(text);
+      }
+    } catch {
+      // Ignore clipboard permission errors.
+    }
+  }, [sendInput]);
+
+  const handleKeyPress = useCallback(
+    (seq: string) => {
+      let finalSeq = seq;
+      if (ctrlActive && seq.length === 1) {
+        const code = seq.toLowerCase().charCodeAt(0);
+        if (code >= 97 && code <= 122) {
+          finalSeq = String.fromCharCode(code - 96);
         }
-      >
-        {isOpen ? (
-          <ChevronRight className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        ) : (
-          <ChevronLeft className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-        )}
-      </button>
+        setCtrlActive(false);
+      }
+      if (altActive && seq.length === 1) {
+        finalSeq = '\x1b' + finalSeq;
+        setAltActive(false);
+      }
+      sendInput(finalSeq);
+    },
+    [ctrlActive, altActive, sendInput],
+  );
 
-      {/* Panel */}
-      <div
-        className={`fixed right-0 top-0 z-40 h-full w-64 transform border-l border-border bg-background shadow-xl transition-transform duration-150 ease-out ${
-          isOpen ? 'translate-x-0' : 'translate-x-full'
-        }`}
-      >
-        <div className="flex h-full flex-col">
-          {/* Header */}
-          <div className="border-b border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-900">
-            <h3 className="flex items-center gap-2 text-lg font-semibold text-gray-900 dark:text-white">
-              <Keyboard className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              {t('terminalShortcuts.title')}
-            </h3>
-          </div>
-
-          {/* Content — conditionally rendered so buttons remount with clean CSS states */}
-          {isOpen && (
-            <div className="flex-1 space-y-6 overflow-y-auto overflow-x-hidden bg-background p-4">
-              {/* Shortcut Keys */}
-              <div className="space-y-2">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                  {t('terminalShortcuts.sectionKeys')}
-                </h4>
-                {SHORTCUTS.map((shortcut) => (
-                  <button
-                    type="button"
-                    key={shortcut.id}
-                    onPointerDown={preventFocusSteal}
-                    onClick={() => handleShortcutAction(() => sendInput(shortcut.sequence))}
-                    disabled={!isConnected}
-                    className="flex w-full items-center justify-between rounded-lg border border-transparent bg-gray-50 p-3 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700"
-                  >
-                    <span className="text-sm text-gray-900 dark:text-white">
-                      {t(`terminalShortcuts.${shortcut.labelKey}`)}
-                    </span>
-                    <kbd className="rounded border border-gray-300 bg-gray-200 px-2 py-0.5 font-mono text-xs text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                      {shortcut.hint}
-                    </kbd>
-                  </button>
-                ))}
-              </div>
-
-              {/* Navigation */}
-              <div className="space-y-2">
-                <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
-                  {t('terminalShortcuts.sectionNavigation')}
-                </h4>
-                <button
-                  type="button"
-                  onPointerDown={preventFocusSteal}
-                  onClick={() => handleShortcutAction(scrollToBottom)}
-                  disabled={!isConnected}
-                  className="flex w-full items-center justify-between rounded-lg border border-transparent bg-gray-50 p-3 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-40 dark:bg-gray-800 dark:hover:border-gray-600 dark:hover:bg-gray-700"
-                >
-                  <span className="text-sm text-gray-900 dark:text-white">
-                    {t('terminalShortcuts.scrollDown')}
-                  </span>
-                  <ArrowDownToLine className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Backdrop */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 z-30 bg-background/80 backdrop-blur-sm transition-opacity duration-150 ease-out"
+  return (
+    <div className={`pointer-events-none fixed inset-x-0 ${bottomOffset} z-20 px-2 md:hidden`}>
+      <div className="pointer-events-auto flex items-center gap-1 overflow-x-auto rounded-lg border border-gray-700/80 bg-gray-900/95 px-1.5 py-1.5 shadow-lg backdrop-blur-sm [-webkit-overflow-scrolling:touch] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+        <button
+          type="button"
           onPointerDown={preventFocusSteal}
-          onClick={handleToggle}
-        />
-      )}
-    </>
+          onClick={() => {
+            void pasteFromClipboard();
+          }}
+          disabled={!isConnected}
+          className={ICON_BTN}
+          title={t('terminalShortcuts.paste', { defaultValue: 'Paste' })}
+          aria-label={t('terminalShortcuts.paste', { defaultValue: 'Paste' })}
+        >
+          <Clipboard className="h-4 w-4" />
+        </button>
+
+        {MOBILE_KEYS.map((key) => {
+          if (key.type === 'modifier') {
+            const isActive = key.modifier === 'ctrl' ? ctrlActive : altActive;
+            const toggle =
+              key.modifier === 'ctrl'
+                ? () => setCtrlActive((v) => !v)
+                : () => setAltActive((v) => !v);
+            return (
+              <button
+                type="button"
+                key={key.id}
+                onPointerDown={preventFocusSteal}
+                onClick={toggle}
+                disabled={!isConnected}
+                className={isActive ? KEY_BTN_ACTIVE : KEY_BTN}
+              >
+                {key.label}
+              </button>
+            );
+          }
+
+          if (key.type === 'arrow') {
+            const Icon = ARROW_ICONS[key.icon];
+            return (
+              <button
+                type="button"
+                key={key.id}
+                onPointerDown={preventFocusSteal}
+                onClick={() => sendInput(key.sequence)}
+                disabled={!isConnected}
+                className={ICON_BTN}
+              >
+                <Icon className="h-4 w-4" />
+              </button>
+            );
+          }
+
+          return (
+            <button
+              type="button"
+              key={key.id}
+              onPointerDown={preventFocusSteal}
+              onClick={() => handleKeyPress(key.sequence)}
+              disabled={!isConnected}
+              className={KEY_BTN}
+            >
+              {key.label}
+            </button>
+          );
+        })}
+
+        <button
+          type="button"
+          onPointerDown={preventFocusSteal}
+          onClick={scrollToBottom}
+          disabled={!isConnected}
+          className={ICON_BTN}
+          title={t('terminalShortcuts.scrollDown')}
+          aria-label={t('terminalShortcuts.scrollDown')}
+        >
+          <ArrowDownToLine className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
   );
 }