Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/API-Reference/features/TaskManager.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ like `showStopIcon`, `hideStopIcon`, etc.
| [options.onRetryClick] | <code>function</code> | | Callback function triggered when the retry button is clicked. |
| [options.onSelect] | <code>function</code> | | Callback function triggered when the task is selected from the dropdown. |
| [options.progressPercent] | <code>number</code> | | Initial progress percentage of the task. |
| [options.hideProgressBar] | <code>boolean</code> | | Hide progress for tasks waiting on a user action. |
| [options.noSpinnerNotification] | <code>boolean</code> | | If set to true, will not show the task spinners for this task. This can be used for silent background tasks where user attention is not needed. |

**Example**
Expand Down
3 changes: 2 additions & 1 deletion docs/API-Reference/utils/DragAndDrop.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ Returns true if the drag and drop items contains valid drop objects.
<a name="openDroppedFiles"></a>

## openDroppedFiles(paths) ⇒ <code>Promise</code>
Open dropped files
Open dropped files in order so the last file becomes active, regardless of load times.
Continue processing the remaining paths if an earlier file cannot be opened.

**Kind**: global function
**Returns**: <code>Promise</code> - Promise that is resolved if all files are opened, or rejected
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

79 changes: 77 additions & 2 deletions src-node/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src-node/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"node-pty": "^1.1.0",
"npm": "11.8.0",
"open": "^10.1.0",
"phoenix": "file:..",
"vscode-langservers-extracted": "4.10.0",
"which": "^2.0.1",
"ws": "^8.17.1",
Expand Down
1 change: 1 addition & 0 deletions src/assets/aiDemos/0000-dave-jungle-temple.json

Large diffs are not rendered by default.

70 changes: 56 additions & 14 deletions src/assets/default-project/en/Newly_added_features.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,60 +4,102 @@ We are continuously adding features every week. [Check out our release page to s

Here's a list of top features recently added to Phoenix Code:

## [Layers Panel: Your Page as a Tree](https://docs.phcode.dev/app-links/layers-panel)
## [Explore and Edit Your Page with Layers](https://docs.phcode.dev/app-links/layers-panel)

`Added in October 2026`

The new **Layers** tab in the sidebar shows your page as a tree. Click a row to select the element, then edit its tag, classes, attributes, and styles right in the sidebar. Drag rows to move things around, and insert, duplicate, or delete elements without touching the code.
See and edit your page’s HTML structure in the new **Layers** sidebar. Add, rearrange, and duplicate elements, edit their properties, and fine-tune CSS, with changes synced to your code and Live Preview.

The Styles section lists every rule that applies to the element, shows which values are overridden and by what, and lets you edit them in place.
See which styles affect an element and edit them in one place. Pick colors, adjust sizes and spacing, and watch the result in Live Preview.

> The Layers panel is a Phoenix Pro feature.

![Image](https://docs-images.phcode.dev/in-app/pro-layersPanel.jpg)

## [A New AI Panel with Built-in Claude Code](https://docs.phcode.dev/app-links/ai-chat)
## [Visual Questions in Live Preview](https://docs.phcode.dev/app-links/ai-ask)

`Added in October 2026`

Claude Code now comes built in. Sign in and start chatting, with nothing to install. The new chat shows you what the AI is doing as it works, and every change it makes can be undone with one click. You decide how much it can do on its own.
Select part of your page and use **Ask AI** to explore an idea. Phoenix AI can create interactive questions with design options you can try on the page—layouts, colors, and styles you can see before choosing what goes into your code.

New to AI? Click **Surprise Me** on the start screen to watch a demo first. Free accounts get a daily and monthly chat limit. Phoenix Pro removes the limits.
Hover to preview an option, click to keep it, then press **Send** to confirm. You can also use **Ask AI** with selected code or Markdown text.

> This feature is available only in desktop apps.

![Image](https://docs-images.phcode.dev/in-app/pro-aiPanel.jpg)
![Image](https://docs-images.phcode.dev/in-app/pro-aiAsk.jpg)

## [Interactive Replies in Chat](https://docs.phcode.dev/app-links/ai-chat)

`Added in October 2026`

Phoenix AI can create interactive mockups, comparisons, and explanations in the chat. Click through options and adjust controls to explore an idea, instead of piecing it together from a text description. You can use these visuals even without a page open in Live Preview.

> This feature is available only in desktop apps.

## [Claude Code CLI and Codex CLI Inside the Editor](https://docs.phcode.dev/app-links/ai-cli)
## [Bring Your Existing CLI Agents into Phoenix Code](https://docs.phcode.dev/app-links/ai-cli)

`Added in October 2026`

Already use **Claude Code** or **Codex**? Run them inside the AI panel. They see the file you are editing, your unsaved changes, and the Live Preview, and they can take screenshots and open files.
Bring your existing agents into Phoenix Code and give them a visual way to work with you. **ChatGPT Codex** and **Claude Code CLI** gain tools to prototype designs in Live Preview, show interactive choices, and ask questions on your page—so you can see, try, and refine ideas instead of just reading descriptions.

Keep multiple sessions running and switch between them as you work. You can also transfer an **Ask AI** draft and its attachments to a connected session, then review and submit it there.

> Running the CLIs inside the panel is a Phoenix Pro feature, available only in desktop apps.

![Image](https://docs-images.phcode.dev/in-app/pro-aiCli.jpg)

## [Ask AI About What You See](https://docs.phcode.dev/app-links/ai-ask)
## [AI Usage Graphs](https://docs.phcode.dev/app-links/ai-chat)

`Added in October 2026`

Select an element in Live Preview and click **Ask AI**. A screenshot of the element and its place in the code go with your question, so you don't have to describe where it is. The same button appears on selected code in the editor and on selected text in the Markdown preview.
See your AI usage across Phoenix AI, ChatGPT Codex, and Claude Code CLI sessions in Phoenix. Track tokens, estimated costs, and model breakdowns, with daily activity graphs and monthly history.

Costs are estimates at API list prices; your provider bill may differ. You can delete usage history while keeping your chats.

> These features are available only in desktop apps.

## [Simpler AI Setup](https://docs.phcode.dev/app-links/ai-chat)

The AI can ask you back the same way, with a card inside the Live Preview and options you can preview on the page.
`Added in October 2026`

Get from signing in to creating with AI more easily, with guided setup in Phoenix Code. The start screen brings Phoenix AI, ChatGPT Codex, and Claude Code CLI together and shows your running sessions.

> This feature is available only in desktop apps.

![Image](https://docs-images.phcode.dev/in-app/pro-aiAsk.jpg)
![Image](https://docs-images.phcode.dev/in-app/pro-aiPanel.jpg)

## [AI Demos](https://docs.phcode.dev/app-links/ai-chat)

`Added in October 2026`

See what you can create with Phoenix AI before signing in or using any AI credits. Watch a page take shape, explore the result, and reveal the prompt behind it. Click **Surprise Me** to try it.

> This feature is available only in desktop apps.

## [AI Thinking Effort](https://docs.phcode.dev/app-links/ai-chat)

`Added in October 2026`

Adjust how deeply supported AI models reason, from quick everyday tasks to more involved problems. Choose **Thinking effort** for the selected model, or leave it at Default.

> This feature is available only in desktop apps.

## [Find Photos with AI](https://docs.phcode.dev/app-links/ai-images)

`Added in October 2026`

Ask the AI for a picture and it searches Unsplash. Pick one and it goes on your page, linked from Unsplash or downloaded into your project.
Find the right photos for your page together with AI. Browse and compare options in an interactive gallery, refine the search, and choose what fits your design. Ask AI to use your choices on the page or download them into your project.

> This feature is available only in desktop apps.

![Image](https://docs-images.phcode.dev/in-app/pro-aiImages.jpg)

## [Larger Image Previews in Markdown](https://docs.phcode.dev/app-links/markdown-editor)

`Added in October 2026`

Open an image in a larger lightbox without leaving your document. Click an unlinked image in reader mode, or use its expand button or double-click while editing. Press Escape to return to your Markdown.

## [Style Your Page Visually with the Styles Bar](https://docs.phcode.dev/app-links/styles-bar)

`Added in August 2026`
Expand Down
2 changes: 1 addition & 1 deletion tracking-repos.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"phoenixPro": {
"commitID": "25ea705112c785794c401dcfc413aefde122b2e3"
"commitID": "1ff11cca5ba60131a2a18654c28c72cd5e3168a9"
}
}
Loading