Skip to content

Feat/agent mode#28

Merged
Kripu77 merged 22 commits into
mainfrom
feat/agent-mode
Apr 4, 2026
Merged

Feat/agent mode#28
Kripu77 merged 22 commits into
mainfrom
feat/agent-mode

Conversation

@Kripu77
Copy link
Copy Markdown
Owner

@Kripu77 Kripu77 commented Apr 4, 2026

Summary by CodeRabbit

Release Notes

  • New Features

    • Added AI agent pane with chat interface, provider selection, and model configuration.
    • Introduced AI provider settings dialog for managing API keys and model preferences.
    • Added keyboard shortcut (Ctrl+J / Cmd+J) to toggle agent pane.
    • Enabled board persistence and management capabilities.
    • Added sticky note color variants.
  • Bug Fixes & Improvements

    • Enhanced viewport focusing and element reveal animations.
    • Improved board element insertion and positioning.
  • Documentation

    • Added contributing guidelines and security policy.
    • Created comprehensive changelog and developer documentation.
    • Updated README with new capabilities and architecture overview.

Kripu77 added 22 commits April 4, 2026 21:13
- Add Peggy parser build step to package.json scripts
- Add tsconfig path aliases for @thinkix/ai sub-exports
- Update vitest aliases to match new AI package layout
- Configure Playwright to run against production build on port 3100
- Exclude generated components/ dir and parser.js from linting
- Upgrade ai SDK to v6 and add agent-related dependencies
- Move lib/ -> src/ with updated exports
- Replace canvas command model with Zod tool schemas
- Add provider resolution with env var fallback chain
- Add system prompt builder and DSL reference
- Add web search tool definition
- Add STICKY_COLORS map and DEFAULT_STICKY_COLOR constant
- Add createStickyNoteElement helper with color support
- Refactor with-sticky-note plugin to use shared color config
- Add calculateFocusedViewport for zoom-to-fit on new elements
- Add focusAndRevealElements with animated pan/zoom and reveal effects
- Add insertElementDirect for single-element board insertion
- Export new utilities from barrel
- Add AgentPane component with Cmd+J toggle and resizable panel
- Add AgentToolRenderer for custom tool result display
- Add AgentSettingsDialog for per-user API key configuration
- Add useAgentChat hook with streaming and tool execution
- Add Peggy-based DSL parser (thinkix.peggy) for canvas operations
- Add DSL compiler converting AST to Plait elements
- Add serializer converting Plait elements back to DSL
- Add file-system-ops for ls, read, write, patch, rm, select tools
- Add /api/agent route with streaming LLM responses via AI SDK v6
- Add /api/agent/config endpoint for safe client-side config
- Remove deprecated /api/chat and /api/structure routes
- Extract boardAdapter and BoardInfo/BoardData types
- Add mapBoardDtoToBoard and toBoardMetadata helpers
- Return next board after delete instead of void
- Sync board metadata on save operations
- Add use-board-store unit tests
- Add initialElements and roomId props to MockYjsProvider
- Derive syncState from browser online/offline events
- Export YjsCollaborationContext and context value type
- Extract localStorage helpers in use-collaboration hook
- Immediately persist enable/disable actions to storage
- Remove unused MockRoom component
- Bridge board state between Plait and Yjs mock provider
- Pass roomId and initialElements to MockYjsProvider
- Sync local changes to collaboration and vice versa
- Properly disable collaboration and clear stored state
- Add Cmd+J keyboard shortcut to toggle agent pane
- Render AgentPane in resizable side panel
- Add data-element-count and data-has-elements attrs to board div
- Minor whitespace cleanup in BoardLayoutSlots
- Add testids to AppMenu items, export options, and dialogs
- Add testid to shape tool menu items
- Add testids to collaborate button and status bar elements
- Add dataTestId prop to ShareButton component
- Register global keydown listener with editor/input exclusion
- Support both Cmd+Z and Cmd+Shift+Z / Cmd+Y for redo
- Move board null check after hook to satisfy rules-of-hooks
- Add data-testid to undo and redo buttons
- Add streamdown styles import for markdown rendering
- Add CSS custom property mappings for theme colors
- Fix plait text container wrapping with pre-wrap and word-break
- Add lib/utils.ts with cn() utility
- Handle getActors returning object instead of array in sequence parser
- Replace @thinkix/shared logger with inline console logger in flowchart
- Preserve metadata from text nodes in class transformer
- Switch MarkdownToMindmapDialog to insertElementDirect + focus/reveal
- Add focus/reveal animation after mermaid board insertion
- Separate preview parsing from insert parsing in markdown dialog
- Centralize board wait, app menu, and collab helpers in utils.ts
- Replace fragile text/role selectors with data-testid
- Use production build (port 3100) instead of dev server
- Simplify collaboration tests with enable/draw helpers
- Add agent pane E2E spec and agent stream test helper
- Remove old ai-commands test (replaced by tool schemas)
- Expand ai-core tests for provider resolution and env fallbacks
- Add tests for DSL compiler, serializer, system prompt, tool schemas
- Add tests for run-tool, connection-graph, diagram-layout, presentation-layer
- Add component tests for agent-tool-renderer and diagram-preview
- Update insertion and sticky-note tests for new utilities
- Update mermaid and MermaidToBoardDialog tests
- Add AGENTS.md with comprehensive project guide for Codex
- Update CLAUDE.md with agent architecture and DSL reference
- Update README with server env var configuration
- Add .env.example with all supported AI env vars
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 4, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
thinkix Ready Ready Preview, Comment Apr 4, 2026 11:04am

@Kripu77 Kripu77 marked this pull request as ready for review April 4, 2026 11:04
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 4, 2026

Warning

Rate limit exceeded

@Kripu77 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 31 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 18 minutes and 31 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0bce9909-7244-492a-9393-01e93d01d02c

📥 Commits

Reviewing files that changed from the base of the PR and between 955c845 and ecabb4f.

⛔ Files ignored due to path filters (2)
  • bun.lock is excluded by !**/*.lock
  • tests/components/__snapshots__/collaborate-button.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (131)
  • .env.example
  • .github/ISSUE_TEMPLATE/bug_report.yml
  • .github/ISSUE_TEMPLATE/config.yml
  • .github/ISSUE_TEMPLATE/feature_request.yml
  • .gitignore
  • AGENTS.md
  • CHANGELOG.md
  • CLAUDE.md
  • CONTRIBUTING.md
  • LICENSE
  • README.md
  • SECURITY.md
  • app/api/agent/config/route.ts
  • app/api/agent/route.ts
  • app/api/chat/route.ts
  • app/api/structure/route.ts
  • app/globals.css
  • app/page.tsx
  • app/styles/plait-react-board.css
  • app/test/collaboration/page.tsx
  • eslint.config.mjs
  • features/agent/components/AgentPane.tsx
  • features/agent/components/AgentSettingsDialog.tsx
  • features/agent/components/AgentToolRenderer.tsx
  • features/agent/components/DiagramPreview.tsx
  • features/agent/components/LsTreeView.tsx
  • features/agent/components/WebSearchResults.tsx
  • features/agent/components/ai-elements/conversation.tsx
  • features/agent/components/ai-elements/file-tree.tsx
  • features/agent/components/ai-elements/message.tsx
  • features/agent/components/ai-elements/prompt-input.tsx
  • features/agent/components/ai-elements/reasoning.tsx
  • features/agent/components/ai-elements/shimmer.tsx
  • features/agent/components/ai-elements/ui/collapsible.tsx
  • features/agent/components/provider-icons.tsx
  • features/agent/hooks/use-agent-chat.ts
  • features/agent/index.ts
  • features/agent/tools/chain-parser.ts
  • features/agent/tools/commands/index.ts
  • features/agent/tools/connection-graph.ts
  • features/agent/tools/diagram-layout.ts
  • features/agent/tools/dsl/compiler.ts
  • features/agent/tools/dsl/parser.d.ts
  • features/agent/tools/dsl/parser.js
  • features/agent/tools/dsl/parser.ts
  • features/agent/tools/dsl/thinkix.peggy
  • features/agent/tools/dsl/types.ts
  • features/agent/tools/presentation-layer.ts
  • features/agent/tools/result-types.ts
  • features/agent/tools/run-tool.ts
  • features/agent/tools/serializer.ts
  • features/board/components/BoardCanvas.tsx
  • features/board/components/BoardLayoutSlots.tsx
  • features/board/hooks/use-board-state.tsx
  • features/board/plugins/with-sticky-note.ts
  • features/board/utils/index.ts
  • features/board/utils/insertion.ts
  • features/board/utils/sticky-note.ts
  • features/collaboration/components/collaborate-button.tsx
  • features/collaboration/components/collaborative-board.tsx
  • features/dialogs/components/MarkdownToMindmapDialog.tsx
  • features/dialogs/components/MermaidToBoardDialog.tsx
  • features/toolbar/components/AppMenu.tsx
  • features/toolbar/components/BoardToolbar.tsx
  • features/toolbar/components/UndoRedoButtons.tsx
  • lib/utils.ts
  • next-env.d.ts
  • package.json
  • packages/ai/lib/commands.ts
  • packages/ai/lib/core.ts
  • packages/ai/lib/index.ts
  • packages/ai/package.json
  • packages/ai/prompts/dsl-reference.ts
  • packages/ai/prompts/system.ts
  • packages/ai/src/core.ts
  • packages/ai/src/index.ts
  • packages/ai/src/prompts.ts
  • packages/ai/src/tool-schemas.ts
  • packages/ai/src/tools/index.ts
  • packages/ai/src/tools/web-search.ts
  • packages/collaboration/src/adapter/mock-yjs-provider.tsx
  • packages/collaboration/src/adapter/yjs-provider.tsx
  • packages/collaboration/src/components/ui.tsx
  • packages/collaboration/src/hooks/use-collaboration.ts
  • packages/collaboration/src/test-utils.ts
  • packages/mermaid-to-thinkix/src/parser/flowchart.ts
  • packages/mermaid-to-thinkix/src/parser/sequence.ts
  • packages/mermaid-to-thinkix/src/transformers/class.ts
  • packages/storage/lib/board-adapter.ts
  • packages/storage/lib/index.ts
  • packages/storage/lib/use-board-store.test.ts
  • packages/storage/lib/use-board-store.ts
  • playwright.config.ts
  • shared/constants/index.ts
  • shared/constants/sticky-colors.ts
  • tests/components/MermaidToBoardDialog.test.tsx
  • tests/components/agent-tool-renderer.test.tsx
  • tests/components/diagram-preview.test.tsx
  • tests/components/ls-tree-view.test.tsx
  • tests/e2e/agent-pane.spec.ts
  • tests/e2e/board-management.spec.ts
  • tests/e2e/collaboration-undo-clear.spec.ts
  • tests/e2e/collaboration.test.ts
  • tests/e2e/edge-cases.spec.ts
  • tests/e2e/element-manipulation.spec.ts
  • tests/e2e/file-operations.spec.ts
  • tests/e2e/fill-stroke.spec.ts
  • tests/e2e/grid-background.spec.ts
  • tests/e2e/helpers/agent-stream.ts
  • tests/e2e/helpers/browser.ts
  • tests/e2e/image.spec.ts
  • tests/e2e/undo-redo.spec.ts
  • tests/e2e/utils.ts
  • tests/unit/MermaidToBoardDialog.test.tsx
  • tests/unit/agent-route.test.ts
  • tests/unit/ai-commands.test.ts
  • tests/unit/ai-core.test.ts
  • tests/unit/connection-graph.test.ts
  • tests/unit/diagram-layout.test.ts
  • tests/unit/dsl-compiler.test.ts
  • tests/unit/insertion.test.ts
  • tests/unit/mermaid-transformers.test.ts
  • tests/unit/presentation-layer.test.ts
  • tests/unit/prompt-input.test.tsx
  • tests/unit/run-tool.test.ts
  • tests/unit/serializer.test.ts
  • tests/unit/sticky-note.test.ts
  • tests/unit/system-prompt.test.ts
  • tests/unit/tool-schemas.test.ts
  • tsconfig.json
  • vitest.config.mts
📝 Walkthrough

Walkthrough

This pull request introduces a comprehensive AI agent system for Thinkix that enables AI-driven board inspection and manipulation through a custom DSL. It adds a streaming agent API, client-side chat UI with tool rendering, a domain-specific language parser/compiler for board commands, extensive board operation utilities, and substantial new documentation and test coverage.

Changes

Cohort / File(s) Summary
Documentation & Project Setup
.env.example, README.md, AGENTS.md, CHANGELOG.md, CONTRIBUTING.md, LICENSE, SECURITY.md, .github/ISSUE_TEMPLATE/*, CLAUDE.md
Added comprehensive project documentation including environment variables, contribution guidelines, security policy, GitHub issue templates, and AI agent architecture overview.
AI Package Restructuring
packages/ai/lib/index.ts, packages/ai/lib/core.ts, packages/ai/lib/commands.ts, packages/ai/src/core.ts, packages/ai/src/index.ts, packages/ai/src/prompts.ts, packages/ai/src/tool-schemas.ts, packages/ai/src/tools/*, packages/ai/prompts/*, packages/ai/package.json
Restructured AI package from lib/ to src/ with new provider resolution logic (resolveAIProvider, resolveAIModel, resolveAIKey), Zod-based tool schemas, system prompt builders, and web search implementation.
Agent API Routes
app/api/agent/route.ts, app/api/agent/config/route.ts, app/api/chat/route.ts, app/api/structure/route.ts
Added new POST route handler for streaming agent responses with message conversion, system prompt building, tool calling, and error handling; removed legacy chat and structure endpoints.
Agent UI Components
features/agent/components/AgentPane.tsx, features/agent/components/AgentSettingsDialog.tsx, features/agent/components/AgentToolRenderer.tsx, features/agent/components/DiagramPreview.tsx, features/agent/components/LsTreeView.tsx, features/agent/components/WebSearchResults.tsx, features/agent/components/provider-icons.tsx, features/agent/components/ai-elements/*
Implemented complete agent UI with resizable chat pane, settings dialog, tool output rendering, diagram preview, file tree visualization, web search results, and reusable conversation primitives.
Agent Tools & DSL
features/agent/tools/dsl/*, features/agent/tools/chain-parser.ts, features/agent/tools/commands/index.ts, features/agent/tools/run-tool.ts, features/agent/tools/serializer.ts, features/agent/tools/connection-graph.ts, features/agent/tools/diagram-layout.ts, features/agent/tools/presentation-layer.ts, features/agent/tools/result-types.ts, features/agent/index.ts
Introduced complete DSL implementation (Peggy grammar, PEG.js parser, compiler) for board operations, command execution engine with 13 commands (ls, cd, touch, mkdir, rm, cp, patch, write, etc.), element serialization, diagram detection/layout, and output formatting.
Board Utilities & Integration
features/board/utils/insertion.ts, features/board/utils/sticky-note.ts, features/board/utils/index.ts, features/board/components/BoardCanvas.tsx, features/board/plugins/with-sticky-note.ts, features/board/hooks/use-board-state.tsx
Added viewport-focused insertion, animated element reveal, sticky-note creation/sizing utilities, and updated board state mobile detection; added element count metadata to canvas.
Agent Chat Hook
features/agent/hooks/use-agent-chat.ts
Implemented comprehensive chat hook that manages message history, tool execution, board state synchronization, and lifecycle callbacks for board operations.
Collaboration Enhancements
packages/collaboration/src/adapter/mock-yjs-provider.tsx, packages/collaboration/src/adapter/yjs-provider.tsx, packages/collaboration/src/components/ui.tsx, packages/collaboration/src/hooks/use-collaboration.ts, packages/collaboration/src/test-utils.ts, app/test/collaboration/page.tsx, features/collaboration/components/*
Enhanced mock Yjs provider with room IDs and initial elements, exported Yjs context for external use, added localStorage persistence for collaboration settings, improved test utilities, and updated share button with test IDs.
Board & App Integration
app/page.tsx, app/globals.css, app/styles/plait-react-board.css
Added agent pane toggle to main board UI with keyboard shortcut (Ctrl/Meta+J), new CSS animations (agent-reveal, slider-oscillate, icon-bounce), and theme color variable aliases.
Storage Layer
packages/storage/lib/board-adapter.ts, packages/storage/lib/use-board-store.ts, packages/storage/lib/index.ts
Introduced board persistence adapter with CRUD operations and metadata management; updated board store to track deletion state and persist active board selection.
Build & Configuration
package.json, tsconfig.json, vitest.config.mts, eslint.config.mjs, playwright.config.ts, next-env.d.ts, .gitignore, lib/utils.ts
Added DSL parser build step, updated module resolution paths to src/ for AI package, extended test/ESLint exclusions, updated Playwright to production build mode on port 3100, and re-exported utility functions.
Shared Constants
shared/constants/sticky-colors.ts, shared/constants/index.ts
Introduced sticky-note color definitions mapping to fill/stroke hex values and semantic color names.
Mermaid Parser Updates
packages/mermaid-to-thinkix/src/parser/flowchart.ts, packages/mermaid-to-thinkix/src/parser/sequence.ts, packages/mermaid-to-thinkix/src/transformers/class.ts
Replaced shared logger with inline console logger, fixed sequence diagram actor parsing, and preserved metadata during class transformation.
Test Infrastructure & Unit Tests
tests/e2e/agent-pane.spec.ts, tests/e2e/board-management.spec.ts, tests/e2e/collaboration*.spec.ts, tests/e2e/element-manipulation.spec.ts, tests/e2e/file-operations.spec.ts, tests/e2e/fill-stroke.spec.ts, tests/e2e/grid-background.spec.ts, tests/e2e/image.spec.ts, tests/e2e/undo-redo.spec.ts, tests/e2e/helpers/*, tests/unit/agent-route.test.ts, tests/unit/ai-core.test.ts, tests/unit/dsl-compiler.test.ts, tests/unit/run-tool.test.ts, tests/unit/serializer.test.ts, plus 15+ additional unit tests
Comprehensive test suite covering agent E2E flows (streaming, tool execution, board management), DSL parsing/compilation, command execution, serialization, and helper utilities; refactored E2E tests to use test IDs and new platform-aware keyboard shortcuts.

Sequence Diagram(s)

sequenceDiagram
    participant Client as Client (Browser)
    participant APIDest as /api/agent
    participant AIModel as AI Model
    participant BoardState as Board State
    participant Tool as Tool Executor
    participant Storage as Storage/Board

    Client->>APIDest: POST {messages, provider, model, apiKey, context}
    APIDest->>APIDest: Resolve provider/model/key config
    APIDest->>APIDest: Convert UI messages to model format
    APIDest->>AIModel: streamText() with system prompt & tools
    
    loop Streaming Response
        AIModel-->>APIDest: Text chunks
        APIDest-->>Client: Text UI message events
        
        alt Tool Call Detected
            AIModel-->>APIDest: {toolName: 'run', input: {command}}
            APIDest->>Tool: executeRun(command, boardOptions)
            Tool->>BoardState: Parse DSL & execute commands
            Tool->>Tool: Apply board mutations (touch/write/patch/etc)
            Tool->>Storage: Persist updated board
            Tool-->>APIDest: {kind, summary, data}
            APIDest-->>Client: Tool-input + tool-result events
        end
    end
    
    Client->>Client: Render streamed messages + tool outputs
Loading
sequenceDiagram
    participant DSL as DSL Input
    participant Parser as PEG Parser
    participant Compiler as Compiler
    participant Result as Board Result

    DSL->>Parser: "shape rect 'Box' id:myshape"
    Parser->>Parser: Apply grammar rules
    Parser-->>Compiler: {statements: [ShapeNode]}
    
    Compiler->>Compiler: Dispatch by node.type
    Compiler->>Compiler: Create geometry via SHAPE_MAP
    Compiler->>Compiler: Apply text, color, position
    Compiler-->>Result: {elements: [PlaitElement], ...}
    
    Result->>Result: Insert into board + apply layout
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

The diff introduces substantial new logic across multiple domains: DSL implementation with a Peggy grammar and generated parser, a complex command execution engine with 13+ board operations, server-side streaming architecture with tool calling, and extensive client-side UI components. While many changes follow consistent patterns (e.g., repeated test files, similar UI component structures), the core DSL/command/streaming systems require careful validation of control flow, state mutations, and integration points. The heterogeneous nature—spanning API routes, UI components, data structures, build configuration, and tests—increases cognitive load despite individual pieces being moderate in complexity.

Possibly related PRs

  • Feat/md to mindmap #14: Modifies features/dialogs/MarkdownToMindmapDialog.tsx and board insertion utilities that are updated in this PR, touching the same focusAndRevealElements and insertElementDirect APIs.
  • Feat/mermaid to thinkix #24: Updates packages/mermaid-to-thinkix parser and transformer modules that are refactored in this PR to change logger and metadata handling.
  • Feat/setup y.js undo manager #21: Modifies collaboration subsystem (MockYjsProvider, sync bus, undo/session hooks) that are enhanced in this PR for agent integration.

Poem

🐰 Hops with glee, the rabbit sees,
A DSL born from thoughtful trees,
Commands cascade through board and mind,
Where agents paint what they design,
Now diagrams dance and marks take place—
The canvas learns a smarter grace!

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/agent-mode

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 4, 2026

❌ Test Results

Metric Coverage
Lines 0%
Functions 62.4%
Branches 42.89%
Statements 55.89%
Average 40.3%

📦 Download Coverage Report

How to view coverage report
  1. Download the coverage artifact from the link above
  2. Extract the ZIP file
  3. Open index.html in your browser

Commit: 758b190151e0a9dd22f43345b821948a437565a0

@Kripu77 Kripu77 merged commit b22c684 into main Apr 4, 2026
12 of 13 checks passed
@Kripu77 Kripu77 deleted the feat/agent-mode branch April 4, 2026 11:05
This was referenced Apr 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant