atris 2.5.5 → 2.6.1

package/GETTING_STARTED.md

@@ -164,8 +164,8 @@ This syncs your local `atris.md` and agent templates to the latest version. Re-r
 ## Need Help?
 
 - **Full spec:** Read `atris.md` for technical details
-- **Issues:** https://github.com/atrislabs/atris.md/issues
-- **Docs:** https://github.com/atrislabs/atris.md
+- **Issues:** https://github.com/atrislabs/atris/issues
+- **Docs:** https://github.com/atrislabs/atris
 
 ---
 

package/atris/GETTING_STARTED.md

@@ -164,8 +164,8 @@ This syncs your local `atris.md` and agent templates to the latest version. Re-r
 ## Need Help?
 
 - **Full spec:** Read `atris.md` for technical details
-- **Issues:** https://github.com/atrislabs/atris.md/issues
-- **Docs:** https://github.com/atrislabs/atris.md
+- **Issues:** https://github.com/atrislabs/atris/issues
+- **Docs:** https://github.com/atrislabs/atris
 
 ---
 

package/atris/policies/atris-design.md

@@ -19,33 +19,93 @@ this is the "distribution center" — statistically average, aesthetically dead.
 
 ## typography
 
-**avoid:** inter, roboto, open sans, lato, system defaults
+**avoid:** inter, roboto, open sans, lato, arial, montserrat, system defaults. also avoid monospace as lazy shorthand for "technical/developer" vibes.
 
 **try instead:**
-- monospace for dev tools: jetbrains mono, fira code
-- editorial vibes: playfair display, crimson pro
-- clean technical: ibm plex, source sans
+- instead of inter → instrument sans, plus jakarta sans, outfit
+- instead of roboto → onest, figtree, urbanist
+- instead of open sans → source sans 3, nunito sans, dm sans
+- editorial/premium → fraunces, newsreader, lora, playfair display, crimson pro
+- dev tools → jetbrains mono, fira code
+- clean technical → ibm plex, source sans
 
 **the move:** pick ONE distinctive font. use weight extremes (200 vs 800, not 400 vs 500). size jumps should be dramatic (3x), not timid (1.2x).
 
+**type scale:** use a modular scale with fluid sizing. 5 sizes covers most needs:
+
+| role | size | use |
+|------|------|-----|
+| xs | 0.75rem | captions, legal |
+| sm | 0.875rem | secondary UI, metadata |
+| base | 1rem | body text |
+| lg | 1.25-1.5rem | subheadings, lead |
+| xl+ | 2-4rem | headlines, hero |
+
+use `clamp()` for fluid sizing: `clamp(1rem, 0.5rem + 2vw, 2rem)`. use `ch` units for measure: `max-width: 65ch` for readable body text.
+
+**vertical rhythm:** your `line-height` should be the base unit for all vertical spacing. if body is `line-height: 1.5` on `16px` (= 24px), spacing values should be multiples of 24px.
+
+**font loading:** prevent layout shift with proper loading:
+```css
+@font-face {
+  font-family: 'CustomFont';
+  src: url('font.woff2') format('woff2');
+  font-display: swap;
+}
+```
+match fallback metrics with `size-adjust`, `ascent-override`, `descent-override` to minimize FOUT reflow.
+
 ---
 
 ## color
 
-**avoid:** purple/violet on white, generic startup palettes, safe grays
+**avoid:** purple/violet on white, generic startup palettes, safe grays, pure black (#000), pure white (#fff), the AI color palette (cyan-on-dark, purple-to-blue gradients, neon accents on dark backgrounds), gradient text for "impact"
 
 **the move:** commit to a palette and stick to it. use css variables. one dominant color with a sharp accent beats five evenly-distributed colors.
 
-dark backgrounds are easier to make look good. steal from places you like — linear.app, vercel.com, raycast.com, arc browser.
+**use OKLCH:** modern, perceptually uniform color space. equal steps in lightness actually look equal.
+```css
+:root {
+  --brand: oklch(65% 0.2 250);
+  --brand-light: oklch(90% 0.05 250);
+  --brand-dark: oklch(30% 0.15 250);
+}
+```
+
+use `color-mix()` for variants: `color-mix(in oklch, var(--brand) 80%, white)`. use `light-dark()` for theme-aware values.
+
+**tint your neutrals:** never use pure gray. always tint toward your brand hue — even 0.01 chroma in OKLCH creates subconscious cohesion:
+```css
+--gray-100: oklch(95% 0.01 250); /* not #f5f5f5 */
+--gray-900: oklch(15% 0.01 250); /* not #1a1a1a */
+```
+
+**gray on color:** never put gray text on colored backgrounds. it looks washed out. use a darker shade of the background color or transparency instead.
+
+dark backgrounds are easier to make look good. steal from places you like — linear.app, vercel.com, raycast.com, arc browser. but don't default to dark mode with glowing accents — it looks "cool" without requiring actual design decisions.
 
 ---
 
 ## layout
 
-**avoid:** the template look — hero section, 3 feature cards, testimonial carousel, big footer. every ai does this.
+**avoid:** the template look — hero section, 3 feature cards, testimonial carousel, big footer. every ai does this. also avoid:
+- wrapping everything in cards — not everything needs a container
+- nesting cards inside cards — visual noise, flatten the hierarchy
+- identical card grids — same-sized cards with icon + heading + text, repeated endlessly
+- the hero metric layout — big number, small label, supporting stats, gradient accent
+- centering everything — left-aligned text with asymmetric layouts feels more designed
+- same spacing everywhere — without rhythm, layouts feel monotonous
 
 **the move:** break the grid sometimes. asymmetry is interesting. whitespace is a feature, not wasted space. don't cram everything into 16px/24px spacing — use dramatic gaps.
 
+**fluid spacing:** use `clamp()` for spacing that breathes on larger screens:
+```css
+padding: clamp(1rem, 3vw, 4rem);
+gap: clamp(1.5rem, 4vw, 6rem);
+```
+
+**container queries:** use `@container` for component-level responsiveness instead of only viewport breakpoints. components should adapt to their container, not just the screen.
+
 ---
 
 ## motion
@@ -58,10 +118,52 @@ dark backgrounds are easier to make look good. steal from places you like — li
 - buttons that follow the cursor (harder to click, not clever)
 - FAQ/content that breaks if you scroll past before the fade-in finishes
 - animations that swap styles endlessly without purpose (rotating shapes, morphing buttons)
+- bounce or elastic easing — they feel dated and tacky. real objects decelerate smoothly.
+
+**the move:** one well-timed animation beats ten scattered ones. page load with staggered reveals (50-100ms delays) creates more impact than hover effects on every button.
+
+**easing:** use exponential easing for natural deceleration:
+```css
+--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+```
+never linear, never bounce, never elastic. 150-300ms duration for most transitions.
+
+**only animate transform and opacity.** never animate width, height, padding, margin — they trigger layout recalculation and cause jank. for height animations, use `grid-template-rows` transitions.
+
+**reduced motion:** always respect `prefers-reduced-motion`. provide a beautiful static alternative:
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
 
-**the move:** one well-timed animation beats ten scattered ones. page load with staggered reveals (animation-delay) creates more impact than hover effects on every button.
+---
+
+## interaction
+
+**progressive disclosure:** start simple, reveal sophistication through interaction. basic options first, advanced behind expandable sections. hover states that reveal secondary actions.
+
+**optimistic UI:** update immediately, sync later. makes everything feel fast.
 
-css transitions: 200-300ms, ease-out. that's it.
+**empty states:** design empty states that teach the interface, not just say "nothing here." show users what to do next.
+
+**button hierarchy:** don't make every button primary. use ghost buttons, text links, secondary styles. hierarchy matters.
+
+**every interactive element needs ALL states:**
+- default — resting
+- hover — subtle feedback (brighten, scale 1.02-1.05)
+- focus — visible keyboard indicator (never remove without replacement)
+- active — click/tap feedback
+- disabled — clearly non-interactive
+- loading — async action feedback
+- error — validation state
+- success — confirmation
+
+missing states create confusion and broken experiences.
 
 ---
 
@@ -79,6 +181,25 @@ test every hover on mobile. if something only works on hover, it's broken for ha
 
 ---
 
+## responsive
+
+**avoid:** hiding critical functionality on mobile — adapt the interface, don't amputate it. also avoid:
+- fixed widths that break on small screens
+- touch targets smaller than 44x44px
+- text smaller than 14px on mobile
+- horizontal scroll from content overflow
+
+**the move:** mobile-first, then enhance for larger screens. use fluid layouts with `clamp()` and container queries. adapt the interface for different contexts — don't just shrink it.
+
+```css
+/* container queries > media queries for components */
+@container (min-width: 400px) {
+  .card { flex-direction: row; }
+}
+```
+
+---
+
 ## scroll behavior
 
 **avoid:** scrolljacking — never override native browser scroll with custom scroll logic. it feels like "moving through molasses" and users hate it.
@@ -95,21 +216,43 @@ use the "peeking" technique: let a few pixels of the next section peek above the
 
 **the move:** add depth. layered gradients, subtle patterns, mesh effects. backgrounds set mood — flat backgrounds say "I didn't think about this."
 
+but don't use glassmorphism everywhere — blur effects, glass cards, glow borders used decoratively rather than purposefully. it's AI slop.
+
 ---
 
-## context matters
+## accessibility
 
-don't impose an aesthetic — match the project. a fintech dashboard shouldn't look like a gaming site. read the room.
+this isn't optional — it's part of good design.
 
-if the project already has a design system, use it. don't fight it to show off.
+- **contrast:** 4.5:1 minimum for text, 3:1 for UI components (WCAG AA)
+- **focus indicators:** visible, high-contrast focus rings on all interactive elements. never `outline: none` without a replacement.
+- **semantic HTML:** use proper heading hierarchy, landmarks, buttons (not divs), labels on inputs
+- **color independence:** never use color as the only indicator. add icons, labels, or patterns alongside.
+- **keyboard nav:** logical tab order, no keyboard traps, all functionality accessible without a mouse
 
 ---
 
-## the convergence trap
+## visual details
 
-even with this guidance you'll find new defaults. space grotesk becomes the new inter. dark mode with amber accents becomes the new purple gradient.
+**avoid:**
+- glassmorphism everywhere (blur effects, glass cards, glow borders)
+- rounded elements with thick colored border on one side — lazy accent
+- sparklines as decoration — tiny charts that convey nothing meaningful
+- rounded rectangles with generic drop shadows — safe, forgettable
+- large icons with rounded corners above every heading — templated look
+- modals unless there's truly no better alternative — modals are lazy
+- non-system emojis used as decoration (lazy AI tell)
 
-vary your choices. alternate themes. try different directions between projects.
+---
+
+## ux writing
+
+**make every word earn its place.**
+- don't repeat information users can already see
+- don't repeat the same information — redundant headers, intros that restate the heading
+- labels and buttons should be unambiguous
+- error copy should help users fix the problem, not blame them
+- empty states should guide toward action
 
 ---
 
@@ -144,6 +287,22 @@ if a stranger can't answer all four in 5 seconds of looking at your hero, rewrit
 
 ---
 
+## context matters
+
+don't impose an aesthetic — match the project. a fintech dashboard shouldn't look like a gaming site. read the room.
+
+if the project already has a design system, use it. don't fight it to show off.
+
+---
+
+## the convergence trap
+
+even with this guidance you'll find new defaults. space grotesk becomes the new inter. dark mode with amber accents becomes the new purple gradient.
+
+vary your choices. alternate themes. try different directions between projects.
+
+---
+
 ## before shipping
 
 - can you name the aesthetic in 2-3 words?
@@ -154,12 +313,38 @@ if a stranger can't answer all four in 5 seconds of looking at your hero, rewrit
 - does scrolling feel native?
 - does the hero pass the H1 test (what/who/why/CTA)?
 - are all screenshots/assets crisp?
+- do all interactive elements have all states (hover/focus/active/disabled/loading/error)?
+- does it meet WCAG AA contrast (4.5:1 text, 3:1 UI)?
+- does it work on mobile (touch targets, no horizontal scroll, readable text)?
+- does it respect `prefers-reduced-motion`?
 - would a designer immediately clock this as ai-generated?
 
 if the last answer is yes, you're not done.
 
 ---
 
+## the ai slop test
+
+> "if you showed this interface to someone and said 'AI made this,' would they believe you immediately? if yes, that's the problem."
+
+the fingerprints of AI-generated work:
+- inter/roboto/system fonts
+- purple-to-blue gradients
+- cyan-on-dark color schemes
+- glassmorphism everywhere
+- gradient text on headings/metrics
+- hero metric layout (big number + small label)
+- identical card grids
+- bounce/elastic easing
+- dark mode with neon accents
+- sparklines as decoration
+- rounded rectangles with drop shadows
+- large icons with rounded corners above headings
+
+a distinctive interface should make someone ask "how was this made?" not "which AI made this?"
+
+---
+
 ## references
 
 look at these for inspiration, not to copy:

package/atris/skills/design/SKILL.md

@@ -1,7 +1,7 @@
 ---
 name: design
 description: Frontend aesthetics policy. Use when building UI, components, landing pages, dashboards, or any frontend work. Prevents generic ai-generated look.
-version: 1.0.0
+version: 2.0.0
 allowed-tools: Read, Write, Edit, Bash, Glob
 tags:
   - design
@@ -21,26 +21,47 @@ This skill uses the Atris workflow:
 
 ## Quick Reference
 
-**Typography:** avoid inter/roboto/system fonts. pick one distinctive font, use weight extremes (200 vs 800).
+**Typography:** avoid inter/roboto/arial/system fonts. pick one distinctive font, use weight extremes (200 vs 800). size jumps should be dramatic (3x). use `clamp()` for fluid sizing. use `ch` units for measure (`max-width: 65ch`).
 
-**Color:** commit to a palette. dark backgrounds easier to make good. steal from linear.app, vercel.com, raycast.com.
+Font alternatives: instead of Inter → Instrument Sans, Plus Jakarta Sans, Outfit. Instead of Roboto → Onest, Figtree, Urbanist. Editorial → Fraunces, Newsreader, Lora.
 
-**Layout:** break the hero + 3 cards + footer template. asymmetry is interesting. dramatic whitespace.
+**Color:** commit to a palette. use OKLCH for perceptually uniform colors. tint your neutrals toward your brand hue (never pure gray). never put gray text on colored backgrounds. never use pure black (#000) or pure white (#fff). avoid the AI palette: cyan-on-dark, purple-to-blue gradients, neon accents on dark.
 
-**Motion:** one well-timed animation beats ten scattered ones. 200-300ms ease-out. no cursor-following lines, no meteor effects, no buttons that chase the cursor.
+```css
+--brand: oklch(65% 0.2 250);
+--gray-100: oklch(95% 0.01 250); /* tinted, not pure gray */
+```
+
+**Layout:** break the hero + 3 cards + footer template. no card-in-card nesting. no identical card grids. asymmetry is interesting. dramatic whitespace. use container queries for component-level responsiveness. fluid spacing with `clamp()`.
+
+**Motion:** one well-timed animation beats ten scattered ones. use exponential easing (`cubic-bezier(0.25, 1, 0.5, 1)`), never bounce/elastic. 150-300ms duration. only animate transform and opacity. always respect `prefers-reduced-motion`. no cursor-following lines, no meteor effects, no buttons that chase the cursor.
 
-**Hover:** make elements feel inviting on hover (brighten, subtle scale). never fade out, shift, or hide content behind hover. hover doesn't exist on mobile.
+**Interaction:** progressive disclosure — start simple, reveal complexity. optimistic UI — update immediately, sync later. every interactive element needs ALL states: default, hover, focus, active, disabled, loading, error, success. don't make every button primary.
+
+**Hover:** make elements feel inviting on hover (brighten, subtle scale 1.02-1.05). never fade out, shift, or hide content behind hover. hover doesn't exist on mobile.
 
 **Scroll:** never override native scroll. use "peeking" (show a few px of next section) instead of full-screen hero + scroll arrow.
 
+**Responsive:** mobile-first. touch targets 44x44px minimum. no text under 14px on mobile. no horizontal scroll. container queries > media queries for components. adapt, don't amputate.
+
+**Accessibility:** 4.5:1 contrast for text, 3:1 for UI (WCAG AA). visible focus indicators always. semantic HTML. never use color alone as an indicator. keyboard nav with logical tab order.
+
 **Hero (H1 test):** must answer in 5 seconds — what is it, who is it for, why care, what's the CTA.
 
 **Assets:** high-res screenshots only. no fake dashboards with primary colors. no decorative non-system emojis.
 
-**Backgrounds:** add depth. gradients, patterns, mesh effects. flat = boring.
+**Backgrounds:** add depth. gradients, patterns, mesh effects. flat = boring. but no glassmorphism everywhere — that's AI slop.
 
 **Hierarchy:** 2-3 text levels max. don't mix 5 competing styles.
 
+**Visual anti-patterns:** no glassmorphism, no gradient text, no sparklines as decoration, no rounded-rect-with-colored-border, no large icons with rounded corners above headings, no hero metric layout (big number + small label), no modals unless truly necessary.
+
+## The AI Slop Test
+
+> "if you showed this to someone and said 'AI made this,' would they believe you immediately? if yes, that's the problem."
+
+Fingerprints: inter/roboto, purple-to-blue gradients, cyan-on-dark, glassmorphism, gradient text, hero metrics, identical card grids, bounce easing, dark mode with neon, sparklines as decoration, rounded rectangles with drop shadows.
+
 ## Before Shipping Checklist
 
 Run through `atris/policies/atris-design.md` "before shipping" section:
@@ -52,6 +73,10 @@ Run through `atris/policies/atris-design.md` "before shipping" section:
 - scrolling feels native?
 - hero passes H1 test (what/who/why/CTA)?
 - all assets crisp?
+- all interactive elements have all states (hover/focus/active/disabled/loading/error)?
+- WCAG AA contrast (4.5:1 text, 3:1 UI)?
+- works on mobile (44px touch targets, no horizontal scroll, readable text)?
+- respects `prefers-reduced-motion`?
 - would a designer clock this as ai-generated?
 
 ## Atris Commands

package/bin/atris.js

@@ -251,11 +251,12 @@ function showHelp() {
   console.log('  console    - Start/attach always-on coding console (tmux daemon)');
   console.log('  agent      - Select which Atris agent to use');
   console.log('  chat       - Chat with the selected Atris agent');
-  console.log('  login      - Authenticate (use --token <t> for non-interactive)');
-  console.log('  logout     - Remove credentials');
-  console.log('  whoami     - Show auth status');
-  console.log('  switch     - Switch account (atris switch <name>)');
-  console.log('  accounts   - List saved accounts');
+  console.log('  login      - Sign in or add another account');
+  console.log('  logout     - Sign out of current account');
+  console.log('  whoami     - Show active account');
+  console.log('  switch     - Switch account globally (atris switch <name>)');
+  console.log('  use        - Set account for this terminal only (atris use <name>)');
+  console.log('  accounts   - Manage accounts (list, add, remove)');
   console.log('');
   console.log('Integrations:');
   console.log('  gmail      - Email commands (inbox, read)');
@@ -384,7 +385,7 @@ const { planAtris: planCmd, doAtris: doCmd, reviewAtris: reviewCmd } = require('
 
 // Check if this is a known command or natural language input
 const knownCommands = ['init', 'log', 'status', 'analytics', 'visualize', 'brainstorm', 'autopilot', 'run', 'plan', 'do', 'review',
-                       'activate', 'agent', 'chat', 'console', 'login', 'logout', 'whoami', 'switch', 'accounts', 'update', 'upgrade', 'version', 'help', 'next', 'atris',
+                       'activate', 'agent', 'chat', 'console', 'login', 'logout', 'whoami', 'switch', 'use', 'accounts', '_resolve', '_profile-email', 'shell-init', 'update', 'upgrade', 'version', 'help', 'next', 'atris',
                        'clean', 'verify', 'search', 'skill', 'member', 'plugin', 'experiments', 'pull', 'push', 'business', 'sync',
                        'gmail', 'calendar', 'twitter', 'slack', 'integrations'];
 
@@ -697,6 +698,11 @@ if (command === 'init') {
         console.error(`✗ Log sync failed: ${error.message || error}`);
         process.exit(1);
       });
+  } else if (subcommand && subcommand !== '--help' && !subcommand.startsWith('-')) {
+    // Business log: atris log <business-slug>
+    require('../commands/context-sync').businessLog(subcommand)
+      .then(() => process.exit(0))
+      .catch((err) => { console.error(`\n✗ Error: ${err.message || err}`); process.exit(1); });
   } else {
     logCmd();
   }
@@ -725,8 +731,18 @@ if (command === 'init') {
   require('../commands/auth').whoamiAtris();
 } else if (command === 'switch') {
   require('../commands/auth').switchAccount();
+} else if (command === 'use') {
+  require('../commands/auth').useAccount();
 } else if (command === 'accounts') {
-  require('../commands/auth').listAccountsCmd();
+  require('../commands/auth').accountsCmd();
+} else if (command === '_resolve') {
+  // Hidden: resolve a profile name query → print exact profile name
+  require('../commands/auth').resolveProfile();
+} else if (command === '_profile-email') {
+  // Hidden: print email for a profile name
+  require('../commands/auth').profileEmail();
+} else if (command === 'shell-init') {
+  require('../commands/auth').shellInit();
 } else if (command === 'visualize') {
   console.log('ℹ️  "atris visualize" is a legacy helper. Visualization is now built into "atris plan".');
   console.log('   Prefer: atris plan');
@@ -865,9 +881,17 @@ if (command === 'init') {
       process.exit(1);
     });
 } else if (command === 'status') {
-  const isQuick = process.argv.includes('--quick') || process.argv.includes('-q');
-  const isJson = process.argv.includes('--json');
-  statusCmd(isQuick, isJson);
+  const subcommand = process.argv[3];
+  if (subcommand && !subcommand.startsWith('-')) {
+    // Business status: atris status <business-slug>
+    require('../commands/context-sync').businessStatus(subcommand)
+      .then(() => process.exit(0))
+      .catch((err) => { console.error(`\n✗ Error: ${err.message || err}`); process.exit(1); });
+  } else {
+    const isQuick = process.argv.includes('--quick') || process.argv.includes('-q');
+    const isJson = process.argv.includes('--json');
+    statusCmd(isQuick, isJson);
+  }
 } else if (command === 'analytics') {
   require('../commands/analytics').analyticsAtris();
 } else if (command === 'clean') {