loki-mode 6.79.0 → 6.80.0

package/magic/testing/test_generator.py

@@ -0,0 +1,453 @@
+"""Test scaffold generator for Magic components.
+
+Generates Vitest tests for React components and Playwright tests for
+Web Components. Uses heuristics from the spec (detected props, behaviors,
+accessibility requirements) to scaffold meaningful assertions, not just
+smoke tests.
+"""
+
+import re
+from pathlib import Path
+from typing import Optional
+
+
+class TestGenerator:
+    """Generate test scaffolds for Magic-generated components.
+
+    The generator consumes a component's source code together with its
+    spec (typically a markdown doc) and produces unit tests (Vitest for
+    React) or end-to-end tests (Playwright for Web Components) with
+    assertions that go beyond smoke tests. A Storybook-compatible
+    snapshot story can also be produced for Chromatic integration.
+    """
+
+    def __init__(self, project_dir: str = "."):
+        self.project_dir = Path(project_dir)
+
+    # ----- Public API --------------------------------------------------
+
+    def generate_react_test(
+        self, component_code: str, component_name: str, spec: str
+    ) -> str:
+        """Generate a Vitest + React Testing Library test file.
+
+        Included assertions:
+        - Component renders without crashing
+        - Each prop is exercised
+        - Accessibility: has expected ARIA attributes
+        - Keyboard interaction (if spec mentions it)
+        - Snapshot test
+        """
+        safe_name = self._safe_name(component_name)
+        props = self._extract_props(spec)
+        a11y_reqs = self._extract_a11y(spec)
+        keyboard = self._has_keyboard_interaction(spec)
+
+        default_props = self._default_props(props)
+
+        lines = []
+        lines.append('import { describe, it, expect } from "vitest";')
+        lines.append('import { render, screen } from "@testing-library/react";')
+        if keyboard:
+            lines.append('import { fireEvent } from "@testing-library/react";')
+        lines.append(f'import {{ {safe_name} }} from "./{safe_name}";')
+        lines.append("")
+        lines.append(f'describe("{safe_name}", () => {{')
+        lines.append('    it("renders without crashing", () => {')
+        lines.append(
+            f"        render(<{safe_name}{(' ' + default_props) if default_props else ''} />);"
+        )
+        lines.append(
+            f'        expect(screen.getByTestId("{safe_name.lower()}")).toBeDefined();'
+        )
+        lines.append("    });")
+        lines.append("")
+
+        for prop in props:
+            lines.append(self._prop_test(safe_name, prop))
+
+        for req in a11y_reqs:
+            lines.append(self._a11y_test(safe_name, req))
+
+        if keyboard:
+            lines.append(self._keyboard_test(safe_name, default_props))
+
+        lines.append(self._snapshot_test(safe_name, default_props))
+        lines.append("});")
+        lines.append("")
+        return "\n".join(lines)
+
+    def generate_webcomponent_test(
+        self, component_code: str, component_name: str, spec: str
+    ) -> str:
+        """Generate a Playwright test for a Web Component.
+
+        Covers:
+        - Component mounts in a page and shadow root renders
+        - Attributes (derived from detected props) reflect to state
+        - Accessibility requirements mentioned in spec
+        """
+        safe_name = self._safe_name(component_name)
+        tag = self._kebab_case(safe_name)
+        props = self._extract_props(spec)
+        a11y_reqs = self._extract_a11y(spec)
+
+        lines = []
+        lines.append('import { test, expect } from "@playwright/test";')
+        lines.append("")
+        lines.append(f'const FIXTURE_URL = "/fixtures/{tag}.html";')
+        lines.append("")
+        lines.append(f'test.describe("{safe_name} web component", () => {{')
+        lines.append('    test("mounts and exposes shadow DOM", async ({ page }) => {')
+        lines.append("        await page.goto(FIXTURE_URL);")
+        lines.append(f'        const host = page.locator("{tag}");')
+        lines.append("        await expect(host).toBeVisible();")
+        lines.append(
+            "        const hasShadow = await host.evaluate("
+            "(el) => !!el.shadowRoot);"
+        )
+        lines.append("        expect(hasShadow).toBe(true);")
+        lines.append("    });")
+        lines.append("")
+
+        for prop in props:
+            attr = self._kebab_case(prop["name"])
+            lines.append(
+                f'    test("reflects attribute {attr}", async ({{ page }}) => {{'
+            )
+            lines.append("        await page.goto(FIXTURE_URL);")
+            lines.append(f'        const host = page.locator("{tag}");')
+            lines.append(
+                f'        await host.evaluate((el, v) => el.setAttribute("{attr}", v), '
+                f'"{self._sample_value(prop)}");'
+            )
+            lines.append(
+                f'        const value = await host.getAttribute("{attr}");'
+            )
+            lines.append(
+                f'        expect(value).toBe("{self._sample_value(prop)}");'
+            )
+            lines.append("    });")
+            lines.append("")
+
+        for req in a11y_reqs:
+            slug = re.sub(r"\W+", "-", req.lower()).strip("-") or "a11y"
+            lines.append(
+                f'    test("a11y: {req}", async ({{ page }}) => {{'
+            )
+            lines.append("        await page.goto(FIXTURE_URL);")
+            lines.append(f'        const host = page.locator("{tag}");')
+            lines.append("        const role = await host.getAttribute(\"role\");")
+            lines.append("        const ariaLabel = await host.getAttribute(\"aria-label\");")
+            lines.append(
+                "        expect(role || ariaLabel).toBeTruthy();"
+            )
+            lines.append(f'        // requirement: {req}')
+            lines.append(f'        // tag: {slug}')
+            lines.append("    });")
+            lines.append("")
+
+        lines.append("});")
+        lines.append("")
+        return "\n".join(lines)
+
+    def generate_snapshot(self, component_name: str) -> str:
+        """Generate a Storybook story (also usable as Chromatic snapshot)."""
+        safe_name = self._safe_name(component_name)
+        lines = []
+        lines.append(f'import type {{ Meta, StoryObj }} from "@storybook/react";')
+        lines.append(f'import {{ {safe_name} }} from "./{safe_name}";')
+        lines.append("")
+        lines.append(f'const meta: Meta<typeof {safe_name}> = {{')
+        lines.append(f'    title: "Magic/{safe_name}",')
+        lines.append(f'    component: {safe_name},')
+        lines.append('    parameters: {')
+        lines.append('        chromatic: { viewports: [320, 768, 1280] },')
+        lines.append('    },')
+        lines.append("};")
+        lines.append("")
+        lines.append("export default meta;")
+        lines.append(f'type Story = StoryObj<typeof {safe_name}>;')
+        lines.append("")
+        lines.append("export const Default: Story = {")
+        lines.append("    args: {},")
+        lines.append("};")
+        lines.append("")
+        return "\n".join(lines)
+
+    # ----- Spec parsing helpers ---------------------------------------
+
+    def _extract_props(self, spec: str) -> list:
+        """Parse `## Props` section of spec to get prop names and types.
+
+        Supports a few common markdown styles:
+        - ``- name (type): description``
+        - ``| name | type | description |`` (markdown table rows)
+        - ``* name - type - description``
+        Returns a list of dicts: {name, type, description, required}.
+        """
+        if not spec:
+            return []
+        section = self._extract_section(spec, "Props")
+        if not section:
+            return []
+
+        props: list = []
+        seen: set = set()
+
+        # Dash/bullet lines: - name (type[, required]): description
+        bullet_re = re.compile(
+            r"^\s*[-*]\s+`?(?P<name>[A-Za-z_][\w-]*)`?"
+            r"(?:\s*\((?P<type>[^)]+)\))?"
+            r"\s*[:\-]?\s*(?P<desc>.*)$"
+        )
+        # Table rows: | name | type | desc |
+        table_re = re.compile(
+            r"^\s*\|\s*`?(?P<name>[A-Za-z_][\w-]*)`?\s*\|"
+            r"\s*(?P<type>[^|]+)\|"
+            r"\s*(?P<desc>[^|]*)\|"
+        )
+
+        for raw_line in section.splitlines():
+            line = raw_line.rstrip()
+            if not line.strip():
+                continue
+            # Skip markdown table header/separator rows
+            if re.match(r"^\s*\|?\s*-{3,}", line):
+                continue
+            if re.match(r"^\s*\|\s*name\s*\|", line, flags=re.IGNORECASE):
+                continue
+
+            m = table_re.match(line)
+            if not m:
+                m = bullet_re.match(line)
+            if not m:
+                continue
+
+            name = m.group("name").strip()
+            if not name or name.lower() == "name":
+                continue
+            if name in seen:
+                continue
+            seen.add(name)
+
+            raw_type = (m.groupdict().get("type") or "string").strip()
+            required = False
+            lower_type = raw_type.lower()
+            if "required" in lower_type:
+                required = True
+                raw_type = re.sub(
+                    r",?\s*required", "", raw_type, flags=re.IGNORECASE
+                ).strip() or "string"
+
+            desc = (m.groupdict().get("desc") or "").strip().strip("|")
+
+            props.append(
+                {
+                    "name": name,
+                    "type": raw_type or "string",
+                    "description": desc,
+                    "required": required,
+                }
+            )
+        return props
+
+    def _extract_a11y(self, spec: str) -> list:
+        """Parse `## Accessibility` section.
+
+        Returns a flat list of strings, each describing one requirement.
+        """
+        if not spec:
+            return []
+        section = self._extract_section(spec, "Accessibility")
+        if not section:
+            return []
+
+        reqs: list = []
+        for raw_line in section.splitlines():
+            line = raw_line.strip()
+            if not line:
+                continue
+            if line.startswith(("-", "*")):
+                reqs.append(line[1:].strip())
+            elif re.match(r"^\d+\.\s+", line):
+                reqs.append(re.sub(r"^\d+\.\s+", "", line))
+        return reqs
+
+    def _extract_section(self, spec: str, heading: str) -> Optional[str]:
+        """Return the body of a markdown ``## <heading>`` section."""
+        pattern = re.compile(
+            r"^#{1,6}\s+" + re.escape(heading) + r"\s*$",
+            flags=re.IGNORECASE | re.MULTILINE,
+        )
+        match = pattern.search(spec)
+        if not match:
+            return None
+        start = match.end()
+        # Next heading of same or higher level
+        next_heading = re.compile(r"^#{1,6}\s+\S", flags=re.MULTILINE)
+        tail = spec[start:]
+        next_match = next_heading.search(tail)
+        body = tail[: next_match.start()] if next_match else tail
+        return body.strip()
+
+    def _has_keyboard_interaction(self, spec: str) -> bool:
+        if not spec:
+            return False
+        patterns = [
+            r"\bkeyboard\b",
+            r"\bkeypress\b",
+            r"\bkeydown\b",
+            r"\bEnter key\b",
+            r"\bSpace key\b",
+            r"\btab\s+order\b",
+        ]
+        return any(re.search(p, spec, flags=re.IGNORECASE) for p in patterns)
+
+    # ----- JSX/test rendering helpers ---------------------------------
+
+    def _default_props(self, props: list) -> str:
+        """Produce default JSX props string: prop1="value" prop2={true}"""
+        pieces: list = []
+        for prop in props:
+            pieces.append(self._jsx_prop(prop))
+        return " ".join(pieces)
+
+    def _jsx_prop(self, prop: dict) -> str:
+        name = prop["name"]
+        ptype = (prop.get("type") or "string").lower()
+        if "bool" in ptype:
+            return f"{name}={{true}}"
+        if "number" in ptype or "int" in ptype or "float" in ptype:
+            return f"{name}={{0}}"
+        if "func" in ptype or "=>" in ptype or "callback" in ptype:
+            return f"{name}={{() => {{}}}}"
+        if "array" in ptype or "[]" in ptype:
+            return f"{name}={{[]}}"
+        if "object" in ptype or "{" in ptype:
+            return f"{name}={{{{}}}}"
+        # default: string
+        return f'{name}="{self._sample_value(prop)}"'
+
+    def _sample_value(self, prop: dict) -> str:
+        ptype = (prop.get("type") or "string").lower()
+        if "bool" in ptype:
+            return "true"
+        if "number" in ptype or "int" in ptype or "float" in ptype:
+            return "1"
+        return f"sample-{prop['name']}"
+
+    def _prop_test(self, name: str, prop: dict) -> str:
+        prop_name = prop["name"]
+        ptype = (prop.get("type") or "string").lower()
+        default_jsx = self._jsx_prop(prop)
+        lines = []
+        lines.append(f'    it("accepts prop {prop_name}", () => {{')
+        lines.append(f"        render(<{name} {default_jsx} />);")
+        if "bool" in ptype:
+            lines.append(
+                f'        const el = screen.getByTestId("{name.lower()}");'
+            )
+            lines.append("        expect(el).toBeDefined();")
+        elif "func" in ptype or "=>" in ptype or "callback" in ptype:
+            lines.append(
+                f'        const el = screen.getByTestId("{name.lower()}");'
+            )
+            lines.append("        expect(el).toBeDefined();")
+        else:
+            sample = self._sample_value(prop)
+            lines.append(
+                f'        const el = screen.getByTestId("{name.lower()}");'
+            )
+            lines.append("        expect(el).toBeDefined();")
+            lines.append(f'        // prop {prop_name} sample value: {sample}')
+        lines.append("    });")
+        lines.append("")
+        return "\n".join(lines)
+
+    def _a11y_test(self, name: str, req: str) -> str:
+        lower = req.lower()
+        slug = re.sub(r"\W+", " ", req).strip().replace(" ", "-")[:60] or "a11y"
+        lines = []
+        lines.append(f'    it("a11y: {req}", () => {{')
+        lines.append(f"        render(<{name} />);")
+        lines.append(
+            f'        const el = screen.getByTestId("{name.lower()}");'
+        )
+        if "role=" in lower or "role " in lower:
+            # e.g. "role=button"
+            m = re.search(r"role[=\s]+['\"]?([\w-]+)", lower)
+            role = m.group(1) if m else "presentation"
+            lines.append(
+                f'        expect(el.getAttribute("role") || "").toMatch(/{role}/i);'
+            )
+        elif "aria-label" in lower:
+            lines.append(
+                '        expect(el.getAttribute("aria-label")).not.toBeNull();'
+            )
+        elif "aria-" in lower:
+            m = re.search(r"aria-([\w-]+)", lower)
+            attr = f"aria-{m.group(1)}" if m else "aria-label"
+            lines.append(
+                f'        expect(el.getAttribute("{attr}")).not.toBeNull();'
+            )
+        elif "focus" in lower:
+            lines.append("        el.focus();")
+            lines.append("        expect(document.activeElement).toBe(el);")
+        else:
+            lines.append("        expect(el).toBeDefined();")
+        lines.append(f'        // requirement slug: {slug}')
+        lines.append("    });")
+        lines.append("")
+        return "\n".join(lines)
+
+    def _keyboard_test(self, name: str, default_props: str) -> str:
+        lines = []
+        lines.append('    it("handles keyboard interaction", () => {')
+        props_str = (" " + default_props) if default_props else ""
+        lines.append(f"        render(<{name}{props_str} />);")
+        lines.append(
+            f'        const el = screen.getByTestId("{name.lower()}");'
+        )
+        lines.append("        el.focus();")
+        lines.append(
+            '        fireEvent.keyDown(el, { key: "Enter", code: "Enter" });'
+        )
+        lines.append("        expect(el).toBeDefined();")
+        lines.append("    });")
+        lines.append("")
+        return "\n".join(lines)
+
+    def _snapshot_test(self, name: str, default_props: str) -> str:
+        props_str = (" " + default_props) if default_props else ""
+        lines = []
+        lines.append('    it("matches snapshot", () => {')
+        lines.append(
+            f"        const {{ container }} = render(<{name}{props_str} />);"
+        )
+        lines.append("        expect(container.firstChild).toMatchSnapshot();")
+        lines.append("    });")
+        return "\n".join(lines)
+
+    # ----- String helpers ---------------------------------------------
+
+    @staticmethod
+    def _safe_name(name: str) -> str:
+        """Produce a valid JS identifier from ``name``.
+
+        Keeps PascalCase if already valid; otherwise strips non-word
+        characters.
+        """
+        cleaned = re.sub(r"\W+", "", name or "")
+        if not cleaned:
+            return "Component"
+        if cleaned[0].isdigit():
+            cleaned = "C" + cleaned
+        return cleaned
+
+    @staticmethod
+    def _kebab_case(name: str) -> str:
+        step = re.sub(r"(?<!^)(?=[A-Z])", "-", name).lower()
+        step = re.sub(r"[_\s]+", "-", step)
+        step = re.sub(r"-{2,}", "-", step)
+        return step.strip("-")

package/magic/tokens/README.md

@@ -0,0 +1,83 @@
+# Magic Modules Design Tokens
+
+Design tokens are the named constants that describe Loki Mode's visual
+language: colors, spacing steps, typography, border radii, shadows, and
+motion curves. Generated components read these tokens so every new screen
+stays consistent with the rest of the dashboard and web app.
+
+## Files
+
+- `defaults.json` -- baseline tokens shipped with Magic Modules. Reflects the
+  live Loki Mode dashboard palette (primary `#553DE9`, success `#1FC5A8`,
+  etc.) and the Inter / JetBrains Mono type pairing.
+- `.loki/magic/tokens.json` (per project) -- optional override file. Merged
+  on top of the defaults at load time, so you only have to list the values
+  you want to change.
+
+## Override defaults
+
+Create `.loki/magic/tokens.json` at your project root:
+
+```json
+{
+  "colors": {
+    "primary": "#1E88E5",
+    "success": "#2E7D32"
+  },
+  "radii": {
+    "md": "10px"
+  }
+}
+```
+
+The loader deep-merges this file onto `defaults.json`, so any key you omit
+falls back to the shipped value.
+
+## Extract from an existing codebase
+
+Run the extractor to learn tokens from what's already in the repo (CSS
+custom properties, Tailwind spacing utilities, hex literals, font-family
+declarations, box-shadow values, border-radius declarations):
+
+```bash
+loki magic tokens extract          # dry run, prints observed tokens
+loki magic tokens extract --save   # writes to .loki/magic/tokens.json
+```
+
+Programmatic equivalent:
+
+```python
+from magic.core.design_tokens import DesignTokens
+
+tokens = DesignTokens(project_dir=".")
+observed = tokens.extract_from_codebase(save=True)
+```
+
+The extractor scans (relative to the project root):
+
+- `web-app/src/index.css` and any other `web-app/src/**/*.css`
+- `dashboard-ui/**/*.css` and `dashboard-ui/loki-unified-styles.js`
+- `dashboard/static/**/*.css`
+- `.tsx` and `.jsx` files under `web-app/src/` and `dashboard-ui/` for
+  Tailwind spacing classes and inline hex colors
+
+## How generated components use tokens
+
+The generator calls `DesignTokens.to_prompt_context()` and injects the
+resulting block into the component-generation prompt so the model always
+knows the approved palette, spacing scale, and type stack. Example output:
+
+```
+DESIGN TOKENS:
+Colors: primary=#553DE9, success=#1FC5A8, danger=#C45B5B, ...
+Spacing: xs=4px, sm=8px, md=12px, lg=16px, xl=24px
+Typography: Inter (body), JetBrains Mono (code)
+Radii: sm=4px, md=6px, lg=8px, xl=12px, full=9999px
+```
+
+Additional renderers for post-processing generated code:
+
+- `to_tailwind_config()` -- returns a Tailwind `theme.extend` dict you can
+  drop into a component-local `tailwind.config.js`.
+- `to_css_variables()` -- returns a `:root { --color-primary: ... }` CSS
+  block for plain-CSS components.

package/magic/tokens/defaults.json

@@ -0,0 +1,59 @@
+{
+  "colors": {
+    "primary": "#553DE9",
+    "primary-hover": "#4832c7",
+    "primary-foreground": "#FFFFFF",
+    "success": "#1FC5A8",
+    "warning": "#D4A03C",
+    "danger": "#C45B5B",
+    "info": "#2F71E3",
+    "background": "#FFFEFB",
+    "card": "#FFFFFF",
+    "border": "#ECEAE3",
+    "muted": "#939084",
+    "ink": "#36342E",
+    "dark-background": "#0F0F11",
+    "dark-card": "#1A1A1E",
+    "dark-border": "#2A2A30",
+    "dark-ink": "#E8E6E3"
+  },
+  "spacing": {
+    "xs": "4px",
+    "sm": "8px",
+    "md": "12px",
+    "lg": "16px",
+    "xl": "24px",
+    "2xl": "32px",
+    "3xl": "48px"
+  },
+  "typography": {
+    "font-sans": "Inter, -apple-system, sans-serif",
+    "font-mono": "JetBrains Mono, monospace",
+    "font-serif": "DM Serif Display, serif",
+    "size-xs": "11px",
+    "size-sm": "13px",
+    "size-base": "14px",
+    "size-lg": "16px",
+    "size-xl": "20px",
+    "size-h1": "28px"
+  },
+  "radii": {
+    "sm": "4px",
+    "md": "6px",
+    "lg": "8px",
+    "xl": "12px",
+    "full": "9999px"
+  },
+  "shadows": {
+    "sm": "0 1px 2px rgba(0,0,0,0.05)",
+    "md": "0 4px 6px -1px rgba(0,0,0,0.1)",
+    "lg": "0 8px 25px rgba(0,0,0,0.1)",
+    "focus-ring": "0 0 0 3px rgba(85,61,233,0.15)"
+  },
+  "motion": {
+    "duration-fast": "100ms",
+    "duration-normal": "200ms",
+    "duration-slow": "300ms",
+    "ease-default": "cubic-bezier(0.4, 0, 0.2, 1)"
+  }
+}

package/mcp/__init__.py

@@ -57,4 +57,4 @@ try:
 except ImportError:
     __all__ = ['mcp']
 
-__version__ = '6.79.0'
+__version__ = '6.80.0'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "loki-mode",
-  "version": "6.79.0",
+  "version": "6.80.0",
   "description": "Loki Mode by Autonomi - Multi-agent autonomous startup system for Claude Code, Codex CLI, and Gemini CLI",
   "keywords": [
     "agent",
@@ -75,6 +75,7 @@
     "events/",
     "memory/",
     "learning/",
+    "magic/",
     "templates/",
     "dashboard/*.py",
     "dashboard/static/",