feat(ui): redesign workspace shell with context panel, tabbed sidebars, and faster diff UX (#433)

* feat: tabbed right sidebar, context panel, floating diff comments

* fix: auto-close left sidebar when context panel opens

- Increase default context panel width from 520 to 600 pixels
- Increase sidebar minimum width from 200 to 300 pixels
- Replace collapsible component with custom button in diff view

* refactoring: rework sidebars, tabs, and file tree layout

- Rewrite AnimatedTabs as segment-style with sliding indicator
- Upgrade SidebarFilesTree to match FilesView features (context menus,
  git status, file icons, CRUD dialogs, fuzzy search ranking)
- Restructure FilesView header: tabs row + actions row, remove breadcrumbs
- Show relative path in context panel header, track active tab
- Allow left sidebar to stay open alongside context panel
- Hide diff/files tabs from header on desktop (mobile-only)
- Move chevron after group name in session sidebar
- Compact tab heights in right sidebar and git view
- Size PreviewToggleButton to match other action buttons
- Remove directory loading spinner from folder icons

* feat: add project icon and color customization

- Enable users to assign custom icons to projects
- Allow users to choose accent colors for projects
- Stabilize repo status UI during project switching

* feat: add scroll fade indicators to editor tabs

* style: reduce spacing and icon sizes in header

* style: adjust tab component padding from uniform to vertical-horizontal

* feat: Add session state indicators to project tabs

* feat: Enhance session status handling and improve UI responsiveness

* fix: preserve upstream tracking on branch rename

* fix: improve initial remote selection for pull requests

- Uses saved remote name from previous session when available
- Selects remote based on tracking branch when possible
- Falls back to origin or first available remote

* perf(diff): faster highlight, stable stacked scroll

- split/unified Pierre worker pools; prefer shiki-wasm
- align diff CSS line-height; disable scroll anchoring; drop WebKit compositing hacks
- harden stacked pin/align (cancel on user scroll/input); prevent overscroll
- make overlay scrollbar MutationObserver optional; disable for diff container

* feat: handle binary files in diff view

* fix: adjust project tabs layout and drag regions

* style: update drag overlay visual styling

* feat: enable number keys to switch projects in the sidebar

* fix: recognize octet-stream as text-based MIME type

* feat: add keyboard navigation to context panel

* feat: add session pinning to sidebar

- Pin important sessions to keep them at the top
- Pinned sessions persist across browser sessions

* refactor: move context usage display from chat input to header

packages/ui/src/components/views/git/ChangeRow.tsx

@@ -125,13 +125,33 @@ export const ChangeRow = React.memo<ChangeRowProps>(function ChangeRow({
         >
           {descriptor.code}
         </span>
-        <span
-          className="flex-1 min-w-0 truncate typography-ui-label text-foreground"
-          style={{ direction: 'rtl', textAlign: 'left' }}
-          title={file.path}
-        >
-          {file.path}
-        </span>
+        {(() => {
+          const lastSlash = file.path.lastIndexOf('/');
+          if (lastSlash === -1) {
+            return (
+              <span
+                className="flex-1 min-w-0 truncate typography-ui-label text-foreground"
+                style={{ direction: 'rtl', textAlign: 'left' }}
+                title={file.path}
+              >
+                {file.path}
+              </span>
+            );
+          }
+          const dir = file.path.slice(0, lastSlash);
+          const name = file.path.slice(lastSlash);
+          return (
+            <span className="flex-1 min-w-0 flex items-baseline overflow-hidden" title={file.path}>
+              <span
+                className="min-w-0 truncate typography-ui-label text-muted-foreground"
+                style={{ direction: 'rtl', textAlign: 'left' }}
+              >
+                {dir}
+              </span>
+              <span className="flex-shrink-0 typography-ui-label"><span className="text-muted-foreground">/</span><span className="text-foreground">{name.slice(1)}</span></span>
+            </span>
+          );
+        })()}
         <span className="shrink-0 typography-micro">
           <span style={{ color: 'var(--status-success)' }}>+{insertions}</span>
           <span className="text-muted-foreground mx-0.5">/</span>

packages/ui/src/components/views/git/PullRequestSection.tsx

@@ -158,6 +158,61 @@ type PullRequestDraftSnapshot = {
   draft: boolean;
   additionalContext: string;
   targetBaseBranch?: string;
+  selectedRemoteName?: string;
+};
+
+const getTrackingRemoteName = (trackingBranch: string | null | undefined): string => {
+  const normalized = String(trackingBranch || '').trim();
+  if (!normalized) {
+    return '';
+  }
+
+  const slashIndex = normalized.indexOf('/');
+  if (slashIndex <= 0) {
+    return '';
+  }
+
+  return normalized.slice(0, slashIndex).trim();
+};
+
+const pickInitialPrRemote = (
+  remotes: GitRemote[],
+  options: { selectedRemoteName?: string; trackingBranch?: string }
+): GitRemote | null => {
+  if (remotes.length === 0) {
+    return null;
+  }
+
+  const selectedRemoteName = String(options.selectedRemoteName || '').trim();
+  if (selectedRemoteName) {
+    const fromSnapshot = remotes.find((remote) => remote.name === selectedRemoteName);
+    if (fromSnapshot) {
+      return fromSnapshot;
+    }
+  }
+
+  const trackingRemoteName = getTrackingRemoteName(options.trackingBranch);
+  if (trackingRemoteName) {
+    const maybeUpstream =
+      trackingRemoteName === 'origin'
+        ? remotes.find((remote) => remote.name === 'upstream')
+        : null;
+    if (maybeUpstream) {
+      return maybeUpstream;
+    }
+
+    const fromTracking = remotes.find((remote) => remote.name === trackingRemoteName);
+    if (fromTracking) {
+      return fromTracking;
+    }
+  }
+
+  const originRemote = remotes.find((remote) => remote.name === 'origin');
+  if (originRemote) {
+    return originRemote;
+  }
+
+  return remotes[0] ?? null;
 };
 
 type TimelineCommentItem = {
@@ -213,11 +268,12 @@ export const PullRequestSection: React.FC<{
   directory: string;
   branch: string;
   baseBranch: string;
+  trackingBranch?: string;
   remotes?: GitRemote[];
   remoteBranches?: string[];
   variant?: 'framed' | 'plain';
   onGeneratedDescription?: () => void;
-}> = ({ directory, branch, baseBranch, remotes = [], remoteBranches = [], variant = 'framed', onGeneratedDescription }) => {
+}> = ({ directory, branch, baseBranch, trackingBranch, remotes = [], remoteBranches = [], variant = 'framed', onGeneratedDescription }) => {
   const { github } = useRuntimeAPIs();
   const githubAuthStatus = useGitHubAuthStore((state) => state.status);
   const githubAuthChecked = useGitHubAuthStore((state) => state.hasChecked);
@@ -274,7 +330,12 @@ export const PullRequestSection: React.FC<{
 
   const [isContextOpen, setIsContextOpen] = React.useState(false);
   const [isContextSheetOpen, setIsContextSheetOpen] = React.useState(false);
-  const [selectedRemote, setSelectedRemote] = React.useState<GitRemote | null>(() => remotes[0] ?? null);
+  const [selectedRemote, setSelectedRemote] = React.useState<GitRemote | null>(() =>
+    pickInitialPrRemote(remotes, {
+      selectedRemoteName: initialSnapshot?.selectedRemoteName,
+      trackingBranch,
+    })
+  );
 
   const availableBaseBranches = React.useMemo(() => {
     const selectedRemoteName = selectedRemote?.name?.trim() || null;
@@ -305,10 +366,22 @@ export const PullRequestSection: React.FC<{
 
   // Update selected remote when remotes change
   React.useEffect(() => {
-    if (remotes.length > 0 && !selectedRemote) {
-      setSelectedRemote(remotes[0]);
+    if (remotes.length === 0) {
+      if (selectedRemote) {
+        setSelectedRemote(null);
+      }
+      return;
     }
-  }, [remotes, selectedRemote]);
+
+    if (!selectedRemote || !remotes.some((remote) => remote.name === selectedRemote.name)) {
+      setSelectedRemote(
+        pickInitialPrRemote(remotes, {
+          selectedRemoteName: initialSnapshot?.selectedRemoteName,
+          trackingBranch,
+        })
+      );
+    }
+  }, [initialSnapshot?.selectedRemoteName, remotes, selectedRemote, trackingBranch]);
 
   React.useEffect(() => {
     const normalizedBase = normalizeBranchRef(baseBranch);
@@ -959,11 +1032,17 @@ export const PullRequestSection: React.FC<{
     setBody(snapshot?.body ?? '');
     setDraft(snapshot?.draft ?? false);
     setTargetBaseBranch(snapshot?.targetBaseBranch ? normalizeBranchRef(snapshot.targetBaseBranch) : normalizeBranchRef(baseBranch));
+    setSelectedRemote(
+      pickInitialPrRemote(remotes, {
+        selectedRemoteName: snapshot?.selectedRemoteName,
+        trackingBranch,
+      })
+    );
     setStatus(statusSnapshot);
     setError(null);
     setIsInitialStatusResolved(Boolean(statusSnapshot));
     void refresh({ force: true, markInitialResolved: true });
-  }, [baseBranch, branch, refresh, snapshotKey]);
+  }, [baseBranch, branch, refresh, remotes, snapshotKey, trackingBranch]);
 
   // Refetch when selected remote changes
   React.useEffect(() => {
@@ -1033,8 +1112,9 @@ export const PullRequestSection: React.FC<{
       draft,
       additionalContext,
       targetBaseBranch,
+      selectedRemoteName: selectedRemote?.name,
     });
-  }, [snapshotKey, title, body, draft, additionalContext, targetBaseBranch, directory, branch]);
+  }, [snapshotKey, title, body, draft, additionalContext, targetBaseBranch, selectedRemote?.name, directory, branch]);
 
   React.useEffect(() => {
     if (!status) {