Documentation & Image Updates

code-studio-toc.html

@@ -69,6 +69,15 @@
             <li>
                 <a href="/code-studio/tutorials/managing-users-and-teams-collaboration">User and Team Management in Enterprise Server</a>
             </li>
+            <li>
+                <a href="/code-studio/tutorials/terminal-tools-improvement">Terminal Tools Improvements for Background Sessions</a>
+            </li>
+            <li>
+                <a href="/code-studio/tutorials/Context-compation">Context Compaction in Code Studio</a>
+            </li>
+            <li>
+                <a href="/code-studio/tutorials/Chronicle">Chronicle Coding History and Productivity Insights in Code Studio</a>
+            </li>
         </ul>
 
     </li>

code-studio/reference/configure-properties/custom-agents.md

@@ -143,6 +143,26 @@ Select your preferred location → click **Continue**.
 - Choose **CodeReview** from the list of agents.
 - Make your changes and save.
 
+## Agent Scoped Hooks
+
+Agent-scoped hooks let you attach automated lifecycle commands directly to a custom agent. Unlike workspace-level hooks that run for all agents, agent-scoped hooks run only when that specific agent is active — either selected manually or invoked as a subagent. This keeps your automation isolated and precisely targeted to the agent's purpose.
+
+### Common Use Cases
+- Auto-format code after every file edit the agent makes
+- Block unsafe tool calls specific to this agent's task scope
+- Inject project context when the agent session starts
+- Run tests automatically after code changes
+
+### How to Add Agent-Scoped Hooks
+- Add a **hooks** field to the YAML frontmatter of your `.agent.md` file, using the same event names and command structure as workspace-level hooks.
+
+  <img src="../reference-images/agent-scoped-hooks.png" alt="agent_configure_chat" />
+
+- Agent-scoped hooks run **in addition to** any workspace or user-level hooks configured for the same event — they do not replace them.
+
+> **Note:**  
+> For full details on lifecycle events, command properties, input/output format, and troubleshooting, see the **Hooks documentation**.
+
 ## Predefined Agents
 
 For a quick start, explore our public repository of predefined agent templates. The catalog is updated regularly—check the repo for the latest additions.

code-studio/tutorials/Chronicle.md

@@ -0,0 +1,56 @@
+# Chronicle
+
+## Overview
+Chronicle is a handy feature in Syncfusion Code Studio that keeps a detailed history of everything you do in your workspace. It records your changes, actions, and even the context around them for your coding, so you can review, retrace steps, or share exactly what happened.
+
+## Why Use Chronicle?
+- Quickly see your recent coding history.
+- Get tips on how to improve your coding and workflow.
+- Easily review or share what you did and learn from your own patterns.
+
+Chronicle makes your coding journey visible and easy to review, helping you learn, debug, and collaborate better.
+
+## What You Will Learn
+By the end of this tutorial, you’ll be able to:
+- Understand what Chronicle does and how it benefits you.
+- Start using Chronicle to view your coding history.
+- Learn basic concepts like timelines, events, and context.
+- Review and use your work history with easy steps.
+
+## Key Concepts
+- **Session History**: Chronicle records your chat and coding activities, including files you touched, commands you ran, and references to PRs, commits, or issues.
+- **Standup Report**: Chronicle summarizes your last 24 hours of coding activity, grouped by feature, branch, or file.
+- **Personalized Tips**: It can analyze your workflow to give you smart suggestions for even better productivity.
+
+## Steps to Use Chronicle
+
+### Step 1: Use Chronicle Commands
+- **For a Standup Summary**: Type `/chronicle:standup` in the chat.  
+  This will give you a summary of your coding sessions from the last 24 hours. The summary is organized by feature or branch and includes file lists and PR links.
+
+  <img src="./tutorials-images/chronicle-standup.png" alt="Context command" />
+
+- **For Productivity Tips**: Type `/chronicle:tips` in the chat.  
+  Chronicle will review your last 7 days of work and share helpful tips to improve your prompting, tool usage, and workflow.
+
+  <img src="./tutorials-images/chronicle-tips.png" alt="Context command" />
+
+- **To Ask a Custom Question**: Type `/chronicle` followed by your question.  
+  For example:  
+  /chronicle what files did I edit yesterday?
+
+  Chronicle will answer in plain language based on your coding sessions.
+
+  <img src="./tutorials-images/chronicle.png" alt="Context command" />
+
+### Step 2: Read Your Results
+- After you send a command, Chronicle will quickly reply in the chat with an easy-to-read summary, a helpful list, or an answer based on your recent work.
+
+> **Tip:** For custom questions, just type them after `/chronicle`!  
+  Example:  
+  /chronicle what PRs did I work on this week?
+
+## What’s Next?
+- Use **Autocomplete** to catch errors as you type and reduce bugs before they occur.
+- Explore **Agent mode** for generating and fixing code autonomously across your project.
+- Use the **Ask feature** to have the AI explain error messages and suggest solutions in detail.

code-studio/tutorials/Context-compation.md

@@ -0,0 +1,46 @@
+# Context Compaction
+
+## Overview
+As your chat sessions in Code Studio grow, the conversation history can become lengthy, making it harder for the AI to focus on the most relevant information. The `/compact` command helps you streamline your chat context by summarizing or removing less important messages, ensuring that the AI remains efficient and accurate.
+
+## Prerequisites
+- Code Studio installed and running.
+- An active chat session with a substantial conversation history.
+
+## What You Will Learn
+By the end of this tutorial, you’ll be able to:
+- Understand the purpose and benefits of the `/compact` command.
+- Use `/compact` to optimize your chat context.
+- Apply best practices for maintaining relevant context in long sessions.
+
+You’ll gain confidence in managing chat context and ensuring the AI remains sharp and productive.
+
+## Key Concepts
+- **Context Window**: The portion of your chat history that the AI uses to generate responses.
+- **Compaction**: The process of reducing or summarizing older, less relevant messages to keep the context focused and efficient.
+
+## Steps to Use the `/compact` Command
+
+### Step 1: Identify When Compaction Is Needed
+If your chat session becomes long, or if you notice the AI is losing track of recent instructions, it’s a good time to use the `/compact` command.
+
+### Step 2: Run the `/compact` Command
+- Type `/compact` in the chat input and press **Enter**.  
+
+> **Note:** Optionally, you can add specific instructions after the command to customize the compaction process.
+
+   <img src="./tutorials-images/context-command.png" alt="Context command" />
+
+- The agent will analyze the conversation and automatically compact the context by summarizing or removing older messages.
+
+ <img src="./tutorials-images/context-compaction.png" alt="Context compaction" />
+
+- After compaction, your chat will retain the most important and recent information. Continue your development tasks with improved AI focus and performance.
+ <img src="./tutorials-images/context-result.png" alt="Context result" />
+
+You’re well on your way to making the most of smart context management in Code Studio.
+
+## What’s Next?
+- Use **Autocomplete** to catch errors as you type and reduce bugs before they occur.
+- Explore **Agent mode** for generating and fixing code autonomously across your project.
+- Use the **Ask feature** to have the AI explain error messages and suggest solutions in detail.

code-studio/tutorials/from-complex-web-automation-to-streamlined-workflows-code-studio-skills-for-playwright-mcp.md

@@ -110,21 +110,30 @@ Before the AI can generate tests, you need to install both Playwright and the MC
 
    - Once the Chat Panel is open, locate and click the **Configure Chat** icon (typically displayed as a settings or gear icon in the Chat Panel toolbar).
 
-   - From the configuration menu that appears, select the **skill** option.
+   - From the configuration menu that appears, select the **Agent Customizations** option.
+
+   <img src="./tutorials-images/Agent-Customization.png" alt="Agent Customization in Code Studio" />
+
+   - From the Agent Customization menu that appears, select the **Skills** option.
 
    <img src="./tutorials-images/skills-menu.png" alt="Skills view in Code Studio" />
 
 2. In the Skills panel, locate and click the **+ New skill...** button to create a new skill definition.
 
    <img src="./tutorials-images/create-new-skill.png" alt="Skills panel showing the + New skill button" />
 
-3. Name your skill:
+3. Select path:
+   - A dialog will appear prompting you to select the path for your workspace. Select the path.
+
+   <img src="./tutorials-images/skill-path-input.png" alt="Skill path selection field showing path for the skill" />
+
+4. Name your skill:
    - A dialog will appear prompting you to enter a skill name. Type `playwright-explore-website` as the skill name. Skill names must use lowercase letters, numbers, and hyphens only — no spaces or special characters are allowed.
    - Press **Enter** to confirm and create the skill.
 
    <img src="./tutorials-images/skill-name-input.png" alt="Skill name input field showing playwright-explore-website" />
 
-4. Define the skill instructions:
+5. Define the skill instructions:
    - Code Studio will automatically open a new `SKILL.md` file where you can define the instructions that guide the AI agent's behavior.
    - Replace the default content with the following skill definition:
 

code-studio/tutorials/terminal-tools-improvement.md

@@ -0,0 +1,54 @@
+# Terminal Tools Improvements for Background Sessions
+
+## Overview
+When the Code Studio agent runs terminal commands, those commands sometimes move to the background, either because they are long-running tasks or because a foreground terminal timed out. Previously, the agent could only read the output of those background terminals but could not interact with them. This meant that if a background terminal was waiting for a password, a confirmation, or any other input, the agent was stuck.
+
+This solves that problem with two key improvements:
+1. **Send input to background terminals**: The agent can now send input directly to a background terminal, not just read from it.
+2. **Background terminal notifications**: The agent is automatically notified when a background terminal finishes a command or needs user input, so it can take immediate action.
+
+## What You Will Learn
+By the end of this guide, you will understand:
+- Why the agent previously struggled with background terminals and what has changed.
+- How the agent can now send input to a background terminal that is waiting for a response.
+- How to enable background terminal notifications so the agent never misses an important event in a running terminal.
+- How the agent can automate full workflows across foreground and background terminals.
+
+## Key Concepts
+- **Background Terminal**: A terminal session that’s running, but not currently visible (for example, switched to a different tab or minimized).
+- **Notification**: A pop-up or alert in Code Studio that warns you when something in the background terminal needs your attention (like needing a password or confirming an action).
+
+## Steps
+
+### Step 1: Ask the Agent to Run a Command via Chat
+In the Code Studio chat panel, ask the agent to run a long-running terminal command. 
+
+For example: Run npm run dev for me.
+
+ <img src="./tutorials-images/terminal-agent-run.png" alt="terminal agent run" />
+
+### Step 2: Chat Response Completes, Terminal Runs in Background
+Once the agent has started the command and the chat response finishes, the `npm run dev` process continues running silently in the background terminal in the IDE. You can see it is still active in the Terminal panel, but the chat has moved on.
+
+ <img src="./tutorials-images/terminal-runs-in-background.png" alt="terminal runs in background" />
+
+### Step 3: Agent Responds Immediately
+As soon as you press `Ctrl + C`, the agent is automatically triggered by the background terminal notification. It detects that the process was interrupted and immediately responds in the chat — for example, letting you know the dev server was stopped, showing the final output, or asking if you want to restart it.
+
+You do not need to go back to chat and ask the agent what happened. The notification fires instantly and the agent reacts on its own.
+
+ <img src="./tutorials-images/agent-response.png" alt="agent response" />
+
+> **Note:**  
+This same instant response also works for other terminal events, not just `Ctrl + C`. If the command completes successfully, throws an error, or asks for input (like a password prompt), the agent will be notified and respond right away. 
+>
+> For example:
+> - A build script finishes → agent reports the result.
+> - An SSH session asks for a password → agent sends the input automatically using `send_to_terminal`.
+> - A process crashes → agent reports the error and suggests a fix. 
+
+
+## What’s Next?
+- [Generate Your First Code Change Using Agent](/code-studio/tutorials/generate-your-first-code-using-agent.md) — Guide the agent to implement and verify a small change end-to-end.
+- [Fixing Bugs with AI](/code-studio/tutorials/fixing-bugs-with-ai.md) — Use the agent to identify, patch, and validate defects safely.
+- [Compare AI Models for Different Tasks](/code-studio/tutorials/compare-ai-models.md) — Evaluate model quality, cost, and speed for your workflows.