@jaimevalasek/aioson 1.4.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (301) hide show
  1. package/CHANGELOG.md +31 -1
  2. package/LICENSE +661 -21
  3. package/README.md +9 -1
  4. package/docs/design-previews/aurora-command-ui-website.html +884 -0
  5. package/docs/design-previews/aurora-command-ui.html +682 -0
  6. package/docs/design-previews/bold-editorial-ui-website.html +658 -0
  7. package/docs/design-previews/bold-editorial-ui.html +717 -0
  8. package/docs/design-previews/clean-saas-ui-website.html +1202 -0
  9. package/docs/design-previews/clean-saas-ui.html +549 -0
  10. package/docs/design-previews/cognitive-core-ui-website.html +1009 -0
  11. package/docs/design-previews/cognitive-core-ui.html +463 -0
  12. package/docs/design-previews/glassmorphism-ui-website.html +572 -0
  13. package/docs/design-previews/glassmorphism-ui.html +886 -0
  14. package/docs/design-previews/index.html +699 -0
  15. package/docs/design-previews/interface-design-website.html +1187 -0
  16. package/docs/design-previews/interface-design.html +513 -0
  17. package/docs/design-previews/neo-brutalist-ui-website.html +621 -0
  18. package/docs/design-previews/neo-brutalist-ui.html +797 -0
  19. package/docs/design-previews/premium-command-center-ui-website.html +1217 -0
  20. package/docs/design-previews/premium-command-center-ui.html +552 -0
  21. package/docs/design-previews/warm-craft-ui-website.html +684 -0
  22. package/docs/design-previews/warm-craft-ui.html +739 -0
  23. package/docs/en/cli-reference.md +20 -9
  24. package/docs/en/squad-dashboard.md +372 -0
  25. package/docs/openclaw-bridge.md +308 -0
  26. package/docs/pt/README.md +7 -0
  27. package/docs/pt/agent-sharding.md +132 -0
  28. package/docs/pt/agentes.md +131 -11
  29. package/docs/pt/busca-de-contexto.md +129 -0
  30. package/docs/pt/cache-de-contexto.md +156 -0
  31. package/docs/pt/cenarios.md +46 -2
  32. package/docs/pt/comandos-cli.md +88 -1
  33. package/docs/pt/design-hybrid-forge.md +107 -0
  34. package/docs/pt/inicio-rapido.md +72 -5
  35. package/docs/pt/inteligencia-adaptativa.md +324 -0
  36. package/docs/pt/monitor-de-contexto.md +104 -0
  37. package/docs/pt/recuperacao-de-sessao.md +125 -0
  38. package/docs/pt/sandbox.md +125 -0
  39. package/docs/pt/skills.md +98 -6
  40. package/docs/pt/squad-dashboard.md +373 -0
  41. package/docs/testing/genome-2.0-matrix.md +5 -5
  42. package/docs/testing/genome-2.0-rollout.md +9 -9
  43. package/package.json +2 -2
  44. package/src/agent-loader.js +280 -0
  45. package/src/backup-local.js +74 -0
  46. package/src/cli.js +192 -0
  47. package/src/commands/agent-loader.js +85 -0
  48. package/src/commands/backup-local-cmd.js +25 -0
  49. package/src/commands/context-cache.js +90 -0
  50. package/src/commands/context-monitor.js +92 -0
  51. package/src/commands/context-search.js +66 -0
  52. package/src/commands/design-hybrid-options.js +385 -0
  53. package/src/commands/health.js +214 -0
  54. package/src/commands/init.js +54 -13
  55. package/src/commands/install.js +52 -13
  56. package/src/commands/learning-evolve.js +355 -0
  57. package/src/commands/live.js +34 -0
  58. package/src/commands/recovery.js +43 -0
  59. package/src/commands/runtime.js +242 -0
  60. package/src/commands/sandbox.js +37 -0
  61. package/src/commands/setup-context.js +29 -4
  62. package/src/commands/setup.js +178 -0
  63. package/src/commands/skill.js +79 -32
  64. package/src/commands/squad-daemon.js +209 -0
  65. package/src/commands/squad-dashboard.js +39 -0
  66. package/src/commands/squad-deploy.js +64 -0
  67. package/src/commands/squad-doctor.js +52 -0
  68. package/src/commands/squad-mcp.js +270 -0
  69. package/src/commands/squad-processes.js +56 -0
  70. package/src/commands/squad-recovery.js +42 -0
  71. package/src/commands/squad-roi.js +291 -0
  72. package/src/commands/squad-score.js +250 -0
  73. package/src/commands/squad-status.js +37 -1
  74. package/src/commands/squad-validate.js +62 -1
  75. package/src/commands/squad-webhook.js +160 -0
  76. package/src/commands/squad-worker.js +191 -0
  77. package/src/commands/squad-worktrees.js +75 -0
  78. package/src/commands/tool-registry-cmd.js +232 -0
  79. package/src/commands/update.js +7 -0
  80. package/src/commands/web-map.js +70 -0
  81. package/src/commands/web-scrape.js +71 -0
  82. package/src/constants.js +17 -0
  83. package/src/context-cache.js +159 -0
  84. package/src/context-search.js +326 -0
  85. package/src/context-writer.js +45 -1
  86. package/src/design-variation-catalog.js +503 -0
  87. package/src/i18n/messages/en.js +159 -3
  88. package/src/i18n/messages/es.js +147 -2
  89. package/src/i18n/messages/fr.js +147 -2
  90. package/src/i18n/messages/pt-BR.js +158 -3
  91. package/src/install-animation.js +260 -0
  92. package/src/install-profile.js +143 -0
  93. package/src/install-wizard.js +474 -0
  94. package/src/installer.js +38 -10
  95. package/src/lib/webhook-server.js +328 -0
  96. package/src/mcp-connectors/registry.js +602 -0
  97. package/src/parser.js +7 -1
  98. package/src/recovery-context-session.js +154 -0
  99. package/src/runtime-store.js +355 -2
  100. package/src/sandbox.js +177 -0
  101. package/src/squad/external-session.js +180 -0
  102. package/src/squad/inter-squad.js +74 -0
  103. package/src/squad/recovery-context.js +201 -0
  104. package/src/squad/worktree-manager.js +114 -0
  105. package/src/squad-daemon.js +490 -0
  106. package/src/squad-dashboard/api.js +223 -0
  107. package/src/squad-dashboard/attachment-handler.js +93 -0
  108. package/src/squad-dashboard/context-monitor.js +157 -0
  109. package/src/squad-dashboard/execution-logs.js +115 -0
  110. package/src/squad-dashboard/hunk-review.js +209 -0
  111. package/src/squad-dashboard/metrics.js +133 -0
  112. package/src/squad-dashboard/process-monitor.js +125 -0
  113. package/src/squad-dashboard/renderer.js +858 -0
  114. package/src/squad-dashboard/server.js +232 -0
  115. package/src/squad-dashboard/styles.js +525 -0
  116. package/src/squad-dashboard/token-tracker.js +99 -0
  117. package/src/tool-executor.js +94 -0
  118. package/src/updater.js +11 -3
  119. package/src/web.js +284 -0
  120. package/src/worker-runner.js +339 -0
  121. package/template/.aioson/agents/analyst.md +62 -3
  122. package/template/.aioson/agents/architect.md +42 -0
  123. package/template/.aioson/agents/design-hybrid-forge.md +127 -0
  124. package/template/.aioson/agents/dev.md +223 -11
  125. package/template/.aioson/agents/deyvin.md +65 -0
  126. package/template/.aioson/agents/neo.md +152 -0
  127. package/template/.aioson/agents/orache.md +17 -0
  128. package/template/.aioson/agents/orchestrator.md +26 -0
  129. package/template/.aioson/agents/pm.md +58 -0
  130. package/template/.aioson/agents/product.md +88 -12
  131. package/template/.aioson/agents/qa.md +80 -0
  132. package/template/.aioson/agents/setup.md +128 -22
  133. package/template/.aioson/agents/sheldon.md +704 -0
  134. package/template/.aioson/agents/squad.md +191 -0
  135. package/template/.aioson/agents/tester.md +410 -0
  136. package/template/.aioson/agents/ux-ui.md +12 -0
  137. package/template/.aioson/config.md +21 -0
  138. package/template/.aioson/context/forensics/.gitkeep +0 -0
  139. package/template/.aioson/context/seeds/seed-example.md +27 -0
  140. package/template/.aioson/context/user-profile.md +42 -0
  141. package/template/.aioson/locales/en/agents/analyst.md +8 -0
  142. package/template/.aioson/locales/en/agents/architect.md +8 -0
  143. package/template/.aioson/locales/en/agents/dev.md +66 -7
  144. package/template/.aioson/locales/en/agents/deyvin.md +8 -0
  145. package/template/.aioson/locales/en/agents/neo.md +8 -0
  146. package/template/.aioson/locales/en/agents/orchestrator.md +26 -0
  147. package/template/.aioson/locales/en/agents/qa.md +49 -0
  148. package/template/.aioson/locales/en/agents/setup.md +35 -2
  149. package/template/.aioson/locales/en/agents/sheldon.md +340 -0
  150. package/template/.aioson/locales/en/agents/ux-ui.md +8 -0
  151. package/template/.aioson/locales/es/agents/analyst.md +8 -0
  152. package/template/.aioson/locales/es/agents/architect.md +8 -0
  153. package/template/.aioson/locales/es/agents/dev.md +66 -7
  154. package/template/.aioson/locales/es/agents/deyvin.md +8 -0
  155. package/template/.aioson/locales/es/agents/neo.md +48 -0
  156. package/template/.aioson/locales/es/agents/orchestrator.md +26 -0
  157. package/template/.aioson/locales/es/agents/qa.md +26 -0
  158. package/template/.aioson/locales/es/agents/setup.md +35 -2
  159. package/template/.aioson/locales/es/agents/sheldon.md +192 -0
  160. package/template/.aioson/locales/es/agents/squad.md +63 -0
  161. package/template/.aioson/locales/es/agents/ux-ui.md +8 -0
  162. package/template/.aioson/locales/fr/agents/analyst.md +8 -0
  163. package/template/.aioson/locales/fr/agents/architect.md +8 -0
  164. package/template/.aioson/locales/fr/agents/dev.md +66 -7
  165. package/template/.aioson/locales/fr/agents/deyvin.md +8 -0
  166. package/template/.aioson/locales/fr/agents/neo.md +48 -0
  167. package/template/.aioson/locales/fr/agents/orchestrator.md +26 -0
  168. package/template/.aioson/locales/fr/agents/qa.md +26 -0
  169. package/template/.aioson/locales/fr/agents/setup.md +35 -2
  170. package/template/.aioson/locales/fr/agents/sheldon.md +192 -0
  171. package/template/.aioson/locales/fr/agents/squad.md +63 -0
  172. package/template/.aioson/locales/fr/agents/ux-ui.md +8 -0
  173. package/template/.aioson/locales/pt-BR/agents/analyst.md +19 -0
  174. package/template/.aioson/locales/pt-BR/agents/architect.md +19 -0
  175. package/template/.aioson/locales/pt-BR/agents/dev.md +75 -12
  176. package/template/.aioson/locales/pt-BR/agents/deyvin.md +8 -0
  177. package/template/.aioson/locales/pt-BR/agents/neo.md +147 -0
  178. package/template/.aioson/locales/pt-BR/agents/orchestrator.md +26 -0
  179. package/template/.aioson/locales/pt-BR/agents/product.md +8 -3
  180. package/template/.aioson/locales/pt-BR/agents/qa.md +60 -0
  181. package/template/.aioson/locales/pt-BR/agents/setup.md +35 -2
  182. package/template/.aioson/locales/pt-BR/agents/sheldon.md +192 -0
  183. package/template/.aioson/locales/pt-BR/agents/squad.md +105 -0
  184. package/template/.aioson/locales/pt-BR/agents/ux-ui.md +8 -0
  185. package/template/.aioson/schemas/squad-blueprint.schema.json +21 -0
  186. package/template/.aioson/schemas/squad-manifest.schema.json +178 -1
  187. package/template/.aioson/skills/design/aurora-command-ui/SKILL.md +243 -0
  188. package/template/.aioson/skills/design/aurora-command-ui/references/art-direction.md +293 -0
  189. package/template/.aioson/skills/design/aurora-command-ui/references/components.md +827 -0
  190. package/template/.aioson/skills/design/aurora-command-ui/references/dashboards.md +250 -0
  191. package/template/.aioson/skills/design/aurora-command-ui/references/design-tokens.md +585 -0
  192. package/template/.aioson/skills/design/aurora-command-ui/references/motion.md +365 -0
  193. package/template/.aioson/skills/design/aurora-command-ui/references/patterns.md +482 -0
  194. package/template/.aioson/skills/design/aurora-command-ui/references/websites.md +387 -0
  195. package/template/.aioson/skills/design/bold-editorial-ui/SKILL.md +205 -0
  196. package/template/.aioson/skills/design/bold-editorial-ui/references/art-direction.md +338 -0
  197. package/template/.aioson/skills/design/bold-editorial-ui/references/components.md +977 -0
  198. package/template/.aioson/skills/design/bold-editorial-ui/references/dashboards.md +218 -0
  199. package/template/.aioson/skills/design/bold-editorial-ui/references/design-tokens.md +326 -0
  200. package/template/.aioson/skills/design/bold-editorial-ui/references/motion.md +461 -0
  201. package/template/.aioson/skills/design/bold-editorial-ui/references/patterns.md +293 -0
  202. package/template/.aioson/skills/design/bold-editorial-ui/references/websites.md +352 -0
  203. package/template/.aioson/skills/design/clean-saas-ui/SKILL.md +210 -0
  204. package/template/.aioson/skills/design/clean-saas-ui/references/art-direction.md +319 -0
  205. package/template/.aioson/skills/design/clean-saas-ui/references/components.md +365 -0
  206. package/template/.aioson/skills/design/clean-saas-ui/references/dashboards.md +196 -0
  207. package/template/.aioson/skills/design/clean-saas-ui/references/design-tokens.md +244 -0
  208. package/template/.aioson/skills/design/clean-saas-ui/references/motion.md +235 -0
  209. package/template/.aioson/skills/design/clean-saas-ui/references/patterns.md +215 -0
  210. package/template/.aioson/skills/design/clean-saas-ui/references/websites.md +295 -0
  211. package/template/.aioson/skills/design/cognitive-core-ui/SKILL.md +55 -9
  212. package/template/.aioson/skills/design/cognitive-core-ui/references/art-direction.md +339 -0
  213. package/template/.aioson/skills/design/cognitive-core-ui/references/components.md +1 -1
  214. package/template/.aioson/skills/design/cognitive-core-ui/references/dashboards.md +100 -0
  215. package/template/.aioson/skills/design/cognitive-core-ui/references/design-tokens.md +43 -9
  216. package/template/.aioson/skills/design/cognitive-core-ui/references/motion.md +40 -0
  217. package/template/.aioson/skills/design/cognitive-core-ui/references/patterns.md +1 -1
  218. package/template/.aioson/skills/design/cognitive-core-ui/references/websites.md +99 -12
  219. package/template/.aioson/skills/design/glassmorphism-ui/SKILL.md +222 -0
  220. package/template/.aioson/skills/design/glassmorphism-ui/references/art-direction.md +159 -0
  221. package/template/.aioson/skills/design/glassmorphism-ui/references/components.md +498 -0
  222. package/template/.aioson/skills/design/glassmorphism-ui/references/dashboards.md +236 -0
  223. package/template/.aioson/skills/design/glassmorphism-ui/references/design-tokens.md +274 -0
  224. package/template/.aioson/skills/design/glassmorphism-ui/references/motion.md +355 -0
  225. package/template/.aioson/skills/design/glassmorphism-ui/references/patterns.md +198 -0
  226. package/template/.aioson/skills/design/glassmorphism-ui/references/websites.md +307 -0
  227. package/template/.aioson/skills/design/neo-brutalist-ui/SKILL.md +213 -0
  228. package/template/.aioson/skills/design/neo-brutalist-ui/references/art-direction.md +228 -0
  229. package/template/.aioson/skills/design/neo-brutalist-ui/references/components.md +855 -0
  230. package/template/.aioson/skills/design/neo-brutalist-ui/references/dashboards.md +334 -0
  231. package/template/.aioson/skills/design/neo-brutalist-ui/references/design-tokens.md +342 -0
  232. package/template/.aioson/skills/design/neo-brutalist-ui/references/motion.md +286 -0
  233. package/template/.aioson/skills/design/neo-brutalist-ui/references/patterns.md +458 -0
  234. package/template/.aioson/skills/design/neo-brutalist-ui/references/websites.md +723 -0
  235. package/template/.aioson/skills/design/warm-craft-ui/SKILL.md +209 -0
  236. package/template/.aioson/skills/design/warm-craft-ui/references/art-direction.md +324 -0
  237. package/template/.aioson/skills/design/warm-craft-ui/references/components.md +508 -0
  238. package/template/.aioson/skills/design/warm-craft-ui/references/dashboards.md +223 -0
  239. package/template/.aioson/skills/design/warm-craft-ui/references/design-tokens.md +374 -0
  240. package/template/.aioson/skills/design/warm-craft-ui/references/motion.md +356 -0
  241. package/template/.aioson/skills/design/warm-craft-ui/references/patterns.md +288 -0
  242. package/template/.aioson/skills/design/warm-craft-ui/references/websites.md +289 -0
  243. package/template/.aioson/skills/premium-visual-design/SKILL.md +83 -0
  244. package/template/.aioson/skills/premium-visual-design/components/agent-badge.md +92 -0
  245. package/template/.aioson/skills/premium-visual-design/components/dependency-node.md +102 -0
  246. package/template/.aioson/skills/premium-visual-design/components/mention-autocomplete.md +136 -0
  247. package/template/.aioson/skills/premium-visual-design/components/notification-center.md +136 -0
  248. package/template/.aioson/skills/premium-visual-design/components/review-action-bar.md +188 -0
  249. package/template/.aioson/skills/premium-visual-design/components/team-switcher.md +131 -0
  250. package/template/.aioson/skills/premium-visual-design/patterns/agent-message-thread.md +198 -0
  251. package/template/.aioson/skills/premium-visual-design/patterns/notification-panel.md +275 -0
  252. package/template/.aioson/skills/premium-visual-design/patterns/review-workflow-ui.md +234 -0
  253. package/template/.aioson/skills/premium-visual-design/patterns/task-dependency-graph.md +147 -0
  254. package/template/.aioson/skills/premium-visual-design/tokens/status-extended.md +142 -0
  255. package/template/.aioson/skills/process/aioson-spec-driven/SKILL.md +45 -0
  256. package/template/.aioson/skills/process/aioson-spec-driven/references/approval-gates.md +109 -0
  257. package/template/.aioson/skills/process/aioson-spec-driven/references/artifact-map.md +44 -0
  258. package/template/.aioson/skills/process/aioson-spec-driven/references/classification-map.md +37 -0
  259. package/template/.aioson/skills/process/aioson-spec-driven/references/hardening-lane.md +49 -0
  260. package/template/.aioson/skills/process/aioson-spec-driven/references/maintenance-and-state.md +66 -0
  261. package/template/.aioson/skills/process/aioson-spec-driven/references/ui-language.md +75 -0
  262. package/template/.aioson/skills/process/design-hybrid-forge/SKILL.md +144 -0
  263. package/template/.aioson/skills/process/design-hybrid-forge/references/crossover-protocol.md +221 -0
  264. package/template/.aioson/skills/process/design-hybrid-forge/references/naming-registry.md +88 -0
  265. package/template/.aioson/skills/process/design-hybrid-forge/references/output-contract.md +291 -0
  266. package/template/.aioson/skills/process/design-hybrid-forge/references/pair-compatibility.md +117 -0
  267. package/template/.aioson/skills/process/design-hybrid-forge/references/quality-gates.md +188 -0
  268. package/template/.aioson/skills/process/design-hybrid-forge/references/variation-library.md +125 -0
  269. package/template/.aioson/skills/squad/formats/catalog.json +15 -0
  270. package/template/.aioson/skills/squad/formats/content/blog-post.md +47 -0
  271. package/template/.aioson/skills/squad/formats/content/newsletter.md +47 -0
  272. package/template/.aioson/skills/squad/formats/creative/podcast-script.md +43 -0
  273. package/template/.aioson/skills/squad/formats/creative/video-script.md +41 -0
  274. package/template/.aioson/skills/squad/formats/social/instagram-feed.md +42 -0
  275. package/template/.aioson/skills/squad/formats/social/linkedin-post.md +42 -0
  276. package/template/.aioson/skills/squad/formats/social/tiktok.md +39 -0
  277. package/template/.aioson/skills/squad/formats/social/twitter-thread.md +39 -0
  278. package/template/.aioson/skills/squad/formats/social/youtube-long.md +47 -0
  279. package/template/.aioson/skills/squad/formats/social/youtube-shorts.md +39 -0
  280. package/template/.aioson/skills/squad/patterns/multi-platform-pattern.md +108 -0
  281. package/template/.aioson/skills/squad/patterns/persona-based-pattern.md +98 -0
  282. package/template/.aioson/skills/squad/patterns/pipeline-pattern.md +106 -0
  283. package/template/.aioson/skills/squad/patterns/review-loop-pattern.md +81 -0
  284. package/template/.aioson/skills/squad/references/checklist-templates.md +122 -0
  285. package/template/.aioson/skills/squad/references/executor-archetypes.md +123 -0
  286. package/template/.aioson/skills/squad/references/workflow-templates.md +169 -0
  287. package/template/.aioson/skills/static/debugging-protocol.md +42 -0
  288. package/template/.aioson/skills/static/git-worktrees.md +36 -0
  289. package/template/.aioson/tasks/implementation-plan.md +19 -0
  290. package/template/.aioson/tasks/squad-design.md +28 -0
  291. package/template/.aioson/tasks/squad-profile.md +48 -0
  292. package/template/.aioson/tasks/squad-review.md +61 -0
  293. package/template/.aioson/tasks/squad-task-decompose.md +66 -0
  294. package/template/.claude/commands/aioson/agent/neo.md +5 -0
  295. package/template/.claude/commands/aioson/agent/tester.md +5 -0
  296. package/template/.gemini/GEMINI.md +1 -0
  297. package/template/.gemini/commands/aios-neo.toml +4 -0
  298. package/template/.gemini/commands/aios-tester.toml +6 -0
  299. package/template/AGENTS.md +26 -1
  300. package/template/CLAUDE.md +6 -2
  301. package/template/OPENCODE.md +2 -0
package/docs/design-previews/clean-saas-ui.html ADDED
@@ -0,0 +1,549 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Clean SaaS UI — AIOSON Design Skill</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #F9FAFB;
15
+ --surface: #FFFFFF;
16
+ --border: #E5E7EB;
17
+ --border-input: #D1D5DB;
18
+ --accent: #2563EB;
19
+ --accent-light: #EFF6FF;
20
+ --accent-text: #1D4ED8;
21
+ --text-heading: #111827;
22
+ --text-body: #374151;
23
+ --text-secondary: #6B7280;
24
+ --sidebar-width: 256px;
25
+ --topbar-height: 56px;
26
+ --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
27
+ }
28
+
29
+ html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text-body); font-size: 14px; line-height: 1.5; }
30
+
31
+ /* AIOSON badge */
32
+ .aioson-badge {
33
+ position: fixed; top: 12px; right: 12px; z-index: 9999;
34
+ background: var(--accent); color: #fff;
35
+ font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600;
36
+ letter-spacing: 0.05em; padding: 4px 10px; border-radius: 9999px;
37
+ box-shadow: 0 2px 8px rgba(37,99,235,0.35);
38
+ pointer-events: none;
39
+ }
40
+
41
+ /* Layout */
42
+ .shell { display: flex; height: 100vh; overflow: hidden; }
43
+
44
+ /* Sidebar */
45
+ .sidebar {
46
+ width: var(--sidebar-width); flex-shrink: 0;
47
+ background: var(--surface); border-right: 1px solid var(--border);
48
+ display: flex; flex-direction: column;
49
+ padding-top: var(--topbar-height);
50
+ }
51
+ .sidebar-logo {
52
+ position: absolute; top: 0; left: 0; width: var(--sidebar-width);
53
+ height: var(--topbar-height); display: flex; align-items: center;
54
+ padding: 0 20px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
55
+ background: var(--surface);
56
+ }
57
+ .sidebar-logo-mark {
58
+ width: 28px; height: 28px; background: var(--accent); border-radius: 6px;
59
+ display: flex; align-items: center; justify-content: center;
60
+ color: #fff; font-weight: 700; font-size: 13px; letter-spacing: -0.03em; flex-shrink: 0;
61
+ }
62
+ .sidebar-logo-text {
63
+ margin-left: 10px; font-weight: 700; font-size: 15px;
64
+ color: var(--text-heading); letter-spacing: -0.02em;
65
+ }
66
+ .sidebar-nav { padding: 12px 0; flex: 1; }
67
+ .nav-section-label {
68
+ padding: 0 20px; margin-bottom: 4px; margin-top: 16px;
69
+ font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
70
+ color: var(--text-secondary); text-transform: uppercase;
71
+ }
72
+ .nav-section-label:first-child { margin-top: 4px; }
73
+ .nav-item {
74
+ display: flex; align-items: center; gap: 10px;
75
+ padding: 0 20px; height: 36px; cursor: pointer;
76
+ font-size: 13.5px; font-weight: 500; color: var(--text-body);
77
+ border-left: 2px solid transparent;
78
+ transition: background 0.1s, color 0.1s;
79
+ }
80
+ .nav-item:hover { background: var(--bg); }
81
+ .nav-item.active {
82
+ border-left-color: var(--accent);
83
+ background: var(--accent-light);
84
+ color: var(--accent-text); font-weight: 600;
85
+ }
86
+ .nav-icon {
87
+ width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0;
88
+ background: currentColor; opacity: 0.25;
89
+ }
90
+ .nav-item.active .nav-icon { opacity: 0.7; }
91
+ .sidebar-footer {
92
+ padding: 12px 16px; border-top: 1px solid var(--border);
93
+ }
94
+ .user-row {
95
+ display: flex; align-items: center; gap: 10px;
96
+ padding: 8px; border-radius: 6px; cursor: pointer;
97
+ }
98
+ .user-row:hover { background: var(--bg); }
99
+ .avatar {
100
+ width: 28px; height: 28px; border-radius: 9999px;
101
+ background: var(--accent-light); border: 1.5px solid var(--border);
102
+ display: flex; align-items: center; justify-content: center;
103
+ font-size: 11px; font-weight: 700; color: var(--accent-text); flex-shrink: 0;
104
+ }
105
+ .user-name { font-size: 13px; font-weight: 600; color: var(--text-heading); }
106
+ .user-role { font-size: 11px; color: var(--text-secondary); }
107
+
108
+ /* Main */
109
+ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
110
+
111
+ /* Top bar */
112
+ .topbar {
113
+ height: var(--topbar-height); flex-shrink: 0;
114
+ background: var(--surface); border-bottom: 1px solid var(--border);
115
+ display: flex; align-items: center; justify-content: space-between;
116
+ padding: 0 28px;
117
+ }
118
+ .breadcrumb {
119
+ display: flex; align-items: center; gap: 6px;
120
+ font-size: 13px; color: var(--text-secondary);
121
+ }
122
+ .breadcrumb-sep { color: var(--border-input); }
123
+ .breadcrumb-current { color: var(--text-heading); font-weight: 600; }
124
+ .topbar-actions { display: flex; align-items: center; gap: 10px; }
125
+ .btn {
126
+ display: inline-flex; align-items: center; gap: 6px;
127
+ height: 36px; padding: 0 14px; border-radius: 6px; border: none;
128
+ font-family: 'Inter', sans-serif; font-size: 13.5px; font-weight: 500;
129
+ cursor: pointer; transition: opacity 0.1s, background 0.1s;
130
+ }
131
+ .btn-primary { background: var(--accent); color: #fff; }
132
+ .btn-primary:hover { opacity: 0.9; }
133
+ .btn-secondary {
134
+ background: var(--surface); color: var(--text-body);
135
+ border: 1px solid var(--border-input);
136
+ }
137
+ .btn-secondary:hover { background: var(--bg); }
138
+ .btn-icon { width: 16px; height: 16px; border-radius: 2px; background: currentColor; opacity: 0.6; flex-shrink: 0; }
139
+
140
+ /* Page */
141
+ .page { flex: 1; overflow-y: auto; padding: 28px; }
142
+
143
+ /* Page header */
144
+ .page-header {
145
+ display: flex; align-items: flex-start; justify-content: space-between;
146
+ margin-bottom: 24px;
147
+ }
148
+ .page-title { font-size: 22px; font-weight: 700; color: var(--text-heading); letter-spacing: -0.02em; }
149
+ .page-subtitle { font-size: 13.5px; color: var(--text-secondary); margin-top: 3px; }
150
+
151
+ /* Filter bar */
152
+ .filter-bar {
153
+ display: flex; align-items: center; gap: 10px;
154
+ margin-bottom: 20px;
155
+ }
156
+ .input-search {
157
+ height: 36px; padding: 0 12px; border-radius: 6px;
158
+ border: 1px solid var(--border-input); background: var(--surface);
159
+ font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-body);
160
+ outline: none; width: 260px;
161
+ transition: border-color 0.15s;
162
+ }
163
+ .input-search:focus { border-color: var(--accent); }
164
+ .input-search::placeholder { color: var(--text-secondary); }
165
+ .select-filter {
166
+ height: 36px; padding: 0 10px; border-radius: 6px;
167
+ border: 1px solid var(--border-input); background: var(--surface);
168
+ font-family: 'Inter', sans-serif; font-size: 13.5px; color: var(--text-body);
169
+ outline: none; cursor: pointer; appearance: none;
170
+ padding-right: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
171
+ background-repeat: no-repeat; background-position: right 10px center;
172
+ }
173
+ .tab-bar { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
174
+ .tab {
175
+ height: 36px; padding: 0 14px; display: flex; align-items: center;
176
+ font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
177
+ border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
178
+ transition: color 0.1s;
179
+ }
180
+ .tab:hover { color: var(--text-heading); }
181
+ .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
182
+ .tab-count {
183
+ margin-left: 6px; background: var(--bg); border: 1px solid var(--border);
184
+ border-radius: 9999px; font-size: 11px; font-weight: 600; color: var(--text-secondary);
185
+ padding: 0 7px; height: 18px; display: inline-flex; align-items: center;
186
+ }
187
+ .tab.active .tab-count { background: var(--accent-light); border-color: transparent; color: var(--accent-text); }
188
+
189
+ /* Stat cards */
190
+ .stat-grid {
191
+ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
192
+ margin-bottom: 24px;
193
+ }
194
+ .stat-card {
195
+ background: var(--surface); border: 1px solid var(--border);
196
+ border-radius: 8px; box-shadow: var(--shadow-card);
197
+ padding: 20px 22px;
198
+ }
199
+ .stat-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
200
+ .stat-value { font-size: 28px; font-weight: 700; color: var(--text-heading); letter-spacing: -0.03em; line-height: 1; }
201
+ .stat-change { margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
202
+ .stat-change .up { color: #059669; font-weight: 600; }
203
+ .stat-change .down { color: #DC2626; font-weight: 600; }
204
+
205
+ /* Table */
206
+ .table-card {
207
+ background: var(--surface); border: 1px solid var(--border);
208
+ border-radius: 8px; box-shadow: var(--shadow-card); overflow: hidden;
209
+ }
210
+ .table-header-bar {
211
+ display: flex; align-items: center; justify-content: space-between;
212
+ padding: 16px 20px; border-bottom: 1px solid var(--border);
213
+ }
214
+ .table-title { font-size: 15px; font-weight: 600; color: var(--text-heading); letter-spacing: -0.01em; }
215
+ .table-meta { font-size: 12.5px; color: var(--text-secondary); }
216
+ table { width: 100%; border-collapse: collapse; }
217
+ thead th {
218
+ padding: 10px 20px; text-align: left;
219
+ font-size: 11px; font-weight: 600; color: var(--text-secondary);
220
+ letter-spacing: 0.06em; text-transform: uppercase;
221
+ background: var(--bg); border-bottom: 1px solid var(--border);
222
+ white-space: nowrap;
223
+ }
224
+ tbody tr {
225
+ border-bottom: 1px solid var(--border); transition: background 0.1s;
226
+ }
227
+ tbody tr:last-child { border-bottom: none; }
228
+ tbody tr:hover { background: var(--bg); }
229
+ tbody td { padding: 13px 20px; vertical-align: middle; }
230
+ .td-project { display: flex; align-items: center; gap: 10px; }
231
+ .project-dot { width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0; }
232
+ .project-name { font-size: 13.5px; font-weight: 600; color: var(--text-heading); }
233
+ .project-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
234
+ .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary); }
235
+ .badge {
236
+ display: inline-flex; align-items: center; height: 20px;
237
+ padding: 0 8px; border-radius: 9999px; font-size: 11px; font-weight: 600;
238
+ letter-spacing: 0.02em;
239
+ }
240
+ .badge-green { background: #D1FAE5; color: #065F46; }
241
+ .badge-amber { background: #FEF3C7; color: #92400E; }
242
+ .badge-red { background: #FEE2E2; color: #991B1B; }
243
+ .badge-blue { background: var(--accent-light); color: var(--accent-text); }
244
+ .progress-wrap { display: flex; align-items: center; gap: 10px; }
245
+ .progress-bar { flex: 1; height: 6px; background: var(--bg); border-radius: 9999px; overflow: hidden; border: 1px solid var(--border); }
246
+ .progress-fill { height: 100%; border-radius: 9999px; transition: width 0.3s; }
247
+ .progress-pct { font-size: 12px; font-weight: 600; color: var(--text-body); width: 32px; text-align: right; }
248
+ .row-actions { display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.15s; }
249
+ tbody tr:hover .row-actions { opacity: 1; }
250
+ .action-btn {
251
+ height: 26px; padding: 0 10px; border-radius: 4px;
252
+ border: 1px solid var(--border-input); background: var(--surface);
253
+ font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 500;
254
+ color: var(--text-body); cursor: pointer;
255
+ }
256
+ .action-btn:hover { background: var(--bg); }
257
+
258
+ /* Pagination */
259
+ .pagination {
260
+ display: flex; align-items: center; justify-content: space-between;
261
+ padding: 12px 20px; border-top: 1px solid var(--border);
262
+ }
263
+ .pagination-info { font-size: 12.5px; color: var(--text-secondary); }
264
+ .pagination-pages { display: flex; gap: 4px; }
265
+ .page-btn {
266
+ width: 30px; height: 30px; border-radius: 6px;
267
+ border: 1px solid var(--border); background: var(--surface);
268
+ font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 500;
269
+ color: var(--text-body); cursor: pointer; display: flex; align-items: center; justify-content: center;
270
+ }
271
+ .page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
272
+ .page-btn:hover:not(.active) { background: var(--bg); }
273
+ </style>
274
+ </head>
275
+ <body>
276
+
277
+ <div class="aioson-badge">AIOSON Design Skill</div>
278
+
279
+ <div class="shell">
280
+
281
+ <!-- Sidebar logo (absolute so it sits above the sidebar padding) -->
282
+ <div class="sidebar-logo">
283
+ <div class="sidebar-logo-mark">A</div>
284
+ <span class="sidebar-logo-text">Workbench</span>
285
+ </div>
286
+
287
+ <!-- Sidebar -->
288
+ <aside class="sidebar">
289
+ <nav class="sidebar-nav">
290
+ <div class="nav-section-label">Navigation</div>
291
+ <div class="nav-item">
292
+ <div class="nav-icon"></div>
293
+ Dashboard
294
+ </div>
295
+ <div class="nav-item active">
296
+ <div class="nav-icon"></div>
297
+ Projects
298
+ </div>
299
+ <div class="nav-item">
300
+ <div class="nav-icon"></div>
301
+ Team
302
+ </div>
303
+ <div class="nav-section-label">Account</div>
304
+ <div class="nav-item">
305
+ <div class="nav-icon"></div>
306
+ Settings
307
+ </div>
308
+ <div class="nav-item">
309
+ <div class="nav-icon"></div>
310
+ Billing
311
+ </div>
312
+ </nav>
313
+ <div class="sidebar-footer">
314
+ <div class="user-row">
315
+ <div class="avatar">JD</div>
316
+ <div>
317
+ <div class="user-name">Jordan Davies</div>
318
+ <div class="user-role">Admin</div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </aside>
323
+
324
+ <!-- Main -->
325
+ <div class="main">
326
+
327
+ <!-- Top bar -->
328
+ <header class="topbar">
329
+ <div class="breadcrumb">
330
+ <span>Workbench</span>
331
+ <span class="breadcrumb-sep">/</span>
332
+ <span class="breadcrumb-current">Projects</span>
333
+ </div>
334
+ <div class="topbar-actions">
335
+ <button class="btn btn-secondary">
336
+ <div class="btn-icon"></div>
337
+ Import
338
+ </button>
339
+ <button class="btn btn-primary">
340
+ <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0"><path d="M7 2v10M2 7h10" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/></svg>
341
+ New Project
342
+ </button>
343
+ </div>
344
+ </header>
345
+
346
+ <!-- Page content -->
347
+ <main class="page">
348
+
349
+ <!-- Page header -->
350
+ <div class="page-header">
351
+ <div>
352
+ <div class="page-title">Projects</div>
353
+ <div class="page-subtitle">Manage and track all your active projects across teams.</div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- Stat cards -->
358
+ <div class="stat-grid">
359
+ <div class="stat-card">
360
+ <div class="stat-label">Active Projects</div>
361
+ <div class="stat-value">24</div>
362
+ <div class="stat-change"><span class="up">+3</span> since last month</div>
363
+ </div>
364
+ <div class="stat-card">
365
+ <div class="stat-label">Open Tasks</div>
366
+ <div class="stat-value">147</div>
367
+ <div class="stat-change"><span class="down">+12</span> this week</div>
368
+ </div>
369
+ <div class="stat-card">
370
+ <div class="stat-label">Team Members</div>
371
+ <div class="stat-value">18</div>
372
+ <div class="stat-change"><span class="up">+2</span> new this month</div>
373
+ </div>
374
+ <div class="stat-card">
375
+ <div class="stat-label">This Month</div>
376
+ <div class="stat-value">94<span style="font-size:18px;font-weight:600;color:var(--text-secondary)">%</span></div>
377
+ <div class="stat-change"><span class="up">+4%</span> vs last month</div>
378
+ </div>
379
+ </div>
380
+
381
+ <!-- Tabs -->
382
+ <div class="tab-bar">
383
+ <div class="tab active">All Projects <span class="tab-count">24</span></div>
384
+ <div class="tab">Active <span class="tab-count">18</span></div>
385
+ <div class="tab">On Hold <span class="tab-count">4</span></div>
386
+ <div class="tab">Completed <span class="tab-count">2</span></div>
387
+ </div>
388
+
389
+ <!-- Filter bar -->
390
+ <div class="filter-bar">
391
+ <input class="input-search" type="text" placeholder="Search projects..." value="" />
392
+ <select class="select-filter">
393
+ <option>All Status</option>
394
+ <option>Active</option>
395
+ <option>On Hold</option>
396
+ <option>At Risk</option>
397
+ </select>
398
+ <select class="select-filter">
399
+ <option>All Owners</option>
400
+ <option>Jordan D.</option>
401
+ <option>Sam P.</option>
402
+ </select>
403
+ <div style="margin-left:auto; display:flex; gap:8px;">
404
+ <button class="btn btn-secondary" style="font-size:12.5px; padding:0 12px;">Export</button>
405
+ </div>
406
+ </div>
407
+
408
+ <!-- Table -->
409
+ <div class="table-card">
410
+ <div class="table-header-bar">
411
+ <div class="table-title">Project List</div>
412
+ <div class="table-meta">Showing 5 of 24 projects</div>
413
+ </div>
414
+ <table>
415
+ <thead>
416
+ <tr>
417
+ <th style="width:36%">Project</th>
418
+ <th style="width:12%">Status</th>
419
+ <th style="width:12%">Owner</th>
420
+ <th style="width:14%">Due Date</th>
421
+ <th style="width:18%">Progress</th>
422
+ <th style="width:8%"></th>
423
+ </tr>
424
+ </thead>
425
+ <tbody>
426
+ <tr>
427
+ <td>
428
+ <div class="td-project">
429
+ <div class="project-dot" style="background:#2563EB"></div>
430
+ <div>
431
+ <div class="project-name">Platform Redesign v2</div>
432
+ <div class="project-desc">Core UI refresh and component library</div>
433
+ </div>
434
+ </div>
435
+ </td>
436
+ <td><span class="badge badge-green">Active</span></td>
437
+ <td><span class="mono">JD</span></td>
438
+ <td><span class="mono">2026-04-15</span></td>
439
+ <td>
440
+ <div class="progress-wrap">
441
+ <div class="progress-bar"><div class="progress-fill" style="width:78%;background:#2563EB"></div></div>
442
+ <span class="progress-pct">78%</span>
443
+ </div>
444
+ </td>
445
+ <td><div class="row-actions"><button class="action-btn">Edit</button></div></td>
446
+ </tr>
447
+ <tr>
448
+ <td>
449
+ <div class="td-project">
450
+ <div class="project-dot" style="background:#059669"></div>
451
+ <div>
452
+ <div class="project-name">API Gateway Migration</div>
453
+ <div class="project-desc">Move to microservices architecture</div>
454
+ </div>
455
+ </div>
456
+ </td>
457
+ <td><span class="badge badge-green">Active</span></td>
458
+ <td><span class="mono">SP</span></td>
459
+ <td><span class="mono">2026-05-01</span></td>
460
+ <td>
461
+ <div class="progress-wrap">
462
+ <div class="progress-bar"><div class="progress-fill" style="width:52%;background:#059669"></div></div>
463
+ <span class="progress-pct">52%</span>
464
+ </div>
465
+ </td>
466
+ <td><div class="row-actions"><button class="action-btn">Edit</button></div></td>
467
+ </tr>
468
+ <tr>
469
+ <td>
470
+ <div class="td-project">
471
+ <div class="project-dot" style="background:#D97706"></div>
472
+ <div>
473
+ <div class="project-name">Mobile App Beta</div>
474
+ <div class="project-desc">iOS & Android companion app launch</div>
475
+ </div>
476
+ </div>
477
+ </td>
478
+ <td><span class="badge badge-amber">On Hold</span></td>
479
+ <td><span class="mono">MK</span></td>
480
+ <td><span class="mono">2026-06-20</span></td>
481
+ <td>
482
+ <div class="progress-wrap">
483
+ <div class="progress-bar"><div class="progress-fill" style="width:34%;background:#D97706"></div></div>
484
+ <span class="progress-pct">34%</span>
485
+ </div>
486
+ </td>
487
+ <td><div class="row-actions"><button class="action-btn">Edit</button></div></td>
488
+ </tr>
489
+ <tr>
490
+ <td>
491
+ <div class="td-project">
492
+ <div class="project-dot" style="background:#DC2626"></div>
493
+ <div>
494
+ <div class="project-name">Security Audit Q1</div>
495
+ <div class="project-desc">Penetration testing and compliance review</div>
496
+ </div>
497
+ </div>
498
+ </td>
499
+ <td><span class="badge badge-red">At Risk</span></td>
500
+ <td><span class="mono">RC</span></td>
501
+ <td><span class="mono">2026-03-31</span></td>
502
+ <td>
503
+ <div class="progress-wrap">
504
+ <div class="progress-bar"><div class="progress-fill" style="width:61%;background:#DC2626"></div></div>
505
+ <span class="progress-pct">61%</span>
506
+ </div>
507
+ </td>
508
+ <td><div class="row-actions"><button class="action-btn">Edit</button></div></td>
509
+ </tr>
510
+ <tr>
511
+ <td>
512
+ <div class="td-project">
513
+ <div class="project-dot" style="background:#7C3AED"></div>
514
+ <div>
515
+ <div class="project-name">Data Pipeline Rebuild</div>
516
+ <div class="project-desc">ETL modernization and real-time streaming</div>
517
+ </div>
518
+ </div>
519
+ </td>
520
+ <td><span class="badge badge-blue">Active</span></td>
521
+ <td><span class="mono">AL</span></td>
522
+ <td><span class="mono">2026-07-10</span></td>
523
+ <td>
524
+ <div class="progress-wrap">
525
+ <div class="progress-bar"><div class="progress-fill" style="width:19%;background:#7C3AED"></div></div>
526
+ <span class="progress-pct">19%</span>
527
+ </div>
528
+ </td>
529
+ <td><div class="row-actions"><button class="action-btn">Edit</button></div></td>
530
+ </tr>
531
+ </tbody>
532
+ </table>
533
+ <div class="pagination">
534
+ <div class="pagination-info">Showing 1–5 of 24 projects</div>
535
+ <div class="pagination-pages">
536
+ <button class="page-btn active">1</button>
537
+ <button class="page-btn">2</button>
538
+ <button class="page-btn">3</button>
539
+ <button class="page-btn" style="width:auto;padding:0 10px;">›</button>
540
+ </div>
541
+ </div>
542
+ </div>
543
+
544
+ </main>
545
+ </div>
546
+ </div>
547
+
548
+ </body>
549
+ </html>