@steerable/agent-shell-web 0.6.15

package/src/components/settings/AgentsSettingsPanel.tsx

@@ -0,0 +1,412 @@
+import { useCallback, useEffect, useState } from 'react';
+import {
+  LuLoaderCircle,
+  LuPencil,
+  LuPlus,
+  LuTrash2,
+} from 'react-icons/lu';
+import { isElectron } from '@/lib/electron-bridge';
+import {
+  archiveChatAgent,
+  createChatAgent,
+  listChatAgents,
+  updateChatAgent,
+  type LocalChatAgent,
+} from '@/lib/local-api';
+import {
+  AgentCapabilityFields,
+  DEFAULT_CAPABILITY_DRAFT,
+  type AgentCapabilityDraft,
+} from './AgentCapabilityFields';
+
+/**
+ * AgentsSettingsPanel — 智能体目录（列表 / 新建 / 编辑 / 归档）。
+ *
+ * 渲染在 `/settings?section=agents` 独立页。自定义智能体出现在输入框
+ * 上方的专家选择器里。内置智能体可改文案与能力，不能归档。
+ *
+ * 除文案外，每个智能体还持有真实生效的能力面（勾选技能 / 技能范围 /
+ * 工具权限），编辑控件见 {@link AgentCapabilityFields}。
+ */
+
+const AGENT_COLORS = [
+  '#0ea5e9',
+  '#4f46e5',
+  '#a855f7',
+  '#16a34a',
+  '#ea580c',
+  '#e11d48',
+  '#0891b2',
+  '#7c3aed',
+];
+
+const DEFAULT_COLOR = AGENT_COLORS[0];
+
+function nextSortOrder(agents: LocalChatAgent[]): number {
+  return agents.reduce((max, agent) => Math.max(max, agent.sortOrder ?? 0), 0) + 1;
+}
+
+function nextColor(agents: LocalChatAgent[]): string {
+  const used = new Set(agents.map((agent) => agent.color).filter(Boolean));
+  return AGENT_COLORS.find((item) => !used.has(item)) ?? DEFAULT_COLOR;
+}
+
+function agentInitial(agent: LocalChatAgent): string {
+  const name = agent.name.trim();
+  return name ? name[0].toUpperCase() : 'A';
+}
+
+/** 列表行上的能力摘要——只列出与缺省不同的项，缺省配置不占视觉空间。 */
+function capabilitySummary(agent: LocalChatAgent): string[] {
+  const labels: string[] = [];
+  const skillCount = agent.skillIds?.length ?? 0;
+  if (skillCount > 0) labels.push(`技能 ${skillCount}`);
+  if (agent.allowExternalSkills === false) labels.push('仅限所选技能');
+  if (agent.loadAllSkills) labels.push('全部技能');
+  const policy = agent.toolPolicy;
+  if (policy && policy.mode !== 'all' && policy.tools.length > 0) {
+    labels.push(
+      policy.mode === 'allowlist'
+        ? `仅 ${policy.tools.length} 个工具`
+        : `禁用 ${policy.tools.length} 个工具`,
+    );
+  }
+  return labels;
+}
+
+export function AgentsSettingsPanel({
+  onCatalogChange,
+}: {
+  onCatalogChange?: () => Promise<void> | void;
+}) {
+  const [agents, setAgents] = useState<LocalChatAgent[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [formOpen, setFormOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [rolePrompt, setRolePrompt] = useState('');
+  const [color, setColor] = useState(DEFAULT_COLOR);
+  const [capability, setCapability] = useState<AgentCapabilityDraft>(
+    DEFAULT_CAPABILITY_DRAFT,
+  );
+  const [confirmArchiveId, setConfirmArchiveId] = useState<string | null>(null);
+  const [archivingId, setArchivingId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchAgents = useCallback(async () => {
+    if (!isElectron()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await listChatAgents(false);
+      setAgents(res.agents || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void fetchAgents();
+  }, [fetchAgents]);
+
+  const resetForm = () => {
+    setEditingId(null);
+    setName('');
+    setDescription('');
+    setRolePrompt('');
+    setColor(nextColor(agents));
+    setCapability(DEFAULT_CAPABILITY_DRAFT);
+  };
+
+  const openCreate = () => {
+    resetForm();
+    setColor(nextColor(agents));
+    setFormOpen(true);
+  };
+
+  const openEdit = (agent: LocalChatAgent) => {
+    setEditingId(agent.id);
+    setName(agent.name);
+    setDescription(agent.description ?? '');
+    setRolePrompt(agent.rolePrompt ?? '');
+    setColor(agent.color || DEFAULT_COLOR);
+    setCapability({
+      skillIds: agent.skillIds ?? [],
+      // 旧库行没有这两列时按「不限制」读——与后端缺省一致。
+      allowExternalSkills: agent.allowExternalSkills ?? true,
+      loadAllSkills: agent.loadAllSkills ?? false,
+      toolPolicy: agent.toolPolicy ?? { mode: 'all', tools: [] },
+    });
+    setFormOpen(true);
+  };
+
+  const handleSave = async () => {
+    const trimmedName = name.trim();
+    if (!trimmedName || !isElectron()) return;
+    setSaving(true);
+    setError(null);
+    try {
+      const body = {
+        name: trimmedName,
+        color,
+        description: description.trim() || null,
+        rolePrompt: rolePrompt.trim() || `你是 **${trimmedName}**。`,
+        skillIds: capability.skillIds,
+        allowExternalSkills: capability.allowExternalSkills,
+        loadAllSkills: capability.loadAllSkills,
+        toolPolicy: capability.toolPolicy,
+      };
+      if (editingId) {
+        await updateChatAgent(editingId, body);
+      } else {
+        await createChatAgent({
+          ...body,
+          sortOrder: nextSortOrder(agents),
+        });
+      }
+      resetForm();
+      setFormOpen(false);
+      await fetchAgents();
+      await onCatalogChange?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleArchive = async (agent: LocalChatAgent) => {
+    if (agent.isBuiltin) return;
+    if (confirmArchiveId !== agent.id) {
+      setConfirmArchiveId(agent.id);
+      return;
+    }
+    setArchivingId(agent.id);
+    setError(null);
+    try {
+      await archiveChatAgent(agent.id);
+      setConfirmArchiveId(null);
+      await fetchAgents();
+      await onCatalogChange?.();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setArchivingId(null);
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <p className="text-[11px] text-agent-muted-foreground">
+        自定义智能体会出现在输入框上方的专家选择器里。角色设定会作为对话的人设前言，
+        勾选的技能与工具权限在每一轮真实生效。内置智能体可以改文案和能力，但不能删除。
+      </p>
+
+      {formOpen ? (
+        <div className="space-y-2.5 rounded-agent-md border border-agent-border/60 bg-agent-muted/30 p-3.5">
+          <h4 className="text-xs font-semibold text-agent-foreground">
+            {editingId ? '编辑智能体' : '新建智能体'}
+          </h4>
+          <input
+            type="text"
+            value={name}
+            onChange={(event) => setName(event.target.value)}
+            placeholder="名称，如 地质顾问"
+            maxLength={40}
+            className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+            data-testid="agent-form-name"
+          />
+          <input
+            type="text"
+            value={description}
+            onChange={(event) => setDescription(event.target.value)}
+            placeholder="一句话简介（可选）"
+            maxLength={200}
+            className="h-8 w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+            data-testid="agent-form-description"
+          />
+          <div>
+            <p className="mb-1.5 text-[10px] font-medium text-agent-muted-foreground">颜色</p>
+            <div className="flex flex-wrap gap-1.5" data-testid="agent-form-colors">
+              {AGENT_COLORS.map((item) => (
+                <button
+                  key={item}
+                  type="button"
+                  onClick={() => setColor(item)}
+                  className={`h-6 w-6 rounded-full border-2 transition-transform ${
+                    color === item
+                      ? 'scale-110 border-agent-foreground'
+                      : 'border-transparent hover:scale-105'
+                  }`}
+                  style={{ backgroundColor: item }}
+                  title={item}
+                  aria-label={`颜色 ${item}`}
+                />
+              ))}
+            </div>
+          </div>
+          <textarea
+            value={rolePrompt}
+            onChange={(event) => setRolePrompt(event.target.value)}
+            placeholder="角色设定。例如：你是地质顾问，回答简洁，先给结论再给依据。"
+            rows={6}
+            className="w-full rounded-agent-md border border-agent-border bg-agent-canvas px-3 py-2 text-xs text-agent-foreground focus:outline-none focus:ring-2 focus:ring-agent-foreground/30"
+            data-testid="agent-form-role"
+          />
+          <AgentCapabilityFields value={capability} onChange={setCapability} />
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                resetForm();
+                setFormOpen(false);
+              }}
+              className="h-8 rounded-full px-4 text-xs font-medium text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
+            >
+              取消
+            </button>
+            <button
+              type="button"
+              onClick={() => void handleSave()}
+              disabled={saving || !name.trim()}
+              data-testid="agent-form-save"
+              className={`h-8 rounded-full px-4 text-xs font-medium transition-all ${
+                saving || !name.trim()
+                  ? 'cursor-not-allowed bg-agent-muted text-agent-muted-foreground'
+                  : 'bg-agent-foreground text-agent-canvas hover:opacity-90'
+              }`}
+            >
+              {saving ? <LuLoaderCircle className="h-3 w-3 animate-spin" /> : '保存'}
+            </button>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={openCreate}
+          className="flex items-center gap-1.5 text-xs font-medium text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+          data-testid="agent-add"
+        >
+          <LuPlus className="h-3.5 w-3.5" />
+          添加智能体
+        </button>
+      )}
+
+      <div className="space-y-2">
+        <h4 className="text-xs font-semibold uppercase tracking-wide text-agent-muted-foreground">
+          已有智能体
+          {agents.length > 0 && (
+            <span className="ml-1.5 font-normal normal-case">· {agents.length}</span>
+          )}
+        </h4>
+        {loading ? (
+          <div className="flex items-center gap-2 py-4 text-xs text-agent-muted-foreground">
+            <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
+            获取智能体...
+          </div>
+        ) : agents.length === 0 ? (
+          <div className="py-6 text-center text-xs text-agent-muted-foreground">
+            暂无智能体
+          </div>
+        ) : (
+          <div className="divide-y divide-agent-border/40 pr-1">
+            {agents.map((agent) => (
+              <div
+                key={agent.id}
+                className="flex items-start justify-between gap-3 py-2.5"
+                data-testid={`agent-row-${agent.id}`}
+              >
+                <div className="min-w-0 flex-1 space-y-1">
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span
+                      className="inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full text-[9px] font-semibold text-white"
+                      style={{ backgroundColor: agent.color || DEFAULT_COLOR }}
+                    >
+                      {agentInitial(agent)}
+                    </span>
+                    <span className="truncate text-xs font-medium text-agent-foreground">
+                      {agent.name}
+                    </span>
+                    {agent.isBuiltin && (
+                      <span className="flex-shrink-0 rounded bg-agent-muted px-1 py-0.5 text-[9px] font-medium text-agent-muted-foreground">
+                        内置
+                      </span>
+                    )}
+                  </div>
+                  {agent.description && (
+                    <p className="line-clamp-2 text-[11px] text-agent-muted-foreground">
+                      {agent.description}
+                    </p>
+                  )}
+                  {capabilitySummary(agent).length > 0 && (
+                    <div
+                      className="flex flex-wrap gap-1"
+                      data-testid={`agent-capability-${agent.id}`}
+                    >
+                      {capabilitySummary(agent).map((label) => (
+                        <span
+                          key={label}
+                          className="rounded bg-agent-muted/70 px-1 py-0.5 text-[9px] text-agent-muted-foreground"
+                        >
+                          {label}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                <div className="flex shrink-0 items-center gap-0.5">
+                  <button
+                    type="button"
+                    onClick={() => openEdit(agent)}
+                    className="rounded-full p-1 text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground"
+                    title="编辑"
+                    data-testid={`agent-edit-${agent.id}`}
+                  >
+                    <LuPencil className="h-3.5 w-3.5" />
+                  </button>
+                  {!agent.isBuiltin && (
+                    <button
+                      type="button"
+                      onClick={() => void handleArchive(agent)}
+                      disabled={archivingId === agent.id}
+                      className={`rounded-full p-1 transition-colors ${
+                        confirmArchiveId === agent.id
+                          ? 'bg-agent-destructive/10 text-agent-destructive hover:bg-agent-destructive/20'
+                          : 'text-agent-muted-foreground hover:bg-agent-muted hover:text-agent-destructive'
+                      }`}
+                      title={
+                        confirmArchiveId === agent.id
+                          ? '再次点击确认删除'
+                          : '删除'
+                      }
+                      data-testid={`agent-archive-${agent.id}`}
+                    >
+                      {archivingId === agent.id ? (
+                        <LuLoaderCircle className="h-3 w-3 animate-spin" />
+                      ) : (
+                        <LuTrash2 className="h-3.5 w-3.5" />
+                      )}
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {error && (
+        <div
+          className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive"
+          data-testid="agents-error"
+        >
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/settings/DiagnoseSettingsPanel.tsx

@@ -0,0 +1,119 @@
+import { useState } from 'react';
+import { LuCircleCheck, LuCircleX, LuLoader, LuPlay } from 'react-icons/lu';
+import { diagnoseLlmConnection, type DiagnoseResult } from '@/lib/local-api';
+
+/**
+ * 设置页「链路诊断」面板：一键探测当前 LLM 配置的连通性
+ * （DNS → TCP → TLS → HTTP /models → chat completion），并报告
+ * 宿主机的 ambient 代理配置。
+ */
+export function DiagnoseSettingsPanel() {
+  const [running, setRunning] = useState(false);
+  const [result, setResult] = useState<DiagnoseResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const run = async () => {
+    setRunning(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await diagnoseLlmConnection({});
+      setResult(res);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div className="space-y-3 rounded-agent-md border border-agent-border bg-agent-card p-4">
+      <p className="text-xs text-agent-muted-foreground">
+        诊断当前模型服务的网络连通性，包括 DNS 解析、TCP 连接、TLS 握手、HTTP 接口与对话补全。
+        诊断在宿主进程内执行，会同时报告系统/环境代理配置。
+      </p>
+
+      <button
+        type="button"
+        onClick={() => void run()}
+        disabled={running}
+        className="inline-flex items-center gap-1.5 rounded-agent-md bg-agent-primary px-3 py-1.5 text-xs font-medium text-agent-primary-foreground transition hover:bg-agent-primary/90 disabled:opacity-50"
+      >
+        {running ? (
+          <>
+            <LuLoader className="h-3.5 w-3.5 animate-spin" />
+            诊断中…
+          </>
+        ) : (
+          <>
+            <LuPlay className="h-3.5 w-3.5" />
+            开始诊断
+          </>
+        )}
+      </button>
+
+      {error && (
+        <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
+          诊断请求失败：{error}
+        </p>
+      )}
+
+      {result && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-sm">
+            {result.ok ? (
+              <span className="inline-flex items-center gap-1 text-agent-success">
+                <LuCircleCheck className="h-4 w-4" />
+                全部通过
+              </span>
+            ) : (
+              <span className="inline-flex items-center gap-1 text-agent-destructive">
+                <LuCircleX className="h-4 w-4" />
+                诊断失败
+              </span>
+            )}
+          </div>
+
+          <ol className="space-y-1.5">
+            {result.steps.map((step) => (
+              <li
+                key={step.name}
+                className="flex items-start gap-2 rounded-agent-sm bg-agent-muted/50 px-2.5 py-1.5 text-xs"
+              >
+                {step.ok ? (
+                  <LuCircleCheck className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-agent-success" />
+                ) : (
+                  <LuCircleX className="mt-0.5 h-3.5 w-3.5 flex-shrink-0 text-agent-destructive" />
+                )}
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-medium text-agent-foreground">{step.name}</span>
+                    <span className="text-agent-muted-foreground">{step.durationMs}ms</span>
+                  </div>
+                  <p className="mt-0.5 break-all text-agent-muted-foreground">{step.detail}</p>
+                </div>
+              </li>
+            ))}
+          </ol>
+
+          {result.ambientProxies.length > 0 && (
+            <div className="rounded-agent-sm border border-agent-border bg-agent-muted/30 p-2.5 text-xs">
+              <p className="font-medium text-agent-foreground">检测到的代理配置</p>
+              <ul className="mt-1 list-inside list-disc space-y-0.5 text-agent-muted-foreground">
+                {result.ambientProxies.map((proxy) => (
+                  <li key={proxy}>{proxy}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {result.hint && (
+            <p className="rounded-agent-md border border-agent-warning/20 bg-agent-warning/10 p-2.5 text-xs text-agent-warning">
+              {result.hint}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/settings/InsightsSettingsPanel.test.tsx

@@ -0,0 +1,132 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const request = vi.fn();
+
+vi.mock('@/lib/electron-bridge', () => ({
+  isElectron: () => true,
+  getElectronBridge: () => ({
+    localBackend: { request },
+    local: { saveTextFile: vi.fn() },
+  }),
+}));
+
+const { InsightsConsentBanner, InsightsSettingsPanel } = await import('./InsightsSettingsPanel');
+
+beforeEach(() => {
+  request.mockReset();
+  request.mockResolvedValue({
+    installId: '550e8400-e29b-41d4-a716-446655440000',
+    shareBehavior: false,
+    shareConversation: false,
+    shareProfile: false,
+    profile: { displayName: '', email: '', company: '', note: '' },
+    stats: { events: 2, turns: 1, profile: 0, pending: 3 },
+  });
+});
+
+afterEach(cleanup);
+
+describe('InsightsConsentBanner', () => {
+  it('renders a simple upload-or-cancel first-run banner', async () => {
+    render(<InsightsConsentBanner />);
+    const banner = await screen.findByTestId('insights-consent-banner');
+    expect(banner.className).toContain('bg-agent-muted');
+    // 3.1 起品牌由产品注入；测试环境无注入 = shell 中性默认。
+    expect(screen.getByText('帮助改进Steerable Shell')).toBeTruthy();
+    expect(screen.getByText(/同意上传数据到服务器/)).toBeTruthy();
+    expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
+    expect(screen.getByRole('button', { name: '保存' })).toBeTruthy();
+    expect(screen.getByRole('button', { name: '取消' })).toBeTruthy();
+  });
+
+  it('save agrees to upload; cancel keeps data local', async () => {
+    render(<InsightsConsentBanner />);
+    await screen.findByTestId('insights-consent-banner');
+    fireEvent.click(screen.getByRole('button', { name: '保存' }));
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          method: 'POST',
+          path: '/api/v2/local-settings/insights',
+          body: expect.objectContaining({
+            shareBehavior: true,
+            shareConversation: true,
+            shareProfile: true,
+            markPrompted: true,
+          }),
+        }),
+      );
+    });
+  });
+
+  it('cancel declines upload and still dismisses the prompt', async () => {
+    render(<InsightsConsentBanner />);
+    await screen.findByTestId('insights-consent-banner');
+    fireEvent.click(screen.getByRole('button', { name: '取消' }));
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          method: 'POST',
+          path: '/api/v2/local-settings/insights',
+          body: expect.objectContaining({
+            shareBehavior: false,
+            shareConversation: false,
+            shareProfile: false,
+            markPrompted: true,
+          }),
+        }),
+      );
+    });
+  });
+
+  it('does not open after the prompt has been answered', async () => {
+    request.mockResolvedValueOnce({
+      installId: '550e8400-e29b-41d4-a716-446655440000',
+      shareBehavior: false,
+      shareConversation: false,
+      shareProfile: false,
+      promptedAt: '2026-09-12T00:00:00.000Z',
+      profile: { displayName: '', email: '', company: '', note: '' },
+    });
+    render(<InsightsConsentBanner />);
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith(
+        expect.objectContaining({ method: 'GET', path: '/api/v2/local-settings/insights' }),
+      );
+    });
+    expect(screen.queryByTestId('insights-consent-banner')).toBeNull();
+  });
+});
+
+describe('InsightsSettingsPanel', () => {
+  it('shows separate toggles for behavior, conversation, and profile', async () => {
+    render(<InsightsSettingsPanel />);
+    expect(await screen.findByText(/帮助改进产品（行为 \/ 对话 \/ 用户信息 分开确认）/)).toBeTruthy();
+    expect(screen.getAllByText(/自动上传/).length).toBe(3);
+    expect(screen.getAllByRole('checkbox')).toHaveLength(3);
+    expect(screen.getByText(/导出文件发给开发者/)).toBeTruthy();
+    expect(screen.getByText(/现在上传本地记录/)).toBeTruthy();
+  });
+
+  it('saves the three flags independently', async () => {
+    render(<InsightsSettingsPanel />);
+    await screen.findByText(/本机已记/);
+    const boxes = screen.getAllByRole('checkbox');
+    fireEvent.click(boxes[0]);
+    fireEvent.click(screen.getByRole('button', { name: '保存' }));
+    await waitFor(() => {
+      expect(request).toHaveBeenCalledWith(
+        expect.objectContaining({
+          method: 'POST',
+          path: '/api/v2/local-settings/insights',
+          body: expect.objectContaining({
+            shareBehavior: true,
+            shareConversation: false,
+            shareProfile: false,
+          }),
+        }),
+      );
+    });
+  });
+});