diff --git a/.gitignore b/.gitignore index 60893d7..7621503 100644 --- a/.gitignore +++ b/.gitignore @@ -13,3 +13,8 @@ pubspec.lock android/key.properties *.jks *.keystore +__pycache__/ +*.pyc +reference_ui/ +qa/**/*.apk +qa/**/*.zip diff --git a/README.md b/README.md index 051710d..22f40f3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,36 @@ -# MobileCode +

+ MobileCode app icon +

-MobileCode is an AI coding workspace designed for mobile devices. It combines voice input, screenshot-to-code, agentic development actions, cloud execution, previews, and GitHub workflows into a lightweight mobile-first product. +

MobileCode

+ +

+ 手机端 AI 编程工作台 / Mobile-first AI coding workspace. +

+ +

+ GitHub Pages + · + Release v0.1.0 + · + Roadmap + · + Capability Matrix +

+ +MobileCode is an AI coding workspace designed for mobile devices. The current repository includes a promotional site, a Flutter mobile app preview, a RuntimeManager/Helper runtime baseline, and release QA evidence; cloud execution and GitHub workflow automation are planned capabilities tracked in the governance docs. + +## Visual Preview + +The public visual assets are curated from `reference_ui/local_dialog_all_images_svgs_final_pack/` into `app/public/showcase/`. They are used as brand and promotional design references, not as a substitute for runtime APK screenshots. + +

+ MobileCode CodeLoong promotional poster +

+ +| Brand system | Wordmark | +|---|---| +| MobileCode CodeLoong brand identity sheet | MobileCode CodeLoong mascot wordmark | ## Repository Structure @@ -38,3 +68,20 @@ The iOS build requires macOS, Xcode, and valid signing credentials. Version `v0.1.0` publishes the product site, source preview, and a real Android APK built from `mobile_agent/lib/main.dart` through GitHub Actions. The iOS build still requires macOS, Xcode, and signing credentials. + +## Governance + +- [Roadmap](roadmp.md) — task index and execution order. +- [Capability Matrix](docs/mobilecode-capability-matrix.md) — what works today, what is blocked, what is coming. +- [Risk Register](docs/mobilecode-risk-register.md) — known risks, mitigations, and stop lines. +- [Security Model](docs/mobilecode-security-model.md) — trust boundaries, token policy, workspace policy, command policy. +- [Release QA](docs/mobilecode-release-qa.md) — CI gates, manual verification, artifact download paths. +- [Version Policy](docs/mobilecode-version-policy.md) — version numbering and stop rules. +- [UI Showcase Assets](docs/mobilecode-ui-showcase-assets.md) — curated README/GitHub Pages visual asset index. +- [T00-T23 Closure](docs/mobilecode-t00-t23-closure.md) — first roadmap tranche closure evidence and residual risks. + +## Contributing + +- [Contributor Onboarding](docs/mobilecode-contributor-onboarding.md) — setup, constraints, and how to get started. +- [Good First Issues](docs/mobilecode-good-first-issues.md) — starter tasks for new contributors. +- [Issue Templates](.github/ISSUE_TEMPLATE/) — bug, feature, runtime bug, GitRuntime bug, release blocker, docs feedback. diff --git a/app/public/showcase/codeloong-state-coding-heat.png b/app/public/showcase/codeloong-state-coding-heat.png new file mode 100644 index 0000000..398fb67 Binary files /dev/null and b/app/public/showcase/codeloong-state-coding-heat.png differ diff --git a/app/public/showcase/codeloong-state-loading.png b/app/public/showcase/codeloong-state-loading.png new file mode 100644 index 0000000..3a74de0 Binary files /dev/null and b/app/public/showcase/codeloong-state-loading.png differ diff --git a/app/public/showcase/codeloong-state-thinking.png b/app/public/showcase/codeloong-state-thinking.png new file mode 100644 index 0000000..bf759c8 Binary files /dev/null and b/app/public/showcase/codeloong-state-thinking.png differ diff --git a/app/public/showcase/mobilecode-brand-identity-sheet.png b/app/public/showcase/mobilecode-brand-identity-sheet.png new file mode 100644 index 0000000..fd45961 Binary files /dev/null and b/app/public/showcase/mobilecode-brand-identity-sheet.png differ diff --git a/app/public/showcase/mobilecode-code-with-your-buddy.png b/app/public/showcase/mobilecode-code-with-your-buddy.png new file mode 100644 index 0000000..6491195 Binary files /dev/null and b/app/public/showcase/mobilecode-code-with-your-buddy.png differ diff --git a/app/public/showcase/mobilecode-icon-v2.png b/app/public/showcase/mobilecode-icon-v2.png new file mode 100644 index 0000000..84c4f2d Binary files /dev/null and b/app/public/showcase/mobilecode-icon-v2.png differ diff --git a/app/public/showcase/mobilecode-icon-v2.svg b/app/public/showcase/mobilecode-icon-v2.svg new file mode 100644 index 0000000..517d38b --- /dev/null +++ b/app/public/showcase/mobilecode-icon-v2.svg @@ -0,0 +1,197 @@ + + MobileCode app icon v2 + Rounded app icon with MobileCode otter mascot, hot phone, and Harness On Phone text. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + // + + + + + + + + + + + + + HARNESS + ON PHONE + + mobile-vibe coding + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/public/showcase/mobilecode-logo-v2-mobile-vibe.png b/app/public/showcase/mobilecode-logo-v2-mobile-vibe.png new file mode 100644 index 0000000..dc7dc9d Binary files /dev/null and b/app/public/showcase/mobilecode-logo-v2-mobile-vibe.png differ diff --git a/app/public/showcase/mobilecode-logo-v2-mobile-vibe.svg b/app/public/showcase/mobilecode-logo-v2-mobile-vibe.svg new file mode 100644 index 0000000..cde88ac --- /dev/null +++ b/app/public/showcase/mobilecode-logo-v2-mobile-vibe.svg @@ -0,0 +1,212 @@ + + MobileCode horizontal logo v2 mobile-vibe coding variant + MobileCode horizontal logo variant with phone back text Mobile-Vibe Coding. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + // + + + + + + + + + + + + + MOBILE-VIBE + CODING + + mobile-vibe coding + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + mobilecode + + + + 让手机发烧的何止是游戏， + 还有写的每一行代码！ + + + + HARNESS ON PHONE + + MOBILE-VIBE CODING + + + diff --git a/app/public/showcase/mobilecode-logo-v2.png b/app/public/showcase/mobilecode-logo-v2.png new file mode 100644 index 0000000..8213c5c Binary files /dev/null and b/app/public/showcase/mobilecode-logo-v2.png differ diff --git a/app/public/showcase/mobilecode-logo-v2.svg b/app/public/showcase/mobilecode-logo-v2.svg new file mode 100644 index 0000000..c11b1de --- /dev/null +++ b/app/public/showcase/mobilecode-logo-v2.svg @@ -0,0 +1,213 @@ + + MobileCode horizontal logo v2 + Horizontal MobileCode logo with detailed mascot, hot phone, and Chinese slogan. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + // + + + + + + + + + + + + + HARNESS + ON PHONE + + mobile-vibe coding + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + mobilecode + + + + + 让手机发烧的何止是游戏， + 还有写的每一行代码！ + + + + HARNESS ON PHONE + + MOBILE-VIBE CODING + + + diff --git a/app/public/showcase/mobilecode-mascot-v2.svg b/app/public/showcase/mobilecode-mascot-v2.svg new file mode 100644 index 0000000..1bb46ce --- /dev/null +++ b/app/public/showcase/mobilecode-mascot-v2.svg @@ -0,0 +1,197 @@ + + MobileCode super cute mascot v2 + A detailed otter-like mascot holding a hot coding phone whose back says Harness On Phone. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { } + // + + + + + + + + + + + + + HARNESS + ON PHONE + + mobile-vibe coding + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 让手机发烧的何止是游戏 + 还有写的每一行代码！ + + diff --git a/app/public/showcase/mobilecode-mascot-wordmark.png b/app/public/showcase/mobilecode-mascot-wordmark.png new file mode 100644 index 0000000..4de2413 Binary files /dev/null and b/app/public/showcase/mobilecode-mascot-wordmark.png differ diff --git a/app/src/index.css b/app/src/index.css index 8cd695a..f6b795b 100644 --- a/app/src/index.css +++ b/app/src/index.css @@ -528,6 +528,84 @@ select { grid-template-columns: repeat(4, 1fr); } +.showcase-section { + overflow: hidden; +} + +.showcase-feature-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 16px; + margin-top: 36px; +} + +.showcase-feature-card, +.showcase-tile { + overflow: hidden; + border: 1px solid var(--line); + border-radius: 8px; + background: var(--surface); + box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24); +} + +.showcase-feature-card { + display: grid; + grid-template-rows: minmax(0, auto) 1fr; +} + +.showcase-feature-card img, +.showcase-tile img { + display: block; + width: 100%; + background: #f7fbff; + object-fit: contain; +} + +.showcase-feature-card img { + aspect-ratio: 4 / 5; +} + +.showcase-feature-card div { + padding: 22px; +} + +.showcase-feature-card h3, +.showcase-tile span { + margin: 0; + color: #ffffff; + font-weight: 900; +} + +.showcase-feature-card p { + margin: 10px 0 0; + color: var(--muted); + line-height: 1.65; +} + +.showcase-wall { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 14px; + margin-top: 16px; +} + +.showcase-tile { + display: grid; + grid-template-rows: minmax(160px, auto) auto; +} + +.showcase-tile img { + height: 190px; + padding: 16px; +} + +.showcase-tile span { + display: block; + padding: 14px 16px 16px; + color: var(--mint); + font-size: 0.92rem; +} + .layer-strip { display: flex; flex-wrap: wrap; @@ -741,6 +819,7 @@ select { .demo-grid, .capability-grid, .feature-grid, + .showcase-feature-grid, .pricing-grid, .metric-grid, .split, @@ -753,6 +832,10 @@ select { grid-template-columns: 1fr; } + .showcase-wall { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .hero { padding-top: 104px; } @@ -789,4 +872,12 @@ select { .page-section { padding: 72px 0; } + + .showcase-wall { + grid-template-columns: 1fr; + } + + .showcase-tile img { + height: 220px; + } } diff --git a/app/src/pages/Home.tsx b/app/src/pages/Home.tsx index ecebe7a..89b60af 100644 --- a/app/src/pages/Home.tsx +++ b/app/src/pages/Home.tsx @@ -21,6 +21,7 @@ const releaseUrl = 'https://github.com/Harzva/mobilecode/releases/tag/v0.1.0'; const repoUrl = 'https://github.com/Harzva/mobilecode'; const demo2048Url = `${pageBase}demo/2048/`; const githubTestUrl = `${pageBase}github-test/`; +const showcaseAsset = (file: string) => `${pageBase}showcase/${file}`; const heroStats = [ { value: 'v0.1.0+5', label: 'Android APK' }, @@ -94,6 +95,64 @@ const layers = [ 'Performance', ]; +const showcaseFeatures = [ + { + title: '品牌识别板', + text: '统一 Logo、角色、色彩、移动端标语和使用场景，让项目首页先有产品感。', + image: 'mobilecode-brand-identity-sheet.png', + alt: 'MobileCode CodeLoong brand identity sheet', + }, + { + title: '发布主视觉', + text: '用于 README 和 GitHub Pages 的首屏宣传图，强调手机端 AI 编程和开源发布。', + image: 'mobilecode-code-with-your-buddy.png', + alt: 'MobileCode CodeLoong launch poster', + }, +]; + +const showcaseWall = [ + { + title: '横向标识', + image: 'mobilecode-mascot-wordmark.png', + alt: 'MobileCode mascot wordmark', + }, + { + title: 'Logo SVG', + image: 'mobilecode-logo-v2.svg', + alt: 'MobileCode logo svg', + }, + { + title: 'App Icon', + image: 'mobilecode-icon-v2.svg', + alt: 'MobileCode app icon svg', + }, + { + title: '角色标识', + image: 'mobilecode-mascot-v2.svg', + alt: 'MobileCode mascot svg', + }, + { + title: 'Coding', + image: 'codeloong-state-coding-heat.png', + alt: 'CodeLoong coding state', + }, + { + title: 'Thinking', + image: 'codeloong-state-thinking.png', + alt: 'CodeLoong thinking state', + }, + { + title: 'Loading', + image: 'codeloong-state-loading.png', + alt: 'CodeLoong loading state', + }, + { + title: 'Mobile vibe', + image: 'mobilecode-logo-v2-mobile-vibe.svg', + alt: 'MobileCode mobile vibe logo svg', + }, +]; + function HeroProof() { return (
@@ -189,6 +248,37 @@ export default function Home() {
+
+
+
+

UI Design Wall

+

把视觉参考变成可公开引用的产品展示墙

+

+ 从本地参考包中筛选出 MobileCode / CodeLoong 方向的品牌资产与界面气质图，统一放进可复用的展示目录。 +

+
+
+ {showcaseFeatures.map((item) => ( +
+ {item.alt} +
+

{item.title}

+

{item.text}

+
+
+ ))} +
+
+ {showcaseWall.map((item) => ( +
+ {item.alt} + {item.title} +
+ ))} +
+
+
+
diff --git a/docs/mobilecode-ui-showcase-assets.md b/docs/mobilecode-ui-showcase-assets.md new file mode 100644 index 0000000..825fc10 --- /dev/null +++ b/docs/mobilecode-ui-showcase-assets.md @@ -0,0 +1,42 @@ +# MobileCode UI Showcase Assets + +This file records the curated visual assets used by the README and GitHub Pages product site. + +## Source + +- Reference pack: `reference_ui/local_dialog_all_images_svgs_final_pack/` +- Public site path: `app/public/showcase/` +- Pages usage: `app/src/pages/Home.tsx` +- README usage: `README.md` + +## Selection Rules + +- Keep assets that clearly match the MobileCode / CodeLoong product direction. +- Exclude reading-themed assets, Just-Agent assets, unrelated roles, duplicates, and low-fit experiments. +- Prefer lightweight brand SVGs for logo/icon use. +- Use PNG previews for large role-state artwork instead of publishing the multi-megabyte raw state SVGs on the landing page. +- Treat these as brand and promotional design references, not runtime APK screenshots. + +## Public Asset Index + +| Public asset | Source asset | Current use | +|---|---|---| +| `app/public/showcase/mobilecode-icon-v2.svg` | `local_files/svg/mobilecode_brand_svg_v2/mobilecode-icon-v2.svg` | README hero icon, Pages design wall | +| `app/public/showcase/mobilecode-logo-v2.svg` | `local_files/svg/mobilecode_brand_svg_v2/mobilecode-logo-v2.svg` | Pages design wall | +| `app/public/showcase/mobilecode-mascot-v2.svg` | `local_files/svg/mobilecode_brand_svg_v2/mobilecode-mascot-v2.svg` | Pages design wall | +| `app/public/showcase/mobilecode-logo-v2-mobile-vibe.svg` | `local_files/svg/mobilecode_brand_svg_v2/mobilecode-logo-v2-mobile-vibe.svg` | Pages design wall | +| `app/public/showcase/mobilecode-code-with-your-buddy.png` | `local_files/images/mobilecode_code_with_your_buddy.png` | README preview, Pages lead visual | +| `app/public/showcase/mobilecode-brand-identity-sheet.png` | `local_files/images/mobilecode_brand_identity_sheet.png` | README preview, Pages lead visual | +| `app/public/showcase/mobilecode-mascot-wordmark.png` | `local_files/images/tech_mascot_with_smartphone_and_logo.png` | README preview, Pages design wall | +| `app/public/showcase/mobilecode-logo-v2.png` | `from_zips/mobilecode-brand-svg-v2-pack/images/mobilecode_brand_svg_v2/mobilecode-logo-v2.png` | Raster fallback / future social preview | +| `app/public/showcase/mobilecode-icon-v2.png` | `from_zips/mobilecode-brand-svg-v2-pack/images/mobilecode_brand_svg_v2/mobilecode-icon-v2.png` | Raster fallback / future social preview | +| `app/public/showcase/mobilecode-logo-v2-mobile-vibe.png` | `from_zips/mobilecode-brand-svg-v2-pack/images/mobilecode_brand_svg_v2/mobilecode-logo-v2-mobile-vibe.png` | Raster fallback / future social preview | +| `app/public/showcase/codeloong-state-coding-heat.png` | `from_zips/codeloong_svg_state_pack/images/codeloong_svg_states/png_preview/codeloong_coding_heat_dynamic.png` | Pages design wall | +| `app/public/showcase/codeloong-state-thinking.png` | `from_zips/codeloong_svg_state_pack/images/codeloong_svg_states/png_preview/codeloong_thinking_static.png` | Pages design wall | +| `app/public/showcase/codeloong-state-loading.png` | `from_zips/codeloong_svg_state_pack/images/codeloong_svg_states/png_preview/codeloong_loading_dynamic.png` | Pages design wall | + +## Deferred + +- Runtime APK screenshots should be captured after the mobile app is verified in a real Android QA flow. +- Large animated/state SVGs can be optimized later before direct public use. +- The README should stay limited to a few strong visuals so the first viewport remains readable on GitHub.