Feat/mobile quick actions (#282)

* feat(mobile): add quick actions button and improve mobile UX

Add mobile-optimized quick action buttons and improve autocomplete UX.

- Add quick command button (/) in mobile chat footer
- Add tabbed autocomplete interface for Commands/Agents/Files
- Fix agent selector conflict with model selector
- Improve TerminalViewport Android IME support
- Add reusable Slider component for settings
- Update StatusChip styling for mobile layout

Files changed:
- ChatInput.tsx: Mobile quick actions, command menu, autocomplete tabs
- AgentMentionAutocomplete.tsx: Tab support for mobile
- CommandAutocomplete.tsx: Tab support and touch handling
- FileMentionAutocomplete.tsx: Tab support for mobile
- ModelControls.tsx: Agent selector fix
- StatusChip.tsx: Mobile layout improvements
- TerminalViewport.tsx: Android IME improvements
- ui/slider.tsx: New reusable slider component

* feat(chat): remove unused BrowserVoiceButton component from ChatInput

* fix: Resolve linter errors

packages/ui/src/components/chat/FileMentionAutocomplete.tsx

@@ -16,16 +16,24 @@ export interface FileMentionHandle {
   handleKeyDown: (key: string) => void;
 }
 
+type AutocompleteTab = 'commands' | 'agents' | 'files';
+
 interface FileMentionAutocompleteProps {
   searchQuery: string;
   onFileSelect: (file: FileInfo) => void;
   onClose: () => void;
+  showTabs?: boolean;
+  activeTab?: AutocompleteTab;
+  onTabSelect?: (tab: AutocompleteTab) => void;
 }
 
 export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileMentionAutocompleteProps>(({
   searchQuery,
   onFileSelect,
-  onClose
+  onClose,
+  showTabs,
+  activeTab = 'files',
+  onTabSelect,
 }, ref) => {
   const { currentDirectory } = useDirectoryStore();
   const { addServerFile } = useSessionStore();
@@ -43,6 +51,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
   const labelRefs = React.useRef<(HTMLSpanElement | null)[]>([]);
   const measureRefs = React.useRef<(HTMLSpanElement | null)[]>([]);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const ignoreTabClickRef = React.useRef(false);
 
   const fuzzyScore = React.useCallback((query: string, candidate: string): number | null => {
     const q = query.trim().toLowerCase();
@@ -317,6 +326,46 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
         ref={containerRef}
         className="absolute z-[100] min-w-0 w-full max-w-[520px] max-h-64 bg-background border-2 border-border/60 rounded-xl shadow-md bottom-full mb-2 left-0 flex flex-col"
       >
+        {showTabs ? (
+          <div className="px-2 pt-2 pb-1 border-b border-border/60">
+            <div className="flex items-center gap-1 rounded-lg bg-[var(--surface-elevated)] p-1">
+              {([
+                { id: 'commands' as const, label: 'Commands' },
+                { id: 'agents' as const, label: 'Agents' },
+                { id: 'files' as const, label: 'Files' },
+              ]).map((tab) => (
+                <button
+                  key={tab.id}
+                  type="button"
+                  className={cn(
+                    'flex-1 px-2.5 py-1 rounded-md typography-meta font-semibold transition-none',
+                    activeTab === tab.id
+                      ? 'bg-interactive-selection text-interactive-selection-foreground shadow-sm'
+                      : 'text-muted-foreground hover:bg-interactive-hover/50'
+                  )}
+                  onPointerDown={(event) => {
+                    if (event.pointerType !== 'touch') {
+                      return;
+                    }
+                    event.preventDefault();
+                    event.stopPropagation();
+                    ignoreTabClickRef.current = true;
+                    onTabSelect?.(tab.id);
+                  }}
+                  onClick={() => {
+                    if (ignoreTabClickRef.current) {
+                      ignoreTabClickRef.current = false;
+                      return;
+                    }
+                    onTabSelect?.(tab.id);
+                  }}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        ) : null}
         <ScrollableOverlay outerClassName="flex-1 min-h-0" className="px-0">
         {loading ? (
           <div className="flex items-center justify-center py-4">