1 files changed, 90 insertions, 55 deletions
diff --git a/src/components/UsageInstructions.tsx b/src/components/UsageInstructions.tsx
index 712d4c1..ca9ddd2 100644
--- a/src/components/UsageInstructions.tsx
+++ b/src/components/UsageInstructions.tsx
@@ -1,68 +1,103 @@
 import { PanelSectionRow } from "@decky/ui";
+import { WikiButton } from "./WikiButton";
 
-interface UsageInstructionsProps {
+interface ConfigType {
+  enableLsfg: boolean;
   multiplier: number;
+  flowScale: number;
+  hdr: boolean;
+  perfMode: boolean;
+  immediateMode: boolean;
+  disableVkbasalt: boolean;
+}
+
+interface UsageInstructionsProps {
+  config: ConfigType;
 }
 
-export function UsageInstructions({ multiplier }: UsageInstructionsProps) {
+export function UsageInstructions({ config }: UsageInstructionsProps) {
+  // Build manual environment variables string based on current config
+  const buildManualEnvVars = (): string => {
+    const envVars: string[] = [];
+    
+    if (config.enableLsfg) {
+      envVars.push("ENABLE_LSFG=1");
+    }
+    
+    // Always include multiplier and flow_scale if LSFG is enabled, as they have defaults
+    if (config.enableLsfg) {
+      envVars.push(`LSFG_MULTIPLIER=${config.multiplier}`);
+      envVars.push(`LSFG_FLOW_SCALE=${config.flowScale}`);
+    }
+    
+    if (config.hdr) {
+      envVars.push("LSFG_HDR=1");
+    }
+    
+    if (config.perfMode) {
+      envVars.push("LSFG_PERF_MODE=1");
+    }
+    
+    if (config.immediateMode) {
+      envVars.push("MESA_VK_WSI_PRESENT_MODE=immediate");
+    }
+    
+    if (config.disableVkbasalt) {
+      envVars.push("DISABLE_VKBASALT=1");
+    }
+    
+    return envVars.length > 0 ? `${envVars.join(" ")} %command%` : "%command%";
+  };
+
   return (
-    <PanelSectionRow>
-      <div
-        style={{
-          fontSize: "13px",
-          marginTop: "12px",
-          padding: "8px",
-          backgroundColor: "rgba(255, 255, 255, 0.05)",
-          borderRadius: "4px"
-        }}
-      >
-        <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
-          Usage Instructions:
-        </div>
-        <div style={{ marginBottom: "4px" }}>
-          Option 1: Use the lsfg script (recommended):
-        </div>
+    <>
+      <PanelSectionRow>
         <div
           style={{
-            fontFamily: "monospace",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            padding: "4px",
-            borderRadius: "2px",
-            fontSize: "12px",
-            marginBottom: "6px"
+            fontSize: "13px",
+            marginTop: "12px",
+            padding: "8px",
+            backgroundColor: "rgba(255, 255, 255, 0.05)",
+            borderRadius: "4px"
           }}
         >
-          ~/lsfg %COMMAND%
-        </div>
-        <div style={{ marginBottom: "4px" }}>
-          Option 2: Manual environment variables:
+          <div style={{ fontWeight: "bold", marginBottom: "6px" }}>
+            Usage Instructions:
+          </div>
+          <div style={{ marginBottom: "4px" }}>
+            Option 1: Use the lsfg script (recommended):
+          </div>
+          <div
+            style={{
+              fontFamily: "monospace",
+              backgroundColor: "rgba(0, 0, 0, 0.3)",
+              padding: "4px",
+              borderRadius: "2px",
+              fontSize: "12px",
+              marginBottom: "6px"
+            }}
+          >
+            ~/lsfg %command%
+          </div>
+          <div style={{ marginBottom: "4px" }}>
+            Option 2: Manual environment variables:
+          </div>
+          <div
+            style={{
+              fontFamily: "monospace",
+              backgroundColor: "rgba(0, 0, 0, 0.3)",
+              padding: "4px",
+              borderRadius: "2px",
+              fontSize: "12px",
+              marginBottom: "6px"
+            }}
+          >
+            {buildManualEnvVars()}
+          </div>
         </div>
-        <div
-          style={{
-            fontFamily: "monospace",
-            backgroundColor: "rgba(0, 0, 0, 0.3)",
-            padding: "4px",
-            borderRadius: "2px",
-            fontSize: "12px",
-            marginBottom: "6px"
-          }}
-        >
-          ENABLE_LSFG=1 LSFG_MULTIPLIER={multiplier} %COMMAND%
-        </div>
-        <div style={{ fontSize: "11px", opacity: 0.8 }}>
-          The lsfg script uses your current configuration settings.
-          <br />
-          • ENABLE_LSFG=1 - Enables frame generation
-          <br />
-          • LSFG_MULTIPLIER=2-4 - FPS multiplier (start with 2)
-          <br />
-          • LSFG_FLOW_SCALE=0.25-1.0 - Flow scale (for performance)
-          <br />
-          • LSFG_HDR=1 - HDR mode (only if using HDR)
-          <br />
-          • MESA_VK_WSI_PRESENT_MODE=immediate - Disable vsync
-        </div>
-      </div>
-    </PanelSectionRow>
+      </PanelSectionRow>
+
+      <WikiButton />
+    </>
   );
 }