Merge branch 'clauderiks-html' into coderabbitai/docstrings/de0b7e7

[zskbot]

---

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 4b677ecc-af8b-4185-85a1-55a43850b1d9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-code-review]

PR Summary by Qodo

Add terminal tool chat command support, docs site, and IDE dashboard UI

✨ Enhancement 📝 Documentation 🕐 20-40 Minutes

AI Description

• Adds a chat-triggered terminal tool: messages prefixed with ! or fenced bash/sh blocks are
 executed via TerminalTools, gated by a new ENABLE_TERMINAL_TOOL setting.
• Introduces a full Markdown-based documentation site (/docs) with sidebar, header, TOC, and
 ReactMarkdown rendering, plus seed docs content.
• Replaces the chat-only home page with a new IDE-style Dashboard layout (Sidebar/Header) and
 updates Chat UI to render tool-call output.
• Adds comprehensive docstrings across backend API routes and new frontend components; bundles new
 npm dependencies and a generated package-lock.json.

Diagram

graph TD
  User([User]) --> ChatUI["Chat.tsx"] --> API["/api/chat route"]
  API -->|extract_command| Decision{"use_tools & command?"}
  Decision -->|yes, enabled| Terminal[[TerminalTools]]
  Decision -->|no or disabled| LLM[[Ollama LLM]]
  Terminal --> Settings[("config/settings.py")]
  DocsPage["/docs/[slug] page.tsx"] --> MarkdownViewer["MarkdownViewer.tsx"] --> DocsFiles[("frontend/docs/*.md")]
  Dashboard["Dashboard.tsx"] --> Sidebar([Sidebar]) 
  Dashboard --> Header([Header])
  subgraph Legend
    direction LR
    _db[(Database/File)] ~~~ _svc([Service/Component]) ~~~ _proc[[Process]]
  end

Loading

Files changed (20) +3765 / -300

Enhancement (12) +850 / -280

routes.pyAdd chat-triggered terminal command execution and docstrings +326/-156

Add chat-triggered terminal command execution and docstrings

• Adds extract_command() to parse '!cmd' or fenced bash/sh blocks from chat messages, executes them via TerminalTools when use_tools is set and ENABLE_TERMINAL_TOOL is on, and returns a denial message otherwise. Also adds comprehensive docstrings to all route handlers.

backend/api/routes.py

page.tsxAdd dynamic docs page rendering Markdown by slug +33/-0

Add dynamic docs page rendering Markdown by slug

• New route that reads a Markdown file from frontend/docs based on the URL slug and renders it via MarkdownViewer.

frontend/app/docs/[slug]/page.tsx

layout.tsxAdd documentation layout with header, sidebar, and TOC +51/-0

Add documentation layout with header, sidebar, and TOC

• New layout wrapping docs pages with DocsHeader, DocsSidebar, content area, and DocsTOC.

frontend/app/docs/layout.tsx

page.tsxReplace chat home page with Dashboard component +2/-9

Replace chat home page with Dashboard component

• Home page now renders the new Dashboard layout instead of the standalone Chat component directly.

frontend/app/page.tsx

Chat.tsxRender tool-call output and update placeholder text +148/-115

Render tool-call output and update placeholder text

• Adds ToolCall interface and renders terminal command output (stdout/stderr) returned from the backend; updates input placeholder to mention '!' command syntax and adds a component-level docstring.

frontend/components/Chat.tsx

DocsHeader.tsxAdd documentation site header component +45/-0

Add documentation site header component

• New header with search input, theme toggle, and GitHub link for the docs layout.

frontend/components/docs/DocsHeader.tsx

DocsSidebar.tsxAdd documentation sidebar navigation +80/-0

Add documentation sidebar navigation

• New sidebar rendering grouped navigation menus (Getting Started, Developer, Security) linking to docs pages.

frontend/components/docs/DocsSidebar.tsx

DocsTOC.tsxAdd table of contents component for docs pages +56/-0

Add table of contents component for docs pages

• New static table-of-contents sidebar linking to page section anchors.

frontend/components/docs/DocsTOC.tsx

MarkdownViewer.tsxAdd Markdown renderer with GFM and heading links +31/-0

Add Markdown renderer with GFM and heading links

• New component wrapping react-markdown with remark-gfm, rehype-slug, and rehype-autolink-headings plugins.

frontend/components/docs/MarkdownViewer.tsx

Header.tsxAdd dashboard header component +20/-0

Add dashboard header component

• New static header for the SandboxCode dashboard with navigation labels.

frontend/components/header/Header.tsx

Dashboard.tsxAdd Dashboard layout combining Sidebar and Header +33/-0

Add Dashboard layout combining Sidebar and Header

• New top-level dashboard layout rendering Sidebar, Header, and a placeholder IDE content area.

frontend/components/layout/Dashboard.tsx

Sidebar.tsxAdd static application sidebar navigation +25/-0

Add static application sidebar navigation

• New sidebar component listing static navigation entries (Dashboard, Projects, Explorer, AI, Preview, Terminal, Git, Settings).

frontend/components/sidebar/Sidebar.tsx

Documentation (4) +44 / -0

api.mdAdd API documentation stub +9/-0

Add API documentation stub

• New placeholder Markdown file documenting authentication and endpoints.

frontend/docs/api.md

introduction.mdAdd getting-started introduction doc +14/-0

Add getting-started introduction doc

• New Markdown content introducing ClaudeRiks Docs features.

frontend/docs/getting-started/introduction.md

introduction.mdAdd root introduction doc +14/-0

Add root introduction doc

• New Markdown content introducing ClaudeRiks features and getting started guidance.

frontend/docs/introduction.md

security.mdAdd security documentation stub +7/-0

Add security documentation stub

• New placeholder Markdown file describing security practices.

frontend/docs/security.md

Other (4) +2871 / -20

settings.pyAdd ENABLE_TERMINAL_TOOL setting +19/-18

Add ENABLE_TERMINAL_TOOL setting

• Introduces a new enable_terminal_tool boolean setting to gate terminal command execution from chat.

backend/config/settings.py

next-env.d.tsUpdate generated Next.js type reference +2/-1

Update generated Next.js type reference

• Adds reference to generated route types and updates a doc URL comment; auto-generated by Next.js tooling.

frontend/next-env.d.ts

package-lock.jsonAdd generated lockfile for new frontend dependencies +2844/-0

Add generated lockfile for new frontend dependencies

• New lockfile capturing axios, lucide-react, react-markdown, remark-gfm, rehype-slug, and rehype-autolink-headings plus transitive dependencies.

frontend/package-lock.json

package.jsonAdd markdown and icon dependencies +6/-1

Add markdown and icon dependencies

• Adds axios, lucide-react, react-markdown, rehype-autolink-headings, rehype-slug, and remark-gfm as dependencies to support the docs viewer and dashboard UI.

frontend/package.json

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (3) 📘 Rule violations (0) 📜 Skill insights (0)

1. Unauthenticated chat RCE 🐞 Bug ⛨ Security

Description

When ENABLE_TERMINAL_TOOL=true, the /api/chat endpoint executes user-controlled command text
(via ! or fenced bash blocks) using subprocess.run(..., shell=True) with no
authentication/authorization, enabling remote code execution on the backend host.

Code

backend/api/routes.py[R59-90]

+        if request.use_tools:  
+            command = extract_command(request.message)  
+            if command:  
+                if not settings.enable_terminal_tool:  
+                    denied = (  
+                        "Terminal tool dang bi tat. Dat ENABLE_TERMINAL_TOOL=true "  
+                        "trong backend/.env de cho phep chay lenh."  
+                    )  
+                    memory.add_message(request.conversation_id, "assistant", denied)  
+                    return ChatResponse(  
+                        conversation_id=request.conversation_id,  
+                        message=denied,  
+                        tool_calls=[],  
+                        timestamp=datetime.now(),  
+                        model=ollama_client.model,  
+                    )  
+  
+                result = TerminalTools.execute_command(command, timeout=30, sandbox=True)  
+                output = (  
+                    f"$ {command}\n"  
+                    f"[exit code: {result['returncode']}]\n\n"  
+                    f"--- stdout ---\n{result['stdout']}\n"  
+                    f"--- stderr ---\n{result['stderr']}"  
+                )  
+                memory.add_message(request.conversation_id, "assistant", output)  
+                return ChatResponse(  
+                    conversation_id=request.conversation_id,  
+                    message=output,  
+                    tool_calls=[{"tool": "terminal", "command": command, "result": result}],  
+                    timestamp=datetime.now(),  
+                    model=ollama_client.model,  
+                )  

Evidence

The chat route conditionally executes an extracted command and returns the stdout/stderr to the
caller; the terminal helper uses subprocess.run(..., shell=True), and the frontend always sets
use_tools: true, making this trivially triggerable whenever ENABLE_TERMINAL_TOOL is enabled.

backend/api/routes.py[55-90]
backend/tools.py[36-56]
frontend/components/Chat.tsx[51-59]
backend/config/settings.py[10-16]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`/api/chat` can execute arbitrary user-provided commands when `ENABLE_TERMINAL_TOOL` is enabled. Because there is no authentication/authorization on this route, any network caller can trigger command execution, and `TerminalTools.execute_command` uses `shell=True`.

### Issue Context
- `request.use_tools` + an extracted command causes direct terminal execution.
- Frontend always sends `use_tools: true`, so a user message like `!id` will execute when the flag is enabled.

### Fix Focus Areas
- Add an authn/authz check (API key / session / internal-only) before any terminal execution.
- Add a strict allowlist of permitted commands/subcommands (or remove command execution from chat entirely).
- Avoid `shell=True`; use `shell=False` with `shlex.split()` (or equivalent) and validate arguments.
- Implement a real sandbox boundary (separate low-privilege container/worker), or ensure the feature is only reachable from localhost.

### Fix Focus Areas (code pointers)
- backend/api/routes.py[55-90]
- backend/tools.py[36-56]
- frontend/components/Chat.tsx[51-59]
- backend/config/settings.py[10-16]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Docs slug file escape 🐞 Bug ⛨ Security

Description

The docs page builds a filesystem path from params.slug and reads it directly; if a slug contains
path separators (e.g., via URL-encoding) this can escape the intended docs directory to read other
.md files, and missing files currently throw and become 500s.

Code

frontend/app/docs/[slug]/page.tsx[R17-26]

+  const filePath = path.join(
+    process.cwd(),
+    "docs",
+    `${params.slug}.md`
+  );
+
+  const content = fs.readFileSync(
+    filePath,
+    "utf8"
+  );

Evidence

params.slug is interpolated into the path used for disk reads with no validation/containment check
and no error handling around readFileSync, which both enables directory-escape scenarios (subject
to routing/decoding) and turns missing docs into 500s.

frontend/app/docs/[slug]/page.tsx[17-26]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
The docs route constructs `filePath` directly from `params.slug` and reads it with `fs.readFileSync`. Without validation + containment checks, this can allow directory escape to other `.md` files (depending on how the router decodes slugs), and any unknown slug causes an exception and 500.

### Issue Context
Current logic:
- `path.join(process.cwd(), "docs", `${params.slug}.md`)`
- `fs.readFileSync(filePath, "utf8")` (no existence check, no 404)

### Fix Focus Areas
- Enforce a strict slug allowlist/regex (e.g., `^[a-z0-9-]+$`) and reject anything else.
- Resolve against a fixed docs root (`const docsRoot = path.join(process.cwd(), "docs")`) and verify `resolvedPath.startsWith(docsRoot + path.sep)`.
- Handle missing files by returning `notFound()` (Next.js) instead of throwing.
- Prefer `fs.promises.readFile` (async) to avoid blocking.

### Fix Focus Areas (code pointers)
- frontend/app/docs/[slug]/page.tsx[17-26]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

3. Missing .next types reference 🐞 Bug ☼ Reliability

Description

next-env.d.ts now hard-references ./.next/types/routes.d.ts, which can break standalone
tsc/IDE checks in environments where .next hasn’t been generated yet.

Code

frontend/next-env.d.ts[3]

+/// <reference path="./.next/types/routes.d.ts" />

Evidence

The new triple-slash reference points at a .next-scoped file, and the TypeScript config indicates
.next/types is treated as generated input; direct referencing makes typechecks sensitive to
generation order.

frontend/next-env.d.ts[1-6]
frontend/tsconfig.json[35-39]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
A triple-slash reference to a generated `.next` file can cause TypeScript to error when that file is absent (e.g., clean checkout, CI running `tsc --noEmit`, IDE before `next dev/build`).

### Issue Context
The project includes `.next/types/**/*.ts` in `tsconfig.json`, but `next-env.d.ts` now directly references `./.next/types/routes.d.ts`.

### Fix Focus Areas
- If you rely on typed routes: ensure the file is generated before any typecheck step (document this in CONTRIBUTING/CI).
- If you don’t rely on typed routes: remove the hard reference line.
- Alternatively, commit a stub `routes.d.ts` (if acceptable) so clean checkouts don’t fail.

### Fix Focus Areas (code pointers)
- frontend/next-env.d.ts[1-3]
- frontend/tsconfig.json[35-39]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

_{To customize comments, go to the Qodo configuration screen, or learn more in the docs.}