updated

Author: Nursid

docs/user/1_index.md

@@ -1,60 +1 @@
-# Overview
-
-### Get Started
-
-Codebolt is a fast, lightweight, and customizable source code editor for Windows and macOS, designed to enhance productivity with intelligent features and extensive language support.
-Click on the "Get Started" button. This action initiates the sign-in process, where users are given two options for authentication: Google or GitHub.
-<!-- Start your journey with Codebolt by exploring these introductory videos. -->
-
-<!-- [![Watch the video](../../static/img/get_started.png)](../../static/video/onboarding.mp4) -->
-
-<iframe width="100%" height="500" src="https://www.youtube.com/embed/YpZV_AFHsX8?si=oNo5MzqlAPqqgdgu" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
-
-After successfully completing the onboarding process, users can sign in to explore the application dashboard. On the dashboard, users can:
-
-* Create new project in the workspace or open the project folder.
-* Access recent projects and files for quick continuation of their work.
-* Create new workspace, accessible from the top-right of the dashboard..
-
-![dashboard](../../static/img/codebolt_application.png)
-
-### Latest Agents
-
-Bug hunter agents and documentation agents help you work faster and make the platform more powerful.
-
-![latest agents](../../static/img/latest_agent.png)
-
-### First Steps
-
-To get started with CodeBolt, here are some initial steps to familiarize yourself with the editor:
-
-* [Intro Videos](#) - Begin your journey with CodeBolt through introductory videos that showcase its features and capabilities.
-
-* [Setup](#) - Install CodeBolt for your platform and configure the toolset according to your development needs.
-
-* [User Interface](#) - Introduction to the basic UI, commands, and features of the codebolt editor.
-
-* [Settings](#) -  Customize Codebolt for how you like to work.
-
-* [Chat Features](#) - Explore CodeBolt's built-in chat functionality to communicate seamlessly with collaborators.
-
-* [Preview](#) - Utilize the preview feature in CodeBolt to see real-time updates of your code or project output.
-
-* [Terminal](#) - Access and use the integrated terminal in CodeBolt for command-line operations without leaving the editor.
-
-* [Editor](#) - Learn about the powerful editing capabilities of CodeBolt, including syntax highlighting, auto-completion, and more.
-
-* [Browser](#) - Use CodeBolt's built-in browser to test and preview web applications directly within the editor environment.
-
-* [Planner](#) - Organize your tasks and projects effectively with CodeBolt's integrated planner or task management tools.
-
-* [Git](#) - Take advantage of Git integration within CodeBolt for version control, branching, committing, and merging code changes.
-
-* [Debug](#) - Set up and debug your applications seamlessly using CodeBolt's debugging tools and features.
-
-![Application Overview](../../static/img/application_features.png)
-
-### Downloads
-* [Download Codebolt](https://codebolt.ai/) - Quickly find the appropriate install for your platform (Windows, macOS)
-
-
+# User Guide

docs/user/application/1_index.md

@@ -0,0 +1,9 @@
+# Introduction 
+
+Codebolt is a code editor enabling developers to build and use adaptable use-case specific AI agent toolkits. This gives more accurate software generation, allowing developers and even end users to customise complex softwares using text prompts.
+
+
+![introduction](/application/introduction.png)
+
+
+

docs/user/3_installation/install.md renamed to docs/user/application/2_install.md

@@ -4,7 +4,7 @@
 
 Begin by clicking the **Get Started** button on the home page.
 
-![get started](../../static/img/get_started.png)
+![get started](../../../static/img/get_started.png)
 
 ### Sign Up
 
@@ -15,7 +15,7 @@ Here, you will have two options for signing up:
 - **Google**
 - **GitHub**
 
-![sign up](../../static/img/sing-up.png)
+![sign up](../../../static/img/sing-up.png)
 
 ### Authentication
 
@@ -24,13 +24,13 @@ Here, you will have two options for signing up:
   - If you are a new user, you will be redirected to the username page.
     You need to create and add a username. After adding the username, you can proceed further.
 
-![username](../../static/img/username.png)
+![username](../../../static/img/username.png)
 
 - After successful authentication, a message will appear:  
    _"You have successfully signed in. You can close this Page, Now you can return to the app"_
   - Once the authentication process is completed, you can proceed to use the application.
 
-![authentication success](../../static/img/authentication-success.png)
+![authentication success](../../../static/img/authentication-success.png)
 
 ### First Time Users
 
@@ -40,7 +40,7 @@ Let's walk through every step
 
 1. **Welcome Screen**: Upon successful authentication, new users will be greeted with a welcome message. This screen serves as an introduction to the onboarding process.
 
-![Onboarding Welcome](../../static/onboarding/1.png)
+![Onboarding Welcome](../../../static/onboarding/1.png)
 
 2. **Select Default Provider and Model**: In this step, you will choose your preferred provider from a range of options:
 
@@ -53,39 +53,39 @@ Let's walk through every step
 
    This selection will determine the default provider for you project(you can change it later).
 
-![Onboarding Provider Selection](../../static/onboarding/2.png)
+![Onboarding Provider Selection](../../../static/onboarding/2.png)
 
 Now on the same page select a model provided by list of models from the selected provider
 (After entering correct key to provider you will se the list of models)
 
-![Onboarding Model Selection](../../static/onboarding/3.png)
+![Onboarding Model Selection](../../../static/onboarding/3.png)
 
 3. **Choose Default Workspace**: Select the default workspace where you'd like your project to be organized and managed.
 
-![Onboarding Welcome](../../static/onboarding/4.png)
+![Onboarding Welcome](../../../static/onboarding/4.png)
 
 4. **Create Your First Project**: In this step, you will create your first project. Provide a name for your project and click "Create Project in workspace" to get started.
 
-![Onboarding Project Creation](../../static/onboarding/5.png)
+![Onboarding Project Creation](../../../static/onboarding/5.png)
 
 After clicking on "Create Project in workspace" this screen will pop-up
 
 Here we can see [Template](./4_Templates/template.md) and [My Templates](./4_Templates/myTemplates.md) <br/>
 Just give a name to you project or you can keep a random name and click "Create Project"
 
-![Onboarding Project Creation](../../static/onboarding/6.png)
+![Onboarding Project Creation](../../../static/onboarding/6.png)
 
 5. **Developer Page**: After creating your project, you will be taken to the Developer Page where you can start working on your project.
 
-   ![ Project Created](../../static/onboarding/7.png)
+   ![ Project Created](../../../static/onboarding/7.png)
 
 6. **Congratulations!** You have successfully created your first project. You can now begin exploring the features and capabilities of the platform to build and publish your applications.
 
 ### Returning Users
 
 For users who have previously completed the onboarding process, signing in through the portal will redirect you directly to the main application dashboard.
 
-![Application Dashboard](../../static/img/codebolt_application.png)
+![Application Dashboard](../../../static/img/codebolt_application.png)
 
 From here, you can access your existing projects, create new projects, and leverage the full capabilities of the CodeBolt platform to build and publish your applications efficiently.
 

docs/user/2_onboarding.md renamed to docs/user/application/3_onboarding.md

@@ -0,0 +1,156 @@
+# Overview
+
+Natural language interface for exploring, editing, and managing code with contextual AI assistance in Chat mode
+
+## What is Chat?
+Chat is Codebolt AI assistant that lives in your sidebar, letting you interact with your codebase through natural language. You can ask questions, request code edits, get terminal command suggestions, and more - all without switching context.
+
+
+<video width="800px" height="500px" autoplay controls>
+  <source src="/application/video/chat.mp4" type="video/mp4" />
+  Your browser does not support the video tag.
+</video>
+
+## Core Capabilities
+
+<div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '20px', margin: '20px 0'}}>
+  <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}>
+    <div style={{fontSize: '24px', marginBottom: '12px'}}>📄</div>
+    <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Understand Code</h3>
+    <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Ask questions about unfamiliar code, get explanations, or explore your codebase</p>
+  </div>
+  
+  <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}>
+    <div style={{fontSize: '24px', marginBottom: '12px'}}>💾</div>
+    <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Edit Code</h3>
+    <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Make small tweaks or large multi-file changes without manually navigating files</p>
+  </div>
+  
+  <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}>
+    <div style={{fontSize: '24px', marginBottom: '12px'}}>⚡</div>
+    <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Run Commands</h3>
+    <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Get terminal command suggestions for your specific use case</p>
+  </div>
+  
+  <div style={{border: '1px solid #e1e5e9', borderRadius: '8px', padding: '20px', backgroundColor: '#f8f9fa'}}>
+    <div style={{fontSize: '24px', marginBottom: '12px'}}>∞</div>
+    <h3 style={{margin: '0 0 8px 0', fontSize: '18px', fontWeight: '600'}}>Automate workflows</h3>
+    <p style={{margin: '0', color: '#666', fontSize: '14px'}}>Let Codebolt search, reason and execute to automate your workflows</p>
+  </div>
+</div>
+
+## Getting Started
+
+Access Chat in the sidebar with `⌘+L` (Mac) or `Ctrl+I` (Windows/Linux). Type your request in natural language, and the AI will respond accordingly.
+
+## What can I do with Chat?
+
+<div style={{overflow: 'hidden', marginBottom: '8px'}}>
+  <details>
+    <summary>
+        Build Features
+    </summary>
+    <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}>
+      <p style={{margin: '0 0 16px 0'}}>
+        Chat has the ability to learn your codebase and make changes to it on your behalf. This is a powerful way to implement new features, and is the perfect tool for feature requests.
+      </p>
+      <p style={{margin: '0 0 16px 0'}}>
+        Simply explain to the chat, using <strong>Agent mode</strong>, what feature you would like it to implement. Chat will look at your codebase, and any relevant files, and suggest any necessary changes across these fields.
+      </p>
+      <p style={{margin: '0'}}>
+        In addition to code edits, Chat may suggest other changes, like adding new files, or adding packages with a package manager.
+      </p>
+    </div>
+  </details>
+</div>
+
+<div style={{overflow: 'hidden', marginBottom: '8px',  backgroundColor: '#ffffff',}}>
+  <details>
+    <summary>
+      Refactor code
+    </summary>
+    <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}>
+      <p style={{margin: '0 0 16px 0'}}>
+        Need to clean up messy code or reorganize your project? Codebolt can help make your code better and easier to maintain.
+      </p>
+      <p style={{margin: '0'}}>
+        Just describe what you want to improve, like "Make this code faster" or "Organize these files better." Codebolt will understand your project and make the changes safely.
+      </p>
+    </div>
+  </details>
+</div>
+
+<div style={{overflow: 'hidden', marginBottom: '8px',  backgroundColor: '#ffffff',}}>
+  <details>
+    <summary>
+       Setup new projects
+    </summary>
+    <div style={{padding: '24px', backgroundColor: '#ffffff', color: '#64748b', lineHeight: '1.6'}}>
+      <p style={{margin: '0 0 16px 0'}}>
+        Starting a new project from scratch? Codebolt makes it super easy!
+      </p>
+      <p style={{margin: '0'}}>
+        Tell it what kind of app you want to build - like a website, mobile app, or API. Codebolt will create all the folders, install the right tools, and write starter code so you can begin coding right away.
+      </p>
+    </div>
+  </details>
+</div>
+
+## Modes
+
+Chat offers different modes optimized for specific tasks:
+
+- **Auto**: Acts as a universal agent—Codebolt will autonomously understand your codebase and make broad, codebase-wide changes as needed.
+- **Ask**: Get explanations, answers, and feature planning help from the AI about your codebase.
+- **Act**: Make targeted edits using only the specific context you provide.
+- **Local Agent**: Create a custom agent tailored to your unique workflows.
+
+
+## Context
+
+Chat understands your codebase by analyzing:
+
+1. **Open files**: What you're currently viewing
+2. **@ Symbol**: Use @ to select specific files, folders, and docs you want to reference
+3. **# Symbol**: Used to select a specific agent from the agent marketplace
+
+### Using @ to Select Content
+
+The @ symbol lets you precisely choose what Chat should focus on:
+
+- **@filename.js** - Select a specific file
+- **@foldername/** - Include an entire folder
+- **@docs/** - Reference documentation files
+- **@README.md** - Pick specific documentation
+
+Simply type @ and start typing to see available options. This helps Chat give you more accurate answers by focusing on exactly the code and files you're asking about.
+
+The interface suggests relevant context based on your query, ensuring accurate responses.
+
+## Code Edits
+
+When Chat suggests code changes:
+
+1. **Review**: See the proposed changes in a diff view
+2. **Apply**: In Ask mode, explicitly apply changes with the "Apply" button
+3. **Accept/Reject**: After changes are made, decide whether to keep or discard them
+
+Codebolt's custom model applies suggested edits to files with thousands of lines in seconds.
+
+## Checkpoints
+
+Sometimes you may want to revert to a previous state of your codebase. Codebolt helps you with this by automatically creating checkpoints of your codebase at each request you make, as well every time the AI makes changes to your codebase.
+
+To revert to a previous state, you can either:
+
+- Click the `Restore Checkpoint` button that appears within the input box of a previous request
+- Click the + button that shows at the left of a message in the chat history when hovered
+
+## Model Selection
+
+By default, Codebolt has an 'auto-select' option, which will intelligently select the best premium model for your request. This will always use 1 premium request as is, unless you have certain settings enabled that increase this, like long-context mode.
+
+If you want more granular control over which model is used, you can manually select a model from the model picker.
+
+When using custom modes, you can also select a fixed model for each mode, such as selecting `o1` for a `Planning` mode.
+

docs/user/application/4_chat/1_index.md

@@ -0,0 +1 @@
+# Agent Mode

docs/user/application/4_chat/2_agentmode.md

@@ -0,0 +1 @@
+# Act 

docs/user/application/4_chat/3_act.md

@@ -0,0 +1 @@
+# Ask

docs/user/application/4_chat/4_ask.md

@@ -0,0 +1 @@
+# Auto

docs/user/application/4_chat/5_auto.md

@@ -6,7 +6,7 @@
  - Track ongoing and completed tasks for better productivity.
 
 
-![planner](../../../static/img/planner.png)  
+![planner](/img/planner.png)  
 
 **Video Guide**
 

docs/user/application/4_chat/6_tools.md

@@ -4,7 +4,7 @@
  - The Preview feature allows you to view the real-time output of the code you are working on within the application.
  - After writing or editing code, you can use the Preview tab to see how your application or script will look or behave when executed.
 
- ![preview](../../../static/img/preview.png) 
+ ![preview](/img/preview.png) 
 
  **Video Guide**
 

docs/user/4_Templates/myTemplates.md renamed to docs/user/application/5_Templates/myTemplates.md

@@ -8,7 +8,7 @@ The Agent Steps feature in Universal Agent allows you to define a sequence of up
 6. User Questions
 
 
-![Agent Steps](../../../../../static/settings/appSettings/7.png)
+![Agent Steps](../../../../../../static/settings/appSettings/7.png)
 
 
 For each step, you can specify which particular agent should be used. This allows you to customize the workflow and leverage the strengths of different AI models based on the task at hand.

docs/user/4_Templates/template.md renamed to docs/user/application/5_Templates/template.md

@@ -3,7 +3,7 @@
 The Default Provider and model you select during [onboarding](/docs/user/onboarding#first-time-users) you update it here. <br/>
 Also you can update Embedding provider and model.
 
-![Default Settings](../../../../../static/settings/appSettings/1.png)
+![Default Settings](../../../../../../static/settings/appSettings/1.png)
 
 
 ### Video Guide

docs/user/5_Apps/agentIntroduction.md renamed to docs/user/application/6_Apps/agentIntroduction.md

@@ -16,7 +16,7 @@ The **Environment and Services** section allows you to configure and manage the
    By providing the necessary connection URLs or configuration details, you can seamlessly integrate these services into your application.
 
 
-![EnvandServices](../../../../../static/settings/appSettings/8.png)
+![EnvandServices](../../../../../../static/settings/appSettings/8.png)
 
 By leveraging the **Environment and Services** section, you can streamline the setup and deployment process for your applications. It provides a centralized location to manage runtime dependencies and external service integrations, making it easier to develop, test, and deploy your applications across different environments.
 

docs/user/5_Apps/publish.md renamed to docs/user/application/6_Apps/publish.md

@@ -2,7 +2,7 @@
 - In the **LLMs** section, you can add more LLM providers such as Anthropic and LM Studio. 
 - After adding providers, you can select your preferred provider in the **Default Settings** section.
 
-![Default Settings](../../../../../static/settings/appSettings/2.png)
+![Default Settings](../../../../../../static/settings/appSettings/2.png)
 
 - Make sure to update your settings after adding a new provider.
 

docs/user/features/controlK.md renamed to docs/user/application/features/controlK.md

@@ -3,7 +3,7 @@
   - Enable custom  Universal Agent
   - Use offline Universal Agent
 
-![UniversalAgent](../../../../../static/settings/appSettings/4.png)
+![UniversalAgent](../../../../../../static/settings/appSettings/4.png)
 
 ## Enable Custom Universal Agent