Fix/frontend optimizations (#2088)

* fix(web): auto-redirect to wizard on first visit and change sidebar icons to blue

* refactor(wizard): use backend metadata table instead of localStorage for wizard completion state

- Add wizard_completed field to system info API (read from metadata table)
- Add POST /api/v1/system/wizard/completed endpoint to mark wizard done
- Frontend home layout checks systemInfo.wizard_completed for auto-redirect
- Wizard calls markWizardCompleted API on skip/finish
- Ensures consistent behavior across all browsers on the same instance

* fix(wizard): update systemInfo in memory before navigation to prevent redirect loop

* fix(monitoring): prevent horizontal overflow and unify empty state styles

* fix(wizard): use Object.assign for systemInfo and await wizard completion API

- Replace systemInfo reassignment with Object.assign in all 3 locations
  to preserve object identity across module imports
- Await markWizardCompleted() POST in wizard skip/finish handlers
  instead of fire-and-forget to ensure backend persistence
- Always re-fetch systemInfo in home layout to get latest
  wizard_completed state from backend

* fix(wizard): prevent redirect loop by blocking navigation on failed status save

- Refactor wizard_completed (boolean) to wizard_status (string: none/skipped/completed)
- Remove ALL localStorage usage from wizard page (form state persistence)
- Replace AlertDialogAction with Button so skip dialog stays open during POST
- Add loading spinners for skip and complete actions
- If POST fails, show error toast and keep dialog/button active for retry
- If POST succeeds, update in-memory state and navigate

* fix(wizard): fix row[0].value bug causing GET /info to always return wizard_status=none

conn.execute(select(Entity)) returns Row with raw column values, not ORM
entities. row[0] is the key column (a string), so row[0].value raises
AttributeError which was silently swallowed by except-pass, making the
GET endpoint always return wizard_status=none regardless of DB state.

* fix(wizard): replace AlertDialog with Dialog for skip confirmation to remove slide animation

* chore: optimize toast in wizard

* fix(wizard): set default token value for Telegram adapter and initialize adapter config in wizard

* feat(web): move webhook URL to dynamic form system, add market category filter, fix layout overflow

- Add 'webhook-url' dynamic form field type rendered as read-only input
  with copy button, defined in adapter YAML specs instead of hardcoded
  in BotForm. Supports show_if conditions for optional-webhook adapters.
- Remove hardcoded webhook display logic from BotForm.tsx, pass webhook
  URLs via systemContext to DynamicFormComponent.
- Fetch webhook URLs after bot creation in wizard and pass to Step 1.
- Support ?category= query param on /home/market page for filtering by
  component type (mirrors langbot-space behavior).
- Link 'install knowledge engine' hint to /home/market?category=KnowledgeEngine.
- Fix SidebarInset missing min-w-0 causing content overflow when sidebar
  is expanded.
- Add vertical divider between plugin detail config and readme panels.
- Fix infinite re-render loop in DynamicFormComponent by memoizing
  editableItems array.

* fix: lint

* fix(web): change systemInfo to const to satisfy prefer-const lint rule

* fix: update adapter descriptions for clarity and usage requirements

web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx

@@ -11,10 +11,13 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import DynamicFormItemComponent from '@/app/home/components/dynamic-form/DynamicFormItemComponent';
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { useTranslation } from 'react-i18next';
 import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Copy, Check } from 'lucide-react';
 
 /**
  * Resolve the value referenced by a `show_if.field` string.
@@ -40,6 +43,89 @@ function resolveShowIfValue(
   return externalDependentValues?.[field];
 }
 
+/**
+ * Display-only component for webhook URL fields.
+ * Rendered outside of react-hook-form binding since the value is
+ * read-only and comes from systemContext, not user input.
+ */
+function WebhookUrlField({
+  label,
+  description,
+  url,
+  extraUrl,
+}: {
+  label: string;
+  description?: string;
+  url: string;
+  extraUrl?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+  const [extraCopied, setExtraCopied] = useState(false);
+
+  const handleCopy = (text: string, setter: (v: boolean) => void) => {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard
+        .writeText(text)
+        .then(() => {
+          setter(true);
+          setTimeout(() => setter(false), 2000);
+        })
+        .catch(() => {});
+    }
+  };
+
+  return (
+    <FormItem>
+      <FormLabel>{label}</FormLabel>
+      <div className="flex items-center gap-2">
+        <Input
+          value={url}
+          readOnly
+          className="flex-1 bg-muted"
+          onClick={(e) => (e.target as HTMLInputElement).select()}
+        />
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => handleCopy(url, setCopied)}
+        >
+          {copied ? (
+            <Check className="h-4 w-4 text-green-600" />
+          ) : (
+            <Copy className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+      {extraUrl && (
+        <div className="flex items-center gap-2 mt-2">
+          <Input
+            value={extraUrl}
+            readOnly
+            className="flex-1 bg-muted"
+            onClick={(e) => (e.target as HTMLInputElement).select()}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => handleCopy(extraUrl, setExtraCopied)}
+          >
+            {extraCopied ? (
+              <Check className="h-4 w-4 text-green-600" />
+            ) : (
+              <Copy className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+      )}
+      {description && (
+        <p className="text-sm text-muted-foreground">{description}</p>
+      )}
+    </FormItem>
+  );
+}
+
 export default function DynamicFormComponent({
   itemConfigList,
   onSubmit,
@@ -99,9 +185,16 @@ export default function DynamicFormComponent({
     return value;
   };
 
+  // Filter out display-only field types (e.g. webhook-url) that should not
+  // participate in form state, validation, or value emission.
+  const editableItems = useMemo(
+    () => itemConfigList.filter((item) => item.type !== 'webhook-url'),
+    [itemConfigList],
+  );
+
   // 根据 itemConfigList 动态生成 zod schema
   const formSchema = z.object(
-    itemConfigList.reduce(
+    editableItems.reduce(
       (acc, item) => {
         let fieldSchema;
         switch (item.type) {
@@ -179,7 +272,7 @@ export default function DynamicFormComponent({
 
   const form = useForm<FormValues>({
     resolver: zodResolver(formSchema),
-    defaultValues: itemConfigList.reduce((acc, item) => {
+    defaultValues: editableItems.reduce((acc, item) => {
       // 优先使用 initialValues，如果没有则使用默认值
       const rawValue = initialValues?.[item.name] ?? item.default;
       return {
@@ -207,7 +300,7 @@ export default function DynamicFormComponent({
 
     if (initialValues && hasRealChange) {
       // 合并默认值和初始值
-      const mergedValues = itemConfigList.reduce(
+      const mergedValues = editableItems.reduce(
         (acc, item) => {
           const rawValue = initialValues[item.name] ?? item.default;
           acc[item.name] = normalizeFieldValue(item, rawValue) as object;
@@ -222,7 +315,7 @@ export default function DynamicFormComponent({
 
       previousInitialValues.current = initialValues;
     }
-  }, [initialValues, form, itemConfigList]);
+  }, [initialValues, form, editableItems]);
 
   // Get reactive form values for conditional rendering
   const watchedValues = form.watch();
@@ -238,7 +331,7 @@ export default function DynamicFormComponent({
     // even if the user saves without modifying any field.
     // form.watch(callback) only fires on subsequent changes, not on mount.
     const formValues = form.getValues();
-    const initialFinalValues = itemConfigList.reduce(
+    const initialFinalValues = editableItems.reduce(
       (acc, item) => {
         acc[item.name] = formValues[item.name] ?? item.default;
         return acc;
@@ -258,7 +351,7 @@ export default function DynamicFormComponent({
 
     const subscription = form.watch(() => {
       const formValues = form.getValues();
-      const finalValues = itemConfigList.reduce(
+      const finalValues = editableItems.reduce(
         (acc, item) => {
           acc[item.name] = formValues[item.name] ?? item.default;
           return acc;
@@ -269,7 +362,7 @@ export default function DynamicFormComponent({
       previousInitialValues.current = finalValues as Record<string, object>;
     });
     return () => subscription.unsubscribe();
-  }, [form, itemConfigList]);
+  }, [form, editableItems]);
 
   return (
     <Form {...form}>
@@ -307,6 +400,29 @@ export default function DynamicFormComponent({
           // All fields are disabled when editing (creation_settings are immutable)
           const isFieldDisabled = !!isEditing;
 
+          // Webhook URL fields are display-only; render outside of form binding
+          if (config.type === 'webhook-url') {
+            const webhookUrl = (systemContext?.webhook_url as string) || '';
+            const extraWebhookUrl =
+              (systemContext?.extra_webhook_url as string) || '';
+
+            if (!webhookUrl) return null;
+
+            return (
+              <WebhookUrlField
+                key={config.id}
+                label={extractI18nObject(config.label)}
+                description={
+                  config.description
+                    ? extractI18nObject(config.description)
+                    : undefined
+                }
+                url={webhookUrl}
+                extraUrl={extraWebhookUrl || undefined}
+              />
+            );
+          }
+
           // Boolean fields use a special inline layout
           if (config.type === 'boolean') {
             return (