feat(logistics-manager-app): upgrade baseline, prompts, and docs to Genkit (#30)

Author: MarkTechson

logistics-manager-app/.gemini/settings.json

@@ -0,0 +1,22 @@
+{
+  "mcpServers": {
+    "angular-cli": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@angular/cli",
+        "mcp"
+      ],
+      "disabledTools": [
+        "ai_tutor"
+      ]
+    },
+    "chrome-devtools": {
+      "command": "npx",
+      "args": [
+        "--yes",
+        "chrome-devtools-mcp@1.10.1"
+      ]
+    }
+  }
+}

logistics-manager-app/.gitignore

@@ -0,0 +1,47 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+.agents
+.vscode
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+.env
+
+# System files
+.DS_Store
+Thumbs.db

logistics-manager-app/.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

logistics-manager-app/AGENTS.md

@@ -0,0 +1,27 @@
+# Project Context & Agent Configuration
+
+**System Directive:** For all tasks within this project workspace, you must prioritize the environment-configured Agent Skills, Antigravity Plugins, and MCP Servers listed below. Do not rely on generalized knowledge if a specialized skill or server can execute the task.
+
+Verify your work using the proper tools available to you.
+
+## 1. Agent Skills & Plugins
+Apply the following specialized profiles based on the task domain:
+
+*   **`angular-developer`**: Engage this skill for all frontend architecture, component creation, best practices and modern Angular.
+*   **`developing-genkit-js`**: Engage this skill when writing, configuring, or troubleshooting Genkit AI integrations, agents (`ai.defineAgent`), flows (`ai.defineFlow`), and tools (`ai.defineTool`).
+    *   **Express v5 Compatibility Note**: Do **NOT** install or import `@genkit-ai/express` (such as `expressHandler`), because Angular 21 SSR uses Express v5 (`^5.1.0`) while `@genkit-ai/express` requires Express v4 (`^4.21.1`). Invoke Genkit agents/flows directly inside standard Express route handlers in `src/server.ts`.
+*   **`chrome-devtools` (`chrome-devtools-plugin`)**: Installed via `/plugin install chrome-devtools-plugin` in Antigravity CLI. Engage the `chrome-devtools` skill to automate browser interactions, inspect DOM states, capture console logs, evaluate network payloads, and verify UI changes (`navigate_page`, `wait_for`, `take_snapshot`, `click`, `fill`).
+
+## 2. MCP Servers
+Route operations through these Model Context Protocol servers to interact with the local development environment:
+
+*   **angular-cli MCP Server**: Invoke and use tools like the following to control the development server.
+    * **`devserver.start`** - starts the Angular dev server
+    * **`devserver.stop`** - stops the Angular dev server
+    * **`devserver.wait_for_build`** - Returns the output logs of the most recent build in a running development server started by `devserver.start`
+*   **Chrome DevTools Plugin (`chrome-devtools-plugin`)**: Installed via `/plugin install chrome-devtools-plugin`. Provides the `chrome-devtools` MCP tools and skills for browser verification and debugging.
+
+## 3. Execution Boundaries
+*   **Sequential Execution**: Follow multi-step prompts in exact sequence. Review and implement the code in `src/server.ts` first before running verification.
+*   **Environment & Credentials**: `.env` is valid and is already loaded at the top of `src/server.ts` (overriding any stale shell variables). Do **NOT** run standalone pre-flight `node -e` scripts to test API keys, and do **NOT** invoke external cloud/auth CLI tools (`gcloud`, `aws`, etc.). Test against the running application server (use `curl` only when asked to test the backend API directly; use `chrome-devtools` browser tools—not `curl`—when verifying UI and end-to-end flows).
+*   **MCP Tool Usage**: Do **NOT** invoke the interactive `ai_tutor` tool from the `angular-cli` MCP server.

logistics-manager-app/GEMINI.md

@@ -1,59 +1,78 @@
-# LogisticsManagerApp
+# Obsidian Logistics Manager — Angular + Genkit Agentic Demo
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.1.3.
+An interactive fleet and service-queue management web application built with **Angular 21** (Signals, `resource`, `linkedSignal`, Angular Aria, SSR with Express) and **Genkit** (`genkit` + `@genkit-ai/google-genai` powered by `gemini-3-flash-preview`).
 
-## Development server
+This repository accompanies the live stage demo showing how to pair-program with an AI coding agent using **Agent Skills**, **MCP Servers**, and **Antigravity Plugins** (`chrome-devtools-plugin`).
 
-To start a local development server, run:
+---
 
-```bash
-ng serve
-```
+## Branches & Demo Steps
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+You can either start on **`main`** and run each prompt in [`content/prompts/`](./content/prompts/) with your coding agent, or check out any of the completed checkpoint branches directly:
 
-## Code scaffolding
+| Branch | Prompt | Description |
+| :--- | :--- | :--- |
+| **`main`** | — | Clean starter baseline with fleet map, inventory list, service queue, and static chat shell. |
+| **`step-1`** | [`content/prompts/prompt-1.md`](./content/prompts/prompt-1.md) | Initializes Genkit with `googleAI()` (`gemini-3-flash-preview`) and adds the `POST /api/chat` endpoint in `src/server.ts`. |
+| **`step-2`** | [`content/prompts/prompt-2.md`](./content/prompts/prompt-2.md) | Connects the client chat UI (`src/app/components/chat/chat.ts`) to `/api/chat` using the Angular `resource` API and `afterRenderEffect` auto-scrolling. |
+| **`step-3`** | [`content/prompts/prompt-3.md`](./content/prompts/prompt-3.md) | Defines 7 Genkit fleet & service-queue tools (`ai.defineTool`) in `src/server.ts` and synchronizes UI state using Angular `resource`, `linkedSignal`, and `.reload()`. |
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+To jump straight to the completed application with full Genkit tool calling:
 
 ```bash
-ng generate component component-name
+git checkout step-3
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+---
+
+## Getting Started
+
+### 1. Install Dependencies
 
 ```bash
-ng generate --help
+npm install
 ```
 
-## Building
+### 2. Configure Environment Variables
 
-To build the project run:
+Create a `.env` file in the project root:
 
-```bash
-ng build
+```env
+GEMINI_API_KEY="your_gemini_api_key_here"
 ```
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+### 3. Install Agent Skills & Plugins (For Running the Prompts)
 
-## Running unit tests
+If you want to run the prompts in [`content/prompts/`](./content/prompts/) with an AI coding agent from `main`:
 
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+1. **Install the Angular & Genkit Agent Skills**:
+   ```bash
+   npx skills add https://github.com/angular/skills --skill angular-developer
+   npx skills add firebase/genkit --skill developing-genkit-js
+   ```
 
-```bash
-ng test
-```
+2. **Install the Chrome DevTools Plugin** (in Antigravity CLI):
+   ```text
+   /plugin install chrome-devtools-plugin
+   ```
+
+3. **MCP Configuration**:
+   - Project MCP settings are included in [`.gemini/settings.json`](./.gemini/settings.json), and agent workspace guidelines are defined in [`AGENTS.md`](./AGENTS.md).
+
+---
 
-## Running end-to-end tests
+## Development Server & Building
 
-For end-to-end (e2e) testing, run:
+To start the local development server:
 
 ```bash
-ng e2e
+npm start
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+Open `http://localhost:4200/` in your browser.
 
-## Additional Resources
+To build the project for production:
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+```bash
+npm run build
+```

logistics-manager-app/README.md

@@ -24,32 +24,36 @@ cd logistics-manager-app
 npm install
 ```
 
-### 2. Install Gemini CLI Skills
-Skills provide the agent with specialized knowledge. You'll add the `angular-developer`, `gemini-sdk`, and `gemini-interactions-api` skills to help with code generation and API integration.
+### 2. Install Agent Skills
+Skills provide the agent with specialized knowledge. You'll add the `angular-developer` and `developing-genkit-js` skills to help with Angular code generation and Genkit AI integration.
 
 ```bash
 # Add Angular expertise
-npx skills install https://github.com/angular/skills/ --skill angular-developer
+npx skills add https://github.com/angular/skills/ --skill angular-developer
 
-# Add Gemini SDK expertise
-npx skills add https://github.com/google-gemini/gemini-skills --skill gemini-api-dev
-npx skills add https://github.com/google-gemini/gemini-skills --skill gemini-interactions-api
+# Add Genkit JS expertise
+npx skills add firebase/genkit --skill developing-genkit-js
 ```
 
-Confirm that the agent skills are installed by using the `/skills` commands in Gemini CLI. This may require restarting Gemini CLI.
+Confirm that the agent skills are installed by using the `/skills` commands in your CLI. This may require restarting the CLI.
 
-_Note: You do not have to use the `skills` npm package, you are welcome to use whichever agent skills manager you prefer.
+_Note: You do not have to use the `skills` npm package, you are welcome to use whichever agent skills manager you prefer._
 
-### 3. Configure MCP Servers
-You can use Model Context Protocol (MCP) to enable your AI tools to interact with your running application and the browser.
+### 3. Configure Plugins & MCP Servers
+You can use Model Context Protocol (MCP) and plugins to enable your AI tools to interact with your running application and the browser.
 
 #### Angular MCP Server
-This server allows the AI tooling to understand your Angular project structure, components,services and more. Use the Angular CLI to get the configuration for the MCP server.
+This server allows the AI tooling to understand your Angular project structure, components, services, and control the development server (`devserver.start`, `devserver.wait_for_build`, `devserver.stop`).
 
-#### Chrome DevTools MCP Server
+#### Chrome DevTools Plugin (`chrome-devtools-plugin`)
 This allows the AI to inspect the running application in your browser for debugging and UI analysis.
 
-Add the following configuration to your environment, for example, `.gemini/setting.json`:
+In Antigravity CLI, install the plugin:
+```text
+/plugin install chrome-devtools-plugin
+```
+
+Add the following configuration to `.gemini/settings.json`:
 
 ```json
 {
@@ -59,15 +63,17 @@ Add the following configuration to your environment, for example, `.gemini/setti
       "args": [
         "-y",
         "@angular/cli",
-        "mcp",
-        "-E",
-        "devserver"
+        "mcp"
+      ],
+      "disabledTools": [
+        "ai_tutor"
       ]
     },
     "chrome-devtools": {
       "command": "npx",
       "args": [
-        "chrome-devtools-mcp@latest"
+        "--yes",
+        "chrome-devtools-mcp@1.10.1"
       ]
     }
   }

logistics-manager-app/codelab.md

@@ -1,13 +1,13 @@
-# Add Gemini support to my Angular project's backend (Node.js).
+# Add Genkit support to my Angular project's backend (Node.js).
 
 Technical Stack:  
-* Package: @google/genai (the new unified SDK)
-* Model: gemini-3-flash-preview
+* Packages: `genkit` and `@genkit-ai/google-genai`
+* Model: `gemini-3-flash-preview`
 
 ## Task:
 
-1. Review my current server entry point and suggest how to initialize the GoogleGenAI client.
+1. Review my current server entry point (`src/server.ts`) and suggest how to initialize Genkit.
 
-2. Outline a plan for a new POST endpoint that accepts a prompt and returns a generated response using the interactions API method. Ensure the plan explains how the interaction_id will be stored or passed back to the Angular client to maintain session state.
+2. Implement a new POST endpoint (`/api/chat`) that accepts a `prompt` and returns a generated response (`{ text }`) using Genkit.
 
-3. Verify that endpoint is working by building the app, and use `curl` to ensure that the endpoint is working.
+3. Verify that the endpoint is working by building the app, running the server, and using `curl` to test `/api/chat`.

logistics-manager-app/content/prompts/prompt-1.md

@@ -1,11 +1,12 @@
 # Add communication from the client side app to the AI chat endpoint via the chat window in the web app. 
 
 Task:
-1. Review the endpoint and chat window code to understand where to integrate.
+1. Review the `/api/chat` endpoint and chat window code (`src/app/components/chat/chat.ts`) to understand where to integrate.
 
-2. Outline a plan to implement the communication between the client and the server.
-    - Use the **`@google/genai` interactions API**. Extract the generated message from the first text object in `interaction.outputs`. Refer to the documention if you get stuck: https://ai.google.dev/gemini-api/docs/interactions.md.txt
+2. Outline a plan to implement the communication between the client and the server:
+    - Use the Angular **`resource`** API for the client requests to `/api/chat`.
+    - Send the user's `prompt` and display the user and AI messages in the chat window, automatically scrolling the messages container to the bottom when new messages arrive.
 
 3. For verification:
-    - build the app and confirm that the build is error free. Use the Angular MCP server tools.
-    - you may also use the ChromeDevTools MCP server to preview the build in a browser
+    - Build the app and confirm that the build is error free. Use the Angular MCP server tools.
+    - Use the `chrome-devtools` skill (`chrome-devtools-plugin`) in the browser (do not use `curl`) to preview and verify the chat UI end-to-end.