ZacharyZhang-NY/AgentCompany
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add a motion system: feedback, overlays, and view transitions

Browse Source 
Every interactive control now acknowledges input: buttons and icon
buttons press down (scale on :active) and ease their hover states, nav
items, menu rows, segmented controls, cards, table rows, and inputs
transition over shared motion tokens (120/200/280ms, ease-out curves).
Dialogs and popovers enter with a short rise + fade over a fading
backdrop; switching routes and onboarding steps plays a quiet view
entrance keyed on the route/step. State pills cross-fade their tones
as runs progress. All motion collapses under prefers-reduced-motion.
PRODUCT.md captures the register and design principles guiding this.
This commit is contained in:
ZacharyZhang-NY committed 2026-06-09 21:57:47 -04:00
1 parent de9e6a9fa3
commit d8e9779678
5 files changed
+124 -40
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

AgentCompany-New/src/renderer/src/app/Onboarding.tsx
+33 -31
View File
@@ -168,37 +168,39 @@ export function Onboarding({
</section>
<form className="onboarding-panel" onSubmit={submit} noValidate>
{step === "welcome" && (
<WelcomeStep onNext={() => setStep("provider")} />
)}
{step === "provider" && (
<ProviderStep
providers={availableProviders}
draft={draft}
onChange={update}
onBack={back("welcome")}
onNext={guard(() => validateProvider(draft, availableProviders), "company")}
/>
)}
{step === "company" && (
<CompanyStep
draft={draft}
onChange={update}
onBack={back("provider")}
onNext={guard(() => validateCompany(draft), "mode")}
/>
)}
{step === "mode" && (
<ModeStep draft={draft} onChange={update} onBack={back("company")} onNext={() => setStep("mission")} />
)}
{step === "mission" && (
<MissionStep
draft={draft}
submitting={submitting}
onChange={update}
onBack={back("mode")}
/>
)}
<div key={step} className="step-view">
{step === "welcome" && (
<WelcomeStep onNext={() => setStep("provider")} />
)}
{step === "provider" && (
<ProviderStep
providers={availableProviders}
draft={draft}
onChange={update}
onBack={back("welcome")}
onNext={guard(() => validateProvider(draft, availableProviders), "company")}
/>
)}
{step === "company" && (
<CompanyStep
draft={draft}
onChange={update}
onBack={back("provider")}
onNext={guard(() => validateCompany(draft), "mode")}
/>
)}
{step === "mode" && (
<ModeStep draft={draft} onChange={update} onBack={back("company")} onNext={() => setStep("mission")} />
)}
{step === "mission" && (
<MissionStep
draft={draft}
submitting={submitting}
onChange={update}
onBack={back("mode")}
/>
)}
</div>
{error && <div style={{ color: "var(--red)", marginTop: 14, fontSize: 12.5 }}>{error}</div>}
</form>
</main>
AgentCompany-New/src/renderer/src/overlays.css
+25 -1
View File
@@ -6,6 +6,7 @@
display: grid;
place-items: center;
padding: 24px;
animation: backdrop-enter var(--motion-fast) var(--ease-out);
}
.modal {
width: min(520px, 100%);
@@ -16,6 +17,15 @@
background: var(--panel);
box-shadow: 0 20px 60px rgba(9, 9, 11, 0.18);
padding: 20px;
animation: overlay-enter var(--motion-base) var(--ease-out-expo);
}
@keyframes backdrop-enter {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes overlay-enter {
from { opacity: 0; transform: translateY(8px) scale(0.98); }
to { opacity: 1; transform: none; }
}
.modal-title { margin: 0 0 14px; font-size: 16px; font-weight: 620; letter-spacing: -0.01em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@@ -74,8 +84,11 @@
color: var(--text-3);
background: var(--panel);
font-size: 11px;
transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.step-chip.active { color: var(--text-1); border-color: var(--text-1); }
/* One onboarding step entering after the previous one leaves. */
.step-view { animation: view-enter var(--motion-base) var(--ease-out-expo); }
.form-grid { display: grid; gap: 14px; }
.option-grid { display: grid; gap: 8px; }
.option-card {
@@ -86,8 +99,13 @@
text-align: left;
cursor: pointer;
width: 100%;
transition:
border-color var(--motion-fast) var(--ease-out),
box-shadow var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out);
}
.option-card:hover { border-color: var(--border-strong); }
.option-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.option-card:active { transform: scale(0.99); }
.option-card.active { border-color: var(--text-1); box-shadow: inset 0 0 0 1px var(--text-1); }
.option-card .opt-title { font-size: 13.5px; font-weight: 540; }
.option-card .opt-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
@@ -116,6 +134,11 @@
display: flex;
flex-direction: column;
gap: 1px;
animation: menu-enter var(--motion-fast) var(--ease-out-expo);
}
@keyframes menu-enter {
from { opacity: 0; transform: translateY(-3px) scale(0.99); }
to { opacity: 1; transform: none; }
}
.popover-panel.end { right: 0; }
.popover-panel.start { left: 0; }
@@ -138,6 +161,7 @@
font-size: 13px;
text-align: left;
width: 100%;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.menu-row:hover { background: var(--hover); color: var(--text-1); }
.menu-row.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
AgentCompany-New/src/renderer/src/shared/Shell.tsx
+3 -1
View File
@@ -151,7 +151,9 @@ export function Shell({
</div>
</header>
<div className={FLUSH_ROUTES.has(route) ? "content flush" : "content"}>
<TopbarSlotContext.Provider value={actionsSlot}>{children}</TopbarSlotContext.Provider>
<TopbarSlotContext.Provider value={actionsSlot}>
<div key={route} className="route-view">{children}</div>
</TopbarSlotContext.Provider>
</div>
</main>
<SearchDialog
AgentCompany-New/src/renderer/src/styles.css
+38 -2
View File
@@ -27,6 +27,11 @@
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
--font-display: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-slow: 280ms;
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
@@ -74,8 +79,10 @@ a { color: inherit; }
border-radius: var(--r-md);
cursor: pointer;
margin-bottom: 18px;
transition: background var(--motion-fast) var(--ease-out);
}
.sidebar-org:hover { background: var(--hover); }
.sidebar-org:active { background: var(--panel-3); }
.brand-mark {
width: 22px;
height: 22px;
@@ -111,7 +118,9 @@ a { color: inherit; }
cursor: text;
border: 0;
width: 100%;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.search-bar:hover { background: var(--panel-3); color: var(--text-2); }
.search-kbd {
margin-left: auto;
font-size: 11px;
@@ -140,11 +149,13 @@ a { color: inherit; }
text-align: left;
width: 100%;
min-width: 0;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.nav-item:hover { background: var(--hover); color: var(--text-1); }
.nav-item:active { transform: scale(0.985); }
.nav-item.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
.nav-item.active svg { color: var(--text-1); }
.nav-item svg { color: var(--text-3); flex-shrink: 0; }
.nav-item svg { color: var(--text-3); flex-shrink: 0; transition: color var(--motion-fast) var(--ease-out); }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-badge {
margin-left: auto;
@@ -187,6 +198,7 @@ a { color: inherit; }
font-size: 13px;
text-align: left;
width: 100%;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.org-menu-row:hover { background: var(--hover); color: var(--text-1); }
.org-menu-row.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
@@ -199,6 +211,7 @@ a { color: inherit; }
border-radius: 4px;
cursor: pointer;
opacity: 0;
transition: opacity var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}
.org-menu-row:hover .org-menu-delete { opacity: 1; }
.org-menu-delete:hover { background: var(--panel-3); }
@@ -262,6 +275,7 @@ a { color: inherit; }
font-size: 13px;
text-align: left;
width: 100%;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.org-menu-action:hover { background: var(--hover); color: var(--text-1); }
.brand-mark.sm {
@@ -322,6 +336,19 @@ a { color: inherit; }
overflow: auto;
padding: 28px 32px 40px;
}
/* One route's content entering: a quiet rise that signals the view changed.
The wrapper is structural for flush routes, so it must stay a flex column. */
.route-view {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
animation: view-enter var(--motion-slow) var(--ease-out-expo);
}
@keyframes view-enter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* Split-layout routes fill the content area and let their panes scroll
independently instead of scrolling the whole page. */
.content.flush {
@@ -412,6 +439,7 @@ a { color: inherit; }
color: var(--text-2);
font-size: 15px;
line-height: 1;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.org-zoom-btn:hover:not(:disabled) { background: var(--hover); color: var(--text-1); }
.org-zoom-btn:disabled { color: var(--text-4); cursor: default; }
@@ -441,7 +469,7 @@ a { color: inherit; }
box-shadow: var(--shadow-sm);
text-align: left;
cursor: pointer;
transition: border-color 0.12s ease, box-shadow 0.12s ease;
transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.org-node-card:hover:not(:disabled) { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.org-node-card:disabled { cursor: default; }
@@ -462,3 +490,11 @@ a { color: inherit; }
text-overflow: ellipsis;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
AgentCompany-New/src/renderer/src/styles/components.css
+25 -5
View File
@@ -24,8 +24,15 @@
font-size: 12.5px;
font-weight: 500;
white-space: nowrap;
transition:
background var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
color var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out),
opacity var(--motion-fast) var(--ease-out);
}
.button:hover { background: var(--panel-2); }
.button:active:not(:disabled) { transform: scale(0.97); }
.button.primary { background: var(--text-1); color: #fff; border-color: var(--text-1); }
.button.primary:hover { background: #27272a; }
.button.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
@@ -43,8 +50,15 @@
background: var(--panel);
color: var(--text-2);
flex-shrink: 0;
transition:
background var(--motion-fast) var(--ease-out),
border-color var(--motion-fast) var(--ease-out),
color var(--motion-fast) var(--ease-out),
transform var(--motion-fast) var(--ease-out),
opacity var(--motion-fast) var(--ease-out);
}
.icon-button:hover { background: var(--panel-2); color: var(--text-1); }
.icon-button:active:not(:disabled) { transform: scale(0.94); }
.icon-button.ghost { border-color: transparent; background: transparent; }
.icon-button.ghost:hover { background: var(--hover); color: var(--text-1); }
.icon-button:disabled { opacity: 0.4; cursor: default; }
@@ -68,7 +82,9 @@
color: var(--text-2);
font-size: 12px;
font-weight: 500;
transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}
.segmented .segment:hover:not(.active) { color: var(--text-1); }
.segmented .segment.active { background: var(--panel-3); color: var(--text-1); font-weight: 540; }
.pill {
@@ -84,8 +100,9 @@
font-size: 11px;
font-weight: 500;
white-space: nowrap;
transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out);
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); transition: background var(--motion-base) var(--ease-out); }
.pill.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.pill.amber .dot { background: var(--amber); }
.pill.green { background: var(--green-soft); color: var(--green); border-color: transparent; }
@@ -127,8 +144,10 @@
padding: 8px 10px;
outline: none;
font-size: 13px;
transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.input:focus { border-color: var(--text-1); }
.input:focus { border-color: var(--text-1); box-shadow: 0 0 0 3px rgba(9, 9, 11, 0.06); }
input[type="checkbox"] { accent-color: var(--accent); }
textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
.field {
display: flex;
@@ -166,10 +185,10 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
border-bottom: 1px solid var(--border-soft);
}
.table-row:last-child { border-bottom: 0; }
.table-row.clickable { cursor: pointer; }
.table-row.clickable { cursor: pointer; transition: background var(--motion-fast) var(--ease-out); }
.table-row.clickable:hover { background: var(--hover); }
.clickable-card { transition: border-color 0.1s ease; }
.clickable-card:hover { border-color: var(--border-strong); }
.clickable-card { transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); }
.clickable-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.link-button {
border: 0;
@@ -178,6 +197,7 @@ textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
cursor: pointer;
font: inherit;
color: var(--text-3);
transition: color var(--motion-fast) var(--ease-out);
}
.link-button:hover { color: var(--text-1); }