feat: add compact Codex refresh action and live status badge

Author: Dimillian

src/App.tsx

@@ -1,4 +1,5 @@
 import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import RefreshCw from "lucide-react/dist/esm/icons/refresh-cw";
 import "./styles/base.css";
 import "./styles/ds-tokens.css";
 import "./styles/ds-modal.css";
@@ -192,6 +193,7 @@ function MainApp() {
   const [activeTab, setActiveTab] = useState<
     "home" | "projects" | "codex" | "git" | "log"
   >("codex");
+  const [mobileThreadRefreshLoading, setMobileThreadRefreshLoading] = useState(false);
   const tabletTab =
     activeTab === "projects" || activeTab === "home" ? "codex" : activeTab;
   const {
@@ -568,6 +570,37 @@ function MainApp() {
     onMessageActivity: handleThreadMessageActivity,
     threadSortKey: threadListSortKey,
   });
+
+  const handleMobileThreadRefresh = useCallback(() => {
+    if (mobileThreadRefreshLoading || !activeWorkspace) {
+      return;
+    }
+    setMobileThreadRefreshLoading(true);
+    void (async () => {
+      let threadId = activeThreadId;
+      if (!threadId) {
+        threadId = await startThreadForWorkspace(activeWorkspace.id, {
+          activate: true,
+        });
+      }
+      if (!threadId) {
+        return;
+      }
+      await refreshThread(activeWorkspace.id, threadId);
+    })()
+      .catch(() => {
+        // Errors are surfaced through debug entries/toasts in existing thread actions.
+      })
+      .finally(() => {
+        setMobileThreadRefreshLoading(false);
+      });
+  }, [
+    activeThreadId,
+    activeWorkspace,
+    mobileThreadRefreshLoading,
+    refreshThread,
+    startThreadForWorkspace,
+  ]);
   const {
     updaterState,
     startUpdate,
@@ -1810,6 +1843,11 @@ function MainApp() {
   });
 
   useMenuAcceleratorController({ appSettings, onDebug: addDebugEntry });
+  const showCompactCodexThreadActions =
+    Boolean(activeWorkspace) &&
+    isCompact &&
+    ((isPhone && activeTab === "codex") || (isTablet && tabletTab === "codex"));
+
   const {
     sidebarNode,
     messagesNode,
@@ -1950,14 +1988,33 @@ function MainApp() {
     onSaveLaunchScript: launchScriptState.onSaveLaunchScript,
     launchScriptsState,
     mainHeaderActionsNode: (
-      <MainHeaderActions
-        centerMode={centerMode}
-        gitDiffViewStyle={gitDiffViewStyle}
-        onSelectDiffViewStyle={setGitDiffViewStyle}
-        isCompact={isCompact}
-        rightPanelCollapsed={rightPanelCollapsed}
-        sidebarToggleProps={sidebarToggleProps}
-      />
+      <>
+        {showCompactCodexThreadActions ? (
+          <button
+            type="button"
+            className="ghost main-header-action"
+            onClick={handleMobileThreadRefresh}
+            data-tauri-drag-region="false"
+            aria-label="Refresh current thread from server"
+            title="Refresh current thread from server"
+            disabled={mobileThreadRefreshLoading}
+          >
+            <RefreshCw
+              className={`compact-codex-refresh-icon${mobileThreadRefreshLoading ? " spinning" : ""}`}
+              size={14}
+              aria-hidden
+            />
+          </button>
+        ) : null}
+        <MainHeaderActions
+          centerMode={centerMode}
+          gitDiffViewStyle={gitDiffViewStyle}
+          onSelectDiffViewStyle={setGitDiffViewStyle}
+          isCompact={isCompact}
+          rightPanelCollapsed={rightPanelCollapsed}
+          sidebarToggleProps={sidebarToggleProps}
+        />
+      </>
     ),
     filePanelMode,
     onFilePanelModeChange: setFilePanelMode,
@@ -2304,6 +2361,16 @@ function MainApp() {
   ) : null;
 
   const mainMessagesNode = showWorkspaceHome ? workspaceHomeNode : messagesNode;
+  const codexTopbarActionsNode = showCompactCodexThreadActions ? (
+    <span
+      className={`compact-workspace-live-indicator ${
+        activeWorkspace?.connected ? "is-live" : "is-disconnected"
+      }`}
+      title={activeWorkspace?.connected ? "Connected to backend" : "Disconnected from backend"}
+    >
+      {activeWorkspace?.connected ? "Live" : "Disconnected"}
+    </span>
+  ) : null;
 
   const desktopTopbarLeftNodeWithToggle = !isCompact ? (
     <div className="topbar-leading">
@@ -2354,6 +2421,7 @@ function MainApp() {
         homeNode={homeNode}
         mainHeaderNode={mainHeaderNode}
         desktopTopbarLeftNode={desktopTopbarLeftNodeWithToggle}
+        codexTopbarActionsNode={codexTopbarActionsNode}
         tabletNavNode={tabletNavNode}
         tabBarNode={tabBarNode}
         gitDiffPanelNode={gitDiffPanelNode}

src/features/app/components/AppLayout.tsx

@@ -24,6 +24,7 @@ type AppLayoutProps = {
   homeNode: ReactNode;
   mainHeaderNode: ReactNode;
   desktopTopbarLeftNode: ReactNode;
+  codexTopbarActionsNode?: ReactNode;
   tabletNavNode: ReactNode;
   tabBarNode: ReactNode;
   gitDiffPanelNode: ReactNode;
@@ -62,6 +63,7 @@ export const AppLayout = memo(function AppLayout({
   homeNode,
   mainHeaderNode,
   desktopTopbarLeftNode,
+  codexTopbarActionsNode,
   tabletNavNode,
   tabBarNode,
   gitDiffPanelNode,
@@ -94,6 +96,7 @@ export const AppLayout = memo(function AppLayout({
         compactEmptyGitNode={compactEmptyGitNode}
         compactGitBackNode={compactGitBackNode}
         topbarLeftNode={mainHeaderNode}
+        codexTopbarActionsNode={codexTopbarActionsNode}
         messagesNode={messagesNode}
         composerNode={composerNode}
         gitDiffPanelNode={gitDiffPanelNode}
@@ -117,6 +120,7 @@ export const AppLayout = memo(function AppLayout({
         tabletTab={tabletTab}
         onSidebarResizeStart={onSidebarResizeStart}
         topbarLeftNode={mainHeaderNode}
+        codexTopbarActionsNode={codexTopbarActionsNode}
         messagesNode={messagesNode}
         composerNode={composerNode}
         gitDiffPanelNode={gitDiffPanelNode}

src/features/layout/components/PhoneLayout.tsx

@@ -15,6 +15,7 @@ type PhoneLayoutProps = {
   compactEmptyGitNode: ReactNode;
   compactGitBackNode: ReactNode;
   topbarLeftNode: ReactNode;
+  codexTopbarActionsNode?: ReactNode;
   messagesNode: ReactNode;
   composerNode: ReactNode;
   gitDiffPanelNode: ReactNode;
@@ -36,6 +37,7 @@ export function PhoneLayout({
   compactEmptyGitNode,
   compactGitBackNode,
   topbarLeftNode,
+  codexTopbarActionsNode,
   messagesNode,
   composerNode,
   gitDiffPanelNode,
@@ -53,7 +55,11 @@ export function PhoneLayout({
         <div className="compact-panel">
           {activeWorkspace ? (
             <>
-              <MainTopbar leftNode={topbarLeftNode} className="compact-topbar" />
+              <MainTopbar
+                leftNode={topbarLeftNode}
+                actionsNode={codexTopbarActionsNode}
+                className="compact-topbar"
+              />
               <div className="content compact-content">{messagesNode}</div>
               {composerNode}
             </>

src/features/layout/components/TabletLayout.tsx

@@ -13,6 +13,7 @@ type TabletLayoutProps = {
   tabletTab: "projects" | "codex" | "git" | "log";
   onSidebarResizeStart: (event: MouseEvent<HTMLDivElement>) => void;
   topbarLeftNode: ReactNode;
+  codexTopbarActionsNode?: ReactNode;
   messagesNode: ReactNode;
   composerNode: ReactNode;
   gitDiffPanelNode: ReactNode;
@@ -32,6 +33,7 @@ export function TabletLayout({
   tabletTab,
   onSidebarResizeStart,
   topbarLeftNode,
+  codexTopbarActionsNode,
   messagesNode,
   composerNode,
   gitDiffPanelNode,
@@ -56,7 +58,11 @@ export function TabletLayout({
         {showHome && homeNode}
         {showWorkspace && (
           <>
-            <MainTopbar leftNode={topbarLeftNode} className="tablet-topbar" />
+            <MainTopbar
+              leftNode={topbarLeftNode}
+              actionsNode={tabletTab === "codex" ? codexTopbarActionsNode : undefined}
+              className="tablet-topbar"
+            />
             {tabletTab === "codex" && (
               <>
                 <div className="content tablet-content">{messagesNode}</div>

src/styles/main.css

@@ -840,6 +840,41 @@
   -webkit-app-region: no-drag;
 }
 
+.compact-workspace-live-indicator {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-subtle);
+  padding: 3px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.compact-workspace-live-indicator.is-live {
+  color: var(--status-success);
+  border-color: color-mix(in srgb, var(--status-success) 38%, transparent);
+  background: color-mix(in srgb, var(--status-success) 12%, transparent);
+}
+
+.compact-workspace-live-indicator.is-disconnected {
+  color: var(--status-error);
+  border-color: color-mix(in srgb, var(--status-error) 42%, transparent);
+  background: color-mix(in srgb, var(--status-error) 12%, transparent);
+}
+
+.compact-codex-refresh-icon.spinning {
+  animation: compact-codex-refresh-spin 0.8s linear infinite;
+}
+
+@keyframes compact-codex-refresh-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .content {
   display: flex;
   min-height: 0;