1 files changed, 125 insertions, 17 deletions
diff --git a/src/components/SetupTab.tsx b/src/components/SetupTab.tsx
index 98d6e78..9c854e1 100644
--- a/src/components/SetupTab.tsx
+++ b/src/components/SetupTab.tsx
@@ -1,5 +1,11 @@
-import { PanelSection } from "@decky/ui";
-import type { SteamBranchStatus } from "../api/lsfgApi";
+import { ButtonItem, ConfirmModal, Field, PanelSection, PanelSectionRow, showModal } from "@decky/ui";
+import { useEffect, useState } from "react";
+import {
+  getFlatpakSupportStatus,
+  removePluginOwnedFlatpakExtensions,
+  type FlatpakExtensionStatus,
+  type SteamBranchStatus,
+} from "../api/lsfgApi";
 import { InstallationButton } from "./InstallationButton";
 import { StatusDisplay } from "./StatusDisplay";
 
@@ -13,6 +19,104 @@ interface SetupTabProps {
   isUninstalling: boolean;
   onInstall: () => void;
   onUninstall: () => void;
+  flatpakRelevant: boolean;
+}
+
+function FlatpakSupportDiagnostics({ relevant }: { relevant: boolean }) {
+  const [status, setStatus] = useState<FlatpakExtensionStatus | null>(null);
+  const [advanced, setAdvanced] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const refresh = async () => {
+    try {
+      setStatus(await getFlatpakSupportStatus());
+    } catch (error) {
+      setStatus({
+        success: false,
+        message: "",
+        error: String(error),
+        available: false,
+        extension_id: "",
+        supported_branches: [],
+        installed_branches: [],
+        owned_branches: [],
+        ownership_uncertain: false,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (relevant) void refresh();
+  }, [relevant]);
+
+  if (!relevant || !status?.available) return null;
+
+  const confirmCleanup = () => {
+    showModal(
+      <ConfirmModal
+        strTitle="Remove plugin-installed Flatpak extensions?"
+        strDescription="Shared runtime branches recorded as installed by this plugin will be removed. Existing unowned branches are preserved."
+        strOKButtonText="Remove extensions"
+        strCancelButtonText="Cancel"
+        onOK={async () => {
+          setBusy(true);
+          try {
+            await removePluginOwnedFlatpakExtensions();
+            await refresh();
+          } finally {
+            setBusy(false);
+          }
+        }}
+        onCancel={() => {}}
+      />,
+    );
+  };
+
+  return (
+    <PanelSection title="Flatpak support">
+      <PanelSectionRow>
+        <Field
+          label="Runtime extension support"
+          description={status.message || "Flatpak is available for classified targets."}
+        />
+      </PanelSectionRow>
+      <PanelSectionRow>
+        <ButtonItem layout="below" onClick={() => setAdvanced((value) => !value)}>
+          {advanced ? "Hide runtime details" : "Show runtime details"}
+        </ButtonItem>
+      </PanelSectionRow>
+      {advanced && (
+        <>
+          {status.supported_branches.map((branch) => (
+            <PanelSectionRow key={branch}>
+              <Field
+                label={branch}
+                description={
+                  status.installed_branches.includes(branch)
+                    ? "Installed" + (status.owned_branches.includes(branch) ? " · plugin-owned" : "")
+                    : "Not installed"
+                }
+              />
+            </PanelSectionRow>
+          ))}
+          {status.ownership_uncertain && (
+            <PanelSectionRow>
+              <Field label="Ownership metadata is uncertain" description="Cleanup is disabled until the metadata is repaired." />
+            </PanelSectionRow>
+          )}
+          <PanelSectionRow>
+            <ButtonItem
+              layout="below"
+              disabled={busy || status.ownership_uncertain || status.owned_branches.length === 0}
+              onClick={confirmCleanup}
+            >
+              {busy ? "Removing..." : "Remove plugin-installed extensions"}
+            </ButtonItem>
+          </PanelSectionRow>
+        </>
+      )}
+    </PanelSection>
+  );
 }
 
 export function SetupTab({
@@ -25,22 +129,26 @@ export function SetupTab({
   isUninstalling,
   onInstall,
   onUninstall,
+  flatpakRelevant,
 }: SetupTabProps) {
   return (
-    <PanelSection title="Setup">
-      <StatusDisplay
-        installationStatus={installationStatus}
-        losslessScalingInstalled={losslessScalingInstalled}
-        losslessScalingStatus={losslessScalingStatus}
-        steamBranchStatus={steamBranchStatus}
-      />
-      <InstallationButton
-        isInstalled={isInstalled}
-        isInstalling={isInstalling}
-        isUninstalling={isUninstalling}
-        onInstall={onInstall}
-        onUninstall={onUninstall}
-      />
-    </PanelSection>
+    <>
+      <PanelSection title="Setup">
+        <StatusDisplay
+          installationStatus={installationStatus}
+          losslessScalingInstalled={losslessScalingInstalled}
+          losslessScalingStatus={losslessScalingStatus}
+          steamBranchStatus={steamBranchStatus}
+        />
+        <InstallationButton
+          isInstalled={isInstalled}
+          isInstalling={isInstalling}
+          isUninstalling={isUninstalling}
+          onInstall={onInstall}
+          onUninstall={onUninstall}
+        />
+      </PanelSection>
+      <FlatpakSupportDiagnostics relevant={flatpakRelevant} />
+    </>
   );
 }