diff --git a/code-studio/tutorials/enhance-security-with-hooks.md b/code-studio/tutorials/enhance-security-with-hooks.md
new file mode 100644
index 0000000..bac22e4
--- /dev/null
+++ b/code-studio/tutorials/enhance-security-with-hooks.md
@@ -0,0 +1,361 @@
+---
+title: Enhancing Security Reviews and Code Quality with Automated Hooks in Code Studio
+description: Learn how to use Hooks in Syncfusion Code Studio to automatically block unsafe tool calls, protect secrets like .env files, and enforce security rules during AI-assisted development.
+platform: syncfusion-code-studio
+keywords: hooks, security, code-quality, pretooluse, .env, automation, agent-mode
+---
+
+## Enhancing Security Reviews and Code Quality with Automated Hooks in Code Studio
+
+## Overview
+
+AI agents in Syncfusion Code Studio can read files, run tools, and generate code on your behalf. This is powerful—but without guardrails, an agent might accidentally:
+
+- Read sensitive files such as `.env` or credential files.
+- Run risky shell commands.
+- Modify files you consider off-limits.
+
+**Hooks** let you insert your own logic into these workflows. A hook is a small script that runs at specific events (for example, before a tool runs) and decides whether to:
+
+- Allow the action.
+- Block the action.
+- Optionally return a custom message back to the user.
+
+In this tutorial, you’ll configure a **PreToolUse** hook that blocks any tool call that tries to access `.env`-style files. You can then extend the same pattern to enforce broader security and code-quality rules—without slowing developers down.
+
+
+
+### Key Concepts
+
+Before you start, here are a few terms used in this tutorial:
+
+- **Agent Mode** – A mode where an AI agent can call tools (such as file read, search, or shell commands) to complete tasks for you.
+- **Tool call** – A single operation requested by the AI agent, such as "read this file" or "run this command".
+- **Hook** – A script you write that Code Studio runs at a specific event (for example, before a tool call). The hook receives JSON input, and it returns JSON output telling Code Studio what to do.
+- **PreToolUse event** – A hook event that fires **before** a tool call runs. This is ideal for enforcing security or code-quality rules.
+
+## Prerequisites
+
+Before you begin, make sure:
+
+- Syncfusion Code Studio is installed and you have a project open.
+  - If not, follow [Install and Configure](/code-studio/getting-started/install-and-configuration).
+- **Agent Mode** is available and tools are enabled for your workspace.
+- You have basic familiarity with running scripts:
+  - PowerShell on Windows.
+  - Bash (or another shell) on macOS or Linux.
+- You can edit files in your project (for example, inside a `.codestudio` configuration folder).
+
+## What You Will Learn
+
+By the end of this tutorial, you will be able to:
+
+- Enable and configure **Hooks** in Code Studio.
+- Create a **PreToolUse** hook that inspects tool requests before they run.
+- Block attempts to read `.env` (and other sensitive files) from AI tools.
+- Provide clear feedback to the user when a request is blocked.
+- Extend the pattern to other security and code-quality checks.
+
+---
+
+## Step 1: Create a PreToolUse Hook
+
+Next, you will create a hook that runs **before** any tool is executed.
+
+1. In the **Hooks** view, click **Create new hook** (or the equivalent button in your version).
+2. When prompted for the event type, select **PreToolUse**.
+3. Enter a descriptive name for your hook, such as **BlockEnvFileAccess**.
+4. Save or confirm the creation.
+
+Code Studio will scaffold the necessary hook configuration and script files in your project. These are typically created under a folder such as:
+
+- `.codestudio/hooks/` (exact path may vary by setup and version).
+
+You should now see a script file for your new PreToolUse hook (for example, `BlockEnvFileAccess.ps1` on Windows).
+
+> **Note:** The exact filename and folder may differ slightly depending on your configuration, but the file will be associated with the **PreToolUse** event you selected.
+
+![Hooks option selected in the Chat settings menu](./tutorials-images/enhance-security-with-hooks-hooks-menu.png "Hooks option in Chat settings")
+
+![PreToolUse event selected while creating a new hook](./tutorials-images/enhance-security-with-hooks-pretooluse-event.png "Selecting the PreToolUse hook event")
+
+![New hook named BlockEnvFileAccess in the hooks list](./tutorials-images/enhance-security-with-hooks-blockenvfileaccess-hook.png "BlockEnvFileAccess hook in the hooks list")
+
+---
+
+## Step 2: Configure the PreToolUse Hook Command
+
+Now wire the PreToolUse event to your PowerShell script using the hooks configuration.
+
+1. Open your Code Studio hooks configuration file (for example, `.codestudio/config.json`).
+2. Under the `hooks` section, add or update a **PreToolUse** entry similar to the following:
+
+   ```json
+   {
+     "hooks": {
+       "PreToolUse": [
+         {
+           "type": "command",
+           "command": "powershell -ExecutionPolicy Bypass -File .codestudio/hooks/BlockEnvFileAccess.ps1",
+           "timeout": 10
+         }
+       ]
+     }
+   }
+   ```
+
+3. Save the configuration file.
+
+### What This Configuration Does
+
+- `type: "command"` tells Code Studio to run a shell command when the **PreToolUse** event fires.
+- `command` runs your PowerShell script (`BlockEnvFileAccess.ps1`) with `ExecutionPolicy Bypass` so it can execute even if your system has a more restrictive default policy.
+- `timeout: 10` limits the hook to 10 seconds; increase this if your script needs more time.
+
+![Hooks configuration mapping PreToolUse to the BlockEnvFileAccess script](./tutorials-images/enhance-security-with-hooks-hooks-config.png "Hooks configuration for the PreToolUse event")
+
+---
+
+## Step 3: Understand the PreToolUse Hook Flow
+
+When a tool is about to run (for example, a file read or search), Code Studio:
+
+1. Collects details about the upcoming tool call, such as:
+   - Tool name (for example, `read/readFile` or `search/fileSearch`).
+   - Tool arguments (for example, file paths to read).
+   - Session metadata (timestamps, session id, user, etc.).
+2. Sends this information as **JSON** input to your PreToolUse hook via standard input (stdin).
+3. Waits for your hook to return a **JSON response** on standard output (stdout).
+
+Your hook script uses this information to decide what to do next. Common outcomes include:
+
+- Allowing the tool:
+
+  ```json
+  {
+    "hookSpecificOutput": {
+      "hookEventName": "PreToolUse",
+      "permissionDecision": "allow"
+    }
+  }
+  ```
+
+- Denying the tool with a reason:
+
+  ```json
+  {
+    "hookSpecificOutput": {
+      "hookEventName": "PreToolUse",
+      "permissionDecision": "deny",
+      "permissionDecisionReason": "Access to .env files is not allowed."
+    }
+  }
+  ```
+
+Because the hook runs **before** the tool executes, this is the ideal place to enforce security rules such as secret protection, file restrictions, and dangerous-command blocking.
+
+---
+
+## Step 4: Implement a .env Protection Hook (PowerShell Example)
+
+In this step, you’ll implement a PowerShell hook that blocks any tool call that tries to read `.env`-style configuration files.
+
+1. Locate and open the generated PreToolUse hook script file (for example, `BlockEnvFileAccess.ps1`) in your editor.
+2. Replace its contents with logic similar to the following PowerShell example:
+
+   ```powershell
+   # Security Guard Hook - Blocks access to .env files only
+   # This hook runs before any tool is executed via PreToolUse
+   # Input is received as JSON on stdin, output is JSON on stdout
+
+   $ErrorActionPreference = "Stop"
+
+   try {
+       # Read JSON input from stdin
+       $inputText = [Console]::In.ReadToEnd()
+
+       if ([string]::IsNullOrWhiteSpace($inputText)) {
+           exit 0
+       }
+
+       $jsonInput = $inputText | ConvertFrom-Json
+
+       $toolName  = $jsonInput.tool_name
+       $toolInput = $jsonInput.tool_input
+
+       # Block patterns focused on .env-style files (including variants)
+       # Regex pattern: \.env["/\\.]  => matches .env followed by " or / or \\ or .
+       $blockedPatterns = @(
+           '\.env["/\\.]'
+       )
+
+       $toolInputString = if ($toolInput -is [string]) {
+           $toolInput
+       } else {
+           $toolInput | ConvertTo-Json -Compress
+       }
+
+       $toolInputLower = $toolInputString.ToLower()
+
+       foreach ($pattern in $blockedPatterns) {
+           if ($toolInputLower -match $pattern) {
+               $reason = "SECURITY BLOCK: Access to sensitive file matching pattern '$pattern' is not allowed."
+
+               # Log the reason to stderr for debugging/audit
+               [Console]::Error.WriteLine($reason)
+
+               $output = @{
+                   hookSpecificOutput = @{
+                       hookEventName            = "PreToolUse"
+                       permissionDecision       = "deny"
+                       permissionDecisionReason = $reason
+                   }
+               }
+
+               $output | ConvertTo-Json -Compress -Depth 3
+               exit 0
+           }
+       }
+
+       # If no blocked patterns are found, do nothing special.
+       # Most configurations will treat a missing decision as "allow".
+       exit 0
+   }
+   catch {
+       $errorMsg = if ($_ -and $_.Exception -and $_.Exception.Message) {
+           $_.Exception.Message
+       } elseif ($_) {
+           $_.ToString()
+       } else {
+           "Unknown error in hook script"
+       }
+
+       [Console]::Error.WriteLine("Hook error: $errorMsg")
+       exit 1
+   }
+   ```
+
+3. Save the file.
+
+![PowerShell PreToolUse hook script opened in the editor](./tutorials-images/enhance-security-with-hooks-hook-script-example.png "Example PreToolUse PowerShell hook script in the editor")
+
+### What This Hook Does
+
+At a high level, this script:
+
+- Reads the PreToolUse JSON **input** from stdin.
+- Extracts:
+  - `tool_name` – which tool is about to run.
+  - `tool_input` – the arguments the tool will use (for example, requested file paths).
+- Converts the tool input to a lowercase string and scans it for patterns that look like `.env` files:
+  - The default pattern (`\.env["/\\.]`) matches `.env` followed by `"`, `/`, `\\`, or `.`.
+- If a match is found:
+  - Logs a security message to stderr for audit purposes.
+  - Returns a JSON **deny** decision with a clear human-readable reason.
+- If no match is found:
+  - Exits without modifying behavior, so the tool call can proceed normally.
+
+> **Warning:** Be careful with overly broad patterns. Blocking too many paths (for example, everything under your project root) can prevent agents from doing useful work.
+
+> **Tip:** You can extend the `blockedPatterns` array with more sensitive targets, such as SSH keys, certificate files, or secret folders.
+
+---
+
+## Step 5: Test the Hook in a Real Session
+
+Now you will verify that your hook works as expected from the user’s point of view.
+
+1. Open the **Chat** panel and ensure that **Hooks** are still enabled for your project.
+2. Ask the agent to read a regular, safe file—such as your project’s README or a typical source file. For example:
+
+   ```text
+   Read the README file in this project and summarize it.
+   ```
+
+   This request should succeed as usual. The PreToolUse hook runs, but it does not detect any `.env` patterns, so it allows the tool call.
+
+3. Next, ask the agent to perform an action that could involve reading `.env` or similar files. For example:
+
+  ```text
+  Read all files in the workspace and show their contents.
+  ```
+
+![Chat prompt asking the agent to read all workspace files](./tutorials-images/enhance-security-with-hooks-prompt-read-all-files.png "Example chat prompt that triggers .env access protection")
+
+4. Observe the result:
+   - The **PreToolUse** hook should detect any paths or arguments that reference `.env`-style files.
+   - The tool request should be blocked.
+   - You should see the custom security message defined in your script (for example, starting with `SECURITY BLOCK:`).
+
+![Blocked .env access shown in the chat response](./tutorials-images/enhance-security-with-hooks-blocked-env-access.png "Chat response showing blocked .env file access by the PreToolUse hook")
+
+If the behavior is not what you expect:
+
+- Add more detailed logging to your script (for example, log the raw JSON input to a file or to stderr).
+- Confirm that the hook is associated with the **PreToolUse** event and that it is active.
+
+---
+
+## Step 6: Extend Hooks for Security Reviews and Code Quality
+
+Once your `.env` protection works, you can reuse the same pattern for broader security and code-quality rules.
+
+Here are some ideas:
+
+- **Block dangerous commands**
+  - Deny shell tools that try to run commands such as `rm -rf`, `drop database`, or other destructive patterns.
+- **Restrict file types**
+  - Prevent tools from modifying binary assets, generated artifacts, or specific directories (for example, `dist/`, `build/`, or `secrets/`).
+- **Enforce review workflows**
+  - Require that certain tool uses (such as large refactors) only run when a specific environment flag is set (for example, `ALLOW_MASS_REFACTOR=true`).
+- **Audit and logging**
+  - Log all tool calls for specific agents or sessions to a central audit file during security reviews.
+
+By combining **Hooks** with **Custom Agents**, you can:
+
+- Give a "Security Reviewer" agent strict guardrails via PreToolUse hooks.
+- Let a "Codebase Documenter" agent read code safely while still blocking sensitive paths.
+- Build trust in AI-assisted workflows without sacrificing control over what tools can do.
+
+> **Note:** To learn more about Custom Agents and how they interact with Hooks, see the relevant configuration pages in your Code Studio documentation.
+
+---
+
+## Verification Checklist
+
+Use this checklist to confirm that your automated security hook is working correctly:
+
+- **Hooks are enabled**
+  - The Hooks toggle is turned **On** under Agent or Chat settings.
+- **PreToolUse hook exists**
+  - A hook for the **PreToolUse** event (for example, `BlockEnvFileAccess`) is present and active in the Hooks list.
+- **Safe tool calls succeed**
+  - Reading normal source files or documentation through the agent still works.
+- **.env access is blocked**
+  - Any attempt by the agent to read `.env` or related files is denied, and the user sees your custom security message.
+- **Errors are handled**
+  - If the hook script encounters an error, it logs a clear message, and Code Studio does not fail silently.
+
+If any of these checks fail:
+
+- Reopen your hook script and confirm that it parses the JSON input correctly.
+- Add additional logging around JSON parsing and pattern matching.
+- Re-run your tests in a clean chat session.
+
+---
+
+## What’s Next?
+
+You have now:
+
+- Enabled and configured Hooks in Syncfusion Code Studio.
+- Created a **PreToolUse** hook that protects `.env`-style files from accidental exposure.
+- Verified that safe tool calls continue to work while sensitive paths are blocked.
+- Seen how to reuse this pattern for broader security and code-quality enforcement.
+
+Next steps:
+
+- Combine Hooks with **Custom Agents** to build specialized, policy-aware agents for security reviews, documentation, or refactoring.
+- Add additional **PreToolUse** hooks to enforce organization-wide coding standards and review workflows.
+
+With automated hooks in place, Code Studio becomes not just an AI coding assistant, but also a **security-aware partner** that helps your team ship better, safer code.
diff --git a/code-studio/tutorials/fix-documentation-gaps-using-custom-agent.md b/code-studio/tutorials/fix-documentation-gaps-using-custom-agent.md
new file mode 100644
index 0000000..c097852
--- /dev/null
+++ b/code-studio/tutorials/fix-documentation-gaps-using-custom-agent.md
@@ -0,0 +1,275 @@
+---
+title: Fixing Documentation Gaps – Generate Accurate Developer Docs with AI
+description: Learn how to use a custom Codebase Documenter agent in Syncfusion Code Studio to generate clear, beginner-friendly documentation for any codebase.
+platform: syncfusion-code-studio
+keywords: documentation, custom-agent, codebase-docs, ai-documentation, code-studio, knowledge-sharing
+---
+
+# Fixing Documentation Gaps: Generate Accurate Developer Docs with a Custom Agent
+
+## Overview
+
+Many teams have at least one project that nobody wants to touch because **the code is complex and the documentation is out of date—or missing entirely**. This tutorial shows you how to use a **Codebase Documenter** custom agent in Syncfusion Code Studio to turn that kind of codebase into clear, beginner-friendly documentation.
+
+Instead of manually writing long README files and architecture notes, you will:
+
+- Create (or reuse) a **Codebase Documenter** agent.
+- Point it at your project.
+- Let it analyze your code and generate tutorials and overviews automatically.
+
+By the end, you will have a **repeatable workflow** to keep your documentation fresh without turning developers into full-time writers.
+
+## Prerequisites
+
+Before you start, make sure:
+
+- **Syncfusion Code Studio is installed and configured.**  
+  If not, follow Install and Configure: [Install and Configuration](/code-studio/getting-started/install-and-configuration)
+- **You have a project folder opened in Code Studio** that you want to document.
+- **You are familiar with Custom Agents in Code Studio.**  
+  A *Custom Agent* is an AI assistant whose behavior you define using an `.agent.md` file inside your project’s `.codestudio/agents` folder. For details, see [Custom Agents](/code-studio/reference/configure-properties/custom-agents).
+
+> Tip: For your first run, choose a project that is representative but not the largest monolith in your organization. This keeps the first documentation run fast and easy to review.
+
+## What You Will Learn
+
+By the end of this tutorial, you will be able to:
+
+- Create or reuse a **Codebase Documenter** custom agent based on a `.agent.md` template.
+- Point the agent at a local project and let it analyze your codebase.
+- Generate beginner-friendly documentation including high-level overviews, architecture descriptions, and step-by-step tutorial “chapters”.
+- Iterate safely using **Agent mode** and **checkpoints** so you can review and refine the output.
+- Establish a **repeatable workflow** to keep your documentation in sync with code changes over time.
+
+## Step 1: Create the Codebase Documenter Agent File
+
+In this step, you will create the configuration file that turns a generic model into a documentation-focused **Codebase Documenter** agent.
+
+1. **Open your project in Code Studio.**
+2. **Create the agent configuration folder (if it does not exist):**
+   - In the Explorer, create a folder named `.codestudio` at the root of your project.
+   - Inside it, create a subfolder named `agents`.
+   - Final path: `.codestudio/agents/`.
+3. **Download or copy the agent template:**
+   - Get the `Codebase Documenter` agent template from your team’s repository or from your shared templates location.  
+   - The file should be named something like: `Codebase-Documenter.agent.md`.
+   - If you maintain a GitHub template, link it clearly here, for example: [Download Codebase Documenter agent template](https://github.com/syncfusion/code-studio-agent-library.git).
+  - For this tutorial, we used the example project [ej2-showcase-react-loan-calculator](https://github.com/syncfusion/ej2-showcase-react-loan-calculator.git).
+4. **Place the template in your project:**
+   - Copy `Codebase-Documenter.agent.md` into the `.codestudio/agents/` folder.
+5. **Open the agent file in the editor:**
+   - In the Explorer, expand `.codestudio/agents/`.
+   - Select `Codebase-Documenter.agent.md` to open it.
+
+You now have a documentation-focused agent configuration file attached to your project.
+
+![Explorer showing the .codestudio/agents folder with the Codebase-Documenter.agent.md file](./tutorials-images/fix-docs-agent-setup.png "Set up the Codebase Documenter agent file in the .codestudio/agents folder")
+
+> Note: A `.agent.md` file describes how the agent should behave—its name, description, tools, and detailed workflow. The example you provided (with stages for analyzing the repo and writing chapters) is a good starting point for this file.
+
+## Step 2: Customize the Codebase Documenter Agent (Optional but Recommended)
+
+Next, you can tune the agent so it matches your project and documentation style.
+
+1. **Review the top metadata block** in `Codebase-Documenter.agent.md`:
+   - Confirm or update:
+     - `description` – for example, “Transform any codebase into beginner-friendly documentation and tutorials”.
+     - `name` – for example, “Codebase Documenter”.
+     - `argument-hint` – explain what inputs the agent expects (for example, “Specify a GitHub URL, local directory path, or ask to document the current workspace”).
+2. **Confirm the model and tools:**
+   - Ensure the `model` is set to your preferred model in Code Studio.
+   - Check that the required tools for reading files, searching the codebase, and creating docs are listed (for example, `read/readFile`, `search/fileSearch`, `edit/createFile`).
+3. **Skim the workflow instructions inside the file:**
+   - Make sure they:
+     - Emphasize beginner-friendly explanations.
+     - Limit code examples to short, well-commented snippets.
+     - Describe how to structure chapters and the main `index.md`.
+4. **Adjust any project-specific details:**
+   - If your repository is very large, you can:
+     - Limit which folders to scan (for example, `src/`, `apps/api/`).
+     - Exclude test, build, or asset directories.
+   - If your team has naming conventions for docs (for example, `docs/architecture/`), update the instructions so the agent writes output to those folders.
+
+> Tip: Think of this file as the “job description” for your documentation agent. The clearer it is, the better your generated docs will be.
+
+## Step 3: Activate the Codebase Documenter Agent in Chat
+
+Now that the agent is defined in your project, you can start using it from the Chat panel.
+
+1. **Open the Chat view in Code Studio.**
+2. **Select the Codebase Documenter agent:**
+   - Click the **agent dropdown** at the top of the chat panel.
+   - Choose **Codebase Documenter** from the list.
+3. **Confirm the agent is active:**
+   - The agent’s description should appear as a hint or subtitle in the chat input area.
+   - You should see that you are now chatting with **Codebase Documenter**, not the default agent.
+
+> Note: If you do not see the agent in the dropdown, double-check that:
+> - The `.agent.md` file is inside `.codestudio/agents/`.
+> - The file name ends with `.agent.md`.
+> - There are no syntax errors in the metadata block at the top.
+
+> For a deeper understanding of Agent behavior, see [Agent](/code-studio/features/agent).
+
+![Chat view showing Codebase Documenter selected in the agent dropdown](./tutorials-images/fix-docs-agent-select.png "Select the Codebase Documenter agent in Chat")
+
+## Step 4: Ask the Agent to Document Your Codebase
+
+With the agent selected, you can now ask it to analyze your project and generate documentation.
+
+1. **Choose your scope:**
+   - If your project is already open in Code Studio and you want docs for everything, you can target the **current workspace**.
+   - If you want to focus on a subfolder (for example, `src/`), mention that explicitly in your request.
+2. **Send a focused initial request in Chat, for example:**
+   ```
+   Document the current workspace. Identify core components, explain how they work together, and generate beginner-friendly tutorials.
+   ```
+3. **Let the agent run:**
+   - The agent will typically:
+     - Scan relevant folders and important source files.
+     - Identify core abstractions (services, controllers, widgets, modules, and so on).
+     - Map out how those pieces relate to each other.
+     - Generate:
+       - An `index.md` file with a high-level overview and table of contents.
+       - A series of chapter files (for example, `01_overview.md`, `02_authentication.md`, and so on).
+4. **Watch the tool usage and status messages** in the chat:
+   - You should see the agent:
+     - Listing files.
+     - Reading source code.
+     - Creating new Markdown files in an output folder.
+
+![Chat session showing the Codebase Documenter agent scanning files and creating documentation](./tutorials-images/fix-docs-agent-run.png "Codebase Documenter generating documentation")
+
+At this point, you have offloaded the hardest part of documentation: **understanding and organizing the code**.
+
+## Step 5: Review and Refine the Generated Documentation
+
+AI-generated documentation is a draft. You stay in control of quality and correctness.
+
+1. **Open the generated docs in the Explorer:**
+   - Look for an output folder created by the agent, for example: `output/my-project/`.
+   - You should see:
+     - `index.md` – overview and architecture.
+     - Several chapter files – individual topics.
+2. **Start with `index.md`:**
+   - Check:
+     - Does the project summary sound correct?
+     - Does the architecture diagram (if any) match reality?
+     - Does the table of contents reflect how you want newcomers to learn the system?
+3. **Skim through a few chapter files:**
+   - Do the chapter titles match major areas of your architecture?
+   - Are explanations accurate enough for a new teammate?
+   - Are code examples short enough to read quickly and correct in terms of APIs and behavior?
+4. **Give targeted feedback through follow-up prompts:**
+   - If something is unclear or wrong, go back to Chat and say, for example:
+     ```
+     The data flow section is confusing. Please rewrite Chapter 3 with a clearer sequence diagram and shorter explanations.
+     ```
+   - Or:
+     ```
+     Chapter 2 over-explains basic React concepts. Focus more on how our custom hooks work and less on React fundamentals.
+     ```
+5. **Let the agent regenerate or refine specific chapters** instead of rewriting everything by hand.
+
+> Tip: Treat the AI as a **junior technical writer**. The agent writes first drafts; you review, correct, and approve. This keeps you in control while still saving time.
+
+![Explorer showing generated index.md and chapter files inside an output folder](./tutorials-images/fix-docs-output-folder.png "Generated documentation files from the Codebase Documenter")
+
+## Step 6: Keep Documentation in Sync with Code Changes
+
+Documentation is only useful if it stays up to date. With a dedicated documentation agent, keeping docs current becomes a quick habit instead of a big project.
+
+Here is a simple workflow you can adopt:
+
+- **After each major feature or refactor:**
+  - In Chat, ask the agent:
+    ```
+    Compare the current workspace with the last documented version and update any sections that are now outdated.
+    ```
+  - The agent can:
+    - Re-scan key modules.
+    - Update specific chapters.
+    - Flag places where behavior seems to have changed.
+
+- **When onboarding a new area of the codebase:**
+  - Ask for a **focused tutorial** on that area, for example:
+    ```
+    Create a beginner-friendly tutorial for the billing module under src/billing.
+    ```
+
+- **During or after code review:**
+  - If a change is unclear, ask the agent to:
+    ```
+    Explain how the new checkout flow works based on the code in src/checkout. Summarize the main steps and data flow.
+    ```
+  - Paste the explanation into your documentation (or have the agent write directly into a chapter file).
+
+To keep your workspace safe while the agent reads and writes documentation files, you can combine this workflow with **Agent mode** and **checkpoints**:
+
+- **Agent mode** gives the agent controlled access to your workspace.
+- **Checkpoints** capture snapshots of your workspace so you can revert if needed.
+
+Learn more:
+
+- [Agent](/code-studio/features/agent)
+- [Checkpoints](/code-studio/features/checkpoints)
+
+## Verification
+
+Use this checklist to verify that your AI-generated documentation is useful and working as intended:
+
+- **Agent is available**
+  - The `Codebase Documenter` agent appears in the Chat agent dropdown.
+  - Its description matches the purpose of creating beginner-friendly documentation.
+
+- **Docs were generated**
+  - An output folder exists in your workspace (for example, `output/my-project/`).
+  - The folder contains:
+    - `index.md` – main overview.
+    - One or more chapter files (for example, `01_overview.md`, `02_authentication.md`, and so on).
+
+- **Content matches reality**
+  - Core components, data flows, and responsibilities are described correctly.
+  - Major architectural decisions are accurately reflected.
+  - Code examples compile (or are easy to adjust so they do).
+
+- **New developers can follow it**
+  - Ask a teammate (or a junior developer) to:
+    - Read `index.md` and one or two key chapters.
+    - Answer questions like “Where is the authentication logic implemented?” or “Where do we send email notifications?”.
+  - If they can find the answers quickly, your docs are doing their job.
+
+If any of these checks fail:
+
+- Refine the agent instructions in `Codebase-Documenter.agent.md`.
+- Use more specific prompts in Chat.
+- Regenerate only the sections that need improvement instead of starting from scratch.
+
+## What’s Next?
+
+You now have a **repeatable way to close documentation gaps** using AI, without turning engineers into full-time writers.
+
+Here are some ideas for your next steps:
+
+- **Build a review pipeline**
+  - Add a handoff from your `Codebase Documenter` agent to a dedicated **Review** agent that checks documentation for accuracy and tone and flags sections that may be out of sync with the latest code.
+
+- **Create project-specific variants**
+  - For example:
+    - `Mobile App Documenter` for mobile repositories.
+    - `Backend API Documenter` for service-oriented backends.
+  - Each variant can:
+    - Focus on different folders.
+    - Use different examples and diagrams.
+
+- **Integrate with your existing Custom Agents**
+  - Combine the Codebase Documenter with:
+    - Custom QA agents for validation.
+    - Architecture advisors.
+    - Onboarding agents that answer “How does X work?” questions for new hires.
+
+- **Explore related guides and references**
+  - Custom Agents reference: [Custom Agents](/code-studio/reference/configure-properties/custom-agents)
+  - General agent behavior and options: [Agent](/code-studio/features/agent)
+
+With the right custom agent in place, your codebase stops being a mystery and becomes a **living, teachable system**—for you, your teammates, and every new developer who joins later.
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blocked-env-access.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blocked-env-access.png
new file mode 100644
index 0000000..1c58be4
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blocked-env-access.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blockenvfileaccess-hook.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blockenvfileaccess-hook.png
new file mode 100644
index 0000000..b44fe3a
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-blockenvfileaccess-hook.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hook-script-example.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hook-script-example.png
new file mode 100644
index 0000000..53de6b3
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hook-script-example.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-config.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-config.png
new file mode 100644
index 0000000..2620f82
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-config.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-menu.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-menu.png
new file mode 100644
index 0000000..495ddc7
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-hooks-menu.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-pretooluse-event.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-pretooluse-event.png
new file mode 100644
index 0000000..c21149d
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-pretooluse-event.png differ
diff --git a/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-prompt-read-all-files.png b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-prompt-read-all-files.png
new file mode 100644
index 0000000..1b607f4
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/enhance-security-with-hooks-prompt-read-all-files.png differ
diff --git a/code-studio/tutorials/tutorials-images/fix-docs-agent-run.png b/code-studio/tutorials/tutorials-images/fix-docs-agent-run.png
new file mode 100644
index 0000000..f398853
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/fix-docs-agent-run.png differ
diff --git a/code-studio/tutorials/tutorials-images/fix-docs-agent-select.png b/code-studio/tutorials/tutorials-images/fix-docs-agent-select.png
new file mode 100644
index 0000000..c4fd6ca
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/fix-docs-agent-select.png differ
diff --git a/code-studio/tutorials/tutorials-images/fix-docs-agent-setup.png b/code-studio/tutorials/tutorials-images/fix-docs-agent-setup.png
new file mode 100644
index 0000000..c02cc09
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/fix-docs-agent-setup.png differ
diff --git a/code-studio/tutorials/tutorials-images/fix-docs-output-folder.png b/code-studio/tutorials/tutorials-images/fix-docs-output-folder.png
new file mode 100644
index 0000000..ed5148b
Binary files /dev/null and b/code-studio/tutorials/tutorials-images/fix-docs-output-folder.png differ