make loading of larger protos robust

while i'm here: enable loading broken local zips via CD recovery, not just sendsafely zips.

Main change here is to standardize on one file loading path that is chunked and handles large
protos, cleaning up the handling of proto decoding which previously had different bugs on
different paths related to string sizes or being split across chunks. Also tidy up naming of
tables and tracking, and start de-registering the blob for each chunk after it is loaded.

Author: dt

src/App.tsx

@@ -253,6 +253,53 @@ function AppContent() {
 
   return (
     <>
+      {/* Malformed zip recovery banner */}
+      {state.recoveryInfo && (
+        <div
+          style={{
+            position: "fixed",
+            top: "16px",
+            left: "50%",
+            transform: "translateX(-50%)",
+            backgroundColor: "var(--bg-secondary)",
+            border: "1px solid var(--accent-warning)",
+            borderRadius: "8px",
+            padding: "12px 16px",
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+            zIndex: 1000,
+            maxWidth: "600px",
+          }}
+        >
+          <div style={{ fontSize: "20px" }}>⚠️</div>
+          <div style={{ flex: 1, fontSize: "13px" }}>
+            <strong style={{ color: "var(--accent-warning)" }}>
+              Zip file appears malformed or truncated
+            </strong>
+            <div style={{ color: "var(--text-muted)", marginTop: "4px" }}>
+              File listing for {state.recoveryInfo.entriesCount.toLocaleString()} files was decoded, but could be incomplete
+            </div>
+          </div>
+          <button
+            onClick={() => dispatch({ type: "SET_RECOVERY_INFO", recoveryInfo: null })}
+            style={{
+              padding: "6px 12px",
+              backgroundColor: "transparent",
+              color: "var(--text-primary)",
+              border: "1px solid var(--border-color)",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "12px",
+              fontWeight: "500",
+            }}
+          >
+            Dismiss
+          </button>
+        </div>
+      )}
+
       <div
         className={`app-container ${
           !sidebarVisible || isStackgazerActive ? "sidebar-collapsed" : ""

src/components/DropZone.tsx

@@ -72,11 +72,8 @@ interface SendSafelyModalProps {
   setLoading: (loading: boolean) => void;
   loadingMessage: string;
   setLoadingMessage: (message: string) => void;
-  recoveryEntriesCount: number | null;
-  setRecoveryEntriesCount: (count: number | null) => void;
   fileLoading: boolean;
   setFileLoading: (loading: boolean) => void;
-  waitForWorkers: () => Promise<import("../state/types").IWorkerManager>;
 }
 
 function SendSafelyModalContent({
@@ -104,11 +101,8 @@ function SendSafelyModalContent({
   setLoading,
   loadingMessage,
   setLoadingMessage,
-  recoveryEntriesCount,
-  setRecoveryEntriesCount,
   fileLoading,
   setFileLoading,
-  waitForWorkers,
 }: SendSafelyModalProps) {
   const [showOtherFiles, setShowOtherFiles] = useState(false);
   const [forceStep1, setForceStep1] = useState(false);
@@ -872,7 +866,7 @@ function SendSafelyModalContent({
             </div>
           </div>
 
-          {fileLoading && recoveryEntriesCount === null && (
+          {fileLoading && (
             <div style={{ textAlign: "center", padding: "20px" }}>
               <span className="loading-spinner-small" />
               <div
@@ -887,66 +881,6 @@ function SendSafelyModalContent({
             </div>
           )}
 
-          {recoveryEntriesCount !== null && (
-            <div style={{ padding: "20px" }}>
-              <div
-                style={{
-                  textAlign: "center",
-                  marginBottom: "16px",
-                  fontSize: "24px",
-                }}
-              >
-                ⚠️
-              </div>
-              <div
-                style={{
-                  marginBottom: "12px",
-                  fontSize: "13px",
-                  fontWeight: "bold",
-                  color: "var(--accent-warning)",
-                  textAlign: "center",
-                }}
-              >
-                Zip file appears malformed or truncated
-              </div>
-              <div
-                style={{
-                  marginBottom: "20px",
-                  fontSize: "12px",
-                  color: "var(--text-muted)",
-                  textAlign: "center",
-                }}
-              >
-                File listing for {recoveryEntriesCount.toLocaleString()}{" "}
-                files was decoded, but could be incomplete
-              </div>
-              <div style={{ display: "flex", justifyContent: "center" }}>
-                <button
-                  onClick={async () => {
-                    // User confirmed - clear recovery warning and tell ZIP worker to proceed
-                    setRecoveryEntriesCount(null);
-                    const workerManager = await waitForWorkers();
-                    await workerManager.proceedWithRecovery();
-                    // ZIP worker will emit initializeComplete and continue with normal flow
-                    // Modal will close when we transition to table-loading stage
-                  }}
-                  style={{
-                    padding: "10px 24px",
-                    backgroundColor: "var(--accent-primary)",
-                    color: "#fff",
-                    border: "none",
-                    borderRadius: "4px",
-                    cursor: "pointer",
-                    fontSize: "13px",
-                    fontWeight: "500",
-                  }}
-                >
-                  Proceed
-                </button>
-              </div>
-            </div>
-          )}
-
           {fileError && (
             <div
               style={{
@@ -1022,8 +956,7 @@ function DropZone() {
   const [modalDismissable, setModalDismissable] = useState(false);
   const [fileLoading, setFileLoading] = useState(false);
 
-  // CD recovery warning state - shown in modal when recovery is used
-  const [recoveryEntriesCount, setRecoveryEntriesCount] = useState<number | null>(null);
+  // CD recovery warning state is now in global state (not local)
 
   // Single function to close the SendSafely modal
   const closeSendSafelyModal = useCallback(() => {
@@ -1033,7 +966,7 @@ function DropZone() {
     setPackageError(null);
     setPackageLoading(false);
     setFileLoading(false);
-    setRecoveryEntriesCount(null);
+    // Note: don't reset recoveryInfo - it persists to show banner after modal closes
   }, []);
 
   // Debug page state
@@ -1175,10 +1108,11 @@ function DropZone() {
           closeSendSafelyModal();
         }
       },
-      onCdScanningComplete: (entriesCount: number) => {
-        // ZIP recovery was used - show warning in modal
-        // Keep fileLoading = true so we stay in step 4
-        setRecoveryEntriesCount(entriesCount);
+      onCdScanningComplete: async (entriesCount: number) => {
+        // ZIP recovery was used - store info for banner and auto-proceed
+        dispatch({ type: "SET_RECOVERY_INFO", recoveryInfo: {entriesCount} });
+        const workerManager = await waitForWorkers();
+        await workerManager.proceedWithRecovery();
       },
       onSendStackFileToIframe: (path: string, content: string, name?: string) => {
         // Detect mode based on file path
@@ -1543,6 +1477,11 @@ function DropZone() {
 
             // Stack data is now sent directly by controller via onSendStackDataToIframe callback
           },
+          onCdScanningComplete: async (entriesCount: number) => {
+            // ZIP recovery was used - store info for banner and auto-proceed
+            dispatch({ type: "SET_RECOVERY_INFO", recoveryInfo: {entriesCount} });
+            await workerManager.proceedWithRecovery();
+          },
           onSendStackFileToIframe: (path: string, content: string, name?: string) => {
             // Detect mode based on file path
             const isLabeled = path.includes("stacks_with_labels.txt");
@@ -1982,7 +1921,7 @@ function DropZone() {
             justifyContent: "center",
           }}
           onClick={() => {
-            if (modalDismissable && recoveryEntriesCount === null) {
+            if (modalDismissable) {
               closeSendSafelyModal();
             }
           }}
@@ -2045,20 +1984,16 @@ function DropZone() {
                   </button>
                   <button
                     onClick={() => {
-                      // Don't allow closing modal while recovery warning is shown
-                      if (recoveryEntriesCount === null) {
-                        closeSendSafelyModal();
-                      }
+                      closeSendSafelyModal();
                     }}
                     style={{
                       background: "transparent",
                       border: "none",
                       color: "var(--text-secondary)",
                       fontSize: "18px",
-                      cursor: recoveryEntriesCount === null ? "pointer" : "not-allowed",
+                      cursor: "pointer",
                       padding: "0 4px",
                       lineHeight: "1",
-                      opacity: recoveryEntriesCount === null ? 1 : 0.5,
                     }}
                   >
                     ×
@@ -2249,11 +2184,8 @@ function DropZone() {
                 setLoading={setLoading}
                 loadingMessage={loadingMessage}
                 setLoadingMessage={setLoadingMessage}
-                recoveryEntriesCount={recoveryEntriesCount}
-                setRecoveryEntriesCount={setRecoveryEntriesCount}
                 fileLoading={fileLoading}
                 setFileLoading={setFileLoading}
-                waitForWorkers={waitForWorkers}
               />
             )}
           </div>

src/components/ErrorViewer.tsx

@@ -24,6 +24,7 @@ function ErrorViewer({
 }: ErrorViewerProps) {
   const { state, dispatch } = useApp();
   const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
 
   const handleViewFile = (filePath?: string) => {
     const pathToOpen = filePath || sourceFile;
@@ -47,6 +48,7 @@ function ErrorViewer({
     const tableNameForLoading = fullTableName || tableName;
 
     setIsLoading(true);
+    setLoadError(null); // Clear any previous error
     try {
       // Load the table with only the non-error files
       await state.workerManager.loadSingleTable({
@@ -75,7 +77,8 @@ function ErrorViewer({
       }, 100);
     } catch (err) {
       console.error("Failed to load available data:", err);
-      alert(`Failed to load data: ${err instanceof Error ? err.message : String(err)}`);
+      const errorMessage = err instanceof Error ? err.message : String(err);
+      setLoadError(errorMessage);
     } finally {
       setIsLoading(false);
     }
@@ -170,6 +173,13 @@ function ErrorViewer({
               >
                 {isLoading ? "Loading..." : `Load Available Data (${availableFiles.length} nodes, ${formatSize(totalSize)})`}
               </button>
+
+              {loadError && (
+                <div style={{ marginTop: "16px", padding: "12px", backgroundColor: "var(--error-bg, #3c1f1f)", border: "1px solid var(--error-border, #f44336)", borderRadius: "4px" }}>
+                  <h4 style={{ margin: "0 0 8px 0", color: "var(--error-color, #f44336)" }}>Failed to Load Data</h4>
+                  <pre style={{ margin: 0, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: "0.9em" }}>{loadError}</pre>
+                </div>
+              )}
             </div>
           )}
         </div>