---
name: update-tfc-activities
display_name: TFC Activity Updater
description: "Add learning activities to the TFC Hub (Games TFC community). Use when the user says 'update tfc', 'add tfc activities', 'log tfc activities', 'update my tfc profile', or mentions adding SpecReq/training/content activities to TFC Hub."
icon: "📋"
trigger: update tfc activities
inputs:
  - name: activities
    description: "List of activities to add. Each activity should include: title, description, date (YYYY/MM/DD), category (SpecReq/Training/Content/Speaking/Other/Assessment), action (Lead/Shadow/Review), and status (Done/In Progress)."
    type: string
    required: true
tools: [browser_navigate, browser_wait, browser_read_page, browser_click, browser_scroll, browser_run_js, browser_type, browser_click_xy, browser_press_key, ephemeral_react]
---

## Overview

This skill automates adding learning activities to the TFC Hub (Games TFC community) at `https://tfc.a2z.com/communities/games/members/vtewanie`. It handles the CloudScape/Polaris React form by using a specific sequence of element-based clicks and individual field fills to reliably submit activities.

## Workflow

### Step 1: Parse Activities
- **Mode**: `agentic`
- **Input**: `{{activities}}` — user's description of activities to add
- **Output**: A structured list of activities, each with: title, description, date, category, action_type, status
- **Validate**: Each activity has at minimum a title and date
- **On failure**: Ask the user to clarify which activities to add, with what details

If the user provides activities informally (e.g. "add the EKS deep dive from April 22"), use conversation context and calendar to fill in missing details. Default category is **SpecReq**, default action is **Lead**, default status is **Done**.

### Step 2: Navigate to TFC Hub
- **Mode**: `deterministic`
- **Tool**: `browser_navigate`
- **Input**: URL `https://tfc.a2z.com/communities/games/members/vtewanie?tab=overview`
- **Output**: TFC Hub dashboard loaded
- **Validate**: Wait for "Add learning activity" button to appear using `browser_wait` with `condition="text_visible"`, `text="Add learning activity"`
- **On failure**: Page may need authentication — tell user to sign in via browser

### Step 3: Add Each Activity (loop)
- **Mode**: `agentic`
- **Input**: One activity from the parsed list
- **Output**: Activity successfully submitted

For each activity, execute these sub-steps **sequentially with individual tool calls** (never batch):

**3a. Open the Add Learning Activity dialog**
- Click the "Add learning activity" button (find by text in page_state)
- Wait 500ms for dialog to render

**3b. Select Category**
- Click the Category dropdown button (the empty button after "Games AoD Path")
- Read the page_state to find the option list elements
- Click the matching category option (e.g. `li role=option "SpecReq"`)

**3c. Select Type**
- After category is set, click the Type dropdown button (the next empty button)
- Read page_state to find the type option
- Click "Customer engagement with your mentor" (for SpecReq) or the appropriate type

**3d. Set Action (Lead/Shadow/Review)**
- The Action field uses radio buttons inside CloudScape tile components
- Use `browser_run_js` to click the radio: `const inp = [...document.querySelectorAll('input[type="radio"]')].find(r => r.value === 'Lead'); if (inp) { inp.click(); }`
- This JS click is sufficient for selecting the radio — the tile click via coordinates is a backup

**3e. Fill Title**
- Find the title input in page_state (look for `input (text) value="Customer engagement..."`)
- Use `browser_type` with the activity title (this clears and replaces the auto-filled default)

**3f. Fill Description**
- Find the textarea in page_state
- Use `browser_type` with the activity description

**3g. Set Date**
- Find the date input (look for `input (text) "YYYY/MM/DD"`)
- If the date differs from today, use `browser_type` to set it to `YYYY/MM/DD` format

**3h. Set Status**
- Scroll the dialog to the bottom: `browser_run_js` with `sc.scrollTop = sc.scrollHeight`
- Find and click the empty Status dropdown button (look for empty `button` with `aria-haspopup="listbox"`)
- Read page_state for the listbox options
- Click "Done" (or "In Progress" etc.) from the options list

**3i. Submit**
- Click the "Submit" button
- Wait 3 seconds for navigation
- Verify success: page should navigate to SpecReq Dashboard and show "Activity ... successfully added" in the breadcrumb

### Step 4: Verify All Activities
- **Mode**: `agentic`
- **Tool**: `browser_read_page`
- **Input**: The SpecReq Dashboard after final submission
- **Output**: Confirmation of all activities added with their titles and dates
- **Validate**: Count of activities matches what was requested
- **On failure**: Report which activities succeeded and which failed

## Output

A summary table of all activities added, with their titles, dates, categories, and confirmation status.

## Lessons Learned

### Do
- Use **individual `browser_type` calls** for each field — one at a time, never batched
- **Read page_state after every action** to get correct element IDs (they shift after each interaction)
- Use `browser_run_js` for the Lead/Shadow/Review radio buttons — `inp.click()` on the radio input
- Scroll the dialog using JS: `const sc = [...document.querySelectorAll('[class*="awsui_root_1d2i7"]')].find(s => s.scrollHeight > s.clientHeight); sc.scrollTop = sc.scrollHeight * 0.35;`
- Wait 300-500ms between steps to let React re-render
- When opening from the SpecReq Dashboard page, the Category may be pre-selected as SpecReq

### Don't
- **Never use `browser_batch`** for typing into multiple form fields — it breaks React state and blanks out fields
- Don't hardcode element IDs — they change every time the dialog opens
- Don't use `browser_run_js` to dispatch synthetic events on React-controlled inputs (dispatchEvent, native value setters) — React ignores them
- Don't try to fill fields before the Type dropdown is selected — Title, Description, URL, Date, and Status fields are disabled until Type is set
- Don't click coordinates behind the sticky header (y < 416px when dialog is open)

### Common Failures
- **"Missing required field(s)"** error on Submit → The Action radio (Lead/Shadow/Review) or Status dropdown wasn't set. Both are required.
- **Dialog fields stay disabled** → Type dropdown wasn't selected. Re-click the Type dropdown and select "Customer engagement with your mentor"
- **Title/Description not found in page_state** → Dialog scroll position changed. Use `browser_run_js` to scroll to ~35% of dialog height to see the title/description fields
- **Calendar popup opens when clicking near date field** → Click the date in the calendar picker to dismiss, or press Escape
- **Status dropdown at y=293 behind 416px sticky header** → Use element-based click (`browser_click`) instead of coordinate-based click

### When to Ask the User
- Which Category to use if not specified (SpecReq, Training, Content, Speaking, Other, Assessment)
- Which Action type (Lead, Shadow, Review) — default to Lead
- What date to use if not provided
- Whether activities are Done or In Progress