fix：优化图片识别，优化webui配置和排版，优化聊天流监控，新增mcp显示，新增prompt修改面板，优化插件状态显示，优化长期记忆控制台，

dashboard/src/components/dynamic-form/DynamicConfigForm.tsx

@@ -53,7 +53,7 @@ function AdvancedSettingsButton({
   return (
     <Button
       type="button"
-      variant={active ? 'secondary' : 'outline'}
+      variant={active ? 'default' : 'outline'}
       size="sm"
       onClick={onClick}
     >
@@ -207,10 +207,8 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
     <>
       {fields.map((field, index) => (
         <React.Fragment key={field.name}>
-          {index > 0 && field.type !== 'boolean' && fields[index - 1]?.type !== 'boolean' && (
-            <Separator className="my-1" />
-          )}
-          <div>{renderField(field)}</div>
+          {index > 0 && <Separator className="my-2 bg-border/50" />}
+          <div className="py-1">{renderField(field)}</div>
         </React.Fragment>
       ))}
     </>
@@ -219,7 +217,7 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
   return (
     <div className="space-y-6">
       {topLevelFields.length > 0 && (
-        <div className="space-y-1">
+        <div>
           {advancedVisible === undefined && advancedFields.length > 0 && (
             <div className="flex justify-end pb-2">
               <AdvancedSettingsButton
@@ -302,33 +300,33 @@ export const DynamicConfigForm: React.FC<DynamicConfigFormProps> = ({
           }
 
           return (
-            <div
-              key={key}
-              className="relative space-y-4 rounded-lg border-l-2 border-muted-foreground/20 pl-4 pt-1 pb-1"
-            >
-              <div className="flex items-start justify-between gap-4">
-                <div className="space-y-1">
-                  <div className="flex items-center gap-2">
-                    <SectionIcon iconName={nestedSchema.uiIcon} />
-                    <h4 className="text-sm font-semibold">{sectionTitle}</h4>
+            <Card key={key} className="border-border/70 bg-muted/20 shadow-none">
+              <CardHeader className="px-4 py-3">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="space-y-1">
+                    <div className="flex items-center gap-2">
+                      <SectionIcon iconName={nestedSchema.uiIcon} />
+                      <CardTitle className="text-sm">{sectionTitle}</CardTitle>
+                    </div>
+                    {sectionDescription && (
+                      <CardDescription className="text-xs">
+                        {sectionDescription}
+                      </CardDescription>
+                    )}
                   </div>
-                  {sectionDescription && (
-                    <p className="text-xs text-muted-foreground">
-                      {sectionDescription}
-                    </p>
-                  )}
                 </div>
-              </div>
-
-              <DynamicConfigForm
-                schema={nestedSchema}
-                values={(values[key] as Record<string, unknown>) || {}}
-                onChange={(field, value) => onChange(`${key}.${field}`, value)}
-                basePath={nestedFieldPath}
-                hooks={hooks}
-                level={level + 1}
-              />
-            </div>
+              </CardHeader>
+              <CardContent className="px-4 pb-4 pt-0">
+                <DynamicConfigForm
+                  schema={nestedSchema}
+                  values={(values[key] as Record<string, unknown>) || {}}
+                  onChange={(field, value) => onChange(`${key}.${field}`, value)}
+                  basePath={nestedFieldPath}
+                  hooks={hooks}
+                  level={level + 1}
+                />
+              </CardContent>
+            </Card>
           )
         })}
     </div>

dashboard/src/components/dynamic-form/DynamicField.tsx

@@ -8,6 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Slider } from "@/components/ui/slider"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils"
 import type { FieldSchema } from "@/types/config-schema"
 
 export interface DynamicFieldProps {
@@ -93,6 +94,28 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
     return <IconComponent className="h-4 w-4" />
   }
 
+  const renderFieldHeader = () => (
+    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+      <Label
+        className={cn(
+          "inline-flex min-h-7 items-center gap-1.5 rounded-md border px-2 py-1 text-sm font-medium shadow-sm",
+          schema.advanced
+            ? "border-amber-300 bg-amber-50 text-amber-950 dark:border-amber-500/60 dark:bg-amber-500/15 dark:text-amber-100"
+            : "bg-muted/60 text-foreground",
+        )}
+      >
+        {renderIcon()}
+        <span className="break-all">{schema.label}</span>
+        {schema.required && <span className="text-destructive">*</span>}
+      </Label>
+      {schema.description && (
+        <span className="text-[13px] leading-6 text-muted-foreground whitespace-pre-line">
+          {schema.description}
+        </span>
+      )}
+    </div>
+  )
+
   /**
    * 根据 x-widget 或 type 选择并渲染对应的输入组件
    */
@@ -175,16 +198,9 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
   const renderSwitch = () => {
     const checked = Boolean(value)
     return (
-      <div className="flex items-center justify-between rounded-lg border p-3 sm:p-4">
-        <div className="space-y-0.5 pr-4">
-          <Label className="text-sm font-medium flex items-center gap-2">
-            {renderIcon()}
-            {schema.label}
-            {schema.required && <span className="text-destructive">*</span>}
-          </Label>
-          {schema.description && (
-            <p className="text-[13px] text-muted-foreground whitespace-pre-line">{schema.description}</p>
-          )}
+      <div className="flex items-center justify-between gap-4 py-2">
+        <div className="pr-4">
+          {renderFieldHeader()}
         </div>
         <Switch
           checked={checked}
@@ -305,27 +321,35 @@ export const DynamicField: React.FC<DynamicFieldProps> = ({
   const isBoolean =
     schema['x-widget'] === 'switch' ||
     (!schema['x-widget'] && schema.type === 'boolean')
+  const supportsInlineRight =
+    schema['x-layout'] === 'inline-right' &&
+    ['input', 'number', 'password', 'select', undefined].includes(schema['x-widget']) &&
+    ['string', 'number', 'integer', 'select'].includes(schema.type)
 
   // Switch/Boolean 字段自带完整布局，直接返回
   if (isBoolean) {
     return renderInputComponent()
   }
 
+  if (supportsInlineRight) {
+    return (
+      <div
+        className="flex flex-col gap-2 py-2 sm:flex-row sm:items-center sm:justify-between"
+        style={{ '--field-input-width': schema['x-input-width'] ?? '12rem' } as React.CSSProperties}
+      >
+        <div className="min-w-0 flex-1">
+          {renderFieldHeader()}
+        </div>
+        <div className="w-full shrink-0 sm:w-[var(--field-input-width)]">
+          {renderInputComponent()}
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="space-y-2">
-      <div className="space-y-0.5">
-        {/* Label with icon */}
-        <Label className="text-sm font-medium flex items-center gap-2">
-          {renderIcon()}
-          {schema.label}
-          {schema.required && <span className="text-destructive">*</span>}
-        </Label>
-
-        {/* Description */}
-        {schema.description && (
-          <p className="text-[13px] text-muted-foreground whitespace-pre-line">{schema.description}</p>
-        )}
-      </div>
+      {renderFieldHeader()}
 
       {/* Input component */}
       {renderInputComponent()}