@dyyz1993/create-agent 1.9.0

package/templates/agent/src/mainview/components/common/__tests__/LanguageSwitcher.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockSetLocale = vi.fn();
+
+vi.mock("../../stores/use-locale-store", () => ({
+  useLocaleStore: (selector: (s: any) => any) =>
+    selector({ locale: "en", setLocale: mockSetLocale }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+describe("LanguageSwitcher", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show '中' when locale is en", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByText("中")).toBeInTheDocument();
+  });
+
+  it("should have title 切换到中文 for en locale", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "切换到中文");
+  });
+
+  it("should display locale-specific text content", async () => {
+    const { LanguageSwitcher } = await import("../LanguageSwitcher");
+    render(<LanguageSwitcher />);
+    const button = screen.getByRole("button");
+    expect(button.textContent).toBe("中");
+    expect(button.className).toContain("rounded");
+  });
+});

package/templates/agent/src/mainview/components/common/__tests__/ThemeToggle.test.tsx

@@ -0,0 +1,41 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockToggle = vi.fn();
+
+vi.mock("../../stores/use-theme-store", () => ({
+  useThemeStore: (selector: (s: any) => any) =>
+    selector({ theme: "dark", toggleTheme: mockToggle }),
+}));
+
+describe("ThemeToggle", () => {
+  afterEach(cleanup);
+
+  it("should render a button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("should show sun icon for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+    expect(svg!.getAttribute("class")).toContain("text-yellow-400");
+  });
+
+  it("should have title Switch to light mode for dark theme", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    render(<ThemeToggle />);
+    expect(screen.getByRole("button")).toHaveAttribute("title", "Switch to light mode");
+  });
+
+  it("should render SVG element inside button", async () => {
+    const { ThemeToggle } = await import("../ThemeToggle");
+    const { container } = render(<ThemeToggle />);
+    const button = container.querySelector("button");
+    expect(button!.querySelector("svg")).toBeInTheDocument();
+  });
+});

package/templates/agent/src/mainview/components/debug/DebugPanel.tsx

@@ -0,0 +1,120 @@
+import { useTranslation } from "react-i18next";
+import { Send, Play, Square, File } from "lucide-react";
+import { useAppStore } from "../../stores/use-app-store";
+import { useLogStore } from "../../stores/use-log-store";
+import type { DemoMethod } from "../../types";
+
+export function DebugPanel() {
+  const { t } = useTranslation();
+  const method = useAppStore((s) => s.method);
+  const result = useAppStore((s) => s.result);
+  const logs = useLogStore((s) => s.logs);
+  const tickEvents = useAppStore((s) => s.tickEvents);
+  const tickCount = useAppStore((s) => s.tickCount);
+  const subscriptionId = useAppStore((s) => s.subscriptionId);
+  const timerRunning = useAppStore((s) => s.timerRunning);
+  const setMethod = useAppStore((s) => s.setMethod);
+  const callRPC = useAppStore((s) => s.callRPC);
+  const handleSubscribe = useAppStore((s) => s.handleSubscribe);
+  const handleUnsubscribe = useAppStore((s) => s.handleUnsubscribe);
+
+  return (
+    <div className="w-72 bg-[var(--color-bg-primary)] border-l border-[var(--color-border-primary)] flex flex-col flex-shrink-0 overflow-y-auto">
+      <div className="p-3 border-b border-[var(--color-border-primary)]">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-xs font-semibold flex items-center gap-1.5">
+            <Send className="w-3.5 h-3.5 text-[var(--color-text-accent)]" />
+            {t("debug.rpcCalls")}
+          </h2>
+        </div>
+        <div className="flex gap-2 mb-2">
+          <select
+            value={method}
+            onChange={(e) => setMethod(e.target.value as DemoMethod)}
+            className="flex-1 px-2 py-1 text-xs bg-[var(--color-bg-tertiary)] rounded text-[var(--color-text-primary)] border border-[var(--color-border-secondary)]"
+          >
+            <option value="system.ping">system.ping</option>
+            <option value="system.hello">system.hello</option>
+            <option value="system.echo">system.echo</option>
+            <option value="chat.send">chat.send</option>
+          </select>
+          <button
+            onClick={() => callRPC("")}
+            className="px-3 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded transition-colors flex items-center gap-1"
+          >
+            <Play className="w-3 h-3" />
+            {t("debug.call")}
+          </button>
+        </div>
+        {!!result && (
+          <div className="bg-[var(--color-bg-tertiary)] rounded p-2">
+            <pre className="text-[var(--color-text-success)] text-[11px] overflow-x-auto whitespace-pre-wrap">
+              {JSON.stringify(result, null, 2)}
+            </pre>
+          </div>
+        )}
+      </div>
+
+      <div className="p-3 border-b border-[var(--color-border-primary)]">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-xs font-semibold flex items-center gap-1.5">
+            {timerRunning ? (
+              <Square className="w-3.5 h-3.5 text-[var(--color-text-success)] fill-green-400" />
+            ) : (
+              <Play className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+            )}
+            {t("debug.subscriptions")}
+            {timerRunning && (
+              <span className="ml-1 px-1.5 py-0.5 bg-green-600/30 text-green-400 rounded text-[10px]">
+                LIVE
+              </span>
+            )}
+          </h2>
+          <div className="flex gap-2 items-center">
+            <span className="text-[11px] text-[var(--color-text-tertiary)]">
+              {t("debug.events", { count: tickCount })}
+            </span>
+            {!subscriptionId ? (
+              <button
+                onClick={handleSubscribe}
+                className="px-2 py-0.5 text-xs bg-green-600 hover:bg-green-700 rounded transition-colors"
+              >
+                {t("debug.subscribe")}
+              </button>
+            ) : (
+              <button
+                onClick={handleUnsubscribe}
+                className="px-2 py-0.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors"
+              >
+                {t("debug.unsubscribe")}
+              </button>
+            )}
+          </div>
+        </div>
+        <div className="bg-[var(--color-bg-tertiary)] rounded p-2 max-h-32 overflow-y-auto font-mono text-[11px]">
+          {tickEvents.length === 0 ? (
+            <div className="text-[var(--color-text-placeholder)] text-center py-1">{t("debug.noEvents")}</div>
+          ) : (
+            tickEvents.map((ev, i) => (
+              <div key={i} className="text-[var(--color-text-info)]">{ev}</div>
+            ))
+          )}
+        </div>
+      </div>
+
+      <div className="p-3 flex flex-col flex-1 min-h-0">
+        <h2 className="text-xs font-semibold mb-2 flex-shrink-0 flex items-center gap-1.5">
+          <File className="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" />
+          {t("debug.logs")}
+        </h2>
+        <div className="flex-1 bg-black rounded p-2 overflow-y-auto font-mono text-[11px]">
+          {logs.map((log, i) => (
+            <div key={i} className={log.includes("Error") ? "text-[var(--color-text-error)]" : "text-[var(--color-text-success)]"}>
+              {log}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/debug/__tests__/DebugPanel.test.tsx

@@ -0,0 +1,102 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup, fireEvent } from "@testing-library/react";
+import React from "react";
+
+const mockCallRPC = vi.fn();
+const mockHandleSubscribe = vi.fn();
+const mockHandleUnsubscribe = vi.fn();
+
+vi.mock("../../../stores/use-app-store", () => ({
+  useAppStore: (selector: any) =>
+    selector({
+      method: "system.ping",
+      result: { pong: true },
+      tickEvents: ["tick-1", "tick-2"],
+      tickCount: 2,
+      subscriptionId: null,
+      timerRunning: false,
+      setMethod: vi.fn(),
+      callRPC: mockCallRPC,
+      handleSubscribe: mockHandleSubscribe,
+      handleUnsubscribe: mockHandleUnsubscribe,
+    }),
+}));
+
+vi.mock("../../../stores/use-log-store", () => ({
+  useLogStore: (selector: any) =>
+    selector({ logs: ["Connected", "Error: timeout"] }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+describe("DebugPanel", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render RPC calls section", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("debug.rpcCalls")).toBeDefined();
+  });
+
+  it("should render subscriptions section", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("debug.subscriptions")).toBeDefined();
+  });
+
+  it("should render logs section", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("debug.logs")).toBeDefined();
+  });
+
+  it("should display method select", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("system.ping")).toBeDefined();
+  });
+
+  it("should render call button", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("debug.call")).toBeDefined();
+  });
+
+  it("should call callRPC on call button click", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    fireEvent.click(screen.getByText("debug.call"));
+    expect(mockCallRPC).toHaveBeenCalledWith("");
+  });
+
+  it("should display result JSON", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText(/pong/)).toBeDefined();
+  });
+
+  it("should display log entries", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("Connected")).toBeDefined();
+    expect(screen.getByText("Error: timeout")).toBeDefined();
+  });
+
+  it("should show subscribe button when not subscribed", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("debug.subscribe")).toBeDefined();
+  });
+
+  it("should display tick events", async () => {
+    const { DebugPanel } = await import("../DebugPanel");
+    render(<DebugPanel />);
+    expect(screen.getByText("tick-1")).toBeDefined();
+    expect(screen.getByText("tick-2")).toBeDefined();
+  });
+});

package/templates/agent/src/mainview/components/diff/DiffViewerPanel.tsx

@@ -0,0 +1,106 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { X, Columns2, Rows3 } from "lucide-react";
+import ReactDiffViewer, { DiffMethod } from "react-diff-viewer-continued";
+import { useGitStore } from "../../stores/use-git-store";
+
+const DIFF_STYLES = {
+  variables: {
+    light: {
+      diffViewerBackground: "#111827",
+    },
+    dark: {
+      diffViewerBackground: "#111827",
+      diffViewerColor: "#e5e7eb",
+      addedBackground: "#052e16",
+      addedColor: "#4ade80",
+      removedBackground: "#450a0a",
+      removedColor: "#fca5a5",
+      wordAddedBackground: "#065f46",
+      wordRemovedBackground: "#7f1d1d",
+      addedGutterBackground: "#052e16",
+      removedGutterBackground: "#450a0a",
+      gutterBackground: "#1f2937",
+      gutterColor: "#6b7280",
+      codeFoldGutterBackground: "#1f2937",
+      codeFoldBackground: "#1f2937",
+      emptyLineBackground: "#111827",
+      gutterBackgroundDark: "#1f2937",
+      highlightGutterBackground: "#374151",
+      highlightBackground: "#374151",
+    },
+  },
+  line: {
+    fontSize: "12px",
+    fontFamily: "ui-monospace, SFMono-Regular, monospace",
+    lineHeight: "1.6",
+  },
+  gutter: {
+    fontSize: "12px",
+    fontFamily: "ui-monospace, SFMono-Regular, monospace",
+    minWidth: "40px",
+    padding: "0 8px",
+  },
+} as const;
+
+export function DiffViewerPanel() {
+  const { t } = useTranslation();
+  const currentDiff = useGitStore((s) => s.currentDiff);
+  const loadingDiff = useGitStore((s) => s.loadingDiff);
+  const clearDiff = useGitStore((s) => s.clearDiff);
+  const [splitView, setSplitView] = useState(false);
+
+  if (!currentDiff && !loadingDiff) return null;
+
+  const fileName = currentDiff?.filePath.split("/").pop() || "";
+
+  return (
+    <div className="absolute inset-0 bg-[var(--color-bg-primary)] flex flex-col" style={{ zIndex: 40 }}>
+      <div className="h-9 bg-[var(--color-bg-secondary)] border-b border-[var(--color-border-primary)] flex items-center px-3 text-xs flex-shrink-0 gap-2">
+        <span className="text-[var(--color-text-secondary)] font-medium">{fileName}</span>
+        <span className="text-[var(--color-text-placeholder)] truncate text-[10px]">{currentDiff?.filePath}</span>
+        <div className="ml-auto flex items-center gap-1">
+          <button
+            onClick={() => setSplitView(false)}
+            className={`p-1 rounded transition-colors ${!splitView ? "bg-[var(--color-bg-input)] text-[var(--color-text-primary)]" : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)]"}`}
+            title={t("diff.lineByLine")}
+          >
+            <Rows3 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={() => setSplitView(true)}
+            className={`p-1 rounded transition-colors ${splitView ? "bg-[var(--color-bg-input)] text-[var(--color-text-primary)]" : "text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)]"}`}
+            title={t("diff.sideBySide")}
+          >
+            <Columns2 className="w-3.5 h-3.5" />
+          </button>
+          <button
+            onClick={clearDiff}
+            className="ml-1 text-[var(--color-text-placeholder)] hover:text-[var(--color-text-primary)] transition-colors"
+          >
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {loadingDiff ? (
+          <div className="flex items-center justify-center h-full text-[var(--color-text-placeholder)]">
+            {t("diff.loading")}
+          </div>
+        ) : currentDiff ? (
+          <ReactDiffViewer
+            oldValue={currentDiff.oldContent}
+            newValue={currentDiff.newContent}
+            splitView={splitView}
+            compareMethod={DiffMethod.LINES}
+            useDarkTheme={true}
+            leftTitle={t("diff.before")}
+            rightTitle={t("diff.after")}
+            styles={DIFF_STYLES}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/diff/__tests__/DiffViewerPanel.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, cleanup } from "@testing-library/react";
+import React from "react";
+
+const mockClearDiff = vi.fn();
+
+vi.mock("../../../stores/use-git-store", () => ({
+  useGitStore: (selector: any) =>
+    selector({
+      currentDiff: {
+        filePath: "src/components/App.tsx",
+        oldContent: "old code",
+        newContent: "new code",
+      },
+      loadingDiff: false,
+      clearDiff: mockClearDiff,
+    }),
+}));
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: (k: string) => k }),
+}));
+
+vi.mock("react-diff-viewer-continued", () => ({
+  __esModule: true,
+  default: ({ oldValue, newValue }: any) => (
+    <div data-testid="diff-viewer">{oldValue} → {newValue}</div>
+  ),
+  DiffMethod: { LINES: "LINES" },
+}));
+
+describe("DiffViewerPanel", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("should render file name in header", async () => {
+    const { DiffViewerPanel } = await import("../DiffViewerPanel");
+    render(<DiffViewerPanel />);
+    expect(screen.getByText("App.tsx")).toBeDefined();
+  });
+
+  it("should render full file path", async () => {
+    const { DiffViewerPanel } = await import("../DiffViewerPanel");
+    render(<DiffViewerPanel />);
+    expect(screen.getByText("src/components/App.tsx")).toBeDefined();
+  });
+
+  it("should render diff viewer content", async () => {
+    const { DiffViewerPanel } = await import("../DiffViewerPanel");
+    render(<DiffViewerPanel />);
+    expect(screen.getByTestId("diff-viewer")).toBeDefined();
+  });
+
+  it("should render view mode toggle buttons", async () => {
+    const { DiffViewerPanel } = await import("../DiffViewerPanel");
+    render(<DiffViewerPanel />);
+    expect(screen.getByTitle("diff.lineByLine")).toBeDefined();
+    expect(screen.getByTitle("diff.sideBySide")).toBeDefined();
+  });
+
+  it("should return null when no diff and not loading", async () => {
+    vi.resetModules();
+    vi.doMock("../../../stores/use-git-store", () => ({
+      useGitStore: (selector: any) => selector({ currentDiff: null, loadingDiff: false, clearDiff: mockClearDiff }),
+    }));
+    const mod = await import("../DiffViewerPanel");
+    const { container } = render(<mod.DiffViewerPanel />);
+    expect(container.innerHTML).toBe("");
+    vi.resetModules();
+  });
+});

package/templates/agent/src/mainview/components/explorer/ConfirmDialog.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmDialogProps {
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export function ConfirmDialog({ title, message, onConfirm, onCancel }: ConfirmDialogProps) {
+  const { t } = useTranslation();
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") onCancel();
+    },
+    [onCancel],
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onCancel();
+      }}
+    >
+      <div className="bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-lg shadow-2xl p-4 min-w-[300px] max-w-[400px]">
+        <h3 className="text-sm font-semibold text-[var(--color-text-primary)] mb-2">{title}</h3>
+        <p className="text-xs text-[var(--color-text-secondary)] mb-4">{message}</p>
+        <div className="flex justify-end gap-2">
+          <button
+            className="px-3 py-1.5 text-xs bg-[var(--color-bg-tertiary)] hover:bg-[var(--color-bg-active)] rounded transition-colors text-[var(--color-text-secondary)]"
+            onClick={onCancel}
+          >
+            {t("common.cancel")}
+          </button>
+          <button
+            className="px-3 py-1.5 text-xs bg-red-600 hover:bg-red-700 rounded transition-colors text-white"
+            onClick={onConfirm}
+          >
+            {t("common.delete")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/agent/src/mainview/components/explorer/ContextMenu.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useRef, useCallback } from "react";
+
+export interface MenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  onClick: () => void;
+  danger?: boolean;
+  divider?: boolean;
+}
+
+interface ContextMenuProps {
+  x: number;
+  y: number;
+  items: MenuItem[];
+  onClose: () => void;
+}
+
+export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Adjust position to stay within viewport
+  const adjustedX = useRef(x);
+  const adjustedY = useRef(y);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (rect.right > vw) adjustedX.current = Math.max(0, x - rect.width);
+    if (rect.bottom > vh) adjustedY.current = Math.max(0, y - rect.height);
+    el.style.left = `${adjustedX.current}px`;
+    el.style.top = `${adjustedY.current}px`;
+  }, [x, y]);
+
+  const handleClickOutside = useCallback((e: MouseEvent) => {
+    if (ref.current && !ref.current.contains(e.target as Node)) {
+      onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClickOutside, onClose]);
+
+  return (
+    <div
+      ref={ref}
+      className="fixed z-50 min-w-[160px] bg-[var(--color-bg-secondary)] border border-[var(--color-border-secondary)] rounded-md shadow-xl py-1"
+      style={{ left: adjustedX.current, top: adjustedY.current }}
+    >
+      {items.map((item, i) => (
+        <div key={i}>
+          {item.divider && i > 0 && <div className="border-t border-[var(--color-border-secondary)] my-1" />}
+          <button
+            className={`w-full text-left px-3 py-1.5 text-xs flex items-center gap-2 transition-colors ${
+              item.danger
+                ? "text-[var(--color-text-error)] hover:bg-red-900/30"
+                : "text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-hover)]"
+            }`}
+            onClick={() => {
+              item.onClick();
+              onClose();
+            }}
+          >
+            {item.icon && <span className="w-3.5 shrink-0">{item.icon}</span>}
+            {item.label}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}