diff --git a/docs/unit-hub.md b/docs/unit-hub.md
new file mode 100644
index 0000000000..3300c17316
--- /dev/null
+++ b/docs/unit-hub.md
@@ -0,0 +1,95 @@
+# Unit Hub: announcements and teaching sessions
+
+Unit Hub gives students a single place to find announcements, HelpHubs, lectures, seminars and workshops for their active units. It is available at `/unit-hub`, through the home-page card and in the account menu. It uses the same responsive Angular application on a phone, tablet, desktop and installed OnTrack PWA.
+
+## Normal use
+
+The normal version reads the signed-in user's authorised `/api/unit_hub` response. A student enrolled in SIT111 does not receive SIT102 content. The unit selector only narrows the units returned by the server. A direct link such as `/unit-hub?unit=111` cannot add access to a unit. No content is fabricated when loading fails; the page shows a retry action.
+
+The feed displays published, unexpired announcements and a bounded window of published session occurrences. The page shows the server's window end and warns when the announcement list is truncated. Content is plain text. Original-post links and meeting links open in a separate tab and must use HTTPS. A Teams meeting can still require the student's university sign-in.
+
+Click anywhere on an announcement or session card to open its full details, including the text, dates and blank space. Original-post, Join and calendar actions remain separate controls. Keyboard users can activate the title or **Read full announcement** / **View full details** button; the title's focus indicator outlines the whole card. The dialog opens only records in the current authorised feed and clears its selected content when the route, unit, feed or demo mode changes. It supports keyboard focus, Escape and a visible close button. It does not create a public sharing URL.
+
+## Study essentials
+
+Unit Hub includes public university entry points under **Study essentials**. The home-page card links to Unit Hub. This fork explicitly selects `'deakin'` in `src/app/study-essentials/study-essentials.config.ts`, shared by development, production and the demo. Operators at another institution should set `studyEssentialsProfile` to `''` before building to hide the panel, or supply a reviewed profile. Institution membership is never inferred from an email address, unit code or product name.
+
+The panel links to DeakinSync, CloudDeakin, StudentConnect, timetable guidance, the library and Student Central. Each destination handles its own sign-in and permissions. The links append no account, enrolment or course data. Unit-specific meeting and course links remain in the scoped unit content. See the [Study essentials handover](../src/app/study-essentials/README.md) for the reviewed destinations and configuration.
+
+## Publishing content
+
+A staff member with the unit's `can_manage` permission sees **Manage updates**. Choose the unit, then **New announcement** or **New session**. Leave **Publish to this unit** unchecked to save a draft. Staff can edit drafts and published records, remove announcements, and cancel sessions.
+
+For a session, enter the local start and end times and the IANA time zone, such as `Australia/Melbourne`. Weekly sessions keep the specified local time across daylight saving changes. Choose a final repeat date within six months. Create a separate weekly schedule for each weekday: a Thursday and Friday HelpHub needs two schedules. Editing or cancelling a repeating record affects the entire series. A cancelled session remains visible with its joining and calendar-copy actions removed, so students can see the cancellation.
+
+Content can be published in OnTrack by the teaching team or imported through the companion API's optional Microsoft Teams announcement synchronisation. The university administrator must configure tenant-approved Microsoft Graph access and explicitly map each unit offering to its channel. Microsoft SSO alone does not enable this connection; students do not connect a separate personal account. It is off by default.
+
+When a unit's connection is configured, the management page explains that posts appear after successful updates. “Configured” describes the presence of settings, not proof of working tenant permissions or a successful import. Imported announcements are labelled **From Teams**, are read-only in OnTrack, and provide **Manage in Teams** through their original-post link. Staff should change them at their source. No timetable is inferred from announcement text. Session schedules remain staff-maintained in OnTrack.
+
+## Make a Teams meeting
+
+Assigned teaching staff can prepare a meeting below the session editor or from a session detail view. Enter the session title, dates and time zone, then use **Open Teams draft**. The draft carries the subject, description, resolved start/end instants and any optional attendee sign-in email addresses. The composer has a separate details field, so shortening an invitation leaves the unsaved OnTrack session intact. It does not automatically copy an existing joining or source URL into a new invitation.
+
+Opening the draft sends nothing. Review the invitation and press **Send** in Teams. Copy the newly created meeting's join URL back into the OnTrack session, then save/publish it. OnTrack does not obtain the new URL automatically. This flow does not require the optional Graph announcement connection; Microsoft may ask for a Teams sign-in. It follows Microsoft's [documented meeting-draft integration](https://learn.microsoft.com/en-us/power-apps/teams/integrate-calls-and-meetings).
+
+One occurrence is opened. For a weekly session, set the repeat pattern and final date in Teams before sending, and keep them aligned with OnTrack. Location is included in the description. The helper uses explicit UTC instants and bounds the URL to 8,000 characters and the local attendee list to 20 unique addresses. If the draft is too long, shorten its details or add more attendees in Teams; content is never silently truncated. The HTTPS link lets Microsoft offer its app or browser. If the scheduling form does not open on a phone, use a desktop browser or copy the displayed details into Teams. No invitation is sent by the test suite.
+
+## Calendar choices
+
+- **Add to Google Calendar** opens a draft for one occurrence. The user chooses whether to save it.
+- **Download .ics** creates a copy of one occurrence for compatible calendar apps.
+- **Calendar settings → Include unit HelpHubs, lectures and classes** opts the user into sessions in their existing private OnTrack calendar subscription. It is off by default. Existing unit exclusions also apply to sessions.
+
+One-off Google drafts and imported files do not receive schedule changes. Subscribed calendars receive changes when the calendar provider refreshes the feed; refresh timing is controlled by the provider. In Google Calendar, the **From URL** subscription setup is performed in a desktop browser. Once subscribed, the calendar is available on mobile too. Session times and joining links are shared with the selected calendar provider. Keep the subscription URL private.
+
+## Demonstration
+
+Use a non-production build with demo tools enabled and sign in to the guarded synthetic account in the isolated demo API. After authentication, `DemoScenarioRegistryService` requests `/api/demo/scenario`; only a successful contract makes **Demo controls** available. A build flag alone is insufficient. Ordinary accounts, an unconfigured API and production cannot activate the walkthrough.
+
+Open **Demo controls**, turn **Demo mode on**, then open **Unit Hub**. The switch updates the page without reloading or signing the user out. Its state belongs to the current scenario and signed-in user in the browser tab. Sign-out or an account change clears that state and the hosted meeting links.
+
+Once the guarded walkthrough is enabled, Unit Hub uses its separate browser-only sample of a fictional student enrolled only in SIT111. It shows two announcements, two HelpHubs and a lecture, including their clickable detail views. The raw fixture contains SIT102 records specifically to exercise filtering; these do not appear. The fixture includes no names, account details or copied posts from real students or staff. Its dates are fictional and generated relative to the browser's local date.
+
+Demo mode does not read the Unit Hub API and blocks staff reads and writes. Samples have no joining action unless the presenter explicitly configures a hosted link. In **Demo controls → Use your own HelpHub links**, add a real Teams joining URL for either or both HelpHubs, choose **Save demo links**, then reopen Unit Hub. **Join hosted demo** opens that real meeting with a notice that the sample schedule is fictional. The lecture has no fabricated joining URL.
+
+Hosted links accept only supported HTTPS joining paths on `teams.microsoft.com`. They stay in session storage for the current browser tab, are cleared by **Clear demo links**, sign-out or the end of the tab session, and are never written to the OnTrack API or committed to fixtures. Turning demo mode off hides them while retaining them for another walkthrough in the same tab. Production cannot use the hosted-link store.
+
+Google drafts and .ics downloads require an explicit user action and are labelled **DEMO**. When a host provides a joining link, the calendar copy includes that link with fictional dates and a demo notice. Opening a Google draft shares its chosen details with Google. Without a hosted link, no joining URL is included. Demo .ics filenames and event UIDs have their own namespace. Session-subscription changes remain disabled even when Calendar is opened from the account menu.
+
+The optional **Try the Teams meeting draft** section in Demo controls opens a real Teams invitation draft with a **DEMO** title and fictional details. It sends nothing automatically. Review the example date and attendees before deliberately pressing **Send** in Teams. No actual meeting URLs should appear in committed fixtures, environment examples, public screenshots or handover text.
+
+Turn demo mode off to return to the real authorised endpoint, including in development builds. The combined runtime has no quiet-data mask or HTTP masking interceptor. See the [demo guide](../src/app/demo/README.md) for local setup and removal notes.
+
+Production builds disable demo tools and cannot activate the Unit Hub fixtures. This release supports the installed web app, not a separately implemented native iOS or Android application.
+
+## Frontend and API contract
+
+| Operation | Endpoint |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Published content for the signed-in account | `GET /api/unit_hub` |
+| Staff announcements including drafts | `GET /api/units/:unit_id/announcements` |
+| Create / update / remove announcement | `POST /api/units/:unit_id/announcements`, `PUT /api/units/:unit_id/announcements/:id`, `DELETE /api/units/:unit_id/announcements/:id` |
+| Staff sessions including drafts and cancelled series | `GET /api/units/:unit_id/sessions` |
+| Create / update / cancel session | `POST /api/units/:unit_id/sessions`, `PUT /api/units/:unit_id/sessions/:id`, `DELETE /api/units/:unit_id/sessions/:id` |
+| Read / change subscription preference | `GET /api/webcal`, `PUT /api/webcal` |
+
+Writes use `{announcement: {...}}`, `{session: {...}}` and the existing `{webcal: {...}}` wrappers. The calendar preference is `include_learning_sessions` on the wire and `includeLearningSessions` in the Angular model. Feed rows have `unit_id`; `units` provide the id, code, name, `can_manage`, and `teams_sync` (`configured` or `not_configured`). Announcements include `source_provider` (`manual` or `microsoft_teams`) and `managed_externally`; no tenant, client or channel identifiers are exposed. The public session feed contains occurrence dates, whereas staff editing uses the original series dates. See `src/app/unit-hub/unit-hub.models.ts` for the field types.
+
+The [companion API change](https://github.com/ontrack-features-t2-2026/doubtfire-api/pull/160) must be deployed and migrated before this frontend. The API is the authority for authentication, enrolment, role checks, draft visibility and unit access. The client adds defence in depth by removing rows outside the returned unit list, rejecting unsafe links, and cancelling obsolete subscriptions when the route, unit or demo mode changes. The service keeps no shared content cache. Authenticated content is not added to the service worker's data cache.
+
+Calendar exports use explicit UTC instants. Local-time entry rejects daylight-saving gaps and repeated times, preventing silent schedule movement. ICS text is escaped and folded at UTF-8 byte boundaries to prevent content from injecting calendar properties.
+
+## Verification
+
+Release checks include Angular template/type checking, the production build and deployment configuration verification. Targeted Vitest suites cover enrolled-unit filtering, no fallback data on failure, demo/live isolation, blocked demo writes, cancellation of in-flight operations, staff wrappers, route reachability, plain-text detail views and clearing stale dialogs. Calendar checks cover time-zone conversion, safe links, Google encoding, ICS injection/folding and separate demo event identities. Further checks cover imported-post ownership, Teams draft parameter encoding and form preservation, hosted-link validation and sign-out clearing, and the explicit Study essentials profile. Tests inspect generated links without joining or sending a real meeting.
+
+Run the relevant checks:
+
+```sh
+npm run typecheck
+npm run lint
+npm run test:ci -- --include='src/app/unit-hub/**/*.spec.ts' --include='src/app/study-essentials/**/*.spec.ts' --include='src/app/common/modals/calendar-modal/calendar-modal.component.spec.ts' --include='src/app/demo/**/*.spec.ts' --include='src/app/common/header/header.component.spec.ts' --include='src/app/common/guards/spec/role-whitelist.guard.spec.ts'
+npm run build -- --configuration production
+```
+
+On this macOS validation host, the native Angular disk-cache addon aborted during local production builds. `CI=1` disables that cache and avoids the native failure without changing application or production settings. Font inlining also needs network access to Google Fonts. Use Node 22.23.2 with `CI=1 NG_BUILD_MAX_WORKERS=2 NODE_OPTIONS="--max-old-space-size=8192 --max-semi-space-size=128"` if the same host issue occurs.
diff --git a/src/app/study-essentials/README.md b/src/app/study-essentials/README.md
new file mode 100644
index 0000000000..3deeb05348
--- /dev/null
+++ b/src/app/study-essentials/README.md
@@ -0,0 +1,23 @@
+# Study essentials
+
+Import `StudyEssentialsComponent` into a standalone component's `imports` and use
+``. It takes no inputs and makes no API requests.
+
+The shared deployment choice is `studyEssentialsProfile` in
+`study-essentials.config.ts`. This Deakin fork sets it to `'deakin'`. Operators at
+other institutions should set it to `''` before building to hide the panel, or
+add a reviewed institution profile. Development, production and the demo all use
+the same choice. Product names, emails and unit codes never select a profile.
+
+These are outbound public entry points. Each service controls its own sign-in
+and permissions. No credentials, enrolment details, meeting links or course IDs
+are appended. Unit-specific course and meeting links belong in scoped unit
+content, never this global panel.
+
+The links were checked on 14 September 2026 using Deakin's official pages:
+
+- [Our systems](https://www.deakin.edu.au/students/new-students/new-domestic-students/digital-setup/our-systems) links to DeakinSync and StudentConnect.
+- [CloudDeakin](https://www.deakin.edu.au/clouddeakin) links its Single SignOn button to the D2L base URL.
+- [Study timetables](https://www.deakin.edu.au/students/study-support/study-timetables) maintains the current STAR destination and calendar guidance. The panel uses this stable page because direct STAR addresses alternate between odd and even years.
+- [Library](https://www.deakin.edu.au/library) provides books, articles and unit readings.
+- [Student Central](https://www.deakin.edu.au/students/help/student-central) provides course advice and student enquiries.
diff --git a/src/app/study-essentials/study-essentials.component.html b/src/app/study-essentials/study-essentials.component.html
new file mode 100644
index 0000000000..ffbeb172fd
--- /dev/null
+++ b/src/app/study-essentials/study-essentials.component.html
@@ -0,0 +1,33 @@
+@if (links.length) {
+
+
+ This opens one session. Set the weekly repeat schedule in Teams before sending.
+ @if (draft.recurrence_until) {
+ Use {{ draft.recurrence_until }} as the last date.
+ }
+
+ Your OnTrack form stays open. After sending in Teams, copy the meeting’s join link back into
+ the session and save it.
+
+
+ Teams may ask you to sign in or choose its app or website. If the draft does not open on
+ your phone, use a desktop browser or copy the details into Teams.
+
+
+
+
diff --git a/src/app/unit-hub/teams-meeting-composer.component.scss b/src/app/unit-hub/teams-meeting-composer.component.scss
new file mode 100644
index 0000000000..6f33bb392f
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.scss
@@ -0,0 +1,151 @@
+@use './hub-card' as hub;
+
+@include hub.card-theme;
+
+:host {
+ display: block;
+ min-width: 0;
+ // every Unit Hub button: the app's filled or outlined style, at a 44px touch height
+ --mat-button-filled-container-height: 44px;
+ --mat-button-outlined-container-height: 44px;
+}
+
+// One card. Inside it, labelled groups separated by spacing, never by rules.
+// The host page can set --hub-composer-surface when the composer sits inside another card.
+.teams-composer {
+ @include hub.card(raised);
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ margin-top: 8px;
+ padding: 16px;
+ background: var(--hub-composer-surface, var(--ot-color-surface));
+ color: var(--ot-color-text);
+ overflow-wrap: anywhere;
+}
+
+.composer-heading {
+ @include hub.icon-heading;
+}
+
+p {
+ margin: 0;
+}
+.composer-intro {
+ margin-top: -8px;
+ font-size: 0.9rem;
+ line-height: 1.5;
+}
+
+.composer-group {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ min-width: 0;
+}
+.group-label {
+ @include hub.label;
+}
+.meeting-subject p:not(.group-label) {
+ line-height: 1.6;
+}
+
+.field {
+ display: grid;
+ gap: 0.35rem;
+ margin: 0 0 8px;
+ font-size: 0.85rem;
+ font-weight: 600;
+}
+
+input,
+textarea {
+ box-sizing: border-box;
+ width: 100%;
+ min-width: 0;
+ padding: 0.65rem;
+ // Muted text, not the border token: that is 1.6:1 in dark, too faint for a field edge.
+ border: 1px solid var(--ot-color-text-muted);
+ border-radius: var(--ot-radius-sm);
+ background: var(--ot-color-surface-raised);
+ color: var(--ot-color-text);
+ font: inherit;
+ font-weight: 400;
+
+ &::placeholder {
+ color: var(--ot-color-text-muted);
+ opacity: 1;
+ }
+}
+
+textarea {
+ resize: vertical;
+}
+small,
+.handoff-note,
+.fallback-note {
+ color: var(--ot-color-text-muted);
+ font-size: 0.85rem;
+ font-weight: 400;
+}
+.fallback-note {
+ margin-top: 6px;
+}
+
+// icon beside the copy, no border: it already sits inside the composer card
+.composer-note {
+ display: flex;
+ align-items: flex-start;
+ gap: 10px;
+ line-height: 1.5;
+
+ > mat-icon {
+ flex-shrink: 0;
+ width: 18px;
+ height: 18px;
+ margin-top: 1px;
+ font-size: 18px;
+ color: var(--ot-color-link);
+ }
+}
+.repeat-note p {
+ font-weight: 600;
+}
+
+.composer-actions {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 8px 12px;
+
+ a {
+ text-decoration: none;
+ }
+}
+.draft-error {
+ // Pulled a fifth of the way to the text colour, which keeps it above 4.5:1 on the
+ // card in both themes (the plain error token is 4.2:1 on a tinted box in light).
+ color: color-mix(in srgb, var(--ot-color-error) 80%, var(--ot-color-text));
+ font-size: 0.85rem;
+}
+input:focus-visible,
+textarea:focus-visible,
+a:focus-visible {
+ outline: 3px solid var(--ot-color-focus);
+ outline-offset: 2px;
+}
+
+@media (max-width: 599px) {
+ .teams-composer {
+ padding: 12px;
+ }
+ .composer-actions {
+ flex-direction: column;
+ align-items: stretch;
+ }
+ .composer-actions a,
+ .composer-actions button {
+ width: 100%;
+ min-height: 44px;
+ }
+}
diff --git a/src/app/unit-hub/teams-meeting-composer.component.spec.ts b/src/app/unit-hub/teams-meeting-composer.component.spec.ts
new file mode 100644
index 0000000000..8e62e89ec6
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.spec.ts
@@ -0,0 +1,146 @@
+import {describe, expect, it} from 'vitest';
+import {TestBed} from '@angular/core/testing';
+import {TeamsMeetingComposerComponent} from './teams-meeting-composer.component';
+import {TeamsMeetingDraft} from './teams-meeting-draft';
+
+const session = (): TeamsMeetingDraft => ({
+ title: 'Computer Systems HelpHub',
+ description: 'Bring your questions.',
+ start_at: '2026-09-17T07:00:00Z',
+ end_at: '2026-09-17T08:00:00Z',
+ timezone: 'Australia/Melbourne',
+ recurrence: 'none',
+});
+
+function open(draft: TeamsMeetingDraft | null = session()) {
+ const fixture = TestBed.createComponent(TeamsMeetingComposerComponent);
+ fixture.componentRef.setInput('draft', draft);
+ fixture.componentRef.setInput('unitCode', 'SIT111');
+ fixture.detectChanges();
+ return {
+ fixture,
+ component: fixture.componentInstance,
+ element: fixture.nativeElement as HTMLElement,
+ };
+}
+
+describe('Teams meeting composer', () => {
+ it('does not submit an enclosing OnTrack form when Enter is pressed in attendees', () => {
+ const {element} = open();
+ const event = new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true});
+ element.querySelector('input').dispatchEvent(event);
+ expect(event.defaultPrevented).toBe(true);
+ });
+
+ it('renders a labelled, explicit draft link without any meeting creation action', () => {
+ const {element} = open();
+ const link = element.querySelector('a') as HTMLAnchorElement;
+ expect(link.textContent).toContain('Open Teams draft');
+ expect(link.origin).toBe('https://teams.microsoft.com');
+ expect(link.pathname).toBe('/l/meeting/new');
+ expect(link.target).toBe('_blank');
+ expect(link.rel).toBe('noopener noreferrer');
+ expect(element.textContent).toContain('press Send in Teams');
+ expect(element.textContent).toContain('copy the meeting’s join link back');
+ expect(element.querySelector('input')?.closest('label')?.textContent).toContain('Attendees');
+ expect(element.querySelector('textarea')?.closest('label')?.textContent).toContain(
+ 'Teams details',
+ );
+ expect(element.querySelector('form')).toBeNull();
+ });
+
+ it('shows an actionable reason when the parent form is incomplete', () => {
+ const {fixture, element} = open(null);
+ fixture.componentRef.setInput('unavailableReason', 'Choose a valid end time.');
+ fixture.detectChanges();
+ expect(element.querySelector('a')).toBeNull();
+ expect(element.querySelector('button')?.disabled).toBe(true);
+ expect(element.querySelector('button')?.type).toBe('button');
+ expect(element.querySelector('[role="status"]')?.textContent).toContain(
+ 'Choose a valid end time',
+ );
+ });
+
+ it('uses locally edited details and attendees while leaving the parent draft untouched', () => {
+ const draft = Object.freeze(session());
+ const {fixture, component, element} = open(draft);
+ component.content.setValue('Shorter invitation');
+ component.attendees.setValue('tutor@example.edu');
+ fixture.detectChanges();
+ const url = new URL((element.querySelector('a') as HTMLAnchorElement).href);
+ expect(url.searchParams.get('content')).toBe('Shorter invitation');
+ expect(url.searchParams.get('attendees')).toBe('tutor@example.edu');
+ expect(draft.description).toBe('Bring your questions.');
+ expect(draft.title).toBe('Computer Systems HelpHub');
+ });
+
+ it('retains composer edits across equivalent snapshots and time adjustments', () => {
+ const {fixture, component} = open();
+ component.content.setValue('My draft details');
+ component.attendees.setValue('tutor@example.edu');
+ fixture.componentRef.setInput('draft', {...session()});
+ fixture.detectChanges();
+ expect(component.content.value).toBe('My draft details');
+ fixture.componentRef.setInput('draft', {...session(), end_at: '2026-09-17T09:00:00Z'});
+ fixture.detectChanges();
+ expect(component.content.value).toBe('My draft details');
+ expect(new URL(component.launch.url).searchParams.get('endTime')).toBe(
+ '2026-09-17T09:00:00.000Z',
+ );
+ });
+
+ it('clears attendee selection when the unit changes or the draft is removed', () => {
+ const {fixture, component} = open();
+ component.attendees.setValue('previous-unit@example.edu');
+ fixture.componentRef.setInput('unitCode', 'SIT102');
+ fixture.detectChanges();
+ expect(component.attendees.value).toBe('');
+ expect(component.content.value).toContain('SIT102');
+ component.attendees.setValue('tutor@example.edu');
+ fixture.componentRef.setInput('draft', null);
+ fixture.detectChanges();
+ expect(component.attendees.value).toBe('');
+ expect(component.content.value).toBe('');
+ expect(component.launch.url).toBeNull();
+ });
+
+ it('updates details from changed session content and never renders it as HTML', () => {
+ const {fixture, component, element} = open();
+ fixture.componentRef.setInput('draft', {
+ ...session(),
+ description: '',
+ });
+ fixture.detectChanges();
+ expect(component.content.value).toContain(' {
+ const {element} = open({...session(), recurrence: 'weekly', recurrence_until: '2026-11-26'});
+ expect(element.textContent).toContain('Set the weekly repeat schedule in Teams');
+ expect(element.textContent).toContain('2026-11-26');
+ expect(element.textContent).toContain('If the draft does not open on your phone');
+ expect(
+ new URL((element.querySelector('a') as HTMLAnchorElement).href).searchParams.has(
+ 'recurrence',
+ ),
+ ).toBe(false);
+ });
+
+ it('removes the actionable link for invalid attendees and oversized drafts, then recovers', () => {
+ const {fixture, component, element} = open();
+ component.attendees.setValue('not an email');
+ fixture.detectChanges();
+ expect(element.querySelector('a')).toBeNull();
+ expect(element.textContent).toContain('sign-in email addresses');
+ component.attendees.setValue('');
+ component.content.setValue('🙂'.repeat(1500));
+ fixture.detectChanges();
+ expect(element.querySelector('a')).toBeNull();
+ expect(element.textContent).toContain('Shorten the Teams details');
+ component.content.setValue('Shortened safely');
+ fixture.detectChanges();
+ expect(element.querySelector('a')).not.toBeNull();
+ });
+});
diff --git a/src/app/unit-hub/teams-meeting-composer.component.ts b/src/app/unit-hub/teams-meeting-composer.component.ts
new file mode 100644
index 0000000000..16ef1f33c7
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-composer.component.ts
@@ -0,0 +1,87 @@
+import {CommonModule} from '@angular/common';
+import {ChangeDetectionStrategy, Component, Input, OnChanges} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {TeamsMeetingDraft, teamsMeetingContent, teamsMeetingDraftUrl} from './teams-meeting-draft';
+
+@Component({
+ selector: 'f-teams-meeting-composer',
+ standalone: true,
+ imports: [CommonModule, ReactiveFormsModule, MatButtonModule, MatIconModule],
+ templateUrl: './teams-meeting-composer.component.html',
+ styleUrl: './teams-meeting-composer.component.scss',
+ changeDetection: ChangeDetectionStrategy.Eager,
+})
+export class TeamsMeetingComposerComponent implements OnChanges {
+ @Input() draft: TeamsMeetingDraft | null = null;
+ @Input() unitCode = '';
+ @Input() unavailableReason = '';
+
+ readonly attendees = new FormControl('', {nonNullable: true});
+ readonly content = new FormControl('', {nonNullable: true});
+ private previousUnit = '';
+ private initialContent: string | null = null;
+
+ ngOnChanges(): void {
+ if (this.previousUnit !== this.unitCode || !this.draft) {
+ this.attendees.setValue('');
+ this.previousUnit = this.unitCode;
+ }
+ if (!this.draft) {
+ this.initialContent = null;
+ this.content.setValue('');
+ return;
+ }
+ try {
+ const initial = teamsMeetingContent(this.draft, this.unitCode);
+ // A parent getter can return a fresh snapshot on every change detection pass.
+ if (initial !== this.initialContent) {
+ this.initialContent = initial;
+ this.content.setValue(initial);
+ }
+ } catch {
+ this.initialContent = null;
+ this.content.setValue('');
+ }
+ }
+
+ get launch(): {url: string | null; error: string} {
+ if (!this.draft) {
+ return {
+ url: null,
+ error: this.unavailableReason || 'Enter the session title, dates and time zone first.',
+ };
+ }
+ try {
+ return {
+ url: teamsMeetingDraftUrl(this.draft, this.unitCode, {
+ attendees: this.attendees.value,
+ content: this.content.value,
+ }),
+ error: '',
+ };
+ } catch (error) {
+ return {
+ url: null,
+ error: error instanceof Error ? error.message : 'Check the meeting details.',
+ };
+ }
+ }
+
+ get schedule(): string {
+ if (!this.draft) {
+ return '';
+ }
+ try {
+ const format = new Intl.DateTimeFormat(undefined, {
+ timeZone: this.draft.timezone,
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ });
+ return `${format.format(new Date(this.draft.start_at))} – ${format.format(new Date(this.draft.end_at))} (${this.draft.timezone})`;
+ } catch {
+ return '';
+ }
+ }
+}
diff --git a/src/app/unit-hub/teams-meeting-draft.spec.ts b/src/app/unit-hub/teams-meeting-draft.spec.ts
new file mode 100644
index 0000000000..ccec892c85
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-draft.spec.ts
@@ -0,0 +1,166 @@
+import {describe, expect, it} from 'vitest';
+import {
+ TEAMS_MEETING_MAX_URL_LENGTH,
+ TeamsMeetingDraft,
+ teamsMeetingAttendees,
+ teamsMeetingContent,
+ teamsMeetingDraftUrl,
+} from './teams-meeting-draft';
+import {dateTimeToIso} from './unit-hub-calendar';
+
+const session = (): TeamsMeetingDraft => ({
+ title: 'Hardware questions & answers',
+ description: 'Bring your circuit questions.\nWe will discuss the next task.',
+ start_at: '2026-09-17T17:00:00+10:00',
+ end_at: '2026-09-17T18:00:00+10:00',
+ timezone: 'Australia/Melbourne',
+ location: 'Online',
+ recurrence: 'none',
+});
+
+describe('Teams meeting draft URLs', () => {
+ it('uses the supported HTTPS scheduling endpoint and only documented parameters', () => {
+ const value = teamsMeetingDraftUrl(session(), 'SIT111');
+ const url = new URL(value);
+ expect(url.origin + url.pathname).toBe('https://teams.microsoft.com/l/meeting/new');
+ expect([...url.searchParams.keys()]).toEqual(['subject', 'startTime', 'endTime', 'content']);
+ expect(url.searchParams.get('subject')).toBe('SIT111 · Hardware questions & answers');
+ expect(url.searchParams.get('startTime')).toBe('2026-09-17T07:00:00.000Z');
+ expect(url.searchParams.get('endTime')).toBe('2026-09-17T08:00:00.000Z');
+ expect(url.searchParams.get('content')).toContain('Location: Online');
+ expect(value).toContain('%20');
+ expect(value).not.toContain('+');
+ });
+
+ it('converts Melbourne summer time without depending on the device time zone', () => {
+ const draft = {
+ ...session(),
+ start_at: dateTimeToIso('2026-10-08T17:00', 'Australia/Melbourne'),
+ end_at: dateTimeToIso('2026-10-08T18:00', 'Australia/Melbourne'),
+ };
+ const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+ expect(url.searchParams.get('startTime')).toBe('2026-10-08T06:00:00.000Z');
+ expect(url.searchParams.get('endTime')).toBe('2026-10-08T07:00:00.000Z');
+ });
+
+ it('handles half-hour offsets and an end time on the next local day', () => {
+ const draft = {
+ ...session(),
+ timezone: 'Asia/Kolkata',
+ start_at: '2026-09-17T23:30:00+05:30',
+ end_at: '2026-09-18T00:30:00+05:30',
+ };
+ const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+ expect(url.searchParams.get('startTime')).toBe('2026-09-17T18:00:00.000Z');
+ expect(url.searchParams.get('endTime')).toBe('2026-09-17T19:00:00.000Z');
+ });
+
+ it.each([
+ '2026-09-17T17:00',
+ '2026-02-30T17:00:00Z',
+ '2026-09-17T24:00:00Z',
+ '2026-09-17T17:00:60Z',
+ 'not a date',
+ ])('rejects an invalid or unzoned time: %s', (value) => {
+ expect(() => teamsMeetingDraftUrl({...session(), start_at: value}, 'SIT111')).toThrow();
+ });
+
+ it('rejects cancelled sessions, backwards times and invalid time zones', () => {
+ expect(() => teamsMeetingDraftUrl({...session(), cancelled: true}, 'SIT111')).toThrow(
+ /scheduled/,
+ );
+ expect(() =>
+ teamsMeetingDraftUrl({...session(), end_at: session().start_at}, 'SIT111'),
+ ).toThrow(/after/);
+ expect(() => teamsMeetingDraftUrl({...session(), timezone: 'Mars/Anywhere'}, 'SIT111')).toThrow(
+ /time zone/,
+ );
+ expect(() => teamsMeetingDraftUrl({...session(), timezone: ''}, 'SIT111')).toThrow(/time zone/);
+ });
+
+ it('encodes query delimiters, literal plus signs and Unicode as data', () => {
+ const draft = {
+ ...session(),
+ title: 'C++ & 电路 #1',
+ description: 'Review &attendees=other@example.edu',
+ };
+ const url = new URL(
+ teamsMeetingDraftUrl(draft, 'SIT111', {attendees: 'person+lab@example.edu'}),
+ );
+ expect([...url.searchParams.keys()]).toHaveLength(5);
+ expect(url.searchParams.get('subject')).toBe('SIT111 · C++ & 电路 #1');
+ expect(url.searchParams.get('content')).toContain('Review &attendees=other@example.edu');
+ expect(url.searchParams.get('attendees')).toBe('person+lab@example.edu');
+ expect(url.hash).toBe('');
+ });
+
+ it('accepts explicit Entra UPNs, removes duplicates and omits empty attendees', () => {
+ expect(teamsMeetingAttendees('A@example.edu; b@example.edu\nA@EXAMPLE.edu')).toEqual([
+ 'A@example.edu',
+ 'b@example.edu',
+ ]);
+ expect(
+ new URL(teamsMeetingDraftUrl(session(), 'SIT111', {attendees: ' '})).searchParams.has(
+ 'attendees',
+ ),
+ ).toBe(false);
+ expect(teamsMeetingAttendees('guest_example.com#EXT#@tenant.onmicrosoft.com')).toHaveLength(1);
+ });
+
+ it.each([
+ 'Display Name ',
+ 'a@example.edu&content=bad',
+ 'a@-bad.edu',
+ 'a@example..edu',
+ 'a@example.edu,',
+ 'a@example.edu\r\nBcc: b@example.edu',
+ ])('rejects malformed attendee input: %s', (value) => {
+ expect(() => teamsMeetingAttendees(value)).toThrow(/sign-in/);
+ });
+
+ it('bounds attendees and URL length without silently losing details', () => {
+ const many = Array.from({length: 21}, (_, i) => `person${i}@example.edu`).join(',');
+ expect(() => teamsMeetingAttendees(many)).toThrow(/20 attendees/);
+ const draft = {...session(), description: '🙂'.repeat(1500)};
+ expect(() => teamsMeetingDraftUrl(draft, 'SIT111')).toThrow(/too long/);
+ const shortened = teamsMeetingDraftUrl(draft, 'SIT111', {content: 'Short draft details'});
+ expect(shortened.length).toBeLessThanOrEqual(TEAMS_MEETING_MAX_URL_LENGTH);
+ expect(draft.description).toHaveLength(3000);
+ });
+
+ it('never copies an existing join URL, source URL or invents recurrence parameters', () => {
+ const draft = {
+ ...session(),
+ recurrence: 'weekly' as const,
+ recurrence_until: '2026-11-26',
+ join_url: 'https://teams.microsoft.com/l/meetup-join/existing',
+ source_url: 'https://example.edu/private',
+ };
+ const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+ expect(url.searchParams.has('recurrence')).toBe(false);
+ expect(url.searchParams.has('location')).toBe(false);
+ expect(url.searchParams.get('content')).not.toContain('https://');
+ });
+
+ it('rejects control characters and overlong fields while preserving ordinary line breaks', () => {
+ expect(teamsMeetingContent({...session(), description: 'First\r\nSecond'}, 'SIT111')).toContain(
+ 'First\nSecond',
+ );
+ expect(() => teamsMeetingDraftUrl({...session(), title: 'bad\nsubject'}, 'SIT111')).toThrow(
+ /one line/,
+ );
+ expect(() =>
+ teamsMeetingDraftUrl({...session(), description: 'bad\u0000text'}, 'SIT111'),
+ ).toThrow(/characters/);
+ expect(() => teamsMeetingDraftUrl({...session(), title: 'x'.repeat(201)}, 'SIT111')).toThrow(
+ /200/,
+ );
+ });
+
+ it('opens a draft for an API session saved without a description', () => {
+ const draft = {...session(), description: null as unknown as string, location: null};
+ expect(teamsMeetingContent(draft, 'SIT111')).toBe('Unit: SIT111');
+ const url = new URL(teamsMeetingDraftUrl(draft, 'SIT111'));
+ expect(url.searchParams.get('content')).toBe('Unit: SIT111');
+ });
+});
diff --git a/src/app/unit-hub/teams-meeting-draft.ts b/src/app/unit-hub/teams-meeting-draft.ts
new file mode 100644
index 0000000000..40027f2bd7
--- /dev/null
+++ b/src/app/unit-hub/teams-meeting-draft.ts
@@ -0,0 +1,151 @@
+/** A snapshot of the editor. Times are resolved instants, not local input values. */
+export interface TeamsMeetingDraft {
+ title: string;
+ description: string;
+ start_at: string;
+ end_at: string;
+ timezone: string;
+ location?: string | null;
+ recurrence?: 'none' | 'weekly';
+ recurrence_until?: string | null;
+ cancelled?: boolean;
+}
+
+export interface TeamsMeetingOptions {
+ attendees?: string;
+ content?: string;
+}
+
+// These are OnTrack's bounds for a portable draft URL, not Microsoft service limits.
+export const TEAMS_MEETING_MAX_URL_LENGTH = 8000;
+export const TEAMS_MEETING_MAX_ATTENDEES = 20;
+
+function plainText(value: string, label: string, maximum: number): string {
+ if (typeof value !== 'string' || value.length > maximum) {
+ throw new Error(`${label} must be ${maximum} characters or fewer.`);
+ }
+ if (/\p{Cc}/u.test(value.replace(/[\r\n\t]/g, ''))) {
+ throw new Error(`${label} contains unsupported characters.`);
+ }
+ return value.replace(/\r\n?/g, '\n').trim();
+}
+
+function instant(value: string): string {
+ const match =
+ typeof value === 'string' &&
+ value.match(/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2})(?::(\d{2})(\.\d{1,3})?)?(Z|[+-]\d{2}:\d{2})$/);
+ if (!match) {
+ throw new Error('Set a complete start and end time, including the time zone.');
+ }
+ const wall = `${match[1]}:${match[2] || '00'}`;
+ const wallDate = new Date(`${wall}Z`);
+ const date = new Date(value);
+ if (
+ !Number.isFinite(date.getTime()) ||
+ !Number.isFinite(wallDate.getTime()) ||
+ wallDate.toISOString().slice(0, 19) !== wall
+ ) {
+ throw new Error('Set a valid start and end time.');
+ }
+ return date.toISOString();
+}
+
+export function teamsMeetingAttendees(value = ''): string[] {
+ if (value.length > 5100) {
+ throw new Error(`Add no more than ${TEAMS_MEETING_MAX_ATTENDEES} attendees.`);
+ }
+ const entries = value.trim() ? value.split(/[,;\n]+/).map((entry) => entry.trim()) : [];
+ const attendees: string[] = [];
+ const seen: Set = new Set();
+ for (const entry of entries) {
+ const pieces = entry.split('@');
+ const validDomain = pieces[1]
+ ?.split('.')
+ .every((label) => /^[a-z\d](?:[a-z\d-]{0,61}[a-z\d])?$/i.test(label));
+ if (
+ entry.length > 254 ||
+ pieces.length !== 2 ||
+ !validDomain ||
+ !/^[a-z\d.!#$%&'*+/=?^_`{|}~-]+$/i.test(pieces[0])
+ ) {
+ throw new Error('Enter university sign-in email addresses, separated by commas.');
+ }
+ const key = entry.toLowerCase();
+ if (!seen.has(key)) {
+ attendees.push(entry);
+ seen.add(key);
+ }
+ }
+ if (attendees.length > TEAMS_MEETING_MAX_ATTENDEES) {
+ throw new Error(
+ `Add no more than ${TEAMS_MEETING_MAX_ATTENDEES} attendees here; add others in Teams.`,
+ );
+ }
+ return attendees;
+}
+
+export function teamsMeetingContent(draft: TeamsMeetingDraft, unitCode: string): string {
+ const code = plainText(unitCode, 'Unit code', 50);
+ // The API returns null when a session was saved without a description.
+ const description = plainText(draft.description || '', 'Session details', 20000);
+ const location = plainText(draft.location || '', 'Location', 300);
+ return [code ? `Unit: ${code}` : '', description, location ? `Location: ${location}` : '']
+ .filter(Boolean)
+ .join('\n\n');
+}
+
+/**
+ * Open a scheduling draft only. This never creates a meeting or discovers a join URL.
+ * https://learn.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/deep-link-workflow
+ * Only documented fields are used. Recurrence and location are not URL parameters.
+ */
+export function teamsMeetingDraftUrl(
+ draft: TeamsMeetingDraft,
+ unitCode: string,
+ options: TeamsMeetingOptions = {},
+): string {
+ if (!draft || draft.cancelled) {
+ throw new Error('Use a scheduled session to prepare a Teams meeting.');
+ }
+ const title = plainText(draft.title, 'Session title', 200);
+ const code = plainText(unitCode, 'Unit code', 50);
+ if (!title || /[\r\n]/.test(title) || /[\r\n]/.test(code)) {
+ throw new Error('Enter a session title on one line.');
+ }
+ const start = instant(draft.start_at);
+ const end = instant(draft.end_at);
+ if (new Date(end).getTime() <= new Date(start).getTime()) {
+ throw new Error('The end time must be after the start time.');
+ }
+ try {
+ new Intl.DateTimeFormat('en', {timeZone: draft.timezone}).format(new Date(start));
+ if (!draft.timezone) {
+ throw new Error();
+ }
+ } catch {
+ throw new Error('Choose a valid session time zone.');
+ }
+ const defaultContent = teamsMeetingContent(draft, code);
+ const content = plainText(options.content ?? defaultContent, 'Teams details', 20500);
+ const attendees = teamsMeetingAttendees(options.attendees);
+ const parameters: Record = {
+ subject: code ? `${code} · ${title}` : title,
+ startTime: start,
+ endTime: end,
+ content,
+ };
+ if (attendees.length) {
+ parameters.attendees = attendees.join(',');
+ }
+ // URLSearchParams uses + for spaces, which this Teams endpoint does not support.
+ const query = Object.entries(parameters)
+ .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+ .join('&');
+ const url = `https://teams.microsoft.com/l/meeting/new?${query}`;
+ if (url.length > TEAMS_MEETING_MAX_URL_LENGTH) {
+ throw new Error(
+ 'This draft is too long to open reliably. Shorten the Teams details or add attendees in Teams.',
+ );
+ }
+ return url;
+}
diff --git a/src/app/unit-hub/unit-hub-demo.fixtures.ts b/src/app/unit-hub/unit-hub-demo.fixtures.ts
new file mode 100644
index 0000000000..12fdd090b8
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-demo.fixtures.ts
@@ -0,0 +1,92 @@
+import {DemoMeetingLinks, safeDemoMeetingUrl} from '../demo/demo-meeting-links.store';
+import {UnitHubFeed} from './unit-hub.models';
+
+/** Synthetic content only. SIT102 deliberately exists in the raw fixture as an isolation test. */
+export function unitHubDemo(now = new Date(), links?: DemoMeetingLinks): UnitHubFeed {
+ const helpHubLink = safeDemoMeetingUrl(links?.helpHub || '');
+ const extraLink = safeDemoMeetingUrl(links?.extraHelpHub || '');
+ const start = new Date(now);
+ start.setDate(start.getDate() + 1);
+ start.setHours(17, 0, 0, 0);
+ const lecture = new Date(start.getTime() + 86400000);
+ const shared = {
+ description: 'Bring your questions and join the teaching team for a guided session.',
+ timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+ published: true,
+ cancelled: false,
+ recurrence: 'none' as const,
+ join_url: null,
+ location: 'Online in Teams',
+ };
+ return {
+ units: [{id: 111, code: 'SIT111', name: 'Computer Systems', can_manage: false}],
+ announcements: [
+ {
+ id: 1,
+ unit_id: 111,
+ title: 'Your week in Computer Systems',
+ body: 'Review the hardware concepts, bring questions to HelpHub and check your upcoming classes here. This is a fictional example for the OnTrack demonstration.',
+ published_at: now.toISOString(),
+ pinned: true,
+ },
+ {
+ id: 2,
+ unit_id: 111,
+ title: 'Extra help before your next task',
+ body: 'The teaching team has added an online HelpHub. Open the session card for its time and meeting options.',
+ published_at: new Date(now.getTime() - 86400000).toISOString(),
+ pinned: false,
+ },
+ {
+ id: 3,
+ unit_id: 102,
+ title: 'SIT102 announcement must stay hidden',
+ body: 'Other unit sample',
+ published_at: now.toISOString(),
+ pinned: false,
+ },
+ ],
+ sessions: [
+ {
+ ...shared,
+ id: 1,
+ unit_id: 111,
+ title: 'Computer Systems HelpHub',
+ kind: 'helphub',
+ join_url: helpHubLink,
+ demo_hosted_join: !!helpHubLink,
+ start_at: start.toISOString(),
+ end_at: new Date(start.getTime() + 3600000).toISOString(),
+ },
+ {
+ ...shared,
+ id: 2,
+ unit_id: 111,
+ title: 'Hardware review lecture',
+ kind: 'lecture',
+ start_at: lecture.toISOString(),
+ end_at: new Date(lecture.getTime() + 3600000).toISOString(),
+ },
+ {
+ ...shared,
+ id: 4,
+ unit_id: 111,
+ title: 'Computer Systems extra HelpHub',
+ kind: 'helphub',
+ join_url: extraLink,
+ demo_hosted_join: !!extraLink,
+ start_at: new Date(lecture.getTime() + 86400000).toISOString(),
+ end_at: new Date(lecture.getTime() + 90000000).toISOString(),
+ },
+ {
+ ...shared,
+ id: 3,
+ unit_id: 102,
+ title: 'SIT102 HelpHub must stay hidden',
+ kind: 'helphub',
+ start_at: start.toISOString(),
+ end_at: new Date(start.getTime() + 3600000).toISOString(),
+ },
+ ],
+ };
+}
diff --git a/src/app/unit-hub/unit-hub-details.component.html b/src/app/unit-hub/unit-hub-details.component.html
new file mode 100644
index 0000000000..3a915f492e
--- /dev/null
+++ b/src/app/unit-hub/unit-hub-details.component.html
@@ -0,0 +1,261 @@
+@if (content; as detail) {
+
+
+
+ @if (loading) {
+
+ Loading your unit updates…
+
+
+ @for (item of [1, 2, 3]; track item) {
+
+
+
+
+
+
+ }
+
+
+
+ @for (item of [1, 2]; track item) {
+
+
+
+
+
+ }
+
+
+ } @else if (loadError) {
+
+ cloud_off
+
Updates are unavailable
+
{{ loadError }}
+
+
+ } @else if (managing) {
+
+
+
+
Manage unit updates
+
+ Publish an announcement or a class with its joining details. Changes are visible to
+ members of this unit.
+
+
+
+
+
+ info
+
+ @if (managedTeamsConfigured) {
+ Automatic Teams announcements are configured for this unit. Posts appear after a
+ successful update. Change imported posts in Teams; they cannot be edited here.
+ } @else {
+ Publish updates here or link to their original Teams post. Your university can connect
+ this unit's Teams announcements through administrator setup. Microsoft sign-in alone
+ does not turn that connection on.
+ }
+ Session schedules are maintained here.
+
+ {{
+ deleteCandidate.kind === 'sessions'
+ ? 'Cancel this session?'
+ : 'Remove this announcement?'
+ }}
+
+ {{ deleteCandidate.title }}.
+ {{
+ deleteCandidate.kind === 'sessions'
+ ? 'All weekly occurrences will be cancelled and calendar subscriptions will update on their next refresh.'
+ : 'This removes it from the unit feed.'
+ }}
+
+
+
+
+
+
+ }
+
+
+
+ campaignAnnouncements
+
+ @for (row of staffAnnouncements; track row.id) {
+
+
+ @for (group of statusGuide; track group.key) {
+
+
+ {{ group.icon }}
+ {{ group.title }}
+
+
+
+ @for (row of group.rows; track row.status) {
+
+
+ {{ row.icon }}
+ {{ row.label }}
+
+
{{ row.reason }}
+
{{ row.action }}
+
+ }
+
+
+ }
+
+ }
+
+
+
+ Only members of a unit can see its updates. Content comes from your teaching team or connected
+ unit announcement channels; linked meetings may also require your university sign-in.
+