AI, Terminal, Tabbed bottom panel docs

api/08-How-To/Panels.md

@@ -9,7 +9,7 @@ In Phoenix Code, Panels are of two types :- `Plugin Panel` and `Bottom Panel`.
 ![Plugin Panel Example](./images/plugin-panel-example.png) 
 
 
-**Bottom Panel** appears on the bottom of the screen. For Example :- *Problems* feature uses the `Bottom Panel`.
+**Bottom Panel** appears on the bottom of the screen as a tab. Multiple bottom panels share a tabbed interface where each panel gets its own tab with an icon and title. For Example :- *Git*, *Terminal*, *Problems* panel and many more use the `Bottom Panel`.
 
 ![Bottom Panel Example](./images/bottom-panel-example.png) 
 
@@ -150,7 +150,7 @@ You can control the visibility and state of your plugin panel:
 ## Creating a Bottom Panel
 
 Bottom panels are created similarly to plugin panels but use different methods:
-> For `Bottom Panels` creating a toolbar icon is not required.
+> For `Bottom Panels` creating a toolbar icon is not required. Each bottom panel appears as a tab in the shared tab bar.
 
 1. **Import required modules**
     ```jsx
@@ -160,11 +160,21 @@ Bottom panels are created similarly to plugin panels but use different methods:
 2. **Create the bottom panel**
     ```jsx
     const bottomPanel = WorkspaceManager.createBottomPanel(
-        "myextension.panel",
-        $panel,
-        200,
+        "myextension.panel", // Unique ID using package-style naming
+        $panel,              // jQuery object for panel content
+        undefined,           // minSize (deprecated, pass undefined)
+        "My Panel",          // Title shown on the tab
+        {
+            iconSvg: "path/to/icon.svg" // SVG icon for the tab
+        }
     );
     ```
+
+    - **`title`**: The text shown on the panel's tab. If not provided, Phoenix Code uses the text from a `.toolbar .title` element inside your panel, or derives it from the panel ID.
+    - **`iconSvg`**: Path to an SVG file used as the tab icon. The icon automatically adapts to light and dark themes. If not provided, a default icon is used.
+
+> The `minSize` parameter (third argument) is deprecated and no longer used. Pass `undefined` for this parameter.
+
 > For a detailed description, refer to [this link](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager#createBottomPanel).
 
 Full Code Example for Bottom Panel:
@@ -189,11 +199,13 @@ Full Code Example for Bottom Panel:
                     .attr("id", "my-extension-panel")
                     .html("<h3>My Bottom Panel</h3><p>Hello from the panel!</p>");
 
-                // Create the plugin panel
+                // Create the bottom panel
                 bottomPanel = WorkspaceManager.createBottomPanel(
                     "myextension.panel",
                     $panel,
-                    200,
+                    undefined,
+                    "My Panel",
+                    { iconSvg: "styles/images/panel-icon-default.svg" }
                 );
                 bottomPanel.show();
             }
@@ -246,33 +258,33 @@ Bottom panels support similar state management to plugin panels:
     }
     ```
 
+4. **Update Tab Title**
+    ```jsx
+    bottomPanel.setTitle("New Title");
+    ```
+
+5. **Handle Close Confirmation**
+
+    If your panel has unsaved state or running processes, you can register a handler that runs before the panel closes. Return `false` to prevent closing.
+    ```jsx
+    bottomPanel.registerOnCloseRequestedHandler(async function () {
+        if (hasUnsavedChanges) {
+            const confirmed = await showConfirmDialog("Discard changes?");
+            return confirmed; // true to close, false to cancel
+        }
+        return true;
+    });
+    ```
+
+    To programmatically close a panel while respecting its close handler, use `requestClose()`:
+    ```jsx
+    const wasClosed = await bottomPanel.requestClose();
+    ```
+
 ## Best Practices
 
 1. Always use unique, package-style IDs (e.g., "yourextension.panel-name") to avoid conflicts with other extensions.
 
 2. Save panel state (e.g., visibility, size) in preferences if needed, to restore state when the extension is reloaded.
 
-Example CSS for Bottom Panel:
-
-```css
-.bottom-panel {
-    background-color: #f8f9fa;
-    border-top: 1px solid #ddd;
-}
-
-.bottom-panel .toolbar {
-    padding: 4px 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #e9ecef;
-    border-bottom: 1px solid #ddd;
-}
-
-.bottom-panel .panel-content {
-    padding: 8px;
-    overflow-y: auto;
-}
-```
-
 > For more information about the WorkSpace Manager API, refer to the [Phoenix Code API documentation](https://docs.phcode.dev/api/API-Reference/view/WorkspaceManager).

docs/07-Pro Features/01-ai-chat.md

@@ -0,0 +1,93 @@
+---
+title: AI Chat
+---
+
+Phoenix Code comes with a built-in AI assistant powered by Claude Code. You can ask it to write code, fix bugs, explain files, and more. The AI can read and edit your project files, run terminal commands, take screenshots of your Live Preview, and work alongside you as you code.
+
+> AI Chat is available only in desktop apps. Free users get a daily and monthly chat limit. [Upgrade to Phoenix Code Pro](https://phcode.io/pricing) for unlimited access.
+
+<!-- Add an image here showing the AI Chat panel in the sidebar with a conversation -->
+
+## Getting Started
+
+AI Chat requires the Claude Code CLI to be installed on your machine. If it's not installed, Phoenix Code shows a setup screen with the install command for your platform.
+
+Once installed, click **Set up Claude Code** to log in. Phoenix Code detects when the login is complete and opens the chat panel automatically.
+
+<!-- Add an image here showing the setup/install screen -->
+
+## Opening the AI Panel
+
+Click the **AI tab** *(sparkle icon)* in the sidebar to open the chat panel.
+
+<!-- Add an image here showing the AI tab in the sidebar -->
+
+## Sending Messages
+
+Type your message in the input box at the bottom and press `Enter` to send. Press `Shift + Enter` to add a new line.
+
+While the AI is working, you can type your next message. It shows up as a queued message and gets sent automatically once the AI finishes its current response.
+
+### Context
+
+Phoenix Code automatically provides context about what you're working on. Small chips appear above the input box showing:
+
+- **Selection** - the file and line range you have selected in the editor
+- **Cursor** - your current line and file
+- **Live Preview** - if the Live Preview panel is open
+
+You can dismiss any of these by clicking the **x** button on the chip.
+
+## Attachments and Screenshots
+
+Click the **paperclip button** to attach files from your project. You can attach images (PNG, JPG, GIF, WebP, SVG) and other files like code or documents.
+
+Click the **camera button** to take a screenshot and attach it. The dropdown lets you choose what to capture:
+
+- **Live Preview** - your Live Preview panel (if open)
+- **Selected Element** - the currently selected element in Live Preview
+- **Full Editor** - the entire editor window
+- **Area** - a custom region you select with a crop tool
+
+## Permission Modes
+
+The AI has three permission levels that control how much it can do on its own. Click the **permission label** at the bottom of the panel to cycle between them.
+
+- **Plan** - the AI proposes a plan first. You review it and click **Approve** to proceed or **Revise** to give feedback. Good for complex tasks where you want to stay in control.
+- **Edit** (default) - the AI can read and edit files on its own, but asks for your approval before running terminal commands.
+- **Full Auto** - the AI works through everything without pausing. Terminal commands still ask for confirmation.
+
+<!-- Add an image here showing the permission mode selector -->
+
+## Session History
+
+Every conversation is saved automatically. Click the **history dropdown** at the top of the panel to see your recent sessions and switch between them.
+
+Sessions are saved per project, so each project has its own chat history.
+
+## Undo and Restore
+
+Before the AI makes any edits, Phoenix Code creates a **restore point**. If you don't like the changes, click **Undo** on the edit summary card to revert all the files back to how they were.
+
+If the AI made changes across multiple responses, you can click **Restore to this point** on any earlier edit summary to go back to that state.
+
+<!-- Add an image here showing an edit summary card with the Undo button and file change stats -->
+
+## Settings
+
+Click the **gear icon** in the chat panel to open AI settings. Here you can:
+
+- Switch between AI providers
+- Add a custom API provider with your own API key and endpoint
+- Set a custom API timeout
+
+<!-- Add an image here showing the AI settings dialog with provider configuration -->
+
+## Keyboard Shortcuts
+
+| Action | Shortcut |
+|--------|----------|
+| Send message | `Enter` |
+| New line | `Shift + Enter` |
+| Cycle permission mode | `Shift + Tab` |
+| Cancel or clear input | `Escape` |

docs/07-Pro Features/01-live-preview-edit.md → docs/07-Pro Features/02-edit-mode-live-preview.md

@@ -1,5 +1,5 @@
 ---
-title: Live Preview Edit Mode
+title: Edit Mode - Live Preview
 ---
 
 import React from 'react';
@@ -70,7 +70,7 @@ The right side of the Control Box displays a set of tools you can use to modify
 
 - **Change Image** *(image icon)*: Opens an image gallery at the bottom of the Live Preview, where you can browse and select an image. You can also choose an image from your computer. Phoenix Code automatically saves the image to your project folder and updates the `src` attribute of the element.  
   *This button appears only for `<img>` elements.*  
-  See [Image Gallery](./02-image-gallery.md) for more details.
+  See [Image Gallery](./03-image-gallery.md) for more details.
 
 - **Edit Text** *(pen icon)*: Opens inline text editing for the selected element. You can edit text directly in the Live Preview, and Phoenix Code automatically updates the source code.  
   *This button appears only for elements that can contain text (it is not available for `<img>`, `<video>`, `<br>`, etc.).*  

docs/07-Pro Features/04-markdown-editor.md

@@ -0,0 +1,120 @@
+---
+title: Markdown Editor
+---
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+The **Markdown Editor** brings a full rich text editing experience to Markdown files, right inside the Live Preview. Format text, build tables, drop in images, add links, use slash commands - and watch every change sync back to your source code instantly.
+
+<!-- Add an image here showing the Markdown Editor in edit mode with the toolbar visible -->
+
+## Enabling Edit Mode
+
+To start editing, click the **Edit** button in the preview toolbar. The toolbar expands to show formatting options, and you can start making changes right away.
+
+To go back to the read-only view, click **Reader** (or **Done**) in the toolbar.
+
+<!-- Add an image here showing the Edit button in the toolbar -->
+
+> Pro users start in Edit Mode by default when opening Markdown files.
+
+## Text Formatting
+
+Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor.
+
+- **Bold** (`Ctrl/Cmd + B`)
+- **Italic** (`Ctrl/Cmd + I`)
+- **Underline** (`Ctrl/Cmd + U`)
+- **Strikethrough** (`Ctrl/Cmd + Shift + X`)
+- **Inline Code** (`Ctrl/Cmd + E`)
+
+You can also select text and use the **floating format bar** that appears near your selection.
+
+<!-- Add an image here showing the floating format bar appearing above selected text -->
+
+## Blocks and Lists
+
+The toolbar lets you change the current block type using a **block type dropdown** (Paragraph, Heading 1 through Heading 5) and insert different types of content:
+
+- **Bullet list**, **Numbered list**, **Task list** (checklist with checkboxes)
+- **Blockquote**, **Divider** (horizontal line)
+- **Code block** with an optional language picker
+- **Table** (see [Table Editing](#table-editing))
+- **Mermaid diagram** with a syntax editor and live rendered preview
+
+<!-- Add an image here showing the block type dropdown with heading options -->
+
+## Slash Menu
+
+Type `/` at the start of an empty line to open the **Slash Menu**. This gives you a quick way to insert any block type without reaching for the toolbar.
+
+<!-- Add an image here showing the Slash Menu with the list of available items -->
+
+Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert.
+
+> The Slash Menu learns from your usage and shows your most-used items first.
+
+### Markdown Shortcuts
+
+You can also use standard Markdown shortcuts as you type:
+
+- `# ` through `##### ` for headings
+- `- ` or `* ` for bullet lists
+- `1. ` for numbered lists
+- `- [ ] ` for task lists
+- `> ` for blockquotes
+- ` ``` ` for code blocks
+- `---` for dividers
+
+## Table Editing
+
+When you insert a table, you can edit it directly in the preview. Click any cell to start typing in it. Use `Tab` to move to the next cell.
+
+Right-click a cell to open a context menu with options to:
+
+- Insert or delete rows
+- Insert or delete columns
+- Copy, cut, and paste rows or columns
+- Delete the entire table
+
+You can also click the **+ New row** button below the table to add a row.
+
+<!-- Add an image here showing the table context menu with row and column options -->
+
+## Images
+
+You can add images in two ways:
+
+- **From a URL** - enter the image URL and alt text in a dialog
+- **Upload from your computer** - pick an image file from your device
+
+Both options are available from the **Image** button in the toolbar or through the [Slash Menu](#slash-menu).
+
+Click an image in the editor to see a popover with **Edit** and **Delete** buttons.
+
+<!-- Add an image here showing the image popover with Edit and Delete buttons -->
+
+## Links
+
+To add a link, select some text and click the **Link** button in the toolbar (or press `Ctrl/Cmd + K`). Enter the URL in the floating input that appears and press `Enter`.
+
+Click an existing link to see a popover showing the URL, with options to **Edit** or **Remove** the link.
+
+<!-- Add an image here showing the link popover with the URL, Edit button, and Remove button -->
+
+## Keyboard Shortcuts
+
+| Action | Shortcut |
+|--------|----------|
+| Bold | `Ctrl/Cmd + B` |
+| Italic | `Ctrl/Cmd + I` |
+| Underline | `Ctrl/Cmd + U` |
+| Strikethrough | `Ctrl/Cmd + Shift + X` |
+| Inline Code | `Ctrl/Cmd + E` |
+| Link | `Ctrl/Cmd + K` |
+| Undo | `Ctrl/Cmd + Z` |
+| Redo | `Ctrl/Cmd + Y` or `Ctrl/Cmd + Shift + Z` |
+| Search | `Ctrl/Cmd + F` |
+| Select All | `Ctrl/Cmd + A` |

docs/07-Pro Features/06-resize-ruler.md

@@ -0,0 +1,42 @@
+---
+title: Resize Ruler
+---
+
+:::info Pro Feature
+[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
+:::
+
+The **Resize Ruler** is a ruler that appears on the Live Preview toolbar when you resize the Live Preview panel. It helps you see exactly how wide your preview is and where your page's CSS breakpoints fall.
+
+<!-- Add an image here showing the Resize Ruler on the Live Preview toolbar with tick marks, colored segments, and the width info badge -->
+
+---
+
+## How It Works
+
+Drag the edge of the Live Preview panel to resize it. A ruler appears on the toolbar showing:
+
+- **Tick marks** with pixel numbers every 100px
+- **Colored segments** that show the CSS breakpoint ranges from your page's stylesheets (see [CSS Breakpoint Detection](#css-breakpoint-detection))
+- **A blue line** at the right edge marking the current width
+- **Width and device info** in the top-right corner, showing the width in pixels along with the closest matching device name (for example, "iPad Mini - 768px")
+
+The ruler disappears on its own once you stop resizing.
+
+> The Resize Ruler also appears briefly when you select a device from the Device Size Presets dropdown in the [Live Preview Toolbar](../Features/Live%20Preview/live-preview#live-preview-toolbar).
+
+---
+
+## CSS Breakpoint Detection
+
+Phoenix Code reads your page's stylesheets and picks up any CSS media query breakpoints (like `min-width` and `max-width` rules). These breakpoints show up in two places:
+
+- **On the Resize Ruler**: as colored segments between breakpoints, each labeled with its pixel value.
+- **In the Device Size dropdown**: as extra entries at the bottom of the list, shown as `@media Xpx`. Clicking one resizes the Live Preview panel to that width.
+
+> Breakpoints update automatically as you edit your CSS.
+
+<!-- Add an image here showing CSS breakpoint entries in the Device Size dropdown, with the @media labels and the crown icon for free users -->
+
+> CSS breakpoint detection and the breakpoint entries in the Device Size dropdown are available only for Pro users. Free users can still use the predefined device presets.
+