epam-ai-conductor 0.1.0

package/README.md

@@ -0,0 +1,46 @@
+# react-workshop-cli
+
+Socratic mentor CLI for the React Fundamentals course, powered by CodeMie + Claude.
+
+The agent knows the full course content and test expectations but guides students with questions, not answers.
+
+## Student setup
+
+```bash
+# 1. Clone the template
+git clone <template-repo-url> my-react-app
+cd my-react-app
+
+# 2. Install the workshop CLI
+npm install -g react-workshop-cli   # once codemie installs claude
+
+# 3. Start a module session
+react-workshop start --module 1
+```
+
+On first run it will walk you through CodeMie setup (EPAM SSO login).
+
+### Slash commands during the session
+
+| Command  | What it does |
+|----------|-------------|
+| `/hint`  | One targeted hint — a question, not code |
+| `/check` | Reviews your src/ against task criteria |
+| `/step`  | Suggests the single most logical next step |
+
+---
+
+## Course coordinator — updating content
+
+When coursebook or test files change, re-sync and rebuild:
+
+```bash
+# Repos must be siblings of this directory:
+#   ../react-fundamentals-coursebook
+#   ../react-fundamentals-app-tests
+
+npm run sync-content   # copies from sibling repos into src/content/
+npm run build          # compiles TS + copies content into dist/
+```
+
+Then publish the new version of the package.

package/bin/workshop.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+
+import('../dist/cli.js').catch((error) => {
+  console.error('Error starting workshop:', error.message);
+  process.exit(1);
+});

package/dist/auth-check.d.ts

@@ -0,0 +1 @@
+export declare function ensureAuth(): Promise<void>;

package/dist/auth-check.js

@@ -0,0 +1,45 @@
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { homedir } from 'os';
+import { spawnSync } from 'child_process';
+import chalk from 'chalk';
+import inquirer from 'inquirer';
+const GLOBAL_CONFIG = join(homedir(), '.codemie', 'codemie-cli.config.json');
+export async function ensureAuth() {
+    if (existsSync(GLOBAL_CONFIG))
+        return;
+    console.log();
+    console.log(chalk.bold.cyan('╔══════════════════════════════════════════════════════╗'));
+    console.log(chalk.bold.cyan('║        React Workshop — First Time Setup             ║'));
+    console.log(chalk.bold.cyan('╚══════════════════════════════════════════════════════╝'));
+    console.log();
+    console.log(chalk.white('To use the workshop mentor you need a CodeMie account.'));
+    console.log();
+    console.log(chalk.bold('Steps:'));
+    console.log(chalk.white('  1. Go to ') + chalk.cyan('https://codemie.ai'));
+    console.log(chalk.white('  2. Click ') + chalk.bold('"Sign in with EPAM SSO"'));
+    console.log(chalk.white('  3. Once logged in, come back here'));
+    console.log();
+    const { ready } = await inquirer.prompt([{
+            type: 'confirm',
+            name: 'ready',
+            message: 'Have you signed into CodeMie? Press Enter to run setup...',
+            default: true,
+        }]);
+    if (!ready) {
+        console.log(chalk.yellow('\nSetup cancelled. Run `react-workshop start` again when ready.'));
+        process.exit(0);
+    }
+    console.log();
+    console.log(chalk.cyan('Running codemie setup...'));
+    console.log();
+    const result = spawnSync('codemie', ['setup'], { stdio: 'inherit' });
+    if (result.status !== 0 || !existsSync(GLOBAL_CONFIG)) {
+        console.log();
+        console.log(chalk.red('✗ Setup did not complete. Please run `codemie setup` manually and try again.'));
+        process.exit(1);
+    }
+    console.log();
+    console.log(chalk.green('✓ CodeMie configured. Starting your mentor session...\n'));
+}
+//# sourceMappingURL=auth-check.js.map

package/dist/auth-check.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-check.js","sourceRoot":"","sources":["../src/auth-check.ts"],"names":[],"mappings":"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"}

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/cli.js

@@ -0,0 +1,156 @@
+#!/usr/bin/env node
+import { readFileSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { spawnSync } from 'child_process';
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import inquirer from 'inquirer';
+import * as pty from 'node-pty';
+import { ensureAuth } from './auth-check.js';
+import { buildContext, MODULE_TITLES } from './context-builder.js';
+import { TOTAL_MODULES } from './content-loader.js';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+function readVersion() {
+    try {
+        const pkg = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf-8'));
+        return pkg.version;
+    }
+    catch {
+        return '0.1.0';
+    }
+}
+function resolveCodemieClaudePath() {
+    const result = spawnSync('which', ['codemie-claude'], { encoding: 'utf-8' });
+    if (result.status !== 0)
+        return null;
+    return result.stdout.trim();
+}
+function launchMentor(moduleNum, targetDir, execPath) {
+    const env = { ...process.env };
+    const startMessage = `Hi! I'm starting Module ${moduleNum}. Please introduce the task and help me get going.`;
+    const cols = process.stdout.columns || 220;
+    const rows = process.stdout.rows || 50;
+    const child = pty.spawn(process.execPath, [execPath, '--model', 'claude-sonnet-4-6'], {
+        name: 'xterm-color',
+        cols,
+        rows,
+        cwd: targetDir,
+        env,
+    });
+    const BOX = 56; // inner width
+    const pad = (s) => s.length >= BOX ? s.slice(0, BOX - 1) + ' ' : s.padEnd(BOX);
+    const rawTitle = MODULE_TITLES[moduleNum] ?? `Module ${moduleNum}`;
+    const titleLine = `        Module ${moduleNum}: ${rawTitle}`;
+    const banner = '\r\n' +
+        chalk.bold.cyan(`  ╔${'═'.repeat(BOX)}╗`) + '\r\n' +
+        chalk.bold.cyan('  ║') + chalk.bold.white(pad('        ⚛  React Course Workshop')) + chalk.bold.cyan('║') + '\r\n' +
+        chalk.bold.cyan('  ║') + chalk.cyan(pad(titleLine)) + chalk.bold.cyan('║') + '\r\n' +
+        chalk.bold.cyan('  ║') + chalk.gray(pad('        /hint  ·  /check  ·  /step')) + chalk.bold.cyan('║') + '\r\n' +
+        chalk.bold.cyan(`  ╚${'═'.repeat(BOX)}╝`) + '\r\n';
+    // Single handler: pipe PTY → stdout, inject banner + start message at first prompt
+    let bannerShown = false;
+    let injected = false;
+    child.onData((data) => {
+        // Insert banner synchronously right before the first ❯ prompt chunk
+        if (!bannerShown && data.includes('❯')) {
+            bannerShown = true;
+            process.stdout.write(banner);
+        }
+        process.stdout.write(data);
+        // After banner is shown, inject the start message
+        if (bannerShown && !injected) {
+            injected = true;
+            setTimeout(() => child.write(`${startMessage}\r`), 150);
+        }
+    });
+    // Pipe stdin to PTY so student can type normally after injection
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.on('data', (chunk) => child.write(chunk.toString()));
+    // Resize PTY on terminal resize
+    process.stdout.on('resize', () => {
+        child.resize(process.stdout.columns || 220, process.stdout.rows || 50);
+    });
+    child.onExit(({ exitCode }) => {
+        process.stdin.setRawMode(false);
+        process.stdin.pause();
+        process.exit(exitCode ?? 0);
+    });
+}
+const program = new Command();
+program
+    .name('react-workshop')
+    .description('React course workshop — Socratic mentor powered by CodeMie')
+    .version(readVersion());
+program
+    .command('start')
+    .description('Start a mentor session for a module')
+    .option('-m, --module <number>', 'Module number (1–5)')
+    .option('-d, --dir <path>', 'Path to your React project (default: current directory)', process.cwd())
+    .action(async (opts) => {
+    console.log();
+    console.log(chalk.bold.cyan('  React Course Workshop'));
+    console.log(chalk.gray('  Powered by CodeMie + Claude\n'));
+    // 1. Auth check
+    await ensureAuth();
+    // 2. Resolve module number
+    let moduleNum;
+    if (opts.module) {
+        moduleNum = parseInt(opts.module, 10);
+    }
+    else {
+        const { selected } = await inquirer.prompt([{
+                type: 'list',
+                name: 'selected',
+                message: 'Which module would you like to work on?',
+                choices: Array.from({ length: TOTAL_MODULES }, (_, i) => ({
+                    name: `Module ${i + 1}`,
+                    value: i + 1,
+                })),
+                default: 0,
+            }]);
+        moduleNum = selected;
+    }
+    if (moduleNum < 1 || moduleNum > TOTAL_MODULES) {
+        console.error(chalk.red(`\n✗ Invalid module number. Choose between 1 and ${TOTAL_MODULES}.`));
+        process.exit(1);
+    }
+    // 3. Check codemie-claude is available
+    const codemieClaudePath = resolveCodemieClaudePath();
+    if (!codemieClaudePath) {
+        console.log();
+        console.log(chalk.red('✗ codemie-claude is not installed.'));
+        console.log(chalk.white('  Install it with:'), chalk.cyan('codemie install claude'));
+        process.exit(1);
+    }
+    // 4. Build context into target dir
+    const spinner = ora(`Preparing Module ${moduleNum} mentor context...`).start();
+    try {
+        buildContext(moduleNum, opts.dir);
+        spinner.succeed(`Module ${moduleNum} context ready`);
+    }
+    catch (err) {
+        spinner.fail('Failed to build context');
+        console.error(chalk.red(err.message));
+        process.exit(1);
+    }
+    // 5. Show what was set up
+    console.log();
+    console.log(chalk.green('  ✓ .claude/CLAUDE.md              — mentor persona & rules'));
+    console.log(chalk.green(`  ✓ .claude/module-theory.md       — Module ${moduleNum} theory`));
+    console.log(chalk.green(`  ✓ .claude/module-task.md         — Module ${moduleNum} task & criteria`));
+    console.log(chalk.green(`  ✓ .claude/module-tests.md        — Module ${moduleNum} test expectations`));
+    console.log(chalk.green('  ✓ .claude/commands/hint.md       — /hint'));
+    console.log(chalk.green('  ✓ .claude/commands/check.md      — /check'));
+    console.log(chalk.green('  ✓ .claude/commands/step.md       — /step'));
+    console.log();
+    console.log(chalk.bold(`  Starting Module ${moduleNum} mentor session in:`), chalk.cyan(opts.dir));
+    console.log(chalk.gray('  Type /hint, /check, or /step anytime during the session.'));
+    console.log();
+    // 6. Launch codemie-claude — blocks until student exits
+    launchMentor(moduleNum, opts.dir, codemieClaudePath);
+});
+program.parse(process.argv);
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}

package/dist/content/content/module-1/task/module-1_home-task_components.md

@@ -0,0 +1,257 @@
+---
+sidebar_position: 2
+sidebar_label: "COMPONENTS"
+title: Components description for Tasks 1
+---
+
+:::tip
+**You need just follow from one step to another.**  
+The description was created in such a way
+that you do not need to navigate through the document at random.
+:::
+
+:::info
+You can watch [this (link)](https://www.youtube.com/watch?v=Cla1WwguArA) 7 minutes tutorial video about components creation 😉
+:::
+
+## Header
+
+![](images/header.png)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `Logo` component.
+
+Logo component contains only logo picture (you can use any picture, you like).
+
+:::info
+Logo component is just a function component which returns `img` tag.
+:::
+
+:::tip
+If you use TypeScript and have this error  
+![](images/ts_images_errorjpg.jpg)  
+Try to find solution [here](https://stackoverflow.com/questions/52759220/importing-images-in-typescript-react-cannot-find-module)
+:::
+
+### Create `Button` component.
+
+Button component is a function component which returns `button` tag.
+
+:::tip
+You will use Button component in several places through your app,
+so you should use `props` for this component such as `buttonText` and `onClick`
+(and any props, that you want).
+
+If you want to repeat how to work with `props` you can:  
+⭐ read theoretical material again [(link)](/docs/module-1/components-and-props);  
+⭐ watch this tutorial [(link)](https://www.youtube.com/watch?v=m7OWXtbiXX8&list=RDCMUC80PWRj_ZU8Zu0HSMNVwKWw&index=3).
+:::
+
+### Create `Header` component.
+
+Header should be in `App` component.
+
+`Header` component should include:
+
+- `Logo` component;
+
+- Logout button (`Button` component **WITHOUT** any functionality for the current task).
+
+[Small demo](../components-and-props#how-to-create-a-simple-function-component)
+
+---
+
+## Courses
+
+### Create `CourseCard` component.
+
+![](images/course_card.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=GislgRTjkGsyZ4Xy-0)
+
+This component contains all info about the course.
+
+For the current task you should use `mockedCoursesList` array for courses info.
+
+`CourseCard` components should be rendered in `Courses` component (you will create it in the next step).
+
+`CourseCard` component should contain the following information:
+
+1. Title (Course name);
+
+2. Duration (format: hh:mm + 'hours'). In the `mockedCoursesList` duration is specified in minutes;
+
+:::info
+If `hh` < 10 (0,1,2,3,4,5,6,7,8,9) => '0' + h:mm + 'hours' (02:20 hours)  
+If `mm` < 10 (0,1,2,3,4,5,6,7,8,9) => hh:'0' + m + 'hours' (10:06 hours)  
+If `hh` = 1 => hh:mm + 'hour' (01:30 hour)
+:::
+
+3. Creation date (format: dd.mm.yyyy);
+
+4. Description;
+
+5. `Show course` button.  
+   When user clicks `Show course` button `CourseInfo` component with current course info should replace `Courses` component.  
+   (You will create it after `Courses` component).
+
+6. `Authors` list:
+   - the authors' names should be displayed on the one line;
+
+   - if all authors' names do not fit on one line,
+     then the extra text should be cut off and '...' should be added at the end of line.
+
+:::caution
+In `mockedCoursesList` each course has only authors' `ids`.  
+To define authors' names you should find them in `mockedAuthorsList` by id.
+:::
+
+### Mocked courses and authors data.
+
+Save these data as constants and use in your App:
+
+```js
+export const mockedCoursesList = [
+  {
+    id: "de5aaa59-90f5-4dbc-b8a9-aaf205c551ba",
+    title: "JavaScript",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
+                    has been the industry's standard dummy text ever since the 1500s, when an unknown 
+                    printer took a galley of type and scrambled it to make a type specimen book. It has survived 
+                    not only five centuries, but also the leap into electronic typesetting, remaining essentially u
+                    nchanged.`,
+    creationDate: "08/03/2021",
+    duration: 160,
+    authors: [
+      "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+      "f762978b-61eb-4096-812b-ebde22838167",
+    ],
+  },
+  {
+    id: "b5630fdd-7bf7-4d39-b75a-2b5906fd0916",
+    title: "Angular",
+    description: `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum 
+                    has been the industry's standard dummy text ever since the 1500s, when an unknown 
+                    printer took a galley of type and scrambled it to make a type specimen book.`,
+    creationDate: "10/11/2020",
+    duration: 210,
+    authors: [
+      "df32994e-b23d-497c-9e4d-84e4dc02882f",
+      "095a1817-d45b-4ed7-9cf7-b2417bcbf748",
+    ],
+  },
+];
+
+export const mockedAuthorsList = [
+  {
+    id: "27cc3006-e93a-4748-8ca8-73d06aa93b6d",
+    name: "Vasiliy Dobkin",
+  },
+  {
+    id: "f762978b-61eb-4096-812b-ebde22838167",
+    name: "Nicolas Kim",
+  },
+  {
+    id: "df32994e-b23d-497c-9e4d-84e4dc02882f",
+    name: "Anna Sidorenko",
+  },
+  {
+    id: "095a1817-d45b-4ed7-9cf7-b2417bcbf748",
+    name: "Valentina Larina",
+  },
+];
+```
+
+### `EmptyCourseList` component
+
+![](images/emptyCourseList.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2906-66989&t=GislgRTjkGsyZ4Xy-0)
+
+`EmptyCourseList` component should be rendered instead of `Courses` components when
+we do not have any course.
+
+`EmptyCourseList` component should include:
+
+- Title with text: 'Course List is Empty'.
+
+- Subtitle text: 'Please use "Add New Course" button to add your first course'.
+
+- `Add New Course` button **WITHOUT** functionality for current task. (Reuse `Button` Component).
+
+### Create `Courses` component.
+
+![](images/courses_component.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2907-67422&t=2XuYekWUy7fL4Ba9-0)
+
+`Courses` component should be rendered in `App` component.
+
+`Courses` component should include:
+
+- `SearchBar` component (optional extra task).
+
+- `CourseCard` component.
+
+- `Add new course` button WITHOUT any functionality. (Reuse `Button` component).
+
+:::tip  
+You should import `mockedCoursesList` and `mockedAuthorsList` to the `App` component and pass it to the `Courses` component as a prop.  
+Use loop for `CourseCard` rendering.  
+Please, follow [this link](https://react.dev/learn/rendering-lists#rendering-data-from-arrays) to the **"Embedding map() in JSX"** topic to see the example.
+:::
+
+---
+
+## Course info
+
+![](images/course_info.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=6130-322&t=2XuYekWUy7fL4Ba9-0)
+
+- This component shows information about the course.
+
+- This component contains:
+  - ID of course;
+  - Title;
+  - Description;
+  - Duration;
+  - List of authors;
+  - Creation date;
+  - `Back to courses` button.
+
+- This component should be rendered instead of `Courses` component.
+
+- Pass course information to the `CourseInfo` component using `props`.
+
+- By clicking `Back` button `CourseInfo` component should be replaced by `Courses` component.
+
+---
+
+## Search. Extra Task
+
+![](images/search_field.jpg)  
+[Figma link](https://www.figma.com/design/9MsU97rn21GuQIT01xwLuc/React-Fundamentals-Course?node-id=2905-67147&t=2XuYekWUy7fL4Ba9-0)
+
+### Create `SearchBar` component.
+
+`SearchBar` should be in Courses component (above the list of courses).
+
+`SearchBar` component should include:
+
+- `Input` component;
+
+- `Button` component.
+
+#### Add functionality for searching courses:
+
+- User should have ability to search course by **title** and **id**;
+
+- The search is performed by the occurrence of characters in the string,
+  and **not just by a match at the beginning of the string**;
+
+- **Case-insensitive** search;
+
+- When user clicks on `Search` button it displays all courses that match the search query;
+
+- All courses are displayed when user cleans search field.
+
+<sub>(Search by title example)</sub>
+
+![](images/course_search.jpg)

package/dist/content/content/module-1/task/module-1_home-task_good_practices.md

@@ -0,0 +1,69 @@
+---
+sidebar_position: 3
+sidebar_label: 'GOOD PRACTICES'
+title: GOOD PRACTICES
+---
+
+# GOOD PRACTICES THAT YOU CAN APPLY FOR THIS TASK:
+1. Place `css` files in the folder with the component.
+
+Example:
+   ```
+   src
+   |
+   |- components
+      |
+      |-Header
+        |-Header.jsx //component
+        |-header.css //styles for this component
+   
+   ```
+2. Use `label` tag for input. [Link to the W3C.](https://www.w3schools.com/tags/tag_label.asp)
+
+
+3. Use `key` attribute for list rendering. [Link to the documentation.](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
+
+
+4. Use constants to avoid a hardcode. *For example, when passing string properties to a component:*
+```js
+// BAD
+<Button text='Search' />
+
+
+// GOOD
+//constants.js
+const BUTTON_TEXT = 'Search';
+
+//Button.jsx
+import {BUTTON_TEXT} from './constants.js';
+
+<Button text={BUTTON_TEXT} />
+```
+
+5. Add empty string between import groups. *Example:*
+```js
+import from '[node_modules]'
+ 
+import from '[own_components]'
+import from '[constants]'
+ 
+import from '[styles]'
+```
+
+6. Use common `index.js` file for components and helpers. [Link to the article](https://www.digitalocean.com/community/tutorials/react-index-js-public-interfaces).
+
+
+7. If component does not have any logic you can return the markup immediately. *Examples:*
+```js
+import logo from '../../assets/logo.jpg';
+
+export const Logo = () => <img src={logo} />;
+```
+
+or
+
+```js
+export const Button = ({ text, onClick }) => (
+	<button onClick={onClick}>{text}</button>
+);
+```