Integrate in web ui the strategy flag enhancement first developed in fabric cli

web/Web Interface Update README Files/pr-1284-update.md

@@ -35,6 +35,11 @@ https://youtu.be/fcVitd4Kb98
 
 The tag filtering system has been deeply integrated into the Pattern Selection interface through several UI enhancements:
 
+### 5. Strategy flags
+- strategies are fetch from .config/fabric/strategies for server processing
+- for gui, they are fetched from static/strategies 
+
+
 1. **Dual-Position Tag Panel**
    - Sliding panel positioned to the right of pattern modal
    - Dynamic toggle button that adapts position and text based on panel state

web/src/lib/components/chat/DropdownGroup.svelte

@@ -4,6 +4,8 @@
   import ModelConfig from "./ModelConfig.svelte";
   import { Select } from "$lib/components/ui/select";
   import { languageStore } from '$lib/store/language-store';
+  import { strategies, selectedStrategy, fetchStrategies } from '$lib/store/strategy-store';
+  import { onMount } from 'svelte';
 
   const languages = [
     { code: '', name: 'Default Language' },
@@ -15,6 +17,10 @@
     { code: 'ja', name: 'Japanese' },
     { code: 'it', name: 'Italian' }
   ];
+
+  onMount(() => {
+    fetchStrategies();
+  });
 </script>
 
 <div class="flex gap-4">
@@ -36,6 +42,17 @@
         {/each}
       </Select>
     </div>
+    <div>
+      <Select 
+        bind:value={$selectedStrategy}
+        class="bg-primary-800/30 border-none hover:bg-primary-800/40 transition-colors"
+      >
+        <option value="">None</option>
+        {#each $strategies as strategy}
+          <option value={strategy.name}>{strategy.name} - {strategy.description}</option>
+        {/each}
+      </Select>
+    </div>
   </div>
   
   <!-- Right side - Model Config -->

web/src/lib/interfaces/chat-interface.ts

@@ -6,7 +6,8 @@ export interface ChatPrompt {
   userInput: string;
   systemPrompt: string;
   model: string;
-  patternName: string;
+  patternName?: string;
+  strategyName?: string; // Optional strategy name to prepend strategy prompt
 }
 
 export interface ChatConfig {

web/src/lib/services/ChatService.ts

@@ -10,6 +10,7 @@ import { systemPrompt, selectedPatternName } from '$lib/store/pattern-store';
 import { chatConfig } from '$lib/store/chat-config';
 import { messageStore } from '$lib/store/chat-store';
 import { languageStore } from '$lib/store/language-store';
+import { selectedStrategy } from '$lib/store/strategy-store';
 
 class LanguageValidator {
   constructor(private targetLanguage: string) {}
@@ -179,7 +180,8 @@ export class ChatService {
         userInput: finalUserInput,
         systemPrompt: finalSystemPrompt,
         model: config.model,
-        patternName: get(selectedPatternName)
+        patternName: get(selectedPatternName),
+        strategyName: get(selectedStrategy) // Add selected strategy to prompt
     };
 }
 

web/src/lib/store/strategy-store.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store';
+
+/**
+ * List of available strategies fetched from backend.
+ * Each strategy has a name and description.
+ */
+export const strategies = writable<Array<{ name: string; description: string }>>([]);
+
+/**
+ * Currently selected strategy name.
+ * Default is empty string meaning "None".
+ */
+export const selectedStrategy = writable<string>("");
+
+/**
+ * Fetches available strategies from the backend `/strategies` endpoint.
+ * Populates the `strategies` store.
+ */
+export async function fetchStrategies() {
+  try {
+    const response = await fetch('/strategies/strategies.json');
+    if (!response.ok) {
+      console.error('Failed to fetch strategies:', response.statusText);
+      return;
+    }
+    const data = await response.json();
+    // Expecting an array of { name, description }
+    strategies.set(data);
+  } catch (error) {
+    console.error('Error fetching strategies:', error);
+  }
+}

web/static/strategies/strategies.json

@@ -0,0 +1,11 @@
+[
+  { "name": "cod", "description": "Chain-of-Density (CoD)" },
+  { "name": "cot", "description": "Chain-of-Thought (CoT) Prompting" },
+  { "name": "ltm", "description": "Least-to-Most Prompting" },
+  { "name": "reflexion", "description": "Reflexion Prompting" },
+  { "name": "self-consistent", "description": "Self-Consistency Prompting" },
+  { "name": "self-refine", "description": "Self-Refinement" },
+  { "name": "standard", "description": "Standard Prompting" },
+  { "name": "test", "description": "Test strategy" },
+  { "name": "tot", "description": "Tree-of-Thoughts (ToT)" }
+]