Major UI refresh: sidebar redesign, theme expansion, and chat performance optimizations (#706)

## Summary
Complete sidebar redesign and comprehensive UI polish pass with performance optimizations, theme system refinements, and desktop integration improvements.

## Key Changes

**Sidebar & Navigation Redesign**
- Redesigned sessions sidebar layout with unified button primitives
- Added activity sections with project grouping and improved session organization
- Refined sidebar corners, spacing, and visual hierarchy
- Removed NavRail component in favor of streamlined sidebar
- Stabilized sessions bar toggle position in fullscreen mode

**Performance Optimizations**
- Reduced chat streaming CPU usage and storage churn
- Optimized task tool polling and live timers with debouncing
- Prevented chat state races and reduced background request load
- Debounced draft writes and coalesced session reloads
- Optimized message store updates and turn tracking

**Theme & Visual System**
- Added theme-aware window corners (desktop) and border radius tokens
- Introduced glassmorphism effects on desktop sidebar
- Added backdrop blur to UI elements

**Chat Experience**
- Added session-based permission auto-accept toggle in chat input
- Polished permission shield UX with improved icon sizing and spacing
- Fixed chat scroll-to-bottom behavior and timeline tracking
- Enhanced tool output display with better path label detection
- Removed duplicate draft context details in chat header
- Added text selection menu to chat messages

**Git Improvements**
- Refreshed git history visual design with cleaner dividers
- Added remote removal action in sync selector
- Stabilized git polling to prevent excessive requests
- Improved tool output rendering for git operations

**Settings & Panels**
- Fixed mobile scrolling on settings pages
- Made outside-click settings close instantly
- Reduced settings load churn and CPU spikes
- Improved services dropdown layout and spacing
- Softened panel resize handles

**Desktop Integration**
- Synced macOS window theme with app theme
- Restored window dragging in sidebar header zones
- Fixed system window corners on macOS
- Improved header session metadata and action controls

**Button & Component Standardization**
- Unified button primitives across all components
- Standardized destructive action patterns
- Removed unused button variants (button-large, button-small)
- Aligned context tab close hit areas

---------

Co-authored-by: Iuliia Ivashko <yulia.ivashko@gmail.com>

packages/ui/src/components/sections/remote-instances/RemoteInstancesPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonSmall } from '@/components/ui/button-small';
+import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { NumberInput } from '@/components/ui/number-input';
 import { Switch } from '@/components/ui/switch';
@@ -701,7 +701,7 @@ export const RemoteInstancesPage: React.FC = () => {
                     </div>
                     <div className="typography-micro text-muted-foreground">{candidate.source} config</div>
                   </div>
-                  <ButtonSmall
+                  <Button
                     type="button"
                     variant="outline"
                     size="xs"
@@ -709,7 +709,7 @@ export const RemoteInstancesPage: React.FC = () => {
                     onClick={() => void handleImportCandidate(candidate.host, candidate.pattern)}
                   >
                     Create
-                  </ButtonSmall>
+                  </Button>
                 </div>
               ))}
             </div>
@@ -746,12 +746,12 @@ export const RemoteInstancesPage: React.FC = () => {
                 autoFocus
               />
               <div className="flex items-center justify-end gap-2">
-                <ButtonSmall type="button" variant="outline" size="xs" className="!font-normal" onClick={closePatternDialog} disabled={patternCreating}>
+                <Button type="button" variant="outline" size="xs" className="!font-normal" onClick={closePatternDialog} disabled={patternCreating}>
                   Cancel
-                </ButtonSmall>
-                <ButtonSmall type="submit" size="xs" className="!font-normal" disabled={patternCreating}>
+                </Button>
+                <Button type="submit" size="xs" className="!font-normal" disabled={patternCreating}>
                   Create
-                </ButtonSmall>
+                </Button>
               </div>
             </form>
           </DialogContent>
@@ -782,7 +782,7 @@ export const RemoteInstancesPage: React.FC = () => {
         </div>
         <section className="px-2 pb-2 pt-0 space-y-3">
           <div className="flex flex-wrap items-center gap-2">
-            <ButtonSmall
+            <Button
               type="button"
               variant={canDisconnect ? 'outline' : 'default'}
               size="xs"
@@ -792,8 +792,8 @@ export const RemoteInstancesPage: React.FC = () => {
             >
               {canDisconnect ? <RiStopLine className="h-3.5 w-3.5" /> : <RiPlug2Line className="h-3.5 w-3.5" />}
               {primaryButtonLabel}
-            </ButtonSmall>
-            <ButtonSmall
+            </Button>
+            <Button
               type="button"
               variant="outline"
               size="xs"
@@ -803,8 +803,8 @@ export const RemoteInstancesPage: React.FC = () => {
             >
               <RiRefreshLine className={`h-3.5 w-3.5 ${isConnecting || (isReconnecting && !reconnectAppearsStuck) ? 'animate-spin' : ''}`} />
               {retryButtonLabel}
-            </ButtonSmall>
-            <ButtonSmall
+            </Button>
+            <Button
               type="button"
               variant="outline"
               size="xs"
@@ -815,8 +815,8 @@ export const RemoteInstancesPage: React.FC = () => {
             >
               <RiTerminalWindowLine className="h-3.5 w-3.5" />
               Logs
-            </ButtonSmall>
-            <ButtonSmall
+            </Button>
+            <Button
               type="button"
               variant="outline"
               size="xs"
@@ -838,7 +838,7 @@ export const RemoteInstancesPage: React.FC = () => {
             >
               <RiDeleteBinLine className="h-3.5 w-3.5" />
               Remove
-            </ButtonSmall>
+            </Button>
           </div>
           {status?.localUrl ? (
             <div className="flex flex-wrap items-center gap-2 typography-meta text-muted-foreground">
@@ -1114,7 +1114,7 @@ export const RemoteInstancesPage: React.FC = () => {
                 }}
                 emptyLabel="Auto"
               />
-              <ButtonSmall
+              <Button
                 type="button"
                 variant="outline"
                 size="xs"
@@ -1131,7 +1131,7 @@ export const RemoteInstancesPage: React.FC = () => {
                 }
               >
                 <RiShuffleLine className="h-3.5 w-3.5" />
-              </ButtonSmall>
+              </Button>
             </div>
           </div>
         </section>
@@ -1254,7 +1254,7 @@ export const RemoteInstancesPage: React.FC = () => {
                   </div>
                   <div className="flex items-center gap-2">
                     <Switch checked={forward.enabled} onCheckedChange={(checked) => updateForward((item) => ({ ...item, enabled: checked }))} aria-label="Enable forward" />
-                    <ButtonSmall
+                    <Button
                       type="button"
                       variant="ghost"
                       size="xs"
@@ -1267,7 +1267,7 @@ export const RemoteInstancesPage: React.FC = () => {
                       }
                     >
                       <RiDeleteBinLine className="h-3.5 w-3.5" />
-                    </ButtonSmall>
+                    </Button>
                   </div>
                 </div>
                 <CollapsibleContent className="pt-2">
@@ -1416,7 +1416,7 @@ export const RemoteInstancesPage: React.FC = () => {
                       </div>
 
                       {canOpenLocalEndpoint ? (
-                        <ButtonSmall
+                        <Button
                           type="button"
                           variant="outline"
                           size="xs"
@@ -1431,7 +1431,7 @@ export const RemoteInstancesPage: React.FC = () => {
                         >
                           <RiExternalLinkLine className="h-3.5 w-3.5" />
                           Open local
-                        </ButtonSmall>
+                        </Button>
                       ) : null}
                     </div>
                   </div>
@@ -1440,7 +1440,7 @@ export const RemoteInstancesPage: React.FC = () => {
             );
           })}
 
-          <ButtonSmall
+          <Button
             type="button"
             variant="outline"
             size="xs"
@@ -1459,7 +1459,7 @@ export const RemoteInstancesPage: React.FC = () => {
           >
             <RiAddLine className="h-3.5 w-3.5" />
             Add forward
-          </ButtonSmall>
+          </Button>
         </section>
       </div>
 
@@ -1486,7 +1486,7 @@ export const RemoteInstancesPage: React.FC = () => {
                   </div>
                   <div className="typography-micro text-muted-foreground truncate">{candidate.sshCommand}</div>
                 </div>
-                <ButtonSmall
+                <Button
                   type="button"
                   variant="outline"
                   size="xs"
@@ -1494,7 +1494,7 @@ export const RemoteInstancesPage: React.FC = () => {
                   onClick={() => void handleImportCandidate(candidate.host, candidate.pattern)}
                 >
                   Import
-                </ButtonSmall>
+                </Button>
               </div>
             ))}
           </div>
@@ -1504,12 +1504,12 @@ export const RemoteInstancesPage: React.FC = () => {
 
       <div className="sticky bottom-0 z-10 -mx-3 sm:-mx-6 bg-[var(--surface-background)] border-t border-[var(--interactive-border)] px-3 sm:px-6 py-3">
         <div className="flex items-center gap-2">
-          <ButtonSmall type="button" size="xs" className="!font-normal" onClick={() => void handleSave()} disabled={!hasChanges || isSaving}>
+          <Button type="button" size="xs" className="!font-normal" onClick={() => void handleSave()} disabled={!hasChanges || isSaving}>
             Save changes
-          </ButtonSmall>
+          </Button>
           {status?.localUrl ? (
             <>
-              <ButtonSmall
+              <Button
                 type="button"
                 variant="outline"
                 size="xs"
@@ -1524,8 +1524,8 @@ export const RemoteInstancesPage: React.FC = () => {
               >
                 <RiFileCopyLine className="h-3.5 w-3.5" />
                 Copy local URL
-              </ButtonSmall>
-              <ButtonSmall
+              </Button>
+              <Button
                 type="button"
                 variant="outline"
                 size="xs"
@@ -1536,7 +1536,7 @@ export const RemoteInstancesPage: React.FC = () => {
               >
                 <RiExternalLinkLine className="h-3.5 w-3.5" />
                 Open
-              </ButtonSmall>
+              </Button>
             </>
           ) : null}
           {error ? <div className="ml-auto typography-meta text-[var(--status-error)]">{error}</div> : null}
@@ -1552,14 +1552,14 @@ export const RemoteInstancesPage: React.FC = () => {
             </DialogDescription>
           </DialogHeader>
           <div className="flex items-center justify-end gap-2">
-            <ButtonSmall type="button" variant="outline" size="xs" className="!font-normal" onClick={handleCopyAllLogs} disabled={logDialogLoading || !logLinesText.trim()}>
+            <Button type="button" variant="outline" size="xs" className="!font-normal" onClick={handleCopyAllLogs} disabled={logDialogLoading || !logLinesText.trim()}>
               <RiFileCopyLine className="h-3.5 w-3.5" />
               Copy all
-            </ButtonSmall>
-            <ButtonSmall type="button" variant="outline" size="xs" className="!font-normal" onClick={() => void handleClearLogs()} disabled={logDialogLoading}>
+            </Button>
+            <Button type="button" variant="outline" size="xs" className="!font-normal" onClick={() => void handleClearLogs()} disabled={logDialogLoading}>
               <RiDeleteBinLine className="h-3.5 w-3.5" />
               Clear
-            </ButtonSmall>
+            </Button>
           </div>
           {logDialogLoading ? (
             <div className="typography-meta text-muted-foreground">Loading logs...</div>
@@ -1602,12 +1602,12 @@ export const RemoteInstancesPage: React.FC = () => {
               autoFocus
             />
             <div className="flex items-center justify-end gap-2">
-              <ButtonSmall type="button" variant="outline" size="xs" className="!font-normal" onClick={closePatternDialog} disabled={patternCreating}>
+              <Button type="button" variant="outline" size="xs" className="!font-normal" onClick={closePatternDialog} disabled={patternCreating}>
                 Cancel
-              </ButtonSmall>
-              <ButtonSmall type="submit" size="xs" className="!font-normal" disabled={patternCreating}>
+              </Button>
+              <Button type="submit" size="xs" className="!font-normal" disabled={patternCreating}>
                 Create
-              </ButtonSmall>
+              </Button>
             </div>
           </form>
         </DialogContent>