feat: refactor HomePage to integrate agents store and update related components

feat: add runtime event handling for providers in ProvidersSection

feat: update routing to include Channels and Agents pages

feat: extend route types and navigation items for Channels and Agents

feat: implement agents store for managing agent data and interactions

fix: update chat store to utilize agents store for agent-related functionality

chore: export agents store from index

fix: enhance runtime types for better event handling

fix: update Vite config to handle dev server URL correctly

src/pages/Agents/components/AddAgentDialog.tsx

@@ -0,0 +1,145 @@
+import { useEffect, useState } from 'react';
+import AgentsDialogSurface from './AgentsDialogSurface';
+
+const INPUT_CLASS_NAME = [
+  'h-[88px] w-full rounded-[26px] border border-black/10 bg-[#F8F4EC] px-7',
+  'text-[22px] text-[#171717] outline-none transition-colors placeholder:text-[#9A958C]',
+  'focus:border-black/20 dark:border-white/10 dark:bg-[#222225] dark:text-[#f3f4f6] dark:placeholder:text-gray-500',
+].join(' ');
+
+type AddAgentDialogCopy = {
+  title: string;
+  subtitle: string;
+  nameLabel: string;
+  namePlaceholder: string;
+  inheritWorkspaceLabel: string;
+  inheritWorkspaceDescription: string;
+  cancelLabel: string;
+  saveLabel: string;
+  savingLabel: string;
+};
+
+type AddAgentDialogProps = {
+  open: boolean;
+  saving: boolean;
+  copy: AddAgentDialogCopy;
+  onClose: () => void;
+  onSave: (input: { name: string; inheritWorkspace: boolean }) => Promise<void> | void;
+};
+
+function Toggle({
+  checked,
+  disabled,
+  onToggle,
+}: {
+  checked: boolean;
+  disabled: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={onToggle}
+      className={[
+        'relative inline-flex h-12 w-24 shrink-0 items-center rounded-full transition-colors',
+        checked ? 'bg-[#DDE8FF]' : 'bg-[#E8E1D3]',
+        disabled ? 'cursor-not-allowed opacity-60' : '',
+      ].join(' ')}
+    >
+      <span
+        className={[
+          'absolute left-1.5 top-1.5 h-9 w-9 rounded-full bg-white shadow-[0_4px_12px_rgba(15,23,42,0.12)] transition-transform',
+          checked ? 'translate-x-11' : '',
+        ].join(' ')}
+      />
+    </button>
+  );
+}
+
+export default function AddAgentDialog({
+  open,
+  saving,
+  copy,
+  onClose,
+  onSave,
+}: AddAgentDialogProps) {
+  const [name, setName] = useState('');
+  const [inheritWorkspace, setInheritWorkspace] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setName('');
+    setInheritWorkspace(false);
+  }, [open]);
+
+  const canSave = name.trim().length > 0 && !saving;
+
+  return (
+    <AgentsDialogSurface
+      open={open}
+      onClose={onClose}
+      title={copy.title}
+      subtitle={copy.subtitle}
+      widthClassName="max-w-[894px]"
+    >
+      <div className="space-y-10">
+        <section>
+          <label className="mb-4 block text-[22px] font-semibold text-[#2E3445] dark:text-[#f3f4f6]">
+            {copy.nameLabel}
+          </label>
+          <input
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder={copy.namePlaceholder}
+            className={INPUT_CLASS_NAME}
+            autoFocus
+          />
+        </section>
+
+        <section className="flex items-center justify-between gap-8">
+          <div className="min-w-0">
+            <div className="text-[22px] font-semibold text-[#2E3445] dark:text-[#f3f4f6]">
+              {copy.inheritWorkspaceLabel}
+            </div>
+            <p className="mt-2 max-w-[560px] text-[16px] leading-[1.6] text-[#646C7A] dark:text-gray-400">
+              {copy.inheritWorkspaceDescription}
+            </p>
+          </div>
+
+          <Toggle
+            checked={inheritWorkspace}
+            disabled={saving}
+            onToggle={() => setInheritWorkspace((current) => !current)}
+          />
+        </section>
+
+        <div className="flex justify-end gap-4 pt-2">
+          <button
+            type="button"
+            className="rounded-full border border-black/12 bg-white/70 px-10 py-3 text-[18px] font-medium text-[#3B4252] transition-colors hover:bg-white dark:border-white/10 dark:bg-[#222225] dark:text-gray-200 dark:hover:bg-[#2a2a2d]"
+            onClick={onClose}
+            disabled={saving}
+          >
+            {copy.cancelLabel}
+          </button>
+          <button
+            type="button"
+            className="rounded-full bg-[#7E9DF5] px-10 py-3 text-[18px] font-medium text-white transition-colors hover:bg-[#6E90F3] disabled:cursor-not-allowed disabled:opacity-60"
+            disabled={!canSave}
+            onClick={() => {
+              void onSave({
+                name: name.trim(),
+                inheritWorkspace,
+              });
+            }}
+          >
+            {saving ? copy.savingLabel : copy.saveLabel}
+          </button>
+        </div>
+      </div>
+    </AgentsDialogSurface>
+  );
+}