From 8d9abcdfa65b5b2c8e801b519675aadf5046bc85 Mon Sep 17 00:00:00 2001
From: Viswamedha Nalabotu <vxn217@student.bham.ac.uk>
Date: Mon, 23 Mar 2026 20:29:12 +0000
Subject: [PATCH] Refined instructions and added links with general refactors

---
 site/src/views/GettingStartedView.vue | 472 ++++++++++++++++++++++++++
 1 file changed, 472 insertions(+)
 create mode 100644 site/src/views/GettingStartedView.vue

diff --git a/site/src/views/GettingStartedView.vue b/site/src/views/GettingStartedView.vue
new file mode 100644
index 0000000..7dbb7f2
--- /dev/null
+++ b/site/src/views/GettingStartedView.vue
@@ -0,0 +1,472 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Card, Typography, Tabs, Button, Tag, Divider, Space } from 'ant-design-vue'
+import {
+    UserAddOutlined,
+    TeamOutlined,
+    UploadOutlined,
+    PlayCircleOutlined,
+    CheckCircleOutlined,
+    DashboardOutlined,
+    SettingOutlined,
+    BookOutlined,
+    RobotOutlined,
+    EyeOutlined,
+} from '@ant-design/icons-vue'
+
+const router = useRouter()
+const activeTab = ref('trainee')
+
+const traineeSteps = [
+    {
+        title: 'Register an account',
+        icon: UserAddOutlined,
+        description:
+            'Click Register in the top-right corner. Fill in your name, email, and a password. If you have an invite link from your manager, open that link after registering; it will automatically join you to the right organization.',
+        tag: 'Required',
+        tagColor: 'blue',
+        action: { label: 'Register now', path: '/register' },
+    },
+    {
+        title: 'Join your organization',
+        icon: TeamOutlined,
+        description:
+            'Once logged in, go to Organizations in the nav. If your manager shared an invite link, follow it to be added automatically. Otherwise, ask your manager to send you one, as you cannot self-join without an invite.',
+        tag: 'Required',
+        tagColor: 'blue',
+    },
+    {
+        title: 'Open your onboarding session',
+        icon: PlayCircleOutlined,
+        description:
+            'Inside your organization, you will see a list of roles you have been assigned. Click Start Onboarding next to your role. The system will open a live chat session with the AI trainer.',
+        tag: 'Main activity',
+        tagColor: 'green',
+    },
+    {
+        title: 'Work through the curriculum',
+        icon: BookOutlined,
+        description:
+            "The Curriculum Agent will present a structured learning plan for your role. Read through each module, ask questions in the chat, and the Knowledge Agent will retrieve answers grounded in your organization's uploaded documents.",
+        tag: 'Main activity',
+        tagColor: 'green',
+    },
+    {
+        title: 'Complete the assessment',
+        icon: CheckCircleOutlined,
+        description:
+            'After the curriculum, the Assessment Agent will run a quiz. Multiple-choice answers are graded automatically. Written answers are graded by the AI. You will receive per-question feedback.',
+        tag: 'Main activity',
+        tagColor: 'green',
+    },
+    {
+        title: 'Review your progress',
+        icon: DashboardOutlined,
+        description:
+            'Go to Progress in the nav to see your completed sessions, scores, and a summary generated by the Progress Monitor Agent. Your manager can also view this to track your ramp-up.',
+        tag: 'Optional',
+        tagColor: 'default',
+        action: { label: 'View progress', path: '/progress' },
+    },
+]
+
+const managerSteps = [
+    {
+        title: 'Register and create an organization',
+        icon: UserAddOutlined,
+        description:
+            'Register with the code MANAGER2026 to get manager access. After logging in, go to Organizations and create a new organization for your team. Give it a clear name, as trainees will see this.',
+        tag: 'Required',
+        tagColor: 'blue',
+        action: { label: 'Register now', path: '/register' },
+    },
+    {
+        title: 'Upload training documents',
+        icon: UploadOutlined,
+        description:
+            'Inside your organization, open the Manage tab and go to Training Files. Upload PDFs, DOCX, or TXT files containing your internal documentation, SOPs, or role guides. The system will process these in the background; watch for the "Ready" status before starting sessions.',
+        tag: 'Required',
+        tagColor: 'blue',
+    },
+    {
+        title: 'Create roles',
+        icon: SettingOutlined,
+        description:
+            "In the Manage tab, add roles (e.g. \"Software Engineer\", \"Customer Success\"). Each role gets its own training scope. You can attach specific documents to a role so the AI only retrieves relevant knowledge during that role's onboarding.",
+        tag: 'Required',
+        tagColor: 'blue',
+    },
+    {
+        title: 'Configure agent behaviour (optional)',
+        icon: RobotOutlined,
+        description:
+            'Go to Agents in the nav to view and configure the four agent roles: Curriculum, Knowledge, Assessment, and Progress Monitor. You can adjust the role description and system prompt to tune how the AI instructs trainees for your specific context.',
+        tag: 'Optional',
+        tagColor: 'default',
+        action: { label: 'Open Agents', path: '/agents' },
+    },
+    {
+        title: 'Invite team members',
+        icon: TeamOutlined,
+        description:
+            'In the Manage tab, go to Members and generate an invite link. Share this link with new hires. When they register and follow the link, they are automatically added to your organization and can begin onboarding.',
+        tag: 'Required',
+        tagColor: 'blue',
+    },
+    {
+        title: 'Monitor progress',
+        icon: DashboardOutlined,
+        description:
+            'Once trainees complete sessions, visit Progress to review scores, curriculum completion, and the AI-generated progress summaries. Use this to identify who needs follow-up and which training content may need updating.',
+        tag: 'Ongoing',
+        tagColor: 'purple',
+        action: { label: 'View progress', path: '/progress' },
+    },
+]
+
+const inspectorManagerSteps = [
+    {
+        title: 'Register a manager account',
+        icon: UserAddOutlined,
+        description:
+            'Go to Register and sign up with any name and email. Enter the invite code MANAGER2026 to receive manager permissions. This account will be your admin perspective for the evaluation.',
+        tag: 'Account 1',
+        tagColor: 'orange',
+        action: { label: 'Register', path: '/register' },
+    },
+    {
+        title: 'Create an organization',
+        icon: SettingOutlined,
+        description:
+            'After logging in, navigate to Organizations and create a new organization. Give it any name you like.',
+        tag: 'Account 1',
+        tagColor: 'orange',
+    },
+    {
+        title: 'Create a role',
+        icon: RobotOutlined,
+        description:
+            'Open the Manage tab inside your organization and add a role (e.g. "Engineer"). This scopes the training content and onboarding session for the trainee.',
+        tag: 'Account 1',
+        tagColor: 'orange',
+    },
+    {
+        title: 'Upload a training document',
+        icon: UploadOutlined,
+        description:
+            'Still in the Manage tab, go to Training Files and upload any PDF or text file. You can scope it to the role you just created. The system processes it in the background; wait for the status to show Ready before starting any sessions.',
+        tag: 'Account 1',
+        tagColor: 'orange',
+    },
+    {
+        title: 'Generate an invite link',
+        icon: TeamOutlined,
+        description:
+            'In the Manage tab under Members, generate an invite link. Copy it; you will use this to join as the trainee account in the next section.',
+        tag: 'Account 1',
+        tagColor: 'orange',
+    },
+]
+
+const inspectorTraineeSteps = [
+    {
+        title: 'Register a second (trainee) account',
+        icon: UserAddOutlined,
+        description:
+            'Open a private/incognito tab or a different browser. Register again with a different email address. No invite code needed this time; this will be your trainee perspective.',
+        tag: 'Account 2',
+        tagColor: 'purple',
+        action: { label: 'Register', path: '/register' },
+    },
+    {
+        title: 'Join via the invite link',
+        icon: TeamOutlined,
+        description:
+            'Paste the invite link you copied from the manager account into this browser. It will add you to the organization and assign you to the role you created.',
+        tag: 'Account 2',
+        tagColor: 'purple',
+    },
+    {
+        title: 'Start an onboarding session',
+        icon: PlayCircleOutlined,
+        description:
+            'Go to your organization and click Start Onboarding on the assigned role. The system opens a live WebSocket session with the AI trainer. Watch for the status indicators as each agent (Curriculum, Knowledge, Assessment) runs in sequence.',
+        tag: 'Account 2',
+        tagColor: 'purple',
+    },
+    {
+        title: 'Complete the curriculum and assessment',
+        icon: CheckCircleOutlined,
+        description:
+            'Work through the generated curriculum modules. Complete the final quiz; answers are graded automatically for multiple choice and by the AI for written responses. Your progress is saved after each step.',
+        tag: 'Account 2',
+        tagColor: 'purple',
+    },
+    {
+        title: 'Switch back to the manager account and review',
+        icon: EyeOutlined,
+        description:
+            "Return to your manager browser window. Go to Progress to see the trainee's completed session, scores, and the AI-generated progress summary. This is the full end-to-end loop.",
+        tag: 'Account 1',
+        tagColor: 'orange',
+        action: { label: 'View progress', path: '/progress' },
+    },
+]
+</script>
+
+<template>
+    <div class="page">
+        <Card class="panel" :bordered="false">
+            <Typography.Title :level="2">Getting Started</Typography.Title>
+            <Typography.Paragraph type="secondary">
+                Follow the guide for your role below. If you are new to Dynavera, start with the
+                Trainee guide to see how an onboarding session works, or the Manager guide to set up
+                your organization.
+            </Typography.Paragraph>
+
+            <Tabs v-model:activeKey="activeTab" size="large">
+                <Tabs.TabPane key="trainee" tab="I am a Trainee / New Hire">
+                    <Typography.Paragraph style="margin-bottom: 1.5rem; color: #6b7280">
+                        You have been invited to an organization and want to begin your onboarding session.
+                    </Typography.Paragraph>
+                    <div class="steps-list">
+                        <div
+                            v-for="(step, index) in traineeSteps"
+                            :key="step.title"
+                            class="step-row"
+                        >
+                            <div class="step-number">{{ index + 1 }}</div>
+                            <div class="step-body">
+                                <div class="step-header">
+                                    <component :is="step.icon" class="step-icon" />
+                                    <Typography.Text strong style="font-size: 1rem">
+                                        {{ step.title }}
+                                    </Typography.Text>
+                                    <Tag :color="step.tagColor" style="margin-left: 0.5rem">
+                                        {{ step.tag }}
+                                    </Tag>
+                                </div>
+                                <Typography.Paragraph
+                                    type="secondary"
+                                    style="margin: 0.4rem 0 0.6rem"
+                                >
+                                    {{ step.description }}
+                                </Typography.Paragraph>
+                                <Button
+                                    v-if="step.action"
+                                    type="primary"
+                                    size="small"
+                                    @click="router.push(step.action.path)"
+                                >
+                                    {{ step.action.label }}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Tabs.TabPane>
+
+                <Tabs.TabPane key="manager" tab="I am a Manager / Admin">
+                    <Typography.Paragraph style="margin-bottom: 1.5rem; color: #6b7280">
+                        You want to set up your organization, upload training materials, and onboard
+                        new hires.
+                    </Typography.Paragraph>
+                    <div class="steps-list">
+                        <div
+                            v-for="(step, index) in managerSteps"
+                            :key="step.title"
+                            class="step-row"
+                        >
+                            <div class="step-number">{{ index + 1 }}</div>
+                            <div class="step-body">
+                                <div class="step-header">
+                                    <component :is="step.icon" class="step-icon" />
+                                    <Typography.Text strong style="font-size: 1rem">
+                                        {{ step.title }}
+                                    </Typography.Text>
+                                    <Tag :color="step.tagColor" style="margin-left: 0.5rem">
+                                        {{ step.tag }}
+                                    </Tag>
+                                </div>
+                                <Typography.Paragraph
+                                    type="secondary"
+                                    style="margin: 0.4rem 0 0.6rem"
+                                >
+                                    {{ step.description }}
+                                </Typography.Paragraph>
+                                <Button
+                                    v-if="step.action"
+                                    type="primary"
+                                    size="small"
+                                    @click="router.push(step.action.path)"
+                                >
+                                    {{ step.action.label }}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Tabs.TabPane>
+
+                <Tabs.TabPane key="inspector" tab="Inspector / Evaluator">
+                    <Typography.Paragraph style="margin-bottom: 0.25rem; color: #6b7280">
+                        To evaluate the full system, create two separate accounts: one as a manager
+                        and one as a trainee. Follow both sets of steps in order. Use a private /
+                        incognito window for the second account so both sessions stay open at once.
+                    </Typography.Paragraph>
+                    <Typography.Paragraph style="margin-bottom: 1.5rem; color: #6b7280">
+                        The GPU inference node runs on a personal machine and may occasionally be
+                        offline. If the AI chat stalls, the inference layer is unavailable; refer to
+                        the report for local setup instructions.
+                    </Typography.Paragraph>
+
+                    <Typography.Title :level="4" style="margin-bottom: 1rem">
+                        Part 1: Manager account
+                        <Tag color="orange" style="margin-left: 0.5rem; vertical-align: middle">Account 1</Tag>
+                    </Typography.Title>
+                    <div class="steps-list">
+                        <div
+                            v-for="(step, index) in inspectorManagerSteps"
+                            :key="step.title"
+                            class="step-row"
+                        >
+                            <div class="step-number step-number--orange">{{ index + 1 }}</div>
+                            <div class="step-body">
+                                <div class="step-header">
+                                    <component :is="step.icon" class="step-icon" />
+                                    <Typography.Text strong style="font-size: 1rem">
+                                        {{ step.title }}
+                                    </Typography.Text>
+                                    <Tag :color="step.tagColor" style="margin-left: 0.5rem">
+                                        {{ step.tag }}
+                                    </Tag>
+                                </div>
+                                <Typography.Paragraph
+                                    type="secondary"
+                                    style="margin: 0.4rem 0 0.6rem"
+                                >
+                                    {{ step.description }}
+                                </Typography.Paragraph>
+                                <Button
+                                    v-if="step.action"
+                                    type="primary"
+                                    size="small"
+                                    @click="router.push(step.action.path)"
+                                >
+                                    {{ step.action.label }}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Divider />
+
+                    <Typography.Title :level="4" style="margin-bottom: 1rem">
+                        Part 2: Trainee account
+                        <Tag color="purple" style="margin-left: 0.5rem; vertical-align: middle">Account 2</Tag>
+                    </Typography.Title>
+                    <div class="steps-list">
+                        <div
+                            v-for="(step, index) in inspectorTraineeSteps"
+                            :key="step.title"
+                            class="step-row"
+                        >
+                            <div class="step-number step-number--purple">{{ index + 1 }}</div>
+                            <div class="step-body">
+                                <div class="step-header">
+                                    <component :is="step.icon" class="step-icon" />
+                                    <Typography.Text strong style="font-size: 1rem">
+                                        {{ step.title }}
+                                    </Typography.Text>
+                                    <Tag :color="step.tagColor" style="margin-left: 0.5rem">
+                                        {{ step.tag }}
+                                    </Tag>
+                                </div>
+                                <Typography.Paragraph
+                                    type="secondary"
+                                    style="margin: 0.4rem 0 0.6rem"
+                                >
+                                    {{ step.description }}
+                                </Typography.Paragraph>
+                                <Button
+                                    v-if="step.action"
+                                    type="primary"
+                                    size="small"
+                                    @click="router.push(step.action.path)"
+                                >
+                                    {{ step.action.label }}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </Tabs.TabPane>
+            </Tabs>
+
+            <Divider />
+
+            <Space>
+                <Button type="primary" @click="router.push('/register')">
+                    <UserAddOutlined />
+                    Register to get started
+                </Button>
+                <Button @click="router.push('/about')">About Dynavera</Button>
+            </Space>
+        </Card>
+    </div>
+</template>
+
+<style scoped>
+.page {
+    max-width: 860px;
+}
+.panel {
+    max-width: 860px;
+    margin: 0 auto;
+}
+.steps-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+.step-row {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+}
+.step-number {
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    background: #2563eb;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 0.9rem;
+    margin-top: 0.1rem;
+}
+.step-number--orange {
+    background: #d97706;
+}
+.step-number--purple {
+    background: #7c3aed;
+}
+.step-body {
+    flex: 1;
+    background: #f8fafc;
+    border: 1px solid #dbe3ec;
+    border-radius: 8px;
+    padding: 0.9rem 1.1rem;
+}
+.step-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+.step-icon {
+    font-size: 1.1rem;
+    color: #2563eb;
+}
+</style>