fix: unified polling hook (#121)

## Description

<!-- Provide a brief description of your changes -->

**Note:** PR titles should follow [Conventional
Commits](https://www.conventionalcommits.org/) format (e.g.,
`feat(devbox): add support for custom env vars` or `fix(snapshot):
resolve pagination issue`) as they are used for automatic release notes
generation.

## Type of Change

<!-- Mark the relevant option with an 'x' -->

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] Documentation update
- [ ] Code refactoring
- [ ] Performance improvement
- [ ] Test updates

## Related Issues

<!-- Link to related issues using #issue-number -->
Closes #

## Changes Made

<!-- Describe the changes in detail -->

## Testing

<!-- Describe how you tested your changes -->

- [ ] I have tested locally
- [ ] I have added/updated tests
- [ ] All existing tests pass

## Checklist

- [ ] My code follows the code style of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have updated the documentation accordingly
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published

## Screenshots (if applicable)

<!-- Add screenshots to help explain your changes -->

## Additional Notes

<!-- Any additional information that reviewers should know -->

Author: dines-rl

src/components/DevboxDetailPage.tsx

@@ -14,7 +14,6 @@ import {
 } from "./ResourceDetailPage.js";
 import { getDevboxUrl } from "../utils/url.js";
 import { colors } from "../utils/theme.js";
-import { getDevbox } from "../services/devboxService.js";
 import { formatTimeAgo } from "../utils/time.js";
 import type { Devbox } from "../store/devboxStore.js";
 
@@ -23,15 +22,11 @@ interface DevboxDetailPageProps {
   onBack: () => void;
 }
 
-export const DevboxDetailPage = ({
-  devbox: initialDevbox,
-  onBack,
-}: DevboxDetailPageProps) => {
+export const DevboxDetailPage = ({ devbox, onBack }: DevboxDetailPageProps) => {
   const [showActions, setShowActions] = React.useState(false);
   const [selectedOperationKey, setSelectedOperationKey] = React.useState<
     string | null
   >(null);
-  const [currentDevbox, setCurrentDevbox] = React.useState(initialDevbox);
 
   // All possible operations for devboxes
   const allOperations: ResourceOperation[] = [
@@ -751,60 +746,44 @@ export const DevboxDetailPage = ({
   };
 
   // Polling function
-  const pollDevbox = React.useCallback(async () => {
-    const updated = await getDevbox(initialDevbox.id);
-    setCurrentDevbox(updated);
-    return updated;
-  }, [initialDevbox.id]);
-
   // Show DevboxActionsMenu when an action is selected
   if (showActions) {
     return (
       <DevboxActionsMenu
-        devbox={currentDevbox}
+        devbox={devbox}
         onBack={() => {
           setShowActions(false);
           setSelectedOperationKey(null);
         }}
         breadcrumbItems={[
           { label: "Devboxes" },
-          { label: currentDevbox.name || currentDevbox.id },
+          { label: devbox.name || devbox.id },
         ]}
         initialOperation={selectedOperationKey || undefined}
         skipOperationsMenu={true}
       />
     );
   }
 
-  // Determine if we should poll based on status
-  const shouldPoll =
-    currentDevbox.status === "running" ||
-    currentDevbox.status === "provisioning" ||
-    currentDevbox.status === "initializing" ||
-    currentDevbox.status === "resuming" ||
-    currentDevbox.status === "suspending";
-
   return (
     <ResourceDetailPage
-      resource={currentDevbox}
+      resource={devbox}
       resourceType="Devboxes"
       getDisplayName={(d) => d.name || d.id}
       getId={(d) => d.id}
       getStatus={(d) => d.status}
       getUrl={(d) => getDevboxUrl(d.id)}
-      detailSections={buildDetailSections(currentDevbox)}
-      operations={getFilteredOperations(currentDevbox)}
+      detailSections={buildDetailSections(devbox)}
+      operations={getFilteredOperations(devbox)}
       onOperation={handleOperation}
       onBack={onBack}
       buildDetailLines={buildDetailLines}
       additionalContent={
         <StateHistory
-          stateTransitions={currentDevbox.state_transitions}
-          shutdownReason={currentDevbox.shutdown_reason ?? undefined}
+          stateTransitions={devbox.state_transitions}
+          shutdownReason={devbox.shutdown_reason ?? undefined}
         />
       }
-      pollResource={shouldPoll ? pollDevbox : undefined}
-      pollInterval={3000}
     />
   );
 };

src/components/ResourceDetailPage.tsx

@@ -43,7 +43,7 @@ const truncateString = (str: string, maxLength: number): string => {
 };
 
 export function ResourceDetailPage<T>({
-  resource: initialResource,
+  resource,
   resourceType,
   getDisplayName,
   getId,
@@ -56,9 +56,6 @@ export function ResourceDetailPage<T>({
   onBack,
   buildDetailLines,
   additionalContent,
-  pollResource,
-  onPollUpdate,
-  pollInterval = 3000,
 }: ResourceDetailPageProps<T>) {
   const isMounted = React.useRef(true);
   const { navigate } = useNavigation();
@@ -71,15 +68,8 @@ export function ResourceDetailPage<T>({
     };
   }, []);
 
-  // Local state for resource data (updated by polling)
-  const [currentResource, setCurrentResource] = React.useState(initialResource);
   const [copyStatus, setCopyStatus] = React.useState<string | null>(null);
 
-  // Keep local resource in sync when parent provides fresher data.
-  React.useEffect(() => {
-    setCurrentResource(initialResource);
-  }, [initialResource]);
-
   // Copy to clipboard with status feedback
   const handleCopy = React.useCallback(async (text: string) => {
     const status = await copyToClipboard(text);
@@ -110,33 +100,12 @@ export function ResourceDetailPage<T>({
     }
   }, [totalSelectableItems, selectedIndex]);
 
-  // Background polling for resource details
-  React.useEffect(() => {
-    if (!pollResource || showDetailedInfo) return;
-
-    const interval = setInterval(async () => {
-      if (isMounted.current) {
-        try {
-          const updatedResource = await pollResource();
-          if (isMounted.current) {
-            setCurrentResource(updatedResource);
-            onPollUpdate?.(updatedResource);
-          }
-        } catch {
-          // Silently ignore polling errors
-        }
-      }
-    }, pollInterval);
-
-    return () => clearInterval(interval);
-  }, [pollResource, pollInterval, showDetailedInfo, onPollUpdate]);
-
   // Calculate viewport for detailed info view
   const detailViewport = useViewportHeight({ overhead: 18, minHeight: 10 });
 
-  const displayName = getDisplayName(currentResource);
-  const resourceId = getId(currentResource);
-  const status = getStatus(currentResource);
+  const displayName = getDisplayName(resource);
+  const resourceId = getId(resource);
+  const status = getStatus(resource);
 
   // Execute a field action
   const executeFieldAction = React.useCallback(
@@ -159,8 +128,8 @@ export function ResourceDetailPage<T>({
 
   const handleOpenInBrowser = React.useCallback(() => {
     if (!getUrl) return;
-    openUrlInBrowser(getUrl(currentResource));
-  }, [getUrl, currentResource]);
+    openUrlInBrowser(getUrl(resource));
+  }, [getUrl, resource]);
 
   const exitDetailedInfo = React.useCallback(() => {
     setShowDetailedInfo(false);
@@ -176,7 +145,7 @@ export function ResourceDetailPage<T>({
     } else {
       const op = operations[operationIndex];
       if (op) {
-        onOperation(op.key, currentResource);
+        onOperation(op.key, resource);
       }
     }
   }, [
@@ -185,7 +154,7 @@ export function ResourceDetailPage<T>({
     selectedIndex,
     operationIndex,
     operations,
-    currentResource,
+    resource,
     executeFieldAction,
     onOperation,
   ]);
@@ -207,7 +176,7 @@ export function ResourceDetailPage<T>({
         bindings: {
           q: onBack,
           escape: onBack,
-          c: () => handleCopy(getId(currentResource)),
+          c: () => handleCopy(getId(resource)),
           ...(buildDetailLines
             ? {
                 i: () => {
@@ -233,7 +202,7 @@ export function ResourceDetailPage<T>({
           );
           if (matchedOpIndex !== -1) {
             setSelectedIndex(actionableFields.length + matchedOpIndex);
-            onOperation(operations[matchedOpIndex].key, currentResource);
+            onOperation(operations[matchedOpIndex].key, resource);
           }
         },
       },
@@ -243,7 +212,7 @@ export function ResourceDetailPage<T>({
       detailScroll,
       exitDetailedInfo,
       onBack,
-      currentResource,
+      resource,
       buildDetailLines,
       selectedIndex,
       totalSelectableItems,
@@ -263,7 +232,7 @@ export function ResourceDetailPage<T>({
   if (showDetailedInfo && buildDetailLines) {
     return (
       <DetailedInfoView
-        detailLines={buildDetailLines(currentResource)}
+        detailLines={buildDetailLines(resource)}
         scrollOffset={detailScroll}
         viewportHeight={detailViewport.viewportHeight}
         displayName={displayName}

src/components/resourceDetailTypes.ts

@@ -111,10 +111,4 @@ export interface ResourceDetailPageProps<T> {
   buildDetailLines?: (resource: T) => React.ReactElement[];
   /** Optional: Additional content to render after details section */
   additionalContent?: React.ReactNode;
-  /** Optional: Polling function to refresh resource data */
-  pollResource?: () => Promise<T>;
-  /** Optional: Called whenever polling returns a fresh resource */
-  onPollUpdate?: (resource: T) => void;
-  /** Polling interval in ms (default: 3000) */
-  pollInterval?: number;
 }

src/hooks/useResourceDetail.ts

@@ -0,0 +1,118 @@
+import React from "react";
+
+export interface UseResourceDetailOptions<T> {
+  /** Resource id to fetch; when undefined, no fetch or poll runs */
+  id: string | undefined;
+  /** Fetch function called with id */
+  fetch: (id: string) => Promise<T>;
+  /** Optional initial data (e.g. from store) shown until first fetch resolves */
+  initialData?: T | null;
+  /** Polling interval in ms; omit or 0 to disable */
+  pollInterval?: number;
+  /** When provided, polling only runs while this returns true (e.g. status is in-progress) */
+  shouldPoll?: (data: T) => boolean;
+}
+
+export interface UseResourceDetailResult<T> {
+  /** Current resource data (from initialData until fetch resolves, then from fetch/poll) */
+  data: T | null;
+  /** True while the initial fetch for this id is in progress */
+  loading: boolean;
+  /** Error from the last fetch attempt (poll errors are ignored) */
+  error: Error | null;
+}
+
+/**
+ * Shared hook for detail view: "get state for this resource" and optional "poll it".
+ * Single source of truth for detail data; no callbacks to parent.
+ */
+export function useResourceDetail<T>({
+  id,
+  fetch: fetchFn,
+  initialData,
+  pollInterval = 0,
+  shouldPoll,
+}: UseResourceDetailOptions<T>): UseResourceDetailResult<T> {
+  const [data, setData] = React.useState<T | null>(initialData ?? null);
+  const [loading, setLoading] = React.useState(!!id);
+  const [error, setError] = React.useState<Error | null>(null);
+  const isMounted = React.useRef(true);
+
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  // Reset state when id changes
+  React.useEffect(() => {
+    if (!id) {
+      setData(initialData ?? null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    setData(initialData ?? null);
+    setError(null);
+    setLoading(true);
+  }, [id, initialData]);
+
+  // Initial fetch when id is set
+  React.useEffect(() => {
+    if (!id) return;
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchFn(id)
+      .then((result) => {
+        if (!cancelled && isMounted.current) {
+          setData(result);
+          setError(null);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled && isMounted.current) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+          // Keep initialData if we had it
+          if (initialData != null) {
+            setData(initialData);
+          }
+        }
+      })
+      .finally(() => {
+        if (!cancelled && isMounted.current) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [id, fetchFn]);
+
+  // Polling: only when pollInterval > 0, we have data, and shouldPoll(data) is true
+  React.useEffect(() => {
+    if (!id || pollInterval <= 0 || !data) return;
+    if (shouldPoll && !shouldPoll(data)) return;
+
+    const interval = setInterval(() => {
+      if (!isMounted.current) return;
+      fetchFn(id)
+        .then((result) => {
+          if (isMounted.current) {
+            setData(result);
+          }
+        })
+        .catch(() => {
+          // Silently ignore polling errors
+        });
+    }, pollInterval);
+
+    return () => clearInterval(interval);
+  }, [id, fetchFn, pollInterval, data, shouldPoll]);
+
+  return { data, loading, error };
+}