initial commit

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1760891952784
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+.env

README.md

@@ -0,0 +1,31 @@
+# Speaking Practice Browser (Astro)
+
+New Astro-based UI that replicates the Gradio experience with full control over styling and responsiveness.
+
+## Getting Started
+
+1. Install dependencies (Node 18+ recommended):
+   ```bash
+   cd astra
+   npm install
+   ```
+2. Start the dev server:
+   ```bash
+   npm run dev
+   ```
+   The app defaults to http://localhost:4321 and supports hot reloading.
+3. Build for production:
+   ```bash
+   npm run build
+   npm run preview
+   ```
+
+## Data
+
+`speaking.jsonl` lives in `data/` and is loaded at build time. Drop a `writing.jsonl` file in the same folder if you have writing tasks�the UI will surface a Writing category automatically.
+
+## Customisation
+
+- Update task mappings or UI copy in `src/pages/index.astro`.
+- Tweak styling in `src/styles/global.css`.
+- Data loading helpers live in `src/utils/loadData.ts`.

astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+  server: {
+    host: true,
+    port: 4321,
+  },
+});

data/speaking.jsonl

@@ -0,0 +1,10 @@
+{"id":25884,"task_type":"giving_advice","task_description":"You have just moved into a new building and plan to host a get-together to meet your neighbors; give practical advice on how to invite them and what to do to make a good impression.","custom_id":"25884__giving_advice","rephrased_task":"You have just moved into a new building and want to host a casual get-together to meet your neighbours. Give practical advice on how to invite them and what to do at the event to make a good impression.","brainstorm":[{"title":"Leave a friendly note and invitation","description":"Drop a short printed invitation in each mailbox or under doors with date, time, location and an RSVP line. Keep the tone warm and include your apartment number and a phone or email."},{"title":"Post online in the building group","description":"If the building has an email list, Facebook group, or app, post the same invitation there so tech-savvy neighbours see it and can ask questions quickly."},{"title":"Offer simple refreshments or a potluck","description":"Provide coffee, tea and store-bought snacks, or ask neighbours to bring one dish. A potluck lowers your cost and gives people a reason to stay and chat."},{"title":"Plan quick icebreakers and name tags","description":"Have a few conversation starters or a simple game and hand out name tags so people feel comfortable introducing themselves."},{"title":"Coordinate logistics and be considerate","description":"Reserve a common room if needed, check noise rules, set a one- to two-hour timeframe, and note any dietary or accessibility needs on the invite."}],"vocabulary":["invitation","RSVP","mailbox drop","building bulletin board","common room","potluck","refreshments","icebreaker","name tag","noise curfew","accessibility","follow-up"],"response":"Hey, congrats on the new place. If I were you, start by sending a short, friendly invitation so neighbours know when and where to meet. Leave printed cards in mailboxes or post on the building\u2019s notice board, and mirror the details in any online building group. Be sure to ask for a quick RSVP and include your apartment number. Another thing you could do is keep refreshments simple. Offer coffee, tea and a few packaged snacks, or make it a potluck so people can contribute. That makes the event low-pressure and gives neighbours a reason to stay and chat. One more practical tip is to plan the time and logistics carefully. Choose a weekend afternoon or early evening for minimal disruption, reserve the common room if required, and note any dietary or accessibility concerns on the invite. Finally, make introductions easy: wear name tags, have a quick icebreaker question, and circulate to talk to groups rather than staying in one spot. These small touches show thoughtfulness and make a good first impression. Good luck with the get-together and enjoy meeting your neighbours.","response_alternative":null,"brainstorm_alternative":null}
+{"id":25884,"task_type":"personal_experience","task_description":"Describe a real experience you had with an artwork: what the piece was, how you made or encountered it, what happened, and what you learned from the experience.","custom_id":"25884__personal_experience","rephrased_task":"Talk about a real experience you had with an artwork. Describe the piece, explain how you created or encountered it, tell what happened during the experience, and say what you learned from it.","brainstorm":[{"title":"Acrylic landscape I painted","description":"Describe painting a small acrylic landscape from a weekend hike, including choice of palette, brushwork, and the moment you finished it at home."},{"title":"Museum encounter with a sculpture","description":"Recall a visit to a gallery where a sculpture surprised you, how you approached it, the emotion it evoked, and a conversation with another visitor or docent."},{"title":"Collaborative mural project","description":"Explain joining a community mural, your role in planning and painting, interactions with neighbours, and the unveiling event."},{"title":"Making a mixed-media collage","description":"Talk about assembling a collage from old photographs and found objects, the creative decisions you made, and how viewers reacted when you displayed it."},{"title":"Student art critique","description":"Describe presenting a piece in a class critique, the feedback you received, how it felt to defend your choices, and what you changed afterward."}],"vocabulary":["medium","palette","brushstroke","composition","texture","mixed media","gallery","installation","curator","exhibit","focal point","contrast","sketchbook","critique","conservation"],"response":"A memorable experience with an artwork happened two years ago when I made a small mixed-media canvas inspired by a river near my neighbourhood. I collected bits of newspaper and dried leaves, sketched a loose composition in my sketchbook, then layered acrylic washes over the collage to unify the surface. I worked in short sessions so the texture built naturally. When I entered the piece in a local community exhibit, a retired teacher stood for a long time in front of it and told me the image reminded her of walks with her late husband. Her reaction made the work feel useful beyond my own expression. After the show I sold the piece to a neighbour and I learned that honest materials and simple decisions can create real connections, and that sharing art opens unexpected conversations.","response_alternative":null,"brainstorm_alternative":null}
+{"id":25884,"task_type":"describing_scene","task_description":"This is an image of a busy office floor with several cubicles where people are working, talking on phones, listening to music, and interacting with each other.","custom_id":"25884__describing_scene","rephrased_task":"Describe the busy office floor shown. Explain the overall setting and then describe specific people, their actions, appearance, and feelings so the listener can picture what is happening. Speak for about 60 seconds.","brainstorm":[{"title":"Start with a clear overview","description":"Open with one sentence naming the place (open-plan office with cubicles) so the listener immediately understands the setting."},{"title":"Focus on a few people","description":"Choose three or four people to describe in detail\u2014someone on the phone, a person typing, a pair talking\u2014to create a vivid snapshot."},{"title":"Include actions and emotions","description":"Describe what people are doing and how they seem to feel (rushed, focused, amused), using small details like headphones, gestures, or smiles."},{"title":"Mention sound and movement","description":"Refer to background noise such as phone conversations, keyboard typing, and brief face-to-face interactions to convey atmosphere."},{"title":"Close with a summary","description":"End with a short concluding sentence that captures the overall mood, for example that the office feels busy and collaborative."}],"vocabulary":["open-plan office","cubicle","headset","conference call","background chatter","typing away","collaborating","coffee break","manager circulating","multitasking","deadline pressure","quick huddle","ergonomic chair"],"response":"This is a busy open-plan office floor with several cubicles where employees are actively working. In the foreground a woman is sitting at her desk typing quickly on a laptop while wearing a headset; she looks focused and slightly hurried. Nearby a man is talking on the phone, speaking in a steady tone and gesturing with his free hand. Two colleagues have stood up between cubicles to exchange a document and are smiling as they make a quick plan. Another person has headphones on and is nodding along to music while scanning a spreadsheet [ASSUMED]. There\u2019s a low hum of background chatter and keyboard clicks that fills the space. Overall the scene feels productive and collaborative, with people balancing concentrated work and brief, friendly interactions.","response_alternative":"I expect a few short events to follow. The woman on the headset will finish her call and either send an email or update a shared task, while the man on the phone may hand off the issue to a teammate and stand to locate a file. The two colleagues will likely return to their desks with the document and start a quick task together, and the person wearing headphones will remove them to join the conversation or answer a question. A manager might walk through to check progress and prompt a brief huddle, causing several people to gather and discuss priorities. Noise levels will rise slightly during the huddle, then drop back down as everyone resumes focused work.","brainstorm_alternative":null}
+{"id":25884,"task_type":"comparing_persuading","task_description":"Compare three camper-van rental options and recommend one: one option costs $850 and includes a bathroom, toilet, small kitchen, and four beds; another costs $1000, is larger and fancier with six beds; a cheaper $700 option lacks a bathroom and kitchen and needs repairs. Choose one option and explain why.","custom_id":"25884__comparing_persuading","rephrased_task":"You are choosing a camper-van rental. Compare the three options below and choose the one you prefer. In Part 2, persuade a friend who prefers a different option that your choice is the better one by comparing costs, features, and practical benefits.\n\nOptions:\n- $850: includes bathroom, toilet, small kitchen, four beds.\n- $1000: larger and fancier, six beds.\n- $700: cheaper but lacks bathroom and kitchen and needs repairs.","brainstorm":[{"title":"Self-contained convenience","description":"Emphasize that the $850 van has an onboard bathroom and kitchen, so you can avoid campground fees and eating out every meal."},{"title":"Right-sized for group","description":"Point out that four beds match a typical family or group of friends, so extra beds in the $1000 option may be unnecessary and wasteful."},{"title":"Cost savings and reallocation","description":"Highlight the $150 savings compared with the $1000 van and suggest using that money for fuel, park fees, or activities."},{"title":"Reliability over cheap fixes","description":"Contrast the $700 option\u2019s needed repairs with the more reliable, move-in-ready $850 van to avoid breakdowns and unexpected repair costs."},{"title":"Driving and fuel practicalities","description":"Note that a mid-size van is easier to drive and park and likely more fuel efficient than a larger six-bed model."}],"vocabulary":["camper van","self-contained","onboard bathroom","kitchenette","sleeping capacity","fuel efficiency","reliability","maintenance","value for money","driving maneuverability","rental rate","living space","storage capacity","campground fees"],"response":"I would choose the $850 camper. It gives the best balance between comfort and cost. It already includes a bathroom and a small kitchen, so we can cook and shower without paying extra campground fees or eating out all the time. The four beds match what we realistically need for a family of four, so the two extra beds in the $1000 option are unnecessary for us. Also, saving $150 means more money for fuel, park passes, or activities. Compared with the $700 van, the $850 is move-in ready and avoids the risk of breakdowns or surprise repair bills. Finally, a mid-size van is easier to drive and park, and will likely use less fuel than a larger model. For those reasons, the $850 option is the most practical and cost-effective choice.","response_alternative":"I would pick the $1000 camper. Even though it costs more, the extra space and six beds give us flexibility for guests and more comfortable living on longer trips. More interior room means better storage, seating, and privacy, which makes the drive and evenings much more pleasant. If we split the cost among more people, the per-person premium is small compared with the added comfort. Compared with the $850 van, the larger model likely has higher-quality finishes and systems, reducing minor hassles on the road. While the $700 option is cheap, its lack of bathroom and kitchen and required repairs create real risks. For a relaxed, flexible trip, the $1000 van is worth the extra investment.","brainstorm_alternative":[{"title":"Space and flexibility","description":"Argue that six beds allow hosting friends or accommodating larger families, making the $1000 van more versatile."},{"title":"Comfort on long trips","description":"Point out that the larger interior gives more living space, storage, and privacy for longer journeys."},{"title":"Value per person","description":"Explain that if you split the cost among more people, the per-person price difference becomes minimal and worth the upgrade."},{"title":"Higher build quality","description":"Suggest the fancier model may have better finishes and systems, reducing the chance of small annoyances on the road."},{"title":"Resale or future rental potential","description":"Note that a larger, well-equipped van could be easier to re-rent or sell later, so the up-front cost may pay off."}]}
+{"id":25884,"task_type":"difficult_situation","task_description":"You were invited by a friend on an expensive family trip but are expected to help with chores during the trip, and your sister objects because it should be family time. Explain how you would handle this conflict, what you would say, and why.","custom_id":"25884__difficult_situation","rephrased_task":"You were invited by a friend to join their expensive family trip, but the friend expects you to help with chores while you are there. Your sister objects, saying the trip should be family time. Explain how you would handle this conflict. Address the person directly, outline the problem, state your decision, and give clear reasons for it.","brainstorm":[{"title":"Clarify expectations with the host","description":"Ask the friend exactly what chores are expected, how many hours, and when, so you can make an informed decision and avoid surprises."},{"title":"Propose a clear compromise","description":"Offer to help for a limited, defined time each day or with specific tasks only, and reserve evenings and at least one full day for family time."},{"title":"Offer a financial or practical contribution","description":"If chores are significant, propose contributing extra money to hire local help or cover costs instead of doing all the work yourself."},{"title":"Prioritize family boundaries","description":"Explain to your sister you value family time and will decline or limit participation if the arrangement interferes with family priorities."},{"title":"Use a partial attendance option","description":"Suggest attending only part of the trip so you can spend important family moments at home while keeping the friendship intact."}],"vocabulary":["clarify expectations","set boundaries","compromise","family time","contribute financially","unpaid chores","limited commitment","respectful decline","partial attendance","hire help","avoid resentment","mutual agreement","clear schedule","fairness"],"response":"Hi Sarah, I know you feel this should be family time and I respect that. I was invited by a friend to join their family trip, but they mentioned they expect me to help with some chores while I\u2019m there. Here\u2019s how I would handle it. First I would talk to our friend and clarify exactly what chores they expect and when, so there are no surprises. Then I would propose a compromise: I can help with light tasks for a limited amount of time each day or cover one morning, but I would keep evenings and at least one full day free for family activities. If they won\u2019t agree to reasonable limits, I would either attend only part of the trip or decline so I can protect our family time. That way I stay fair to both sides and avoid bitterness later.","response_alternative":"Hi Mark, thanks for inviting me. I appreciate the offer, but I need to be honest: I\u2019m not comfortable committing to a paid family trip where I\u2019m expected to do unpaid chores for most of the time. If you need help, I\u2019m willing to do one short shift a day or contribute an additional amount so you can hire local help, but I can\u2019t be the default helper for the whole vacation. If that is not acceptable, I will have to decline and prioritize family time at home. I hope you understand; I want to keep our friendship intact without feeling taken advantage of.","brainstorm_alternative":[{"title":"Decline the invitation","description":"Politely refuse if the host insists on unpaid chores that turn the paid trip into work, emphasizing your need to protect family time."},{"title":"Negotiate a paid or limited role","description":"Ask the host to either compensate you or limit your duties to a short, clearly scheduled slot each day."},{"title":"Suggest hiring help","description":"Recommend the host hire local help for cleaning or cooking so you can join without being responsible for chores."},{"title":"Propose an alternative gathering","description":"Suggest a separate friend-only activity where helping is reasonable, and keep the family trip strictly family."}]}
+{"id":25884,"task_type":"expressing_opinions","task_description":"Do you think online shopping helps the environment or not? State your opinion and support it with reasons and examples.","custom_id":"25884__expressing_opinions","rephrased_task":"Do you think online shopping helps the environment or not? State your opinion and support it with reasons and examples.","brainstorm":[{"title":"Excess packaging","description":"Online orders often arrive with multiple boxes, plastic fillers and single-use materials, which increases landfill waste compared with buying in-store."},{"title":"Last-mile delivery emissions","description":"Individual home deliveries, especially same-day services, raise fuel use and emissions because drivers make many short stops rather than consolidated trips."},{"title":"High return rates","description":"Free and easy returns, especially for clothing, create extra transport and handling. Returned items may be reshipped, stored, or even thrown away."},{"title":"Warehouse energy and processing","description":"Large fulfillment centres consume substantial electricity for lighting, heating and cooling, and for automated sorting systems."},{"title":"Overconsumption driven by convenience","description":"Easy browsing and fast delivery encourage impulse buying, increasing the total number of items produced and shipped."}],"vocabulary":["carbon footprint","packaging waste","last-mile delivery","consolidated shipping","reverse logistics","fulfillment centre","return rate","delivery density","single-use plastics","inventory optimization","emissions per parcel","sustainable packaging","overconsumption","route optimization"],"response":"No, I do not think online shopping helps the environment overall. First, online orders generate a lot of packaging waste. Many items come wrapped in multiple boxes, plastic bags and filler material, and that adds up quickly when millions of parcels are shipped. Second, last-mile deliveries increase emissions. Same-day and individual home deliveries require vans to make many short stops, which is less fuel efficient than people combining errands. Third, return behaviour amplifies the problem. Clothing and shoes are often ordered in several sizes and many of those pieces are returned, requiring extra transport, restocking and sometimes disposal. For example, free return policies encourage multiple shipments for a single purchase, which multiplies the transport footprint. I acknowledge there are mitigations, such as consolidated delivery, reusable packaging and electric vans, but those solutions are not yet widespread enough. In conclusion, while online shopping can be convenient, as it currently operates it tends to increase waste and emissions unless companies and consumers adopt more sustainable practices.","response_alternative":"Yes, I think online shopping can help the environment overall, if done smartly. First, it reduces the number of personal car trips to stores. If one delivery truck replaces several customers driving to a mall, total vehicle kilometres can drop. Second, logistics allow for consolidated shipping and route optimization, which lowers emissions per parcel compared with many individuals each driving separately. Third, online retail can shrink the need for large physical stores, cutting heating, cooling and lighting energy use across many locations. Additionally, advanced inventory systems help reduce overstock and product waste. For instance, using data to match supply with demand prevents unnecessary production and disposal. There are downsides, like extra packaging and returns, but those can be managed with recyclable materials, parcel lockers and electric delivery fleets. Overall, with the right practices and infrastructure, online shopping has the potential to be greener than traditional retail.","brainstorm_alternative":[{"title":"Fewer individual car trips","description":"If customers avoid driving to stores and rely on consolidated deliveries, overall vehicle kilometres travelled can fall."},{"title":"Consolidated shipping efficiency","description":"Logistics companies can bundle many orders into a single truck route, lowering emissions per item compared with many separate shoppers driving."},{"title":"Smaller retail footprint","description":"Less demand for large brick-and-mortar stores can reduce energy use for heating, cooling and lighting retail space."},{"title":"Inventory optimization reduces waste","description":"Online retailers can use data to match supply to demand, lowering overstock and product waste compared with traditional retail."},{"title":"Cleaner delivery technologies","description":"Adoption of electric vans, cargo bikes and parcel lockers can cut last-mile emissions substantially."}]}
+{"id":25884,"task_type":"unusual_situation","task_description":"Call a friend who works at another shop to report an unusual incident across the street: a man is standing near a coffee machine and has spilled coffee all over the floor and appears unsure what to do; describe what happened, its effects, and what you would do or recommend.","custom_id":"25884__unusual_situation","rephrased_task":"Call a friend who works at another shop and report an unusual incident across the street: a man is standing by a coffee machine and has spilled coffee all over the floor and appears unsure what to do. Describe what happened, the effects of the spill, and what you would do or recommend.","brainstorm":[{"title":"Give a clear opening","description":"Start by saying who you are and exactly where you are standing so your friend knows which location you mean."},{"title":"Describe the spill precisely","description":"Mention the size of the puddle, whether the coffee looks hot (steam), if the machine is still leaking, and any stained mats or furniture."},{"title":"Explain immediate effects","description":"Point out slip hazards, customers avoiding the area, possible burns, and any electrical risk from the machine."},{"title":"Recommend quick actions","description":"Suggest putting up a wet floor sign, mopping or soaking up the spill, unplugging the machine if it is leaking, and calling maintenance if needed."},{"title":"Offer help and follow up","description":"Offer to stay and assist, fetch cleaning supplies, or call a supervisor; ask your friend to call back with instructions."}],"vocabulary":["spill","puddle","steam","wet floor","mop","paper towels","wet floor sign","slip hazard","barista","coffee machine","drip tray","stain","electrical hazard","absorbent cloth"],"response":"Hi Sam, it\u2019s Alex. I\u2019m calling from across the street at the little coffee place next door. Something unusual just happened \u2014 a man at the self-serve coffee machine has knocked over his cup and there\u2019s a large puddle of coffee spreading across the tiled floor. He\u2019s just standing there holding a napkin, looking unsure what to do, and steam is still coming off the spill so it looks hot. Customers are stepping around it and someone nearly slipped, so it\u2019s a real slip hazard. The spill has soaked into the floor mat and stained the grout a bit. I would recommend putting up a wet floor sign, getting paper towels and a mop to soak up the mess, and unplugging the machine if it\u2019s leaking. I can wait and help if you want me to. Okay, let me know. Bye.","response_alternative":null,"brainstorm_alternative":null}
+{"id":25880,"task_type":"giving_advice","task_description":"Your friend is starting a new job teaching a 12-year-old; give practical advice on how to teach the child effectively and explain why.","custom_id":"25880__giving_advice","rephrased_task":"Your friend is starting a new job teaching a twelve-year-old student. Give practical advice on how to teach the child effectively and explain why each suggestion will help.","brainstorm":[{"title":"Build rapport and set routines","description":"Start with a friendly icebreaker and establish clear daily routines so the student feels safe and knows what to expect; for example, a five-minute check-in and a visible daily agenda."},{"title":"Chunk lessons and set clear objectives","description":"Break lessons into short, focused segments with one clear goal each time so the child stays focused; for instance, two 15-minute activities instead of one long lecture."},{"title":"Use active, hands-on learning","description":"Include games, projects, or pair work to make abstract ideas concrete, such as a small experiment or role-play to practise skills."},{"title":"Differentiate instruction","description":"Adjust tasks by difficulty, allow choices, or provide scaffolds so the student can work at an appropriate level, for example offering extension questions and simplified prompts."},{"title":"Give frequent feedback and check understanding","description":"Use quick formative checks like exit tickets or thumbs-up responses and give specific praise to build confidence and guide your next lesson."}],"vocabulary":["build rapport","daily routines","learning objectives","chunking","scaffolding","differentiation","formative assessment","exit ticket","active learning","positive reinforcement","engagement strategies","behaviour expectations"],"response":"If I were you, start by building rapport and setting simple routines. Spend the first few minutes of each class on a quick check-in and display a visible agenda so the student knows what to expect; that reduces anxiety and helps them focus. Another thing you could do is chunk your lessons and make each segment have one clear objective. For a twelve-year-old, attention wanes quickly, so try two or three short activities with a summary at the end rather than a long lecture. Another thing you could do is use active, hands-on learning. Games, short projects, or pair work make abstract ideas concrete and increase motivation\u2014for example, use a mini experiment or a role-play to practise a skill. One more thing is to differentiate and scaffold tasks. Offer simpler prompts or extra hints when needed, and enrichment questions for when the student finishes early; this keeps the work appropriately challenging. One final thing is to check understanding often and give specific, positive feedback, like a quick exit ticket or targeted praise, so you can adjust lessons and build the student\u2019s confidence. Good luck\u2014consistent structure and engaging tasks will make your first weeks much smoother.","response_alternative":null,"brainstorm_alternative":null}
+{"id":25880,"task_type":"personal_experience","task_description":"Describe your first encounter with a pet: where it happened, what occurred, and how you felt.","custom_id":"25880__personal_experience","rephrased_task":"Describe the first time you encountered a pet. Say where it happened, what occurred during the encounter, and how you felt.","brainstorm":[{"title":"Grandparent's pet","description":"A calm, welcoming animal at a relative's home \u2014 describe the setting, a small interaction like a lick or wag, and the feeling of warmth and curiosity."},{"title":"Stray rescued","description":"Finding a stray on the street or in a park, coaxing it with food, then calling a shelter or taking it home; emphasize surprise, compassion, and responsibility."},{"title":"Shelter visit","description":"First time inside an animal shelter, meeting many animals and connecting with one; highlight sensory details and the decision to adopt or foster."},{"title":"Friend's playful pet","description":"Visiting a friend and being introduced to their energetic dog or cat; focus on playful moments and initial nerves turning into laughter."},{"title":"Childhood classroom pet","description":"School hamster or class rabbit brought into class; describe the group interaction, holding the pet, and feeling responsible or proud."},{"title":"Unexpected encounter in nature","description":"Coming across a curious animal while hiking \u2014 a squirrel or duck \u2014 and the brief, surprising connection that left a strong impression."}],"vocabulary":["adopt","shelter","wagging tail","purring","timid","coax","curl up","bonded","leash","affectionate","groom","responsibility","nostalgic","belly rub"],"response":"My first encounter with a pet happened when I was seven at my grandparents\u2019 house. They had an old golden retriever who was always napping by the back door. I opened the door and felt a warm nose press against my hand, then he gave me a gentle, slobbery lick. At first I was nervous because I had never been close to a dog, but his calm eyes and slow tail wag made me relax. My grandmother showed me how to stroke him along his shoulders and offered him a piece of toast, which he eagerly accepted. He rolled onto his back for a belly rub and I laughed so hard I forgot to be scared. That small, affectionate welcome made me want a dog of my own and left me with a lasting sense of comfort and companionship.","response_alternative":null,"brainstorm_alternative":null}
+{"id":25880,"task_type":"describing_scene","task_description":"This is an image of a busy park where people are playing, picnicking, and enjoying leisure activities, including someone playing with a dog, a girl practicing football tricks, and a person painting on a canvas.","custom_id":"25880__describing_scene","rephrased_task":"Describe what is happening in this illustration of a busy park. Include clear details about people playing, picnicking, someone playing with a dog, a girl practising football tricks, and a person painting on a canvas so the listener can picture the scene.","brainstorm":[{"title":"Overall setting","description":"Start with the time of day and general mood \u2014 sunny afternoon, lively but relaxed, with a wide grassy area and trees."},{"title":"Picnic groups","description":"Describe blankets, people sitting or reclining, sharing food, a cooler or picnic basket, and small children nearby."},{"title":"Dog and owner","description":"Portray the dog running or leaping to fetch a ball or frisbee and the owner throwing or calling, showing interaction and motion."},{"title":"Girl practising football tricks","description":"Mention the girl juggling or doing step-overs, focused expression, occasional applause or glances from passersby."},{"title":"Person painting","description":"Describe an easel, palette and brushstrokes, the painter sitting or standing under a tree, concentrating on a canvas."},{"title":"Background activity","description":"Add details like children on a playground, cyclists passing, benches with people reading, and trees or a small pond to complete the scene."}],"vocabulary":["picnic blanket","easel","palette","brushstrokes","juggling the ball","step-overs","fetch","leash","grassy lawn","sunlit","passersby","playground"],"response":"This is a lively park on a sunny afternoon, filled with people enjoying free time. In the foreground a family is sitting on a picnic blanket, sharing food from a basket while a couple of small children play nearby. To the left, someone is playing with a medium-sized dog, calling and throwing a ball so the dog runs and bounds after it. A few metres away a teenage girl is practising football tricks, rhythmically juggling the ball and doing quick step-overs while a couple of people watch from a nearby bench. Nearby under a tree an artist has set up an easel and is painting on canvas, carefully applying brushstrokes as they study the scene. In the background there are cyclists and children on a playground, which gives the whole park a relaxed, active atmosphere.","response_alternative":"I think a few things are likely to happen next. The dog will probably retrieve the ball a few more times and then flop down to rest, while the owner chats with someone on the blanket. The girl practising football tricks may pull off a neat move and get a small round of applause from the onlookers, which will encourage her to keep practising. The painter will likely step back to inspect the canvas, add a few final touches and then clean the brush. Nearby, children on the playground will change games or run toward their parents when it\u2019s time to leave, and one of the picnic groups might take out a camera or phone to capture a photo of the sunny afternoon.","brainstorm_alternative":null}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "speaking-ideas-astro",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "check": "astro check"
+  },
+  "dependencies": {
+    "astro": "^4.10.0"
+  }
+}

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference path="../.astro/types.d.ts" />

src/layouts/BaseLayout.astro

@@ -0,0 +1,16 @@
+---
+import '../styles/global.css';
+const { title = 'Speaking Practice Browser', description = 'Browse speaking and writing practice prompts with brainstorming help.' } = Astro.props;
+---
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

src/pages/index.astro

@@ -0,0 +1,448 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { loadSpeakingData, loadWritingData } from '../utils/loadData';
+
+const ITEMS_PER_PAGE = 5;
+
+const SPEAKING_TASK_MAPPING: Record<string, [number, string]> = {
+  giving_advice: [1, 'Giving Advice'],
+  personal_experience: [2, 'Talking About A Personal Experience'],
+  describing_scene: [3, 'Describing A Scene'],
+  making_predictions: [4, 'Making Predictions'],
+  comparing_persuading: [5, 'Comparing And Persuading'],
+  difficult_situation: [6, 'Dealing With A Difficult Situation'],
+  expressing_opinions: [7, 'Expressing Opinions'],
+};
+
+const WRITING_TASK_MAPPING: Record<string, [number, string]> = {
+  writing_email: [1, 'Writing An Email'],
+  responding_survey: [2, 'Responding To Survey Questions'],
+};
+
+const [speakingRecords, writingRecords] = await Promise.all([
+  loadSpeakingData(),
+  loadWritingData(),
+]);
+
+const recordsByCategory: Record<string, any[]> = {
+  Speaking: speakingRecords,
+  Writing: writingRecords,
+};
+
+const categories = [
+  { id: 'Speaking', label: 'Speaking', mapping: SPEAKING_TASK_MAPPING, records: speakingRecords },
+  { id: 'Writing', label: 'Writing', mapping: WRITING_TASK_MAPPING, records: writingRecords },
+];
+
+const availableCategories = categories.filter((category) => category.records.length > 0);
+const defaultCategory = (availableCategories[0] ?? categories[0]).id;
+const defaultRecords = recordsByCategory[defaultCategory] ?? [];
+
+const totalItems = defaultRecords.length;
+const totalPages = totalItems > 0 ? Math.ceil(totalItems / ITEMS_PER_PAGE) : 0;
+const firstPageRecords = totalItems > 0 ? defaultRecords.slice(0, ITEMS_PER_PAGE) : [];
+
+const escapeHtml = (value: string | undefined | null) =>
+  String(value ?? '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+const formatMultiline = (value: string | undefined | null) =>
+  escapeHtml(value).replace(/\n/g, '<br />');
+
+const renderIdeas = (ideas: any[] | undefined | null) => {
+  if (!ideas || ideas.length === 0) return '';
+  const items = ideas
+    .map((idea) => {
+      const title = escapeHtml(idea?.title ?? 'Idea');
+      const description = escapeHtml(idea?.description ?? '');
+      return `<li><strong>${title}:</strong> ${description}</li>`;
+    })
+    .join('');
+  return `<ul>${items}</ul>`;
+};
+
+const renderVocabulary = (words: string[] | undefined | null) => {
+  if (!words || words.length === 0) return '';
+  const items = words.map((word) => `<li>${escapeHtml(word)}</li>`).join('');
+  return `<ul>${items}</ul>`;
+};
+
+const buildCard = (record: Record<string, any>) => {
+  const recordId = record?.id ?? 'N/A';
+  const taskType = escapeHtml((record?.task_type ?? '').replace(/_/g, ' ')).replace(/\b\w/g, (char) => char.toUpperCase());
+
+  const sections: string[] = [];
+
+  if (record?.rephrased_task) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Description</h4>
+        <p>${formatMultiline(record.rephrased_task)}</p>
+      </section>
+    `);
+  }
+
+  if (record?.brainstorm) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Brainstorming Ideas</h4>
+        ${renderIdeas(record.brainstorm)}
+      </section>
+    `);
+  }
+
+  if (record?.brainstorm_alternative) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Alternative Ideas</h4>
+        ${renderIdeas(record.brainstorm_alternative)}
+      </section>
+    `);
+  }
+
+  if (record?.vocabulary) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Vocabulary</h4>
+        ${renderVocabulary(record.vocabulary)}
+      </section>
+    `);
+  }
+
+  if (record?.response) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Sample Response</h4>
+        <p>${formatMultiline(record.response)}</p>
+      </section>
+    `);
+  }
+
+  if (record?.response_alternative) {
+    sections.push(`
+      <section class="card-section">
+        <h4>Alternative Response</h4>
+        <p>${formatMultiline(record.response_alternative)}</p>
+      </section>
+    `);
+  }
+
+  return `
+    <article class="card">
+      <h3>Task ${recordId} - ${taskType}</h3>
+      ${sections.join('\n')}
+    </article>
+  `;
+};
+
+const initialCardsHtml = firstPageRecords.map(buildCard).join('');
+
+const initialSummary = totalItems === 0
+  ? 'No records available yet for this category.'
+  : `Showing 1-${Math.min(ITEMS_PER_PAGE, totalItems)} of ${totalItems} records | Page 1 of ${totalPages}`;
+
+const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPages}`;
+---
+
+<BaseLayout title="Speaking Practice Browser">
+  <main>
+    <header class="app-header">
+      <h1>Speaking Practice Browser</h1>
+      <p>
+        Browse CELPIP-style speaking and writing tasks with brainstorming prompts, curated vocabulary, and
+        sample responses. Use the filters to find exactly the practice you need.
+      </p>
+    </header>
+
+    <section class="control-panel" aria-label="Filters and options">
+      <h2>Filters & Options</h2>
+
+      <div class="field">
+        <span class="field-label">Category</span>
+        <div class="radio-group" role="radiogroup" aria-label="Category selector">
+          {categories.map((category) => (
+            <label class="radio-pill">
+              <input
+                type="radio"
+                name="category"
+                value={category.id}
+                checked={category.id === defaultCategory}
+              />
+              <span>{category.label}</span>
+            </label>
+          ))}
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="field-label" for="task-filter">Task Type</label>
+        <select id="task-filter">
+          <option value="all">All Tasks</option>
+          {(Object.entries(categories.find((c) => c.id === defaultCategory)?.mapping ?? {})).map(([taskId, [num, name]]) => (
+            <option value={taskId}>Task {num} - {name}</option>
+          ))}
+        </select>
+      </div>
+    </section>
+
+    <section class="content-area" aria-live="polite">
+      <p class="summary" id="summary-text">{initialSummary}</p>
+      <div class="cards" id="cards-container" set:html={initialCardsHtml}></div>
+    </section>
+
+    <nav class="pagination-panel" aria-label="Pagination controls">
+      <button id="prev-btn" type="button">Previous</button>
+      <div class="page-info" id="page-info">{initialPageInfo}</div>
+      <button id="next-btn" type="button">Next</button>
+    </nav>
+  </main>
+
+  <script define:vars={{ speakingRecords, writingRecords, defaultCategory }} type="module">
+    // Data embedded directly from server
+    const appData = {
+      records: {
+        Speaking: speakingRecords,
+        Writing: writingRecords
+      },
+      taskMappings: {
+        Speaking: [
+          {id: 'giving_advice', number: 1, label: 'Giving Advice', display: 'Task 1 - Giving Advice'},
+          {id: 'personal_experience', number: 2, label: 'Talking About A Personal Experience', display: 'Task 2 - Talking About A Personal Experience'},
+          {id: 'describing_scene', number: 3, label: 'Describing A Scene', display: 'Task 3 - Describing A Scene'},
+          {id: 'making_predictions', number: 4, label: 'Making Predictions', display: 'Task 4 - Making Predictions'},
+          {id: 'comparing_persuading', number: 5, label: 'Comparing And Persuading', display: 'Task 5 - Comparing And Persuading'},
+          {id: 'difficult_situation', number: 6, label: 'Dealing With A Difficult Situation', display: 'Task 6 - Dealing With A Difficult Situation'},
+          {id: 'expressing_opinions', number: 7, label: 'Expressing Opinions', display: 'Task 7 - Expressing Opinions'}
+        ],
+        Writing: [
+          {id: 'writing_email', number: 1, label: 'Writing An Email', display: 'Task 1 - Writing An Email'},
+          {id: 'responding_survey', number: 2, label: 'Responding To Survey Questions', display: 'Task 2 - Responding To Survey Questions'}
+        ]
+      },
+      categories: [
+        {id: 'Speaking', label: 'Speaking'},
+        {id: 'Writing', label: 'Writing'}
+      ],
+      itemsPerPage: 5,
+      defaultCategory: defaultCategory
+    };
+
+    const state = {
+      category: appData.defaultCategory,
+      taskType: 'all',
+      page: 0,
+      totalPages: 0
+    };
+
+    const recordsByCategory = appData.records;
+    const taskMappings = appData.taskMappings;
+    const itemsPerPage = appData.itemsPerPage;
+
+    const cardsContainer = document.getElementById('cards-container');
+    const summaryText = document.getElementById('summary-text');
+    const pageInfo = document.getElementById('page-info');
+    const prevBtn = document.getElementById('prev-btn');
+    const nextBtn = document.getElementById('next-btn');
+    const taskFilter = document.getElementById('task-filter');
+    const categoryInputs = Array.from(document.querySelectorAll('input[name="category"]'));
+
+    const escapeHtml = (value) =>
+      String(value ?? '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+    const formatMultiline = (value) => escapeHtml(value).replace(/\n/g, '<br />');
+
+    const renderList = (items, formatter) => {
+      if (!items || items.length === 0) return '';
+      return `<ul>${items.map(formatter).join('')}</ul>`;
+    };
+
+    const buildCard = (record) => {
+      const recordId = record?.id ?? 'N/A';
+      const taskType = escapeHtml(String(record?.task_type ?? ''))
+        .replace(/_/g, ' ')
+        .replace(/\b\w/g, (char) => char.toUpperCase());
+
+      const sections = [];
+
+      if (record?.rephrased_task) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Description</h4>
+            <p>${formatMultiline(record.rephrased_task)}</p>
+          </section>
+        `);
+      }
+
+      if (Array.isArray(record?.brainstorm) && record.brainstorm.length) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Brainstorming Ideas</h4>
+            ${renderList(record.brainstorm, (idea) => {
+              const title = escapeHtml(idea?.title ?? 'Idea');
+              const description = escapeHtml(idea?.description ?? '');
+              return `<li><strong>${title}:</strong> ${description}</li>`;
+            })}
+          </section>
+        `);
+      }
+
+      if (Array.isArray(record?.brainstorm_alternative) && record.brainstorm_alternative.length) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Alternative Ideas</h4>
+            ${renderList(record.brainstorm_alternative, (idea) => {
+              const title = escapeHtml(idea?.title ?? 'Idea');
+              const description = escapeHtml(idea?.description ?? '');
+              return `<li><strong>${title}:</strong> ${description}</li>`;
+            })}
+          </section>
+        `);
+      }
+
+      if (Array.isArray(record?.vocabulary) && record.vocabulary.length) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Vocabulary</h4>
+            ${renderList(record.vocabulary, (word) => `<li>${escapeHtml(word)}</li>`)}
+          </section>
+        `);
+      }
+
+      if (record?.response) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Sample Response</h4>
+            <p>${formatMultiline(record.response)}</p>
+          </section>
+        `);
+      }
+
+      if (record?.response_alternative) {
+        sections.push(`
+          <section class="card-section">
+            <h4>Alternative Response</h4>
+            <p>${formatMultiline(record.response_alternative)}</p>
+          </section>
+        `);
+      }
+
+      return `
+        <article class="card">
+          <h3>Task ${recordId} - ${taskType}</h3>
+          ${sections.join('\n')}
+        </article>
+      `;
+    };
+
+    const applyState = () => {
+      const allRecords = recordsByCategory[state.category] ?? [];
+      const filtered = state.taskType === 'all'
+        ? allRecords
+        : allRecords.filter((item) => item?.task_type === state.taskType);
+
+      const totalItems = filtered.length;
+      state.totalPages = totalItems === 0 ? 0 : Math.ceil(totalItems / itemsPerPage);
+      state.page = Math.min(state.page, Math.max(state.totalPages - 1, 0));
+
+      const start = state.page * itemsPerPage;
+      const end = start + itemsPerPage;
+      const pageItems = filtered.slice(start, end);
+
+      if (cardsContainer) {
+        cardsContainer.innerHTML = pageItems.map(buildCard).join('');
+      }
+
+      if (totalItems === 0) {
+        const hasRecordsInCategory = allRecords.length > 0;
+        if (summaryText) {
+          if (hasRecordsInCategory) {
+            summaryText.textContent = 'No records found for the selected task type.';
+          } else {
+            if (state.category === 'Writing') {
+              summaryText.textContent = 'No writing tasks available yet. Writing data will be displayed here when available.';
+            } else {
+              summaryText.textContent = 'No records available for this category.';
+            }
+          }
+        }
+        if (pageInfo) pageInfo.textContent = 'Page 0 of 0';
+      } else {
+        const startNum = start + 1;
+        const endNum = Math.min(end, totalItems);
+        if (summaryText) summaryText.textContent = `Showing ${startNum}-${endNum} of ${totalItems} records | Page ${state.page + 1} of ${state.totalPages}`;
+        if (pageInfo) pageInfo.textContent = `Page ${state.page + 1} of ${state.totalPages}`;
+      }
+
+      if (prevBtn) prevBtn.disabled = state.page <= 0;
+      if (nextBtn) nextBtn.disabled = state.totalPages === 0 || state.page >= state.totalPages - 1;
+    };
+
+    const updateTaskOptions = () => {
+      const options = taskMappings[state.category] ?? [];
+      if (!taskFilter) return;
+
+      const currentValue = taskFilter.value;
+      taskFilter.innerHTML = '<option value="all">All Tasks</option>' +
+        options
+          .map((task) => `<option value="${task.id}">${task.display}</option>`)
+          .join('');
+
+      const hasRecords = (recordsByCategory[state.category] ?? []).length > 0;
+
+      if (hasRecords && options.some((task) => task.id === currentValue)) {
+        taskFilter.value = currentValue;
+      } else {
+        taskFilter.value = 'all';
+        state.taskType = 'all';
+      }
+
+      taskFilter.disabled = !hasRecords;
+    };
+
+    // Initialize
+    updateTaskOptions();
+    applyState();
+
+    // Event listeners
+    categoryInputs.forEach((input) => {
+      input.addEventListener('change', (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLInputElement)) return;
+        state.category = target.value;
+        state.page = 0;
+        state.taskType = 'all';
+        updateTaskOptions();
+        applyState();
+      });
+    });
+
+    if (taskFilter) {
+      taskFilter.addEventListener('change', (event) => {
+        const target = event.target;
+        if (!(target instanceof HTMLSelectElement)) return;
+        state.taskType = target.value;
+        state.page = 0;
+        applyState();
+      });
+    }
+
+    if (prevBtn) {
+      prevBtn.addEventListener('click', () => {
+        state.page = Math.max(0, state.page - 1);
+        applyState();
+      });
+    }
+
+    if (nextBtn) {
+      nextBtn.addEventListener('click', () => {
+        state.page = Math.min(state.totalPages - 1, state.page + 1);
+        applyState();
+      });
+    }
+  </script>
+</BaseLayout>

src/styles/global.css

@@ -0,0 +1,270 @@
+:root {
+  color-scheme: dark;
+  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  background-color: #0d1117;
+  color: #f0f6fc;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: radial-gradient(circle at top, rgba(88, 166, 255, 0.08), transparent 55%), #0d1117;
+}
+
+main {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: clamp(16px, 5vw, 40px);
+}
+
+h1,
+h2,
+h3,
+h4 {
+  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+  color: #f0f6fc;
+  margin: 0;
+}
+
+p {
+  margin: 0;
+  color: #c9d1d9;
+}
+
+.app-header {
+  margin-bottom: clamp(24px, 5vw, 40px);
+}
+
+.app-header h1 {
+  font-size: clamp(1.75rem, 3vw, 2.25rem);
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.app-header h1 span {
+  font-size: 1.8rem;
+}
+
+.app-header p {
+  margin-top: 10px;
+  max-width: 640px;
+  line-height: 1.7;
+}
+
+.control-panel,
+.pagination-panel {
+  background: rgba(22, 27, 34, 0.92);
+  border: 1px solid #30363d;
+  border-radius: 14px;
+  padding: clamp(16px, 4vw, 24px);
+  margin-bottom: clamp(20px, 4vw, 32px);
+  box-shadow: 0 10px 30px rgba(2, 12, 27, 0.35);
+}
+
+.control-panel h2 {
+  font-size: 1.1rem;
+  margin-bottom: 16px;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 18px;
+}
+
+.field:last-of-type {
+  margin-bottom: 0;
+}
+
+.field-label {
+  font-weight: 600;
+  color: #9ebdf2;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+}
+
+.radio-group,
+.per-page-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.radio-pill input,
+.per-page-option input {
+  display: none;
+}
+
+.radio-pill span,
+.per-page-option span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 16px;
+  border-radius: 30px;
+  border: 1px solid #30363d;
+  background: rgba(15, 18, 25, 0.85);
+  color: #c9d1d9;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: border 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.radio-pill input:checked + span,
+.per-page-option input:checked + span {
+  border-color: #1f6feb;
+  color: #fff;
+  background: #1f6feb;
+  box-shadow: 0 6px 18px rgba(31, 111, 235, 0.28);
+}
+
+select,
+button,
+textarea {
+  font-family: inherit;
+}
+
+select {
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid #30363d;
+  background: rgba(15, 18, 25, 0.85);
+  color: #f0f6fc;
+  font-size: 0.95rem;
+}
+
+.cards {
+  display: grid;
+  gap: clamp(16px, 3vw, 24px);
+}
+
+.card {
+  border: 1px solid rgba(48, 54, 61, 0.85);
+  border-radius: 14px;
+  padding: clamp(18px, 3vw, 28px);
+  background: rgba(13, 17, 23, 0.92);
+  box-shadow: 0 18px 32px rgba(2, 12, 27, 0.45);
+}
+
+.card h3 {
+  font-size: 1.15rem;
+  color: #58a6ff;
+  margin-bottom: 14px;
+}
+
+.card-section {
+  border-top: 1px solid rgba(48, 54, 61, 0.7);
+  padding-top: 14px;
+  margin-top: 18px;
+}
+
+.card-section:first-of-type {
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.card-section h4 {
+  font-size: 0.95rem;
+  color: #79c0ff;
+  margin-bottom: 8px;
+}
+
+.card-section ul {
+  margin: 0;
+  padding-left: 20px;
+  color: #c9d1d9;
+}
+
+.card-section li {
+  margin-bottom: 6px;
+  line-height: 1.6;
+}
+
+.card-section p {
+  margin: 0;
+  line-height: 1.7;
+}
+
+.summary {
+  margin-bottom: clamp(16px, 3vw, 24px);
+  font-size: 0.95rem;
+  color: #9ebdf2;
+}
+
+.pagination-panel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.pagination-panel button {
+  flex: none;
+  border: 1px solid #30363d;
+  background: rgba(15, 18, 25, 0.9);
+  color: #f0f6fc;
+  padding: 10px 20px;
+  border-radius: 10px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.2s ease, border 0.2s ease;
+}
+
+.pagination-panel button:hover:not([disabled]) {
+  border-color: #1f6feb;
+  color: #fff;
+}
+
+.pagination-panel button[disabled] {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.page-info {
+  flex: 1;
+  text-align: center;
+  font-size: 0.95rem;
+  color: #c9d1d9;
+}
+
+@media (max-width: 720px) {
+  .pagination-panel {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .pagination-panel button {
+    width: 100%;
+  }
+
+  .page-info {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+@media (max-width: 540px) {
+  main {
+    padding: clamp(14px, 6vw, 28px);
+  }
+
+  .control-panel,
+  .pagination-panel {
+    padding: clamp(14px, 6vw, 20px);
+  }
+
+  .radio-group,
+  .per-page-group {
+    gap: 8px;
+  }
+
+  .radio-pill span,
+  .per-page-option span {
+    width: 100%;
+    justify-content: center;
+  }
+}

src/utils/loadData.ts

@@ -0,0 +1,32 @@
+import { readFile } from 'node:fs/promises';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+
+export type SpeakingRecord = Record<string, unknown> & {
+  id: number | string;
+  task_type: string;
+};
+
+const dataDir = fileURLToPath(new URL('../../data/', import.meta.url));
+
+async function loadJsonl<T = Record<string, unknown>>(fileName: string): Promise<T[]> {
+  const filePath = path.join(dataDir, fileName);
+  try {
+    const content = await readFile(filePath, 'utf-8');
+    return content
+      .split(/\r?\n/)
+      .filter((line) => line.trim().length > 0)
+      .map((line) => JSON.parse(line) as T);
+  } catch (error) {
+    console.warn(`Warning: unable to load ${fileName}.`, error instanceof Error ? error.message : error);
+    return [];
+  }
+}
+
+export async function loadSpeakingData(): Promise<SpeakingRecord[]> {
+  return loadJsonl<SpeakingRecord>('speaking.jsonl');
+}
+
+export async function loadWritingData(): Promise<SpeakingRecord[]> {
+  return loadJsonl<SpeakingRecord>('writing.jsonl');
+}

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}