@powerhousedao/academy 5.1.0-dev.8 → 5.1.0-staging.0

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## 5.1.0-staging.0 (2025-12-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.1.0-dev.14 (2025-12-08)
+
+### 🚀 Features
+
+- **connect, switchboard:** added healthcheck route ([9a0671113](https://github.com/powerhouse-inc/powerhouse/commit/9a0671113))
+- **academy:** added docker build and publish workflow ([b17562994](https://github.com/powerhouse-inc/powerhouse/commit/b17562994))
+
+### ❤️ Thank You
+
+- Frank
+
+## 5.1.0-dev.13 (2025-12-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.1.0-dev.12 (2025-12-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.1.0-dev.11 (2025-12-08)
+
+This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.
+
+## 5.1.0-dev.10 (2025-12-06)
+
+### 🚀 Features
+
+- **design-system:** added remotes inspector and channel inspector components ([093896ebf](https://github.com/powerhouse-inc/powerhouse/commit/093896ebf))
+
+### ❤️ Thank You
+
+- Guillermo Puente @gpuente
+
+## 5.1.0-dev.9 (2025-12-05)
+
+### 🩹 Fixes
+
+- **renown:** small ui fixes and made connectcrypto and renown id available in hooks ([c06e17226](https://github.com/powerhouse-inc/powerhouse/commit/c06e17226))
+
+### ❤️ Thank You
+
+- Frank
+
 ## 5.1.0-dev.8 (2025-12-05)
 
 This was a version bump only for @powerhousedao/academy to align it with other projects, there were no code changes.

package/docs/academy/01-GetStarted/01-CreateNewPowerhouseProject.md

@@ -9,6 +9,23 @@ This tutorial step has a corresponding branch in the repository. You can:
 - Compare your implementation using `git diff`
 :::
 
+## Overview
+
+This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.  
+A Powerhouse project primarily consists of a document model and its editor. 
+As your projects use-case expands you can add data-integrations or a specific drive-app as seen in the demo package. 
+
+For todays purpose, you'll be using Connect, our user-centric collaboration tool and Vetra Studio, the builder tooling through which developers can access and manage specifications of your project. 
+
+## Prerequisites
+
+- Powerhouse CLI installed: `pnpm install -g ph-cmd` or `npm install -g ph-cmd --legacy-peer-deps`
+- node.js 22 and a package manager (pnpm or npm) installed
+- Visual Studio Code (or your preferred IDE)
+- Terminal/Command Prompt access
+
+If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
+
 <details>
 <summary>📖 How to use this tutorial</summary>
 
@@ -88,23 +105,6 @@ git reset --hard tutorial/step-2-generate-todo-list-document-model
 
 </details>
 
-## Overview
-
-This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.  
-A Powerhouse project primarily consists of a document model and its editor. 
-As your projects use-case expands you can add data-integrations or a specific drive-app as seen in the demo package. 
-
-For todays purpose, you'll be using Connect, our user-centric collaboration tool and Vetra Studio, the builder tooling through which developers can access and manage specifications of your project. 
-
-## Prerequisites
-
-- Powerhouse CLI installed: `pnpm install -g ph-cmd` or `npm install -g ph-cmd --legacy-peer-deps`
-- node.js 22 and a package manager (pnpm or npm) installed
-- Visual Studio Code (or your preferred IDE)
-- Terminal/Command Prompt access
-
-If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
-
 ## Quick start
 
 Create a new Powerhouse project with a single command:
@@ -144,7 +144,41 @@ Navigate to the newly created project directory:
     cd todo-tutorial
     ```
 
-## Develop a single document model in Connect
+## Develop a single document model in Vetra Studio
+
+**Vetra Studio** is the builder's orchestration hub for assembling all specifications needed for your package. It provides a **Vetra Studio Drive** to access, manage, and share document model specifications, editors, and data integrations—all through a visual interface. For deeper coverage, see the [Vetra Studio documentation](/academy/MasteryTrack/BuilderEnvironment/VetraStudio).
+
+Once in the project directory, run the `ph vetra` command to start a Vetra Studio Drive where you'll be defining your specifications. 
+
+
+    ```bash
+    ph vetra
+    ```
+
+The host application for Vetra Studio will start and you will see the following output:
+
+    ```bash
+      ➜  Local:   http://localhost:3000/
+      ➜  Network: http://192.168.5.110:3000/
+      ➜  press h + enter to show help
+    ```
+
+A new browser window will open and you will see the Vetra Studio. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser.
+
+
+<figure className="image-container">
+  <img
+    src={require("./images/VetraStudioDrive.png").default}
+    alt="Vetra Studio Drive"
+  />
+  <figcaption>The Vetra Studio Drive, a builder app that collects all of the specification of a package.</figcaption>
+</figure>
+
+
+Create a new document model by clicking the Document Modesl 'Add new specification' button. Name your document TodoList (PascalCase, no spaces or hyphens). If you've followed the steps correctly, you'll have an empty TodoList document where you can define the 'Document Specifications' in the next step.
+
+<details>
+<summary>Alternatively: Develop a single document model in Connect</summary>
 
 Once in the project directory, run the `ph connect` command to start a local instance of the Connect application. This allows you to start your document model specification document.
 Run the following command to start the Connect application:
@@ -173,6 +207,8 @@ Clear the storage of your localhost application as it might has an old session c
 
 If you've followed the steps correctly, you'll have an empty `TodoList` document where you can define the **'Document Specifications'**.
 
+</details>
+
 ## Verify your setup
 
 At this point, your project structure should match the `step-1-initialize-with-ph-init` branch. You should have:

package/docs/academy/01-GetStarted/02-DefineToDoListDocumentModel.md

@@ -49,16 +49,16 @@ See step 1 for detailed GitHub Desktop instructions.
 
 </details>
 
-In this tutorial, you will learn how to define the specifications for a **TodoList** document model within the Connect application using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
+In this tutorial, you will learn how to define the specifications for a **To-do List** document model within Vetra Studio using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
 If you don't have a document specification file created yet, have a look at the previous step of this tutorial to create a new document specification.
 
-Before you start, make sure you have the Connect application running locally with the command:
+Before you start, make sure you have Vetra Studio running locally with the command:
 
 ```bash
-ph connect
+ph vetra
 ```
 
-The Connect application will start and you will see the following output:
+Vetra Studio will start and you will see the following output:
 
 ```bash
   ➜  Local:   http://localhost:3000/
@@ -83,16 +83,16 @@ Documents in Powerhouse leverage **event sourcing principles**, where every stat
 <summary>State schema of our simplified TodoList</summary>
 
 ```graphql
-# The state of our TodoList
+# The state of our TodoList - contains an array of todo items
 type TodoListState {
   items: [TodoItem!]!
 }
 
-# A single to-do item
+# A single to-do item with its properties
 type TodoItem {
-  id: OID!
-  text: String!
-  checked: Boolean!
+  id: OID!        # Unique identifier for each to-do item
+  text: String!   # The text description of the to-do item
+  checked: Boolean!  # Status of the to-do item (checked/unchecked)
 }
 ```
 
@@ -100,24 +100,29 @@ type TodoItem {
 
 <details>
 <summary>Operations schema of our simplified TodoList</summary>
+
 ```graphql
 # Defines a GraphQL input type for adding a new to-do item
+# Only text is required - ID is generated automatically, checked defaults to false
 input AddTodoItemInput {
-  text: String!
+  text: String!  # The text for the new todo item
 }
 
 # Defines a GraphQL input type for updating a to-do item
+# ID is required to identify which item to update
+# text and checked are optional - only provided fields will be updated
 input UpdateTodoItemInput {
-  id: OID!
-  text: String
-  checked: Boolean
+  id: OID!       # Required: which item to update
+  text: String   # Optional: new text value
+  checked: Boolean  # Optional: new checked state
 }
 
 # Defines a GraphQL input type for deleting a to-do item
 input DeleteTodoItemInput {
-  id: OID!
+  id: OID!  # The ID of the item to delete
 }
 ```
+
 </details>
 
 ## Define the document model specification
@@ -126,7 +131,7 @@ To be able to define the document model, you need to open the document model edi
 
 ### The steps below show you how to do this:
 
-1. In the Connect application, click on **'document model'** to open the document model specification editor.
+1. In Vetra Studio, click on **'document model'** to open the document model specification editor.
 2. Name your document model `TodoList` (PascalCase, no spaces or hyphens) in the Connect application. **Pay close attention to capitalization, as it influences code generation.**
 3. You'll be presented with a form to fill in metadata about the document model. Fill in the details in the respective fields.
 
@@ -155,7 +160,7 @@ Check below screenshot for the complete implementation:
 
 ## Verify your document model generation
 
-After running `pnpm generate TodoList.phd`, your project should have the following structure in `document-models/todo-list/`:
+If you have been watching the terminal in your IDE you will see that Vetra has been tracking your changes and scaffolding your directory. Your project should have the following structure in `document-models/todo-list/`:
 
 ```
 document-models/todo-list/

package/docs/academy/01-GetStarted/03-ImplementOperationReducers.md

@@ -42,9 +42,7 @@ git reset --hard tutorial/step-3-implement-reducer-operation-handlers
 
 </details>
 
-In this section, we will implement the operation reducers for the **To-do List** document model. For this, you need to export the document model specification from Connect and import it into your Powerhouse project directory.
-
-To export the document model specification, follow the steps in the [Define ToDoList Document Model](/academy/GetStarted/DefineToDoListDocumentModel) section.
+In this section, we will implement the operation reducers for the **To-do List** document model. In the previous step Vetra imported our document specification and scaffolded our directory through code generation. If not, you can revisit the [Define TodoList Document Model](/academy/GetStarted/DefineToDoListDocumentModel) section.
 
 ## Understanding reducers in document models
 
@@ -55,27 +53,6 @@ Reducers are a core concept in Powerhouse document models. They implement the st
 The reducers provide the actual implementation of what happens when those operations are performed.
 :::
 
-To import the document model specification into your Powerhouse project, you can either:
-
-- Copy and paste the file directly into the root of your Powerhouse project.
-- Or drag and drop the file into the Powerhouse project directory in the VSCode editor as seen in the image below:
-
-Either step will import the document model specification into your Powerhouse project.
-
-![vscode image](./images/vscode.png)
-
-## Generate the document model code
-
-The next steps will take place in the VSCode editor. Make sure to have it open and the terminal window inside VSCode open as well.
-
-To write the operation reducers of the **To-do List** document model, you need to generate the document model code from the document model specification file you have exported.
-
-Run the following command in the terminal:
-
-```bash
-ph generate TodoList.phd
-```
-
 ## Explore the generated reducer file
 
 Navigate to `/document-models/todo-list/src/reducers/todos.ts` and open it. You should see scaffolding code that needs to be filled for the three operations you specified:

package/docs/academy/01-GetStarted/04-WriteDocumentModelTests.md

@@ -53,20 +53,31 @@ import {
 
 describe("Todos Operations", () => {
   it("should handle addTodoItem operation", () => {
-    // the `createDocument` utility function creates a new empty document
+    // The `createDocument` utility function from your document model creates
+    // a new empty document, i.e. one with your default initial state
     const document = utils.createDocument();
 
-    // generateMock creates an object with random values for each field
+    // The generateMock function takes one of your generated input schemas
+    // and creates an object populated with random values for each field
     const input = generateMock(AddTodoItemInputSchema());
 
-    // call the reducer with the document and action
+    // We call your document model's reducer with the new document we just created
+    // and the action we want to test, `addTodoItem` in this case.
+    // The reducer returns a new object, which is the document with the action applied.
+    // If successful, there will be an operation which corresponds to this action
+    // in the updated document's operations list.
     const updatedDocument = reducer(document, addTodoItem(input));
 
-    // validate the document conforms to the schema
+    // When you generate a document model, we give you validation utilities like
+    // `isTodoListDocument` which confirms the document is of the correct form
+    // in a way that TypeScript recognizes
     expect(isTodoListDocument(updatedDocument)).toBe(true);
 
-    // check the operation was recorded
+    // At the start a document will have 0 operations, so after applying this action
+    // there should now be one operation
     expect(updatedDocument.operations.global).toHaveLength(1);
+    
+    // The operation added to the list should correspond to the correct action type
     expect(updatedDocument.operations.global[0].action.type).toBe("ADD_TODO_ITEM");
   });
   
@@ -124,36 +135,54 @@ it("should handle updateTodoItem operation", () => {
 
 ```typescript
 it("should handle updateTodoItem operation to update text", () => {
-  // Create an existing item to update
+  // We need there to already be a todo item in the document,
+  // since we want to test updating an existing item
   const mockItem = generateMock(TodoItemSchema());
+
+  // We also need to generate a mock input for the update operation we are testing
   const input: UpdateTodoItemInput = generateMock(UpdateTodoItemInputSchema());
   
-  // Set the input ID to match our existing item
+  // Since the mocks are generated with random values, we need to set the `id`
+  // on our mock input to match the `id` of the existing mock item
   input.id = mockItem.id;
+
+  // We want to easily check if the item's text was updated to our new value,
+  // so we assign a variable and use that for the mock input's text field
   const newText = "new text";
   input.text = newText;
-  input.checked = undefined; // Don't change checked state
+
+  // We are only testing updating the text here, so we want the checked field
+  // on the input to be undefined, i.e. it should not change anything on the existing item
+  input.checked = undefined;
   
-  // Create document with existing item
+  // We can pass a different initial state to the `createDocument` utility,
+  // so in this case we pass in an `items` array with our existing item already in it
   const document = utils.createDocument({
     global: {
       items: [mockItem],
     },
   });
 
+  // Create an updated document by applying the reducer with the action and input
   const updatedDocument = reducer(document, updateTodoItem(input));
+
+  // Use our validator to check that the document conforms to the document model schema
   expect(isTodoListDocument(updatedDocument)).toBe(true);
 
-  // Verify operation was recorded
+  // There should now be one operation in the operations list
   expect(updatedDocument.operations.global).toHaveLength(1);
   expect(updatedDocument.operations.global[0].action.type).toBe("UPDATE_TODO_ITEM");
   
-  // Verify state was updated correctly
+  // Find the updated item in the items list by its `id`
   const updatedItem = updatedDocument.state.global.items.find(
     (item) => item.id === input.id,
   );
+
+  // The item's text should now be updated to be our new text
   expect(updatedItem?.text).toBe(newText);
-  expect(updatedItem?.checked).toBe(mockItem.checked); // Unchanged
+
+  // The item's `checked` field should be unchanged
+  expect(updatedItem?.checked).toBe(mockItem.checked);
 });
 ```
 
@@ -161,27 +190,45 @@ it("should handle updateTodoItem operation to update text", () => {
 
 ```typescript
 it("should handle updateTodoItem operation to update checked", () => {
+  // Generate a mock existing item
   const mockItem = generateMock(TodoItemSchema());
+
+  // Generate a mock input
   const input: UpdateTodoItemInput = generateMock(UpdateTodoItemInputSchema());
   
+  // Set the mock input's `id` to the mock item's `id`
   input.id = mockItem.id;
-  const newChecked = !mockItem.checked; // Toggle the checked state
+
+  // We want the new `checked` field value to be the opposite of the
+  // randomly generated value from the mock
+  const newChecked = !mockItem.checked;
   input.checked = newChecked;
-  input.text = undefined; // Don't change text
+
+  // Leave the `text` field unchanged
+  input.text = undefined;
   
+  // Create a document with the existing item in it
   const document = utils.createDocument({
     global: {
       items: [mockItem],
     },
   });
 
+  // Apply the reducer with the action and the mock input
   const updatedDocument = reducer(document, updateTodoItem(input));
+
+  // Validate your document
   expect(isTodoListDocument(updatedDocument)).toBe(true);
 
+  // Get the updated item by its `id`
   const updatedItem = updatedDocument.state.global.items.find(
     (item) => item.id === input.id,
   );
-  expect(updatedItem?.text).toBe(mockItem.text); // Unchanged
+
+  // The item's `text` field should remain unchanged
+  expect(updatedItem?.text).toBe(mockItem.text);
+
+  // The item's `checked` field should be updated to our new checked value
   expect(updatedItem?.checked).toBe(newChecked);
 });
 ```
@@ -374,5 +421,5 @@ Expected test output:
 
 ## Up next: Building the editor
 
-In the next chapter, you'll learn how to implement a user interface (editor) for your document model so you can interact with it visually in Connect Studio.
+In the next chapter, you'll learn how to implement a user interface (editor) for your document model so you can interact with it visually. 
 

package/docs/academy/01-GetStarted/05-BuildToDoListEditor.md

@@ -66,28 +66,11 @@ See step 1 for detailed GitHub Desktop instructions.
 
 In this chapter we will continue with the interface or editor implementation of the **To-do List** document model. This means you will create a simple user interface for the **To-do List** document model which will be used inside the Connect app to create, update and delete your ToDoList items.
 
-## Generate the editor template
+## Add a document editor specification in Vetra Studio. 
 
-Run the command below to generate the editor template for the **To-do List** document model.  
-This command reads the **To-do List** document model definition from the `document-models` folder and generates the editor template in the `editors/todo-list-editor` folder.
+Go back to Vetra Studio and click the 'Add new specification' button in the User Experiences column under 'Editors'. This will create an editor template for your document model. 
 
-```bash
-pnpm generate --editor todo-list-editor --document-types powerhouse/todo-list
-```
-
-Notice the `--editor` flag which specifies the editor name, and the `--document-types` flag defines the document type `powerhouse/todo-list`.
-
-Once complete, you'll have a new directory structure:
-
-```
-editors/todo-list-editor/
-├── components/
-│   └── EditName.tsx          # Auto-generated component for editing document name
-├── editor.tsx                # Main editor component (to be customized)
-└── module.ts                 # Editor module configuration
-```
-
-Navigate to the `editors/todo-list-editor/editor.tsx` file and open it in your editor. You'll see a basic template ready for customization.
+Give the editor the name `todo-list-editor` and select the correct document model. In our case that's the `powerhouse/todo-list`
 
 ### Editor implementation options
 
@@ -97,7 +80,7 @@ When building your editor component within the Powerhouse ecosystem, you have se
 2.  **Tailwind CSS:** Connect Studio comes with Tailwind CSS integrated. You can directly use Tailwind utility classes for rapid, consistent styling without writing separate CSS files.
 3.  **Custom CSS Files:** You can import traditional CSS files (`.css`) to apply custom styles or integrate existing style libraries.
 
-Connect Studio provides a dynamic local environment, by running `ph connect` to visualize your components instantly as you build them, regardless of the styling method you choose.  
+Vetra Studio Preview provides a dynamic local environment, by running `ph vetra --watch` you can visualize your components instantly as you build them, regardless of the styling method you choose.  
 Manual build steps are typically only needed when publishing packages.
 
 ## Build the editor with components
@@ -193,6 +176,11 @@ import { useSelectedTodoListDocument } from "todo-tutorial/document-models/todo-
 
 /** Component for adding a new todo item to the selected todo list */
 export function AddTodo() {
+  // The hooks for getting documents also return a dispatch function
+  // for dispatching actions to modify the document.
+  // This is the same pattern you will have seen in React's `useReducer` hook,
+  // except you don't need to pass the initial state.
+  // The document we are working with _is_ the initial state.
   const [todoList, dispatch] = useSelectedTodoListDocument();
 
   if (!todoList) return null;
@@ -205,6 +193,8 @@ export function AddTodo() {
     const text = addTodoInput.value;
     if (!text) return;
 
+    // Dispatch the addTodoItem action - this will call the reducer
+    // we implemented earlier and update the document state
     dispatch(addTodoItem({ text }));
 
     form.reset();
@@ -303,6 +293,10 @@ type Props = {
  */
 export function Todo({ todo }: Props) {
   const [isEditing, setIsEditing] = useState(false);
+  
+  // Even though this component is for a single todo item and not the whole list,
+  // we can use the exact same hook for dispatching updates to it.
+  // The dispatch function works for any action supported by a TodoList document.
   const [todoList, dispatch] = useSelectedTodoListDocument();
 
   if (!todoList) return null;
@@ -318,6 +312,9 @@ export function Todo({ todo }: Props) {
     const textInput = form.elements.namedItem("todoText") as HTMLInputElement;
     const text = textInput.value;
     if (!text) return;
+    
+    // We can use the dispatch function for any of the actions
+    // supported by a TodoList document
     dispatch(updateTodoItem({ id: todo.id, text }));
     setIsEditing(false);
   };
@@ -461,17 +458,17 @@ export function TodoListName() {
 
 ## Test your editor
 
-Now you can run the Connect app and see the **To-do List** editor in action:
+Now you can run the Vetra Studio Preview and see the **To-do List** editor in action:
 
 ```bash
-ph connect
+ph vetra --watch 
 ```
 
-In Connect, in the bottom right corner you'll find a new Document Model that you can create: **To-do List**.  
+In the bottom right corner you'll find a new Document Model that you can create: **To-do List**.  
 Click on it to create a new To-do List document.
 
 :::info Live Development
-The editor will update dynamically as you make changes, so you can experiment with styling and functionality while seeing your results appear in Connect Studio in real-time.
+The editor will update dynamically as you make changes, so you can experiment with styling and functionality while seeing your results appear in Vetra Studio in real-time.
 :::
 
 **Try it out:**

package/docs/academy/02-MasteryTrack/01-BuilderEnvironment/05-VetraStudio.md

@@ -1,26 +1,13 @@
 # Vetra Studio 
 
-:::tip Important
-
-## Vision: Specification Driven AI
-
-In the **'Get Started'** chapter we've been making use of strict schema definition principles to communicate the intended use case of our reactive documents. 
-The **schema definition language**, is a not only a shared language that bridges the gap between developer, designer and analyst but also the gap between builder and AI-agent through **specification driven AI control**.
-
-- Communicate your solution and intent through a structured specification framework designed for AI collaboration.
-- Specifications enable precise, iterative edits, since all our specification documents are machine-readable and executable.
-:::
-
 ## Introducing Vetra Studio
 
-**Vetra Studio Drive**: Serves as a hub for developers to access, manage & share specification through a remote Vetra drive.   
-**Vetra Package Library**: Store, publish and fork git repositories of packages in the Vetra Package Library.    
-Visit the [Vetra Package Library here](https://vetra.io/packages)
-
-**Vetra Studio Drive** functions as the orchestration hub where you as a builder assemble all the necessary specifications for your intended use-case, software solution or package. For each of the different **modules** that together form a package a **specification document** can be created in Vetra Studio Drive. 
+- **Vetra Studio Drive**: Serves as a hub for developers to access, manage & share specification through a remote Vetra drive. It functions as the orchestration hub where you as a builder assemble all the necessary specifications for your intended use-case, software solution or package. For each of the different **modules** that together form a package a  
+- **Vetra Package Library**: Store, publish and fork git repositories of packages in the Vetra Package Library.    
+Visit the [Vetra Package Library here](https://vetra.io/packages) 
 
 As Vetra Studio matures each of these specification documents will offer an interface by which you as a builder get more control over the modules that make up your package. 
-For now they offer you a template for code generation. 
+For now the specification documents offer you a template for code generation. 
 
 <figure className="image-container">
   <img
@@ -142,6 +129,17 @@ In standard mode:
 
 Vetra Studio integrates deeply with Claude through MCP (Model Control Protocol). This is where AI comes into the mix and you get the chance to have greater control and direction over what your llm is coding for you. 
 
+<details>
+<summary>**Specification Driven AI**</summary>
+
+In the **'Get Started'** chapter we've been making use of strict schema definition principles to communicate the intended use case of our reactive documents. 
+The **schema definition language**, is a not only a shared language that bridges the gap between developer, designer and analyst but also the gap between builder and AI-agent through **specification driven AI control**.
+
+- Communicate your solution and intent through a structured specification framework designed for AI collaboration.
+- Specifications enable precise, iterative edits, since all our specification documents are machine-readable and executable.
+
+</details>
+
 #### 1. Start the Reactor MCP:
 
 Make sure you are in the same directory as your project. 
@@ -168,19 +166,19 @@ Connected to MCP successfully! I can see there's a
   running and ready for document model operations.
 ```
 
+<details>
+<summary>🤖 Reactor MCP Overview</summary>
+
 ### Key Reactor MCP Features
 
+**Reactor-mcp** is a Model Context Protocol (MCP) server that bridges AI agents with Powerhouse document operations.
+
 - It supports automatic document model creation from natural language descriptions
 - It implements a smart editor based on the underlying document models
 - It automatically triggers code generation when documents reach valid state
 - The MCP server enables the agent to work with both existing and newly created document models
 - Vetra supports integration with custom remote drives, allowing users to create, share and manage documents within these drives
 
-<details>
-<summary>🤖 Reactor MCP Overview</summary>
-
-**Reactor-mcp** is a Model Context Protocol (MCP) server that bridges AI agents with Powerhouse document operations.
-
 **Document Operations:**
 - `createDocument` / `getDocument` / `deleteDocument` - Manage documents
 - `addActions` - Modify document state through operations