From d95f6376798435d97b9939f4e823c6c44b355e99 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 06:37:18 +0000
Subject: [PATCH 01/17] Initial plan


From 1c41f8e5f22630f3266b3d4b15672168b66f7ba9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 06:51:10 +0000
Subject: [PATCH 02/17] feat: update support wizard with new fields and
 filtering

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte    | 80 +++++++++++++++++---
 src/routes/(console)/wizard/support/store.ts |  2 +
 2 files changed, 72 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 6c6aa7045f..3152e5640b 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Icon, Layout, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
+    import { Icon, Input, Layout, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
@@ -23,24 +23,61 @@
 
     let projectOptions: Array<{ value: string; label: string }>;
 
+    // Topic options based on category
+    const topicsByCategory = {
+        general: ['Security', 'Compliance', 'Performance'],
+        billing: ['Invoices', 'Plans'],
+        technical: ['Auth', 'Databases', 'Storage', 'Functions', 'Realtime', 'Messaging', 'Migrations', 'Webhooks', 'SDKs', 'Console']
+    };
+
+    // Severity options
+    const severityOptions = [
+        { value: 'critical', label: 'Critical' },
+        { value: 'high', label: 'High' },
+        { value: 'medium', label: 'Medium' },
+        { value: 'low', label: 'Low' },
+        { value: 'question', label: 'Question' }
+    ];
+
     onMount(async () => {
         const projectList = await sdk.forConsole.projects.list();
-        projectOptions = projectList.projects.map((project) => ({
-            value: project.$id,
-            label: project.name
-        }));
+        // Filter projects by organization ID
+        projectOptions = projectList.projects
+            .filter((project) => project.teamId === $organization?.$id)
+            .map((project) => ({
+                value: project.$id,
+                label: project.name
+            }));
     });
 
+    // Update topic options when category changes
+    $: topicOptions = ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map((topic) => ({
+        value: topic.toLowerCase(),
+        label: topic
+    }));
+
+    // Reset topic when category changes
+    $: if ($supportData.category) {
+        $supportData.topic = undefined;
+    }
+
     onDestroy(() => {
         $supportData = {
             message: null,
             subject: null,
             category: 'general',
+            topic: undefined,
+            severity: undefined,
             file: null
         };
     });
 
     async function handleSubmit() {
+        // Create category-topic tag
+        const categoryTopicTag = $supportData.topic 
+            ? `${$supportData.category}-${$supportData.topic}`.toLowerCase()
+            : $supportData.category.toLowerCase();
+
         const response = await fetch(`${VARS.GROWTH_ENDPOINT}/support`, {
             method: 'POST',
             headers: {
@@ -51,13 +88,13 @@
                 subject: $supportData.subject,
                 firstName: ($user?.name || 'Unknown').slice(0, 40),
                 message: $supportData.message,
-                tags: ['cloud'],
+                tags: ['cloud', categoryTopicTag],
                 customFields: [
                     { id: '41612', value: $supportData.category },
-                    { id: '48493', value: $user?.name ?? '' },
                     { id: '48492', value: $organization?.$id ?? '' },
                     { id: '48491', value: $supportData?.project ?? '' },
-                    { id: '48490', value: $user?.$id ?? '' }
+                    { id: '56023', value: $supportData?.severity ?? '' },
+                    { id: '56024', value: $organization?.billingPlan ?? '' }
                 ]
             })
         });
@@ -85,6 +122,8 @@
             message: null,
             subject: null,
             category: 'general',
+            topic: undefined,
+            severity: undefined,
             file: null,
             project: null
         };
@@ -113,7 +152,7 @@
             </Layout.Stack>
             <Layout.Stack gap="s">
                 <Typography.Text color="--fgcolor-neutral-secondary"
-                    >Choose a topic</Typography.Text>
+                    >Choose a category</Typography.Text>
                 <Layout.Stack gap="s" direction="row">
                     {#each ['general', 'billing', 'technical'] as category}
                         <Tag
@@ -124,13 +163,34 @@
                     {/each}
                 </Layout.Stack>
             </Layout.Stack>
-            <InputSelect
+            {#if topicOptions.length > 0}
+                <Input.ComboBox
+                    id="topic"
+                    label="Choose a topic"
+                    placeholder="Select topic"
+                    bind:value={$supportData.topic}
+                    on:select={(event) => {
+                        $supportData.topic = event.detail.value;
+                    }}
+                    options={topicOptions} />
+            {/if}
+            <Input.ComboBox
                 id="project"
                 label="Choose a project"
                 options={projectOptions ?? []}
                 bind:value={$supportData.project}
+                on:select={(event) => {
+                    $supportData.project = event.detail.value;
+                }}
                 required={false}
                 placeholder="Select project" />
+            <InputSelect
+                id="severity"
+                label="Severity"
+                options={severityOptions}
+                bind:value={$supportData.severity}
+                required={false}
+                placeholder="Select severity" />
             <InputText
                 id="subject"
                 label="Subject"
diff --git a/src/routes/(console)/wizard/support/store.ts b/src/routes/(console)/wizard/support/store.ts
index 06f671b6ad..cc556cda03 100644
--- a/src/routes/(console)/wizard/support/store.ts
+++ b/src/routes/(console)/wizard/support/store.ts
@@ -4,6 +4,8 @@ export type SupportData = {
     message: string;
     subject: string;
     category: string;
+    topic?: string;
+    severity?: string;
     file?: File | null;
     project?: string;
 };

From 939ff1199eea9d5fa5b63703b150d387ce545aca Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 06:53:13 +0000
Subject: [PATCH 03/17] fix: address code review feedback

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 3152e5640b..30e3da2641 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -51,14 +51,16 @@
     });
 
     // Update topic options when category changes
+    let previousCategory = $supportData.category;
     $: topicOptions = ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map((topic) => ({
         value: topic.toLowerCase(),
         label: topic
     }));
 
     // Reset topic when category changes
-    $: if ($supportData.category) {
+    $: if ($supportData.category !== previousCategory) {
         $supportData.topic = undefined;
+        previousCategory = $supportData.category;
     }
 
     onDestroy(() => {
@@ -169,9 +171,6 @@
                     label="Choose a topic"
                     placeholder="Select topic"
                     bind:value={$supportData.topic}
-                    on:select={(event) => {
-                        $supportData.topic = event.detail.value;
-                    }}
                     options={topicOptions} />
             {/if}
             <Input.ComboBox
@@ -179,9 +178,6 @@
                 label="Choose a project"
                 options={projectOptions ?? []}
                 bind:value={$supportData.project}
-                on:select={(event) => {
-                    $supportData.project = event.detail.value;
-                }}
                 required={false}
                 placeholder="Select project" />
             <InputSelect

From 1c1630fd7bad17e3b47e7e603c81fd8ef6fad44d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 06:54:37 +0000
Subject: [PATCH 04/17] fix: improve reactive statement by handling reset in
 click handler

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 30e3da2641..6c78756eb7 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -51,18 +51,11 @@
     });
 
     // Update topic options when category changes
-    let previousCategory = $supportData.category;
     $: topicOptions = ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map((topic) => ({
         value: topic.toLowerCase(),
         label: topic
     }));
 
-    // Reset topic when category changes
-    $: if ($supportData.category !== previousCategory) {
-        $supportData.topic = undefined;
-        previousCategory = $supportData.category;
-    }
-
     onDestroy(() => {
         $supportData = {
             message: null,
@@ -159,6 +152,9 @@
                     {#each ['general', 'billing', 'technical'] as category}
                         <Tag
                             on:click={() => {
+                                if ($supportData.category !== category) {
+                                    $supportData.topic = undefined;
+                                }
                                 $supportData.category = category;
                             }}
                             selected={$supportData.category === category}>{category}</Tag>

From 2dcfc9c8435c61aa96ffe57b323f2e28c8a1ce52 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 15:38:13 +0000
Subject: [PATCH 05/17] fix: implement PR feedback - server-side filtering,
 remove cloud tag, technical default, required severity

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte    | 25 ++++++++++----------
 src/routes/(console)/wizard/support/store.ts |  2 +-
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 6c78756eb7..ada6be61aa 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -5,6 +5,7 @@
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Form, InputSelect, InputText, InputTextarea } from '$lib/elements/forms/index.js';
+    import { Query } from '@appwrite.io/console';
 
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
@@ -40,14 +41,14 @@
     ];
 
     onMount(async () => {
-        const projectList = await sdk.forConsole.projects.list();
-        // Filter projects by organization ID
-        projectOptions = projectList.projects
-            .filter((project) => project.teamId === $organization?.$id)
-            .map((project) => ({
-                value: project.$id,
-                label: project.name
-            }));
+        // Filter projects by organization ID using server-side queries
+        const projectList = await sdk.forConsole.projects.list({
+            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
+        });
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
     });
 
     // Update topic options when category changes
@@ -60,7 +61,7 @@
         $supportData = {
             message: null,
             subject: null,
-            category: 'general',
+            category: 'technical',
             topic: undefined,
             severity: undefined,
             file: null
@@ -83,7 +84,7 @@
                 subject: $supportData.subject,
                 firstName: ($user?.name || 'Unknown').slice(0, 40),
                 message: $supportData.message,
-                tags: ['cloud', categoryTopicTag],
+                tags: [categoryTopicTag],
                 customFields: [
                     { id: '41612', value: $supportData.category },
                     { id: '48492', value: $organization?.$id ?? '' },
@@ -116,7 +117,7 @@
         $supportData = {
             message: null,
             subject: null,
-            category: 'general',
+            category: 'technical',
             topic: undefined,
             severity: undefined,
             file: null,
@@ -181,7 +182,7 @@
                 label="Severity"
                 options={severityOptions}
                 bind:value={$supportData.severity}
-                required={false}
+                required={true}
                 placeholder="Select severity" />
             <InputText
                 id="subject"
diff --git a/src/routes/(console)/wizard/support/store.ts b/src/routes/(console)/wizard/support/store.ts
index cc556cda03..2d4011c1dd 100644
--- a/src/routes/(console)/wizard/support/store.ts
+++ b/src/routes/(console)/wizard/support/store.ts
@@ -13,7 +13,7 @@ export type SupportData = {
 export const supportData = writable<SupportData>({
     message: '',
     subject: '',
-    category: 'general',
+    category: 'technical',
     file: null
 });
 

From a179e9bdf687260d4d9b2170fa5d8abaad36e9f9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Oct 2025 22:33:03 +0000
Subject: [PATCH 06/17] fix: add project search, title case tags, reset topic
 on category change

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 42 +++++++++++++++--------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index ada6be61aa..fb65b0dcc6 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -23,6 +23,19 @@
     import { IconCheckCircle, IconXCircle } from '@appwrite.io/pink-icons-svelte';
 
     let projectOptions: Array<{ value: string; label: string }>;
+    let projectSearch = '';
+
+    async function loadProjects(search: string = '') {
+        // Filter projects by organization ID using server-side queries
+        const projectList = await sdk.forConsole.projects.list({
+            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : [],
+            search: search || undefined
+        });
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
+    }
 
     // Topic options based on category
     const topicsByCategory = {
@@ -41,14 +54,7 @@
     ];
 
     onMount(async () => {
-        // Filter projects by organization ID using server-side queries
-        const projectList = await sdk.forConsole.projects.list({
-            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
-        });
-        projectOptions = projectList.projects.map((project) => ({
-            value: project.$id,
-            label: project.name
-        }));
+        await loadProjects();
     });
 
     // Update topic options when category changes
@@ -158,23 +164,29 @@
                                 }
                                 $supportData.category = category;
                             }}
-                            selected={$supportData.category === category}>{category}</Tag>
+                            selected={$supportData.category === category}>{category.charAt(0).toUpperCase() + category.slice(1)}</Tag>
                     {/each}
                 </Layout.Stack>
             </Layout.Stack>
             {#if topicOptions.length > 0}
-                <Input.ComboBox
-                    id="topic"
-                    label="Choose a topic"
-                    placeholder="Select topic"
-                    bind:value={$supportData.topic}
-                    options={topicOptions} />
+                {#key $supportData.category}
+                    <Input.ComboBox
+                        id="topic"
+                        label="Choose a topic"
+                        placeholder="Select topic"
+                        bind:value={$supportData.topic}
+                        options={topicOptions} />
+                {/key}
             {/if}
             <Input.ComboBox
                 id="project"
                 label="Choose a project"
                 options={projectOptions ?? []}
                 bind:value={$supportData.project}
+                bind:search={projectSearch}
+                on:search={async (event) => {
+                    await loadProjects(event.detail);
+                }}
                 required={false}
                 placeholder="Select project" />
             <InputSelect

From 34d285f0b915bc3c19cec5eb0f781a0f9564885e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 04:08:45 +0000
Subject: [PATCH 07/17] fix: remove server-side search and use title-cased
 category list

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 39 +++++++++++------------
 1 file changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index fb65b0dcc6..22d7a111c1 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -23,19 +23,13 @@
     import { IconCheckCircle, IconXCircle } from '@appwrite.io/pink-icons-svelte';
 
     let projectOptions: Array<{ value: string; label: string }>;
-    let projectSearch = '';
 
-    async function loadProjects(search: string = '') {
-        // Filter projects by organization ID using server-side queries
-        const projectList = await sdk.forConsole.projects.list({
-            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : [],
-            search: search || undefined
-        });
-        projectOptions = projectList.projects.map((project) => ({
-            value: project.$id,
-            label: project.name
-        }));
-    }
+    // Category options with display names
+    const categories = [
+        { value: 'general', label: 'General' },
+        { value: 'billing', label: 'Billing' },
+        { value: 'technical', label: 'Technical' }
+    ];
 
     // Topic options based on category
     const topicsByCategory = {
@@ -54,7 +48,14 @@
     ];
 
     onMount(async () => {
-        await loadProjects();
+        // Filter projects by organization ID using server-side queries
+        const projectList = await sdk.forConsole.projects.list({
+            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
+        });
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
     });
 
     // Update topic options when category changes
@@ -156,15 +157,15 @@
                 <Typography.Text color="--fgcolor-neutral-secondary"
                     >Choose a category</Typography.Text>
                 <Layout.Stack gap="s" direction="row">
-                    {#each ['general', 'billing', 'technical'] as category}
+                    {#each categories as category}
                         <Tag
                             on:click={() => {
-                                if ($supportData.category !== category) {
+                                if ($supportData.category !== category.value) {
                                     $supportData.topic = undefined;
                                 }
-                                $supportData.category = category;
+                                $supportData.category = category.value;
                             }}
-                            selected={$supportData.category === category}>{category.charAt(0).toUpperCase() + category.slice(1)}</Tag>
+                            selected={$supportData.category === category.value}>{category.label}</Tag>
                     {/each}
                 </Layout.Stack>
             </Layout.Stack>
@@ -183,10 +184,6 @@
                 label="Choose a project"
                 options={projectOptions ?? []}
                 bind:value={$supportData.project}
-                bind:search={projectSearch}
-                on:search={async (event) => {
-                    await loadProjects(event.detail);
-                }}
                 required={false}
                 placeholder="Select project" />
             <InputSelect

From d8ddc55a8b77ab2e5e9cc0265e64e2e466c22876 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 05:04:44 +0000
Subject: [PATCH 08/17] feat: add severity level descriptions popover

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 33 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 22d7a111c1..0d4b938d1b 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Icon, Input, Layout, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
+    import { Icon, Input, Layout, Popover, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
@@ -20,7 +20,7 @@
     import { wizard } from '$lib/stores/wizard';
     import { VARS } from '$lib/system';
     import { onDestroy } from 'svelte';
-    import { IconCheckCircle, IconXCircle } from '@appwrite.io/pink-icons-svelte';
+    import { IconCheckCircle, IconXCircle, IconInfo } from '@appwrite.io/pink-icons-svelte';
 
     let projectOptions: Array<{ value: string; label: string }>;
 
@@ -192,7 +192,34 @@
                 options={severityOptions}
                 bind:value={$supportData.severity}
                 required={true}
-                placeholder="Select severity" />
+                placeholder="Select severity">
+                <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+                    <Popover let:toggle>
+                        <Button extraCompact size="s" on:click={toggle}>
+                            <Icon size="s" icon={IconInfo} />
+                        </Button>
+                        <div slot="tooltip" style="max-width: 400px;">
+                            <Layout.Stack gap="s">
+                                <Typography.Text>
+                                    <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Question:</strong> Requests for information, general guidance, or feature requests.
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </div>
+                    </Popover>
+                </Layout.Stack>
+            </InputSelect>
             <InputText
                 id="subject"
                 label="Subject"

From a7fa5aaef4c2395b68df491893080ee2782966d8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 06:00:03 +0000
Subject: [PATCH 09/17] fix: correct Button import and remove unnecessary
 Layout.Stack

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 60 +++++++++++------------
 1 file changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 0d4b938d1b..67db490b05 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Icon, Input, Layout, Popover, Tag, Typography, Button, Card } from '@appwrite.io/pink-svelte';
+    import { Icon, Input, Layout, Popover, Tag, Typography, Button as ButtonModule, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { Form, InputSelect, InputText, InputTextarea } from '$lib/elements/forms/index.js';
+    import { Form, InputSelect, InputText, InputTextarea, Button } from '$lib/elements/forms/index.js';
     import { Query } from '@appwrite.io/console';
 
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
@@ -193,32 +193,30 @@
                 bind:value={$supportData.severity}
                 required={true}
                 placeholder="Select severity">
-                <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
-                    <Popover let:toggle>
-                        <Button extraCompact size="s" on:click={toggle}>
-                            <Icon size="s" icon={IconInfo} />
-                        </Button>
-                        <div slot="tooltip" style="max-width: 400px;">
-                            <Layout.Stack gap="s">
-                                <Typography.Text>
-                                    <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <strong>Question:</strong> Requests for information, general guidance, or feature requests.
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </div>
-                    </Popover>
-                </Layout.Stack>
+                <Popover let:toggle slot="info">
+                    <Button extraCompact size="s" on:click={toggle}>
+                        <Icon size="s" icon={IconInfo} />
+                    </Button>
+                    <div slot="tooltip" style="max-width: 400px;">
+                        <Layout.Stack gap="s">
+                            <Typography.Text>
+                                <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
+                            </Typography.Text>
+                            <Typography.Text>
+                                <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
+                            </Typography.Text>
+                            <Typography.Text>
+                                <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
+                            </Typography.Text>
+                            <Typography.Text>
+                                <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
+                            </Typography.Text>
+                            <Typography.Text>
+                                <strong>Question:</strong> Requests for information, general guidance, or feature requests.
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </div>
+                </Popover>
             </InputSelect>
             <InputText
                 id="subject"
@@ -234,13 +232,13 @@
                 label="Tell us a bit more"
                 maxlength={4096} />
             <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
-                <Button.Button
+                <ButtonModule.Button
                     size="s"
                     variant="secondary"
                     on:click={() => {
                         wizard.hide();
-                    }}>Cancel</Button.Button>
-                <Button.Button size="s">Submit</Button.Button>
+                    }}>Cancel</ButtonModule.Button>
+                <ButtonModule.Button size="s">Submit</ButtonModule.Button>
             </Layout.Stack>
         </Layout.Stack>
     </Form>

From 6515a64e11f5ef17b75812363243780448103c64 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 07:00:41 +0000
Subject: [PATCH 10/17] fix: restore Layout.Stack wrapper for Popover in slot
 info

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 50 ++++++++++++-----------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 67db490b05..9042471f3f 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -193,30 +193,32 @@
                 bind:value={$supportData.severity}
                 required={true}
                 placeholder="Select severity">
-                <Popover let:toggle slot="info">
-                    <Button extraCompact size="s" on:click={toggle}>
-                        <Icon size="s" icon={IconInfo} />
-                    </Button>
-                    <div slot="tooltip" style="max-width: 400px;">
-                        <Layout.Stack gap="s">
-                            <Typography.Text>
-                                <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
-                            </Typography.Text>
-                            <Typography.Text>
-                                <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
-                            </Typography.Text>
-                            <Typography.Text>
-                                <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
-                            </Typography.Text>
-                            <Typography.Text>
-                                <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
-                            </Typography.Text>
-                            <Typography.Text>
-                                <strong>Question:</strong> Requests for information, general guidance, or feature requests.
-                            </Typography.Text>
-                        </Layout.Stack>
-                    </div>
-                </Popover>
+                <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+                    <Popover let:toggle>
+                        <Button extraCompact size="s" on:click={toggle}>
+                            <Icon size="s" icon={IconInfo} />
+                        </Button>
+                        <div slot="tooltip" style="max-width: 400px;">
+                            <Layout.Stack gap="s">
+                                <Typography.Text>
+                                    <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
+                                </Typography.Text>
+                                <Typography.Text>
+                                    <strong>Question:</strong> Requests for information, general guidance, or feature requests.
+                                </Typography.Text>
+                            </Layout.Stack>
+                        </div>
+                    </Popover>
+                </Layout.Stack>
             </InputSelect>
             <InputText
                 id="subject"

From 30f366cd7e18b3ea646bec2d89bcbbf12087f77d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Tue, 28 Oct 2025 00:15:37 -0700
Subject: [PATCH 11/17] fix: show popover on click

---
 src/routes/(console)/supportWizard.svelte | 60 ++++++++++++++++-------
 1 file changed, 42 insertions(+), 18 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 9042471f3f..4c87ea297b 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -1,12 +1,17 @@
 <script lang="ts">
     import { Wizard } from '$lib/layout';
-    import { Icon, Input, Layout, Popover, Tag, Typography, Button as ButtonModule, Card } from '@appwrite.io/pink-svelte';
+    import { Icon, Input, Layout, Popover, Tag, Typography, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
-    import { Form, InputSelect, InputText, InputTextarea, Button } from '$lib/elements/forms/index.js';
+    import {
+        Form,
+        InputSelect,
+        InputText,
+        InputTextarea,
+        Button
+    } from '$lib/elements/forms/index.js';
     import { Query } from '@appwrite.io/console';
-
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import {
         localeTimezoneName,
@@ -35,7 +40,18 @@
     const topicsByCategory = {
         general: ['Security', 'Compliance', 'Performance'],
         billing: ['Invoices', 'Plans'],
-        technical: ['Auth', 'Databases', 'Storage', 'Functions', 'Realtime', 'Messaging', 'Migrations', 'Webhooks', 'SDKs', 'Console']
+        technical: [
+            'Auth',
+            'Databases',
+            'Storage',
+            'Functions',
+            'Realtime',
+            'Messaging',
+            'Migrations',
+            'Webhooks',
+            'SDKs',
+            'Console'
+        ]
     };
 
     // Severity options
@@ -59,7 +75,9 @@
     });
 
     // Update topic options when category changes
-    $: topicOptions = ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map((topic) => ({
+    $: topicOptions = (
+        $supportData.category ? topicsByCategory[$supportData.category] || [] : []
+    ).map((topic) => ({
         value: topic.toLowerCase(),
         label: topic
     }));
@@ -77,7 +95,7 @@
 
     async function handleSubmit() {
         // Create category-topic tag
-        const categoryTopicTag = $supportData.topic 
+        const categoryTopicTag = $supportData.topic
             ? `${$supportData.category}-${$supportData.topic}`.toLowerCase()
             : $supportData.category.toLowerCase();
 
@@ -165,7 +183,8 @@
                                 }
                                 $supportData.category = category.value;
                             }}
-                            selected={$supportData.category === category.value}>{category.label}</Tag>
+                            selected={$supportData.category === category.value}
+                            >{category.label}</Tag>
                     {/each}
                 </Layout.Stack>
             </Layout.Stack>
@@ -193,7 +212,7 @@
                 bind:value={$supportData.severity}
                 required={true}
                 placeholder="Select severity">
-                <Layout.Stack direction="row" gap="none" alignItems="center" slot="info">
+                <div slot="info">
                     <Popover let:toggle>
                         <Button extraCompact size="s" on:click={toggle}>
                             <Icon size="s" icon={IconInfo} />
@@ -201,24 +220,29 @@
                         <div slot="tooltip" style="max-width: 400px;">
                             <Layout.Stack gap="s">
                                 <Typography.Text>
-                                    <strong>Critical:</strong> System is down or a critical component is non-functional, causing a complete stoppage of work or significant business impact.
+                                    <b>Critical:</b> System is down or a critical component is non-functional,
+                                    causing a complete stoppage of work or significant business impact.
                                 </Typography.Text>
                                 <Typography.Text>
-                                    <strong>High:</strong> Major functionality is impaired, but a workaround is available, or a critical component is significantly degraded.
+                                    <b>High:</b> Major functionality is impaired, but a workaround is
+                                    available, or a critical component is significantly degraded.
                                 </Typography.Text>
                                 <Typography.Text>
-                                    <strong>Medium:</strong> Minor functionality is impaired without significant business impact.
+                                    <b>Medium:</b> Minor functionality is impaired without significant
+                                    business impact.
                                 </Typography.Text>
                                 <Typography.Text>
-                                    <strong>Low:</strong> Issue has minor impact on business operations; workaround is not necessary.
+                                    <b>Low:</b> Issue has minor impact on business operations; workaround
+                                    is not necessary.
                                 </Typography.Text>
                                 <Typography.Text>
-                                    <strong>Question:</strong> Requests for information, general guidance, or feature requests.
+                                    <b>Question:</b> Requests for information, general guidance, or feature
+                                    requests.
                                 </Typography.Text>
                             </Layout.Stack>
                         </div>
                     </Popover>
-                </Layout.Stack>
+                </div>
             </InputSelect>
             <InputText
                 id="subject"
@@ -234,13 +258,13 @@
                 label="Tell us a bit more"
                 maxlength={4096} />
             <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
-                <ButtonModule.Button
+                <Button
                     size="s"
-                    variant="secondary"
+                    secondary
                     on:click={() => {
                         wizard.hide();
-                    }}>Cancel</ButtonModule.Button>
-                <ButtonModule.Button size="s">Submit</ButtonModule.Button>
+                    }}>Cancel</Button>
+                <Button size="s">Submit</Button>
             </Layout.Stack>
         </Layout.Stack>
     </Form>

From 32af398cd74a087cbcc365140a33526aa80cd47d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:24:39 +0000
Subject: [PATCH 12/17] refactor: migrate to Svelte 5 runes and extract popover
 to snippet

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 136 ++++++++++++----------
 1 file changed, 74 insertions(+), 62 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 4c87ea297b..d609c1805b 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -2,7 +2,6 @@
     import { Wizard } from '$lib/layout';
     import { Icon, Input, Layout, Popover, Tag, Typography, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
-    import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import {
         Form,
@@ -24,10 +23,9 @@
     import { user } from '$lib/stores/user';
     import { wizard } from '$lib/stores/wizard';
     import { VARS } from '$lib/system';
-    import { onDestroy } from 'svelte';
     import { IconCheckCircle, IconXCircle, IconInfo } from '@appwrite.io/pink-icons-svelte';
 
-    let projectOptions: Array<{ value: string; label: string }>;
+    let projectOptions = $state<Array<{ value: string; label: string }>>([]);
 
     // Category options with display names
     const categories = [
@@ -63,36 +61,42 @@
         { value: 'question', label: 'Question' }
     ];
 
-    onMount(async () => {
+    $effect(() => {
         // Filter projects by organization ID using server-side queries
-        const projectList = await sdk.forConsole.projects.list({
-            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
-        });
-        projectOptions = projectList.projects.map((project) => ({
-            value: project.$id,
-            label: project.name
-        }));
-    });
-
-    // Update topic options when category changes
-    $: topicOptions = (
-        $supportData.category ? topicsByCategory[$supportData.category] || [] : []
-    ).map((topic) => ({
-        value: topic.toLowerCase(),
-        label: topic
-    }));
+        sdk.forConsole.projects
+            .list({
+                queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
+            })
+            .then((projectList) => {
+                projectOptions = projectList.projects.map((project) => ({
+                    value: project.$id,
+                    label: project.name
+                }));
+            });
 
-    onDestroy(() => {
-        $supportData = {
-            message: null,
-            subject: null,
-            category: 'technical',
-            topic: undefined,
-            severity: undefined,
-            file: null
+        // Cleanup on destroy
+        return () => {
+            $supportData = {
+                message: null,
+                subject: null,
+                category: 'technical',
+                topic: undefined,
+                severity: undefined,
+                file: null
+            };
         };
     });
 
+    // Update topic options when category changes
+    let topicOptions = $derived(
+        ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map(
+            (topic) => ({
+                value: topic.toLowerCase(),
+                label: topic
+            })
+        )
+    );
+
     async function handleSubmit() {
         // Create category-topic tag
         const categoryTopicTag = $supportData.topic
@@ -159,10 +163,48 @@
         endDay: 'Friday' as WeekDay
     };
 
-    $: supportTimings = `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`;
-    $: supportWeekDays = `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`;
+    let supportTimings = $derived(
+        `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`
+    );
+    let supportWeekDays = $derived(
+        `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`
+    );
 </script>
 
+{#snippet severityPopover()}
+    <div slot="info">
+        <Popover let:toggle>
+            <Button extraCompact size="s" on:click={toggle}>
+                <Icon size="s" icon={IconInfo} />
+            </Button>
+            <div slot="tooltip" style="max-width: 400px;">
+                <Layout.Stack gap="s">
+                    <Typography.Text>
+                        <b>Critical:</b> System is down or a critical component is non-functional,
+                        causing a complete stoppage of work or significant business impact.
+                    </Typography.Text>
+                    <Typography.Text>
+                        <b>High:</b> Major functionality is impaired, but a workaround is
+                        available, or a critical component is significantly degraded.
+                    </Typography.Text>
+                    <Typography.Text>
+                        <b>Medium:</b> Minor functionality is impaired without significant business
+                        impact.
+                    </Typography.Text>
+                    <Typography.Text>
+                        <b>Low:</b> Issue has minor impact on business operations; workaround is
+                        not necessary.
+                    </Typography.Text>
+                    <Typography.Text>
+                        <b>Question:</b> Requests for information, general guidance, or feature
+                        requests.
+                    </Typography.Text>
+                </Layout.Stack>
+            </div>
+        </Popover>
+    </div>
+{/snippet}
+
 <Wizard title="Contact us" confirmExit={true}>
     <Form onSubmit={handleSubmit}>
         <Layout.Stack gap="xl">
@@ -210,39 +252,9 @@
                 label="Severity"
                 options={severityOptions}
                 bind:value={$supportData.severity}
-                required={true}
+                required
                 placeholder="Select severity">
-                <div slot="info">
-                    <Popover let:toggle>
-                        <Button extraCompact size="s" on:click={toggle}>
-                            <Icon size="s" icon={IconInfo} />
-                        </Button>
-                        <div slot="tooltip" style="max-width: 400px;">
-                            <Layout.Stack gap="s">
-                                <Typography.Text>
-                                    <b>Critical:</b> System is down or a critical component is non-functional,
-                                    causing a complete stoppage of work or significant business impact.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <b>High:</b> Major functionality is impaired, but a workaround is
-                                    available, or a critical component is significantly degraded.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <b>Medium:</b> Minor functionality is impaired without significant
-                                    business impact.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <b>Low:</b> Issue has minor impact on business operations; workaround
-                                    is not necessary.
-                                </Typography.Text>
-                                <Typography.Text>
-                                    <b>Question:</b> Requests for information, general guidance, or feature
-                                    requests.
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </div>
-                    </Popover>
-                </div>
+                {@render severityPopover()}
             </InputSelect>
             <InputText
                 id="subject"

From aac72493c9b0d1dfc325fefdc422f44898e42f8e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 28 Oct 2025 15:06:55 +0000
Subject: [PATCH 13/17] fix: use onMount instead of $effect for project loading

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 24 +++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index d609c1805b..bc3cb22225 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -2,6 +2,7 @@
     import { Wizard } from '$lib/layout';
     import { Icon, Input, Layout, Popover, Tag, Typography, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
+    import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import {
         Form,
@@ -61,20 +62,19 @@
         { value: 'question', label: 'Question' }
     ];
 
-    $effect(() => {
+    onMount(async () => {
         // Filter projects by organization ID using server-side queries
-        sdk.forConsole.projects
-            .list({
-                queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
-            })
-            .then((projectList) => {
-                projectOptions = projectList.projects.map((project) => ({
-                    value: project.$id,
-                    label: project.name
-                }));
-            });
+        const projectList = await sdk.forConsole.projects.list({
+            queries: $organization?.$id ? [Query.equal('teamId', $organization.$id)] : []
+        });
+        projectOptions = projectList.projects.map((project) => ({
+            value: project.$id,
+            label: project.name
+        }));
+    });
 
-        // Cleanup on destroy
+    // Cleanup on component destroy
+    $effect(() => {
         return () => {
             $supportData = {
                 message: null,

From d43e72fe9a4c4dcbab319c0a6cde64c42199c50d Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 29 Oct 2025 13:42:54 -0700
Subject: [PATCH 14/17] chore: fix diagnostic error

---
 src/routes/(console)/supportWizard.svelte | 61 +++++++++++------------
 1 file changed, 29 insertions(+), 32 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index bc3cb22225..39be19ceb8 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -172,37 +172,32 @@
 </script>
 
 {#snippet severityPopover()}
-    <div slot="info">
-        <Popover let:toggle>
-            <Button extraCompact size="s" on:click={toggle}>
-                <Icon size="s" icon={IconInfo} />
-            </Button>
-            <div slot="tooltip" style="max-width: 400px;">
-                <Layout.Stack gap="s">
-                    <Typography.Text>
-                        <b>Critical:</b> System is down or a critical component is non-functional,
-                        causing a complete stoppage of work or significant business impact.
-                    </Typography.Text>
-                    <Typography.Text>
-                        <b>High:</b> Major functionality is impaired, but a workaround is
-                        available, or a critical component is significantly degraded.
-                    </Typography.Text>
-                    <Typography.Text>
-                        <b>Medium:</b> Minor functionality is impaired without significant business
-                        impact.
-                    </Typography.Text>
-                    <Typography.Text>
-                        <b>Low:</b> Issue has minor impact on business operations; workaround is
-                        not necessary.
-                    </Typography.Text>
-                    <Typography.Text>
-                        <b>Question:</b> Requests for information, general guidance, or feature
-                        requests.
-                    </Typography.Text>
-                </Layout.Stack>
-            </div>
-        </Popover>
-    </div>
+    <Popover let:toggle>
+        <Button extraCompact size="s" on:click={toggle}>
+            <Icon size="s" icon={IconInfo} />
+        </Button>
+        <div slot="tooltip" style="max-width: 400px;">
+            <Layout.Stack gap="s">
+                <Typography.Text>
+                    <b>Critical:</b> System is down or a critical component is non-functional, causing
+                    a complete stoppage of work or significant business impact.
+                </Typography.Text>
+                <Typography.Text>
+                    <b>High:</b> Major functionality is impaired, but a workaround is available, or a
+                    critical component is significantly degraded.
+                </Typography.Text>
+                <Typography.Text>
+                    <b>Medium:</b> Minor functionality is impaired without significant business impact.
+                </Typography.Text>
+                <Typography.Text>
+                    <b>Low:</b> Issue has minor impact on business operations; workaround is not necessary.
+                </Typography.Text>
+                <Typography.Text>
+                    <b>Question:</b> Requests for information, general guidance, or feature requests.
+                </Typography.Text>
+            </Layout.Stack>
+        </div>
+    </Popover>
 {/snippet}
 
 <Wizard title="Contact us" confirmExit={true}>
@@ -254,7 +249,9 @@
                 bind:value={$supportData.severity}
                 required
                 placeholder="Select severity">
-                {@render severityPopover()}
+                <div slot="info">
+                    {@render severityPopover()}
+                </div>
             </InputSelect>
             <InputText
                 id="subject"

From 3db73953805fa6a861a2ac81c9b1fa0ac8e152d8 Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Thu, 30 Oct 2025 14:00:43 -0700
Subject: [PATCH 15/17] fix: ensure submit button submits

---
 src/routes/(console)/supportWizard.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 39be19ceb8..22467ac408 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -273,7 +273,7 @@
                     on:click={() => {
                         wizard.hide();
                     }}>Cancel</Button>
-                <Button size="s">Submit</Button>
+                <Button submit size="s">Submit</Button>
             </Layout.Stack>
         </Layout.Stack>
     </Form>

From 8a02f948c43f70d948a326073f46f1fe7540441f Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Wed, 5 Nov 2025 13:54:23 -0800
Subject: [PATCH 16/17] fix: update support form

- set default severity to question since there needs to be a value set but the required attribute on InputSelect doesn't work
- require details
---
 src/routes/(console)/supportWizard.svelte    | 3 ++-
 src/routes/(console)/wizard/support/store.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index 22467ac408..a7574c511f 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -81,7 +81,7 @@
                 subject: null,
                 category: 'technical',
                 topic: undefined,
-                severity: undefined,
+                severity: 'question',
                 file: null
             };
         };
@@ -265,6 +265,7 @@
                 bind:value={$supportData.message}
                 placeholder="Type here..."
                 label="Tell us a bit more"
+                required
                 maxlength={4096} />
             <Layout.Stack direction="row" justifyContent="flex-end" gap="s">
                 <Button
diff --git a/src/routes/(console)/wizard/support/store.ts b/src/routes/(console)/wizard/support/store.ts
index 2d4011c1dd..56d0e76b29 100644
--- a/src/routes/(console)/wizard/support/store.ts
+++ b/src/routes/(console)/wizard/support/store.ts
@@ -14,6 +14,7 @@ export const supportData = writable<SupportData>({
     message: '',
     subject: '',
     category: 'technical',
+    severity: 'question',
     file: null
 });
 

From 5898e21ae8dc007d48c8150f72e2b3b7fb291f44 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 6 Nov 2025 17:21:42 +0000
Subject: [PATCH 17/17] refactor: use onDestroy instead of $effect and const
 for $derived

Co-authored-by: stnguyen90 <1477010+stnguyen90@users.noreply.github.com>
---
 src/routes/(console)/supportWizard.svelte | 26 +++++++++++------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/routes/(console)/supportWizard.svelte b/src/routes/(console)/supportWizard.svelte
index fb76b513eb..5c7731121b 100644
--- a/src/routes/(console)/supportWizard.svelte
+++ b/src/routes/(console)/supportWizard.svelte
@@ -2,7 +2,7 @@
     import { Wizard } from '$lib/layout';
     import { Icon, Input, Layout, Popover, Tag, Typography, Card } from '@appwrite.io/pink-svelte';
     import { supportData, isSupportOnline } from './wizard/support/store';
-    import { onMount } from 'svelte';
+    import { onMount, onDestroy } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import {
         Form,
@@ -74,21 +74,19 @@
     });
 
     // Cleanup on component destroy
-    $effect(() => {
-        return () => {
-            $supportData = {
-                message: null,
-                subject: null,
-                category: 'technical',
-                topic: undefined,
-                severity: 'question',
-                file: null
-            };
+    onDestroy(() => {
+        $supportData = {
+            message: null,
+            subject: null,
+            category: 'technical',
+            topic: undefined,
+            severity: 'question',
+            file: null
         };
     });
 
     // Update topic options when category changes
-    let topicOptions = $derived(
+    const topicOptions = $derived(
         ($supportData.category ? topicsByCategory[$supportData.category] || [] : []).map(
             (topic) => ({
                 value: topic.toLowerCase(),
@@ -163,10 +161,10 @@
         endDay: 'Friday' as WeekDay
     };
 
-    let supportTimings = $derived(
+    const supportTimings = $derived(
         `${utcHourToLocaleHour(workTimings.start)} - ${utcHourToLocaleHour(workTimings.end)} ${localeTimezoneName()}`
     );
-    let supportWeekDays = $derived(
+    const supportWeekDays = $derived(
         `${utcWeekDayToLocaleWeekDay(workTimings.startDay, workTimings.start)} - ${utcWeekDayToLocaleWeekDay(workTimings.endDay, workTimings.end)}`
     );
 </script>