Repository: danielmiessler/fabric
File: web/src/lib/components/chat/DropdownGroup.svelte (Svelte)

Code before:
    { code: 'ja', name: 'Japanese' },
    { code: 'it', name: 'Italian' }
  ];

  let variablesJsonString = '';

  // Parse JSON string and update variables store
  function updateVariables() {
    try {
      if (variablesJsonString.trim() === '') {
        patternVariables.set({});
      } else {
        const parsed = JSON.parse(variablesJsonString);
        if (typeof parsed === 'object' && parsed !== null && !Array.isArray(parsed)) {
          patternVariables.set(parsed);
        }
      }
    } catch (e) {
      // Don't update the store if JSON is invalid - just ignore the error
      // This allows partial typing without breaking
    }
  }

  onMount(() => {
    fetchStrategies();
    sessionAPI.loadSessions();
    sessionInput = $currentSession || '';
  });
</script>

<div class="flex gap-4">
  <!-- Left side - Dropdowns -->
  <div class="w-[35%] flex flex-col gap-3">
    <div>
      <Patterns />
    </div>
    <div>
      <Models />
    </div>
    <div>
      <Select
        bind:value={$languageStore}
        class="bg-primary-800/30 border-none hover:bg-primary-800/40 transition-colors"
      >
        {#each languages as lang}
          <option value={lang.code}>{lang.name}</option>
        {/each}
      </Select>
    </div>
    <div>
      <Select

Review comment (bug):
This is called without error handling. Compare to the similar code in `SessionManager` (lines 15-21):

```javascript
onMount(async () => {
    try {
      await sessionAPI.loadSessions();
    } catch (error) {
      console.error('Failed to load sessions:', error);
    }
  });
```

So it should be something similar, like:

```javascript
onMount(async () => {
  fetchStrategies();
  try {
    await sessionAPI.loadSessions();
  } catch (error) {
    console.error('Failed to load sessions:', error);
  }
  sessionInput = $currentSession || '';
});
```

In addition, the session handling being in two places (here and in `SessionManager`) can introduce potential race conditions and unnecessary API calls. The session loading should happen once, ideally when the application initializes.

Code after:
  }

  onMount(() => {
    fetchStrategies();
  });
</script>

<div class="flex gap-4">
  <!-- Left side - Dropdowns -->
  <div class="w-[35%] flex flex-col gap-3">
    <div>
      <Patterns />
    </div>
    <div>
      <Models />
    </div>
    <div>
      <Select
        bind:value={$languageStore}
        class="bg-primary-800/30 border-none hover:bg-primary-800/40 transition-colors"
      >
        {#each languages as lang}
          <option value={lang.code}>{lang.name}</option>
        {/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>
    <SessionSelector />
    <div>
      <Label for="pattern-variables" class="text-xs text-white/70 mb-1 block">Pattern Variables (JSON)</Label>
      <textarea
        id="pattern-variables"
        bind:value={variablesJsonString}
        on:input={updateVariables}
        placeholder="{`{\"lang_code\": \"fr\", \"role\": \"expert\"}`}"
        class="w-full h-20 px-3 py-2 text-sm bg-primary-800/30 border-none rounded-md hover:bg-primary-800/40 transition-colors text-white placeholder-white/50 resize-none focus:ring-1 focus:ring-white/20 focus:outline-none"
        style="font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;"
      ></textarea>
    </div>
  </div>