Refine archive management UX across web and mobile

BRANCH_DETAILS.md

@@ -0,0 +1,31 @@
+# Archive Settings UX
+
+The settings Archive panel uses a dense layout so large archives remain scannable. The native mobile Archived Threads screen mirrors the same information hierarchy and behavior with mobile-native project sections, swipe actions, long-press menus, and header controls.
+
+Expected behavior:
+
+- Archived conversations are grouped by project, and each project group is collapsed by default.
+- The Archive panel fetches archived thread snapshots from all configured environments, not only environments that currently have active projects, so archived-only workspaces remain visible, while active rows returned in those snapshots remain excluded from archive content and empty-state counts.
+- Web project headers show environment labels whenever multiple environments are configured and keep a sole remote environment labeled, while a sole primary environment remains implicit.
+- The page includes a search box that filters archived thread titles across all projects case-insensitively. Multi-word searches match any term, rank exact phrase matches first, rank titles matching every term ahead of partial term matches, and auto-open matching project groups while search is active.
+- Expanded project headers include sortable `Archived` and `Created` columns; clicking either header toggles ascending/descending order for the conversations inside each group, with `Archived` descending as the default.
+- Native project-section ordering follows the selected archive sort field and direction. Invalid archived timestamps fall back to the conversation's created timestamp for sorting and display on both surfaces.
+- Native bulk actions distinguish rows skipped because the same thread action is already in progress from commands that actually fail, and report both outcomes accurately.
+- Conversation rows show only the relative archived and created ages inline with the title by default. On web row hover or keyboard focus, those age labels fade out and icon-only unarchive/delete actions appear as a right-side overlay with tooltips, matching the sidebar and source-control list-row action pattern. Native rows keep both age columns visible and expose the same actions through swipe gestures and the standard long-press context menu.
+- Archived conversations can be deleted directly from the Archive panel without unarchiving first. Web delete actions respect the shared `confirmThreadDelete` client setting, while native keeps its standard guarded delete flow.
+- Project group context menus expose `unarchive all` and `delete all` actions. While search is active, those bulk actions apply to the visible matching archived conversations and use matching-specific menu labels; otherwise they apply to all archived conversations in the project. Delete confirmations respect `confirmThreadDelete` on web and remain explicitly guarded on native; unarchive bulk actions remain guarded on both surfaces, and partial failures surface as not-fully-completed feedback instead of implying every archived thread failed.
+- Archive grouping, search ranking, sort state, and project bulk-action concurrency live in `apps/web/src/components/settings/SettingsPanels.logic.ts` on web and `apps/mobile/src/features/archive/archivedThreadList.ts` on native so the dense Archive behavior stays covered without growing the React components. Project groups expose and reuse collision-safe keys so project ids containing separator characters do not collapse expansion state or React row identity. Bulk actions stop scheduling new work after thrown failures, wait for active workers to settle, show incomplete-operation feedback, and surface the underlying exception messages instead of only a generic aggregate error. The Archive surfaces refresh archived threads after bulk unarchive/delete attempts even when the action runner throws.
+
+Primary files:
+
+- `apps/web/src/components/settings/ArchiveSettings.tsx`
+- `apps/web/src/components/settings/SettingsPanels.tsx`
+- `apps/web/src/components/settings/SettingsPanels.logic.ts`
+- `apps/mobile/src/features/archive/ArchivedThreadsRouteScreen.tsx`
+- `apps/mobile/src/features/archive/ArchivedThreadsScreen.tsx`
+- `apps/mobile/src/features/archive/archivedThreadList.ts`
+
+## Development Ports
+
+- Web: `5734`
+- Server/WebSocket: `13774`

apps/mobile/src/features/archive/ArchivedThreadsRouteScreen.tsx

@@ -3,26 +3,70 @@ import * as Arr from "effect/Array";
 import * as Order from "effect/Order";
 import { useFocusEffect } from "@react-navigation/native";
 import { useCallback, useMemo, useState } from "react";
+import { Alert, Platform } from "react-native";
 
+import { showConfirmDialog } from "../../components/ConfirmDialogHost";
 import { useSavedRemoteConnections } from "../../state/use-remote-environment-registry";
 import { useClerkSettingsSheetDetent } from "../cloud/ClerkSettingsSheetDetent";
 import { useArchivedThreadListActions } from "../home/useThreadListActions";
 import {
   ArchivedThreadsScreen,
   type ArchivedThreadsHeaderEnvironment,
 } from "./ArchivedThreadsScreen";
-import { buildArchivedThreadGroups, type ArchivedThreadSortOrder } from "./archivedThreadList";
+import {
+  archivedThreadActionExceptionDescription,
+  archivedThreadActionSummaryDescription,
+  buildArchivedThreadGroups,
+  parseArchivedThreadSearchInput,
+  runArchivedThreadActions,
+  type ArchivedThreadSortState,
+} from "./archivedThreadList";
 import {
   refreshArchivedThreadsForEnvironment,
   useArchivedThreadSnapshots,
 } from "./useArchivedThreadSnapshots";
+import type { EnvironmentThreadShell } from "@t3tools/client-runtime/state/shell";
+import { scopedThreadKey } from "../../lib/scopedEntities";
+
+function confirmArchivedProjectAction(input: {
+  readonly title: string;
+  readonly message: string;
+  readonly confirmText: string;
+  readonly destructive?: boolean;
+}): Promise<boolean> {
+  return new Promise((resolve) => {
+    if (Platform.OS === "ios") {
+      Alert.alert(input.title, input.message, [
+        { text: "Cancel", style: "cancel", onPress: () => resolve(false) },
+        {
+          text: input.confirmText,
+          style: input.destructive ? "destructive" : "default",
+          onPress: () => resolve(true),
+        },
+      ]);
+      return;
+    }
+    showConfirmDialog({
+      title: input.title,
+      message: input.message,
+      confirmText: input.confirmText,
+      destructive: input.destructive,
+      onCancel: () => resolve(false),
+      onConfirm: () => resolve(true),
+    });
+  });
+}
 
 export function ArchivedThreadsRouteScreen() {
   const { expand } = useClerkSettingsSheetDetent();
   const { savedConnectionsById } = useSavedRemoteConnections();
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<EnvironmentId | null>(null);
-  const [sortOrder, setSortOrder] = useState<ArchivedThreadSortOrder>("newest");
+  const [sort, setSort] = useState<ArchivedThreadSortState>({
+    field: "archivedAt",
+    direction: "desc",
+  });
+  const [busyThreadKeys, setBusyThreadKeys] = useState<ReadonlySet<string>>(() => new Set());
   const environments = useMemo<ReadonlyArray<ArchivedThreadsHeaderEnvironment>>(
     () =>
       Arr.sort(
@@ -40,33 +84,97 @@ export function ArchivedThreadsRouteScreen() {
     () => environments.map((environment) => environment.environmentId),
     [environments],
   );
-  const environmentLabels = useMemo(
-    () =>
-      Object.fromEntries(
-        environments.map((environment) => [environment.environmentId, environment.label]),
-      ),
-    [environments],
-  );
   const { error, isLoading, refresh, snapshots } = useArchivedThreadSnapshots(environmentIds);
+  const search = useMemo(() => parseArchivedThreadSearchInput(searchQuery), [searchQuery]);
   const groups = useMemo(
     () =>
       buildArchivedThreadGroups({
         snapshots,
-        environmentLabels,
         environmentId: selectedEnvironmentId,
-        searchQuery,
-        sortOrder,
+        search,
+        sort,
       }),
-    [environmentLabels, searchQuery, selectedEnvironmentId, snapshots, sortOrder],
+    [search, selectedEnvironmentId, snapshots, sort],
   );
   const refreshChangedEnvironment = useCallback(
     (thread: { readonly environmentId: EnvironmentId }) => {
       refreshArchivedThreadsForEnvironment(thread.environmentId);
     },
     [],
   );
-  const { unarchiveThread, confirmDeleteThread } =
+  const { unarchiveThread, deleteThread, confirmDeleteThread } =
     useArchivedThreadListActions(refreshChangedEnvironment);
+  const updateBusyThreads = useCallback(
+    (threads: ReadonlyArray<EnvironmentThreadShell>, busy: boolean) => {
+      setBusyThreadKeys((current) => {
+        const next = new Set(current);
+        for (const thread of threads) {
+          const key = scopedThreadKey(thread.environmentId, thread.id);
+          if (busy) next.add(key);
+          else next.delete(key);
+        }
+        return next;
+      });
+    },
+    [],
+  );
+  const handleUnarchiveThread = useCallback(
+    async (thread: EnvironmentThreadShell) => {
+      updateBusyThreads([thread], true);
+      try {
+        await unarchiveThread(thread);
+      } finally {
+        updateBusyThreads([thread], false);
+      }
+    },
+    [unarchiveThread, updateBusyThreads],
+  );
+  const handleProjectAction = useCallback(
+    async (
+      projectTitle: string,
+      threads: ReadonlyArray<EnvironmentThreadShell>,
+      scope: "all" | "matching",
+      action: "unarchive" | "delete",
+    ) => {
+      const scopeLabel =
+        scope === "matching" ? "matching archived conversations" : "all archived conversations";
+      const actionLabel = action === "unarchive" ? "Unarchive" : "Delete";
+      const confirmed = await confirmArchivedProjectAction({
+        title: `${actionLabel} ${scopeLabel}?`,
+        message:
+          action === "unarchive"
+            ? `Restore ${threads.length} conversation${threads.length === 1 ? "" : "s"} from “${projectTitle}”?`
+            : `Permanently delete ${threads.length} conversation${threads.length === 1 ? "" : "s"} from “${projectTitle}”? This also clears their terminal history.`,
+        confirmText: actionLabel,
+        destructive: action === "delete",
+      });
+      if (!confirmed) return;
+
+      updateBusyThreads(threads, true);
+      try {
+        const summary = await runArchivedThreadActions(threads, (thread) =>
+          action === "unarchive"
+            ? unarchiveThread(thread, { reportFailure: false })
+            : deleteThread(thread, { reportFailure: false }),
+        );
+        if (summary.failed > 0 || summary.skipped > 0) {
+          Alert.alert(
+            `Archived threads not fully ${action === "unarchive" ? "unarchived" : "deleted"}`,
+            archivedThreadActionSummaryDescription(summary),
+          );
+        }
+      } catch (error) {
+        Alert.alert(
+          `Archived threads not fully ${action === "unarchive" ? "unarchived" : "deleted"}`,
+          archivedThreadActionExceptionDescription(error),
+        );
+      } finally {
+        updateBusyThreads(threads, false);
+        refresh();
+      }
+    },
+    [deleteThread, refresh, unarchiveThread, updateBusyThreads],
+  );
 
   useFocusEffect(
     useCallback(() => {
@@ -83,13 +191,17 @@ export function ArchivedThreadsRouteScreen() {
       isLoading={isLoading}
       onDeleteThread={confirmDeleteThread}
       onEnvironmentChange={setSelectedEnvironmentId}
+      onProjectAction={(projectTitle, threads, scope, action) =>
+        void handleProjectAction(projectTitle, threads, scope, action)
+      }
       onRefresh={refresh}
       onSearchQueryChange={setSearchQuery}
-      onSortOrderChange={setSortOrder}
-      onUnarchiveThread={unarchiveThread}
+      onSortChange={setSort}
+      onUnarchiveThread={(thread) => void handleUnarchiveThread(thread)}
       searchQuery={searchQuery}
       selectedEnvironmentId={selectedEnvironmentId}
-      sortOrder={sortOrder}
+      sort={sort}
+      busyThreadKeys={busyThreadKeys}
     />
   );
 }