feat: slimmed down focus ui and move default terminal position (#780)

# Add Terminal Tab to Default Panel Layout and Improve Focus Workspace UX

### TL;DR

Adds a Terminal tab to the default panel layout and improves the Focus Workspace UX by moving it from the bottom panel to the Changes panel.

### What changed?

- Added a Terminal tab to the default panel layout in the bottom panel
- Removed the `BottomPanel` component from the right sidebar
- Simplified the `RightSidebarContent` component by removing the bottom panel section
- Enhanced the `ChangesPanel` component with Focus Workspace functionality:
    - Added a Focus CTA button at the top of the Changes panel
    - Integrated focus status indicators (synced/not synced)
    - Added toggle functionality for focusing and unfocusing

### How to test?

1. Open the application and verify that the Terminal tab appears in the default panel layout
2. Check that the right sidebar no longer has a separate bottom panel
3. Navigate to a worktree workspace and verify that the Focus Workspace controls appear at the top of the Changes panel
4. Test focusing and unfocusing the workspace using the new controls
5. Verify that the focus status is correctly displayed

### Why make this change?

This change improves the user experience by:

1. Making the Terminal more accessible as a default tab
2. Simplifying the UI by removing the redundant bottom panel
3. Placing the Focus Workspace controls in a more logical location within the Changes panel
4. Providing clearer visual feedback about the focus state

The new design creates a more intuitive workflow for users working with worktree workspaces and reduces UI clutter.  
  
[focus state.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.com/user-attachments/thumbnails/d132e8c8-7d40-4883-ad58-202c3d5c2a76.mov" />](https://app.graphite.com/user-attachments/video/d132e8c8-7d40-4883-ad58-202c3d5c2a76.mov)

Author: k11kirky

apps/twig/src/renderer/features/panels/store/panelLayoutStore.ts

@@ -125,6 +125,18 @@ function createDefaultPanelTree(): PanelNode {
           closeable: false,
           draggable: true,
         },
+        {
+          id: DEFAULT_TAB_IDS.SHELL,
+          label: "Terminal",
+          data: {
+            type: "terminal",
+            terminalId: DEFAULT_TAB_IDS.SHELL,
+            cwd: "",
+          },
+          component: null,
+          closeable: true,
+          draggable: true,
+        },
       ],
       activeTabId: DEFAULT_TAB_IDS.LOGS,
       showTabs: true,

apps/twig/src/renderer/features/right-sidebar/components/BottomPanel.tsx

@@ -1,8 +1,6 @@
 import { Panel } from "@features/panels/components/Panel";
 import { PanelGroup } from "@features/panels/components/PanelGroup";
-import { PanelResizeHandle } from "@features/panels/components/PanelResizeHandle";
 import type { Task } from "@shared/types";
-import { BottomPanel } from "./BottomPanel";
 import { TopPanel } from "./TopPanel";
 
 interface RightSidebarContentProps {
@@ -23,10 +21,6 @@ export function RightSidebarContent({
       <Panel defaultSize={60} minSize={20}>
         <TopPanel taskId={taskId} task={task} />
       </Panel>
-      <PanelResizeHandle style={{ height: "1px" }} />
-      <Panel defaultSize={40} minSize={20}>
-        <BottomPanel taskId={taskId} />
-      </Panel>
     </PanelGroup>
   );
 }

apps/twig/src/renderer/features/right-sidebar/components/RightSidebarContent.tsx

@@ -4,8 +4,10 @@ import { Tooltip } from "@components/ui/Tooltip";
 import { isDiffTabActiveInTree, usePanelLayoutStore } from "@features/panels";
 import { usePendingPermissionsForTask } from "@features/sessions/stores/sessionStore";
 import { useCwd } from "@features/sidebar/hooks/useCwd";
+import { useFocusWorkspace } from "@features/workspace/hooks/useFocusWorkspace";
 import {
   ArrowCounterClockwiseIcon,
+  ArrowsClockwise,
   CaretDownIcon,
   CaretUpIcon,
   CodeIcon,
@@ -15,9 +17,11 @@ import {
 import {
   Badge,
   Box,
+  Button,
   DropdownMenu,
   Flex,
   IconButton,
+  Spinner,
   Text,
 } from "@radix-ui/themes";
 import { trpcVanilla } from "@renderer/trpc/client";
@@ -376,6 +380,8 @@ function ChangedFileItem({
 
 export function ChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
   const workspace = useWorkspaceStore((s) => s.workspaces[taskId]);
+  const { isFocused, isFocusLoading, handleToggleFocus, handleUnfocus } =
+    useFocusWorkspace(taskId);
   const repoPath = useCwd(taskId);
   const layout = usePanelLayoutStore((state) => state.getLayout(taskId));
   const openDiff = usePanelLayoutStore((state) => state.openDiff);
@@ -443,6 +449,73 @@ export function ChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
     return isDiffTabActiveInTree(layout.panelTree, file.path, file.status);
   };
 
+  const showFocusCta = workspace?.mode === "worktree";
+  const focusCta = showFocusCta ? (
+    <Box px="2" pb="2">
+      <Flex
+        align="center"
+        justify="between"
+        gap="2"
+        px="3"
+        py="2"
+        style={{
+          borderRadius: "999px",
+          border: "1px solid var(--gray-4)",
+          backgroundColor: "var(--gray-2)",
+        }}
+      >
+        <Flex align="center" gap="2">
+          {isFocused ? (
+            <Box
+              style={{
+                width: "8px",
+                height: "8px",
+                borderRadius: "999px",
+                backgroundColor: "var(--green-9)",
+              }}
+            />
+          ) : (
+            <ArrowsClockwise size={14} weight="bold" />
+          )}
+          <Text size="1" style={{ color: "var(--gray-11)" }}>
+            {isFocused ? "Workspace synced" : "Focus workspace"}
+          </Text>
+        </Flex>
+        {isFocused ? (
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleUnfocus}
+            disabled={isFocusLoading}
+            style={{
+              textDecoration: "underline",
+              textUnderlineOffset: "2px",
+              color: "var(--gray-11)",
+            }}
+          >
+            {isFocusLoading ? <Spinner size="1" /> : "Cancel"}
+          </Button>
+        ) : (
+          <Button
+            size="1"
+            variant="ghost"
+            color="gray"
+            onClick={handleToggleFocus}
+            disabled={isFocusLoading}
+            style={{
+              textDecoration: "underline",
+              textUnderlineOffset: "2px",
+              color: "var(--gray-11)",
+            }}
+          >
+            {isFocusLoading ? <Spinner size="1" /> : "Focus"}
+          </Button>
+        )}
+      </Flex>
+    </Box>
+  ) : null;
+
   if (!repoPath) {
     return <PanelMessage>No repository path available</PanelMessage>;
   }
@@ -454,12 +527,22 @@ export function ChangesPanel({ taskId, task: _task }: ChangesPanelProps) {
   const hasChanges = changedFiles.length > 0;
 
   if (!hasChanges) {
-    return <PanelMessage>No file changes yet</PanelMessage>;
+    return (
+      <Box height="100%" overflowY="auto" py="2">
+        <Flex direction="column" height="100%">
+          {focusCta}
+          <Box flexGrow="1">
+            <PanelMessage>No file changes yet</PanelMessage>
+          </Box>
+        </Flex>
+      </Box>
+    );
   }
 
   return (
     <Box height="100%" overflowY="auto" py="2">
       <Flex direction="column">
+        {focusCta}
         {changedFiles.map((file) => (
           <ChangedFileItem
             key={file.path}