chore: add Pencil wireframes and relocate design-system MASTER.md

[singyichen]

Summary

• Move design-system/MASTER.md up one level (from labelsuite/ subdirectory)
• Add Pencil wireframe files for login and dashboard pages (pencil/)

Test Plan

• Verify design-system/MASTER.md is accessible at the new path
• Verify pencil/index.pen and pencil/pages/login.pen open correctly in Windsurf Pencil

🤖 Generated with Claude Code

---

[qodo-code-review]

Review Summary by Qodo

Add Pencil wireframes for login and dashboard pages with bilingual support

✨ Enhancement

Walkthroughs

Description

• Add comprehensive Pencil wireframe files for Label Suite NLP annotation platform
• Create pencil/index.pen with login page designs supporting mobile and desktop viewports
• Add pencil/pages/login.pen with bilingual (Chinese/English) login page wireframes for both
  mobile (480x800px) and desktop (1440x900px) layouts
• Add pencil/pages/dashboard.pen with comprehensive dashboard wireframe featuring metrics cards,
  task management table, and recent submissions panel
• Implement consistent design system with color palette, typography (Inter font), Lucide icons, and
  spacing
• Include authentication UI components (Google and GitHub buttons), language toggle, and user
  profile controls

Diagram

flowchart LR
  A["Pencil Wireframes"] --> B["pencil/index.pen"]
  A --> C["pencil/pages/login.pen"]
  A --> D["pencil/pages/dashboard.pen"]
  B --> E["Login UI Components"]
  C --> F["Mobile & Desktop Layouts"]
  C --> G["Bilingual Support"]
  D --> H["Dashboard Metrics"]
  D --> I["Task Management UI"]

Loading

File Changes

1. pencil/pages/dashboard.pen ✨ Enhancement +2633/-0

Dashboard wireframe with metrics and task management UI

• Added comprehensive dashboard wireframe for Label Suite NLP annotation platform
• Includes both Chinese (ZH) and English (EN) language variants at 1440x960px desktop resolution
• Features navbar with logo, navigation links, user profile section, and language/logout controls
• Contains four metric cards displaying active tasks, submissions count, best score, and ranking
 information
• Includes active tasks table with task names, types, deadlines, and status badges
• Includes recent submissions panel showing task history with scores and dates

pencil/pages/dashboard.pen

---

2. pencil/pages/login.pen ✨ Enhancement +1201/-0

Login page wireframes for mobile and desktop layouts

• Added complete login page wireframe for Label Suite with mobile and desktop layouts
• Includes Chinese (ZH) and English (EN) language variants for both mobile (480x800px) and desktop
 (1440x900px)
• Features language toggle, logo, sign-in heading, and authentication buttons (Google and GitHub)
• Contains divider with "or" text and demo error state placeholder
• Includes terms of use disclaimer at bottom of each variant

pencil/pages/login.pen

---

3. pencil/index.pen ✨ Enhancement +1201/-0

Add Pencil wireframes for login page UI designs

• Added comprehensive Pencil wireframe file with login page designs for both mobile and desktop
 viewports
• Includes bilingual support with Chinese (ZH) and English (EN) language variants
• Defines UI components including language toggle, logo box, authentication buttons (Google and
 GitHub), and divider elements
• Implements consistent design system with color palette, typography (Inter font), and spacing using
 Lucide icons

pencil/index.pen

---

View more (1)

4. design-system/MASTER.md Additional files +0/-0

...

design-system/MASTER.md

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

1. Traditional Chinese in pencil/ ☑ 📘 Rule violation ⚙ Maintainability

Description

Traditional Chinese UI text is introduced in Pencil wireframe .pen files under pencil/, which is
outside the explicitly allowed locations (docs/, specs/, prototype/, README.zh-TW.md). This
violates the English-first requirement and can create audit/open-source readiness issues.

Code

pencil/index.pen[102]

+          "content": "NLP 標注平台",

Evidence

PR Compliance ID 1 restricts Traditional Chinese text to specific documentation/prototype locations;
the added .pen files under pencil/ include Traditional Chinese strings such as NLP 標注平台, 登入,
and 儀表板. These are newly added lines in this PR and are outside the allowed directories, so they
violate the rule.

CLAUDE.md
pencil/index.pen[102-102]
pencil/index.pen[132-132]
pencil/pages/login.pen[102-102]
pencil/pages/dashboard.pen[100-100]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Traditional Chinese strings were introduced in Pencil wireframe files under `pencil/`, which is not an allowed location for non-English primary text per the English-first repository rule.
## Issue Context
These files appear to be prototype/wireframe artifacts. Traditional Chinese is allowed only under `docs/`, `specs/`, `prototype/`, or `README.zh-TW.md`.
## Fix Focus Areas
- pencil/index.pen[1-1201]
- pencil/pages/login.pen[1-1201]
- pencil/pages/dashboard.pen[1-2633]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Duplicate wireframe source ☑ 🐞 Bug ⚙ Maintainability

Description

pencil/index.pen is an exact duplicate of pencil/pages/login.pen, creating two sources of truth
for the same wireframe that can easily drift and adds unnecessary repo bloat.

Code

pencil/index.pen[R1-40]

+{
+  "version": "2.9",
+  "children": [
+    {
+      "type": "frame",
+      "id": "hf9v7",
+      "x": 0,
+      "y": 0,
+      "name": "Login Page Mobile (ZH)",
+      "width": 480,
+      "height": 800,
+      "fill": "#F5F3FF",
+      "layout": "none",
+      "children": [
+        {
+          "type": "frame",
+          "id": "QzdBB",
+          "x": 356,
+          "y": 16,
+          "name": "langToggle",
+          "height": 28,
+          "fill": "#FFFFFF",
+          "cornerRadius": 999,
+          "stroke": {
+            "align": "inside",
+            "thickness": 1,
+            "fill": "#E2E8F0"
+          },
+          "gap": 6,
+          "padding": [
+            6,
+            12
+          ],
+          "alignItems": "center",
+          "children": [
+            {
+              "type": "icon_font",
+              "id": "djios",
+              "width": 14,
+              "height": 14,

Evidence

Both files contain identical JSON at the beginning and the end, indicating they are duplicates
rather than separate artifacts (e.g., an index referencing page files).

pencil/index.pen[1-40]
pencil/pages/login.pen[1-40]
pencil/index.pen[1178-1201]
pencil/pages/login.pen[1178-1201]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`pencil/index.pen` duplicates `pencil/pages/login.pen`, which creates two sources of truth for the login wireframe and increases maintenance overhead.
## Issue Context
Both files appear byte-for-byte identical (same structure and IDs) rather than serving distinct roles (e.g., an index file aggregating multiple pages).
## Fix Focus Areas
- pencil/index.pen[1-40]
- pencil/pages/login.pen[1-40]
## Suggested fix
Choose a single canonical location for the login wireframe:
- Either delete `pencil/index.pen` and treat `pencil/pages/login.pen` as the entry file, or
- Keep `pencil/index.pen` as the canonical file and remove `pencil/pages/login.pen`.
If `index.pen` is intended to be a project entry point, update it to include/point to all pages (e.g., dashboard + login) and keep per-page files only if they are actually needed by the tool/workflow.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more

[devin-ai-integration]

✅ Devin Review: No Issues Found

Devin Review analyzed this PR and found no potential bugs to report.

View in Devin Review to see 3 additional findings.