feat: add main features

Agents for developpement added + frontend add + backend added. Git viewer created + agent and template creator + layout and project creator

frontend/src/features/layout/layoutTabsGitGraph.test.tsx

@@ -0,0 +1,102 @@
+/**
+ * Tests for the LayoutTabs + git-graph layout creation flow.
+ *
+ * Covers:
+ * - The "+" button shows a create-kind dropdown.
+ * - Choosing "Git graph" from the dropdown creates a layout with kind=gitGraph.
+ * - A ⎇ badge is visible on git-graph layout tabs.
+ * - Creating a terminal layout does NOT show the ⎇ badge.
+ * - The mock `createLayout` correctly stores the kind.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+
+import type { Gateways } from "@/ports";
+import { MockLayoutGateway, MockAgentGateway, MockTerminalGateway } from "@/adapters/mock";
+import { DIProvider } from "@/app/di";
+import { LayoutTabs } from "./LayoutTabs";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function renderTabs(
+  layout: MockLayoutGateway,
+  projectId = "p1",
+  onActiveLayoutChange = vi.fn(),
+) {
+  const gateways = {
+    layout,
+    terminal: new MockTerminalGateway(),
+    agent: new MockAgentGateway(),
+  } as unknown as Gateways;
+  return render(
+    <DIProvider gateways={gateways}>
+      <LayoutTabs projectId={projectId} onActiveLayoutChange={onActiveLayoutChange} />
+    </DIProvider>,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("LayoutTabs — git graph kind", () => {
+  it("+ button shows a dropdown menu with Terminal and Git graph options", async () => {
+    const layout = new MockLayoutGateway();
+    renderTabs(layout);
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("create layout")).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByLabelText("create layout"));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("create terminal layout")).toBeTruthy();
+      expect(screen.getByLabelText("create git graph layout")).toBeTruthy();
+    });
+  });
+
+  it("MockLayoutGateway.createLayout stores kind=gitGraph correctly", async () => {
+    const layout = new MockLayoutGateway();
+    const { layoutId } = await layout.createLayout("p1", "My Graph", "gitGraph");
+    const { layouts } = await layout.listLayouts("p1");
+    const created = layouts.find((l) => l.id === layoutId);
+    expect(created).toBeDefined();
+    expect(created!.kind).toBe("gitGraph");
+  });
+
+  it("MockLayoutGateway.createLayout defaults to kind=terminal", async () => {
+    const layout = new MockLayoutGateway();
+    const { layoutId } = await layout.createLayout("p1", "My Terminal");
+    const { layouts } = await layout.listLayouts("p1");
+    const created = layouts.find((l) => l.id === layoutId);
+    expect(created!.kind).toBe("terminal");
+  });
+
+  it("git graph tab shows the ⎇ badge", async () => {
+    const layout = new MockLayoutGateway();
+    // Seed a git-graph layout directly.
+    await layout.createLayout("p1", "Graph Tab", "gitGraph");
+    renderTabs(layout);
+
+    await waitFor(() => {
+      // The aria-label "git graph layout" should be present.
+      expect(screen.getByLabelText("git graph layout")).toBeTruthy();
+    });
+  });
+
+  it("terminal tab does NOT show the ⎇ badge", async () => {
+    const layout = new MockLayoutGateway();
+    // Only the default "terminal" layout.
+    renderTabs(layout);
+
+    await waitFor(() => {
+      expect(screen.getByText("Default")).toBeTruthy();
+    });
+
+    expect(screen.queryByLabelText("git graph layout")).toBeNull();
+  });
+});