@assistkick/create 1.7.0 → 1.9.0

package/templates/assistkick-product-system/packages/frontend/src/components/ds/NavBarSidekick.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import { Search } from 'lucide-react';
 
 export interface NavItem {
@@ -6,6 +7,7 @@ export interface NavItem {
   label: string;
   icon?: React.ReactNode;
   description?: string;
+  href?: string;
 }
 
 export interface NavBarSidekickProps {
@@ -25,9 +27,11 @@ export interface NavBarSidekickProps {
   trailing?: React.ReactNode;
 }
 
-export function NavBarSidekick({
+export const NavBarSidekick = ({
   items, activeId, onNavigate, brand, center, actions, trailing,
-}: NavBarSidekickProps) {
+}: NavBarSidekickProps) => {
+  const navigate = useNavigate();
+
   // Fallback to internal state when no external activeId is provided (design system demo mode)
   const [internalActive, setInternalActive] = useState(items[0]?.id ?? '');
   const active = activeId ?? internalActive;
@@ -59,22 +63,39 @@ export function NavBarSidekick({
         <div className="flex items-center rounded-xl bg-surface p-1 border border-edge">
           {items.map((item) => {
             const isActive = active === item.id;
-            return (
+            const classes = [
+              'flex items-center gap-1.5 rounded-lg px-3.5 py-1.5',
+              'text-[12px] font-semibold uppercase tracking-wider',
+              'transition-all duration-150 cursor-pointer outline-none no-underline',
+              isActive
+                ? 'bg-accent text-surface shadow-sm'
+                : 'text-content-muted hover:text-content hover:bg-surface-raised',
+            ].join(' ');
+            const style = isActive ? { boxShadow: '0 2px 8px -2px var(--accent)' } : {};
+            const children = (
+              <>
+                {item.icon && <span className="flex items-center">{item.icon}</span>}
+                {item.label}
+              </>
+            );
+
+            return item.href ? (
+              <Link
+                key={item.id}
+                to={item.href}
+                className={classes}
+                style={style}
+              >
+                {children}
+              </Link>
+            ) : (
               <button
                 key={item.id}
                 onClick={() => handleSelect(item.id)}
-                className={[
-                  'flex items-center gap-1.5 rounded-lg px-3.5 py-1.5',
-                  'text-[12px] font-semibold uppercase tracking-wider',
-                  'transition-all duration-150 cursor-pointer outline-none',
-                  isActive
-                    ? 'bg-accent text-surface shadow-sm'
-                    : 'text-content-muted hover:text-content hover:bg-surface-raised',
-                ].join(' ')}
-                style={isActive ? { boxShadow: '0 2px 8px -2px var(--accent)' } : {}}
+                className={classes}
+                style={style}
               >
-                {item.icon && <span className="flex items-center">{item.icon}</span>}
-                {item.label}
+                {children}
               </button>
             );
           })}
@@ -121,7 +142,12 @@ export function NavBarSidekick({
             onKeyDown={(e) => {
               if (e.key === 'Escape') { setCmdOpen(false); setCmdQuery(''); }
               if (e.key === 'Enter' && filteredItems.length > 0) {
-                handleSelect(filteredItems[0].id);
+                const first = filteredItems[0];
+                if (first.href) {
+                  navigate(first.href);
+                } else {
+                  handleSelect(first.id);
+                }
                 setCmdOpen(false);
                 setCmdQuery('');
               }
@@ -132,27 +158,45 @@ export function NavBarSidekick({
               {filteredItems.length === 0 ? (
                 <div className="py-2 text-[12px] text-content-muted">No results</div>
               ) : (
-                filteredItems.map((item) => (
-                  <button
-                    key={item.id}
-                    onClick={() => { handleSelect(item.id); setCmdOpen(false); setCmdQuery(''); }}
-                    className={[
-                      'flex items-center gap-3 rounded-lg px-3 py-2 text-left',
-                      'text-[13px] transition-colors duration-100 cursor-pointer outline-none',
-                      active === item.id
-                        ? 'bg-accent/10 text-accent'
-                        : 'text-content-secondary hover:bg-surface-raised hover:text-content',
-                    ].join(' ')}
-                  >
-                    {item.icon && <span className="flex items-center">{item.icon}</span>}
-                    <div>
-                      <div className="font-medium">{item.label}</div>
-                      {item.description && (
-                        <div className="text-[11px] text-content-muted">{item.description}</div>
-                      )}
-                    </div>
-                  </button>
-                ))
+                filteredItems.map((item) => {
+                  const cmdClasses = [
+                    'flex items-center gap-3 rounded-lg px-3 py-2 text-left no-underline',
+                    'text-[13px] transition-colors duration-100 cursor-pointer outline-none',
+                    active === item.id
+                      ? 'bg-accent/10 text-accent'
+                      : 'text-content-secondary hover:bg-surface-raised hover:text-content',
+                  ].join(' ');
+                  const cmdChildren = (
+                    <>
+                      {item.icon && <span className="flex items-center">{item.icon}</span>}
+                      <div>
+                        <div className="font-medium">{item.label}</div>
+                        {item.description && (
+                          <div className="text-[11px] text-content-muted">{item.description}</div>
+                        )}
+                      </div>
+                    </>
+                  );
+
+                  return item.href ? (
+                    <Link
+                      key={item.id}
+                      to={item.href}
+                      onClick={() => { setCmdOpen(false); setCmdQuery(''); }}
+                      className={cmdClasses}
+                    >
+                      {cmdChildren}
+                    </Link>
+                  ) : (
+                    <button
+                      key={item.id}
+                      onClick={() => { handleSelect(item.id); setCmdOpen(false); setCmdQuery(''); }}
+                      className={cmdClasses}
+                    >
+                      {cmdChildren}
+                    </button>
+                  );
+                })
               )}
             </div>
           )}
@@ -160,4 +204,4 @@ export function NavBarSidekick({
       )}
     </nav>
   );
-}
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ds/SidePanelShowcase.tsx

@@ -0,0 +1,370 @@
+import React from 'react';
+import {
+  X, ArrowRight, ArrowLeft,
+  CheckCircle2, Circle, Loader2, FileText, FolderPlus,
+  Trash2, Lightbulb, GitBranch, Activity,
+  ListTodo, AlignLeft, ClipboardCheck, HelpCircle, CheckSquare, StickyNote,
+} from 'lucide-react';
+import { ContentCard } from './ContentCard';
+import { AccentBorderList, AccentBorderItem } from './AccentBorderList';
+import { CompletionRing } from './CompletionRing';
+import { StatusDot } from './StatusDot';
+
+/* ── Mock data ── */
+
+const MOCK_NODE = {
+  id: 'feat_auth_login',
+  name: 'User Authentication & Session Management',
+  type: 'feature',
+  status: 'partially_defined',
+  completeness: 0.65,
+};
+
+const MOCK_TASKS = {
+  total: 5,
+  completed: 3,
+  items: [
+    { name: 'Define login flow', status: 'completed' },
+    { name: 'Password validation rules', status: 'completed' },
+    { name: 'Session management', status: 'completed' },
+    { name: 'OAuth integration', status: 'in_progress' },
+    { name: 'Rate limiting', status: 'pending' },
+  ],
+};
+
+const MOCK_DESCRIPTION = `The authentication module is responsible for handling all aspects of user identity verification, session lifecycle management, and secure credential storage across the platform. It serves as the foundational security layer that every other service depends on for verifying user identity and enforcing access controls.
+
+The module supports two primary authentication flows: traditional email/password login with bcrypt-hashed credentials stored in the database, and federated OAuth 2.0 authentication via third-party identity providers including Google, GitHub, and Microsoft Azure AD. Both flows converge into a unified session management layer that issues short-lived JWT access tokens (15-minute TTL) paired with long-lived refresh tokens (30-day TTL) stored in httpOnly secure cookies.
+
+Session tokens carry a minimal claim set — user ID, tenant ID, role bitmask, and token generation timestamp — to keep payload size under 1KB while still enabling most authorization decisions without a database round-trip. The refresh token rotation strategy uses a sliding window approach: each refresh request invalidates the previous token and issues a new one, with a grace period of 30 seconds to handle concurrent requests from multiple browser tabs.
+
+Rate limiting is enforced at two levels: per-IP throttling on the login endpoint (10 attempts per minute with exponential backoff) and per-account lockout after 5 consecutive failed attempts within a 15-minute window. Account lockout triggers a notification email and requires either a time-based unlock (30 minutes) or manual unlock via the admin dashboard.`;
+
+const MOCK_ACCEPTANCE_CRITERIA = [
+  {
+    title: 'Registration & password policy',
+    body: 'Users can register with email and password; passwords must meet complexity requirements (minimum 12 characters, at least one uppercase letter, one lowercase letter, one digit, and one special character). The system must reject commonly breached passwords by checking against a configurable blocklist of at least 10,000 entries.',
+  },
+  {
+    title: 'JWT token issuance',
+    body: 'Users can log in with valid credentials and receive a JWT access token and refresh token pair. The access token must expire within 15 minutes and the refresh token within 30 days. Both tokens must be cryptographically signed using RS256 with a 2048-bit RSA key pair that is rotated quarterly.',
+  },
+  {
+    title: 'OAuth provider support',
+    body: 'OAuth login flow must support Google, GitHub, and Microsoft Azure AD providers. The system must handle the full authorization code flow including PKCE challenge, token exchange, and user profile retrieval. If the OAuth email matches an existing account, the accounts must be automatically linked. If no account exists, a new one must be created with a randomly generated secure password.',
+  },
+  {
+    title: 'Rate limiting & lockout',
+    body: 'Failed login attempts must be rate-limited to 10 per IP per minute and 5 per account per 15-minute window. After exceeding the per-account limit, the account must be locked for 30 minutes and an email notification sent to the account holder. The lockout notification must include the IP address, geolocation (city/country), and user agent of the failed attempt.',
+  },
+  {
+    title: 'Token refresh rotation',
+    body: 'Token refresh must implement sliding window rotation: the old refresh token is invalidated and a new one issued. A 30-second grace period must exist to handle concurrent refresh requests from multiple tabs. Any attempt to reuse an already-rotated token must immediately invalidate all tokens for that user session and trigger a security alert.',
+  },
+  {
+    title: 'Audit logging',
+    body: 'All authentication events (login, logout, token refresh, failed attempt, lockout, unlock) must be logged to the audit trail with timestamp, IP address, user agent, and outcome. Audit logs must be retained for at least 90 days and be queryable by user ID, IP address, and event type.',
+  },
+  {
+    title: 'Performance & error handling',
+    body: 'The login page must render within 200ms on a 3G connection and complete the full authentication flow (including server round-trip) within 2 seconds on a broadband connection. Error messages must not reveal whether the email or password was incorrect — a generic "Invalid credentials" message must be used.',
+  },
+];
+
+const MOCK_OPEN_QUESTIONS = [
+  {
+    question: 'Should we support biometric authentication (WebAuthn/FIDO2) as a second factor in the initial release, or defer it to a follow-up iteration? The specification mentions MFA but does not specify which second factors should be available beyond TOTP.',
+    context: 'Raised during architecture review on 2024-01-15. WebAuthn support would require additional database tables for credential storage and changes to the login flow UI.',
+  },
+  {
+    question: 'What should the behavior be when a user tries to OAuth-link an email that already belongs to a different account? Currently the spec says "accounts must be automatically linked" but this could be a security risk if the OAuth provider email is not verified.',
+    context: 'Security team flagged this during threat modeling. Some OAuth providers do not guarantee email verification. We need a policy decision on whether to require email verification before linking, or to prompt the user to confirm account merge.',
+  },
+  {
+    question: 'How should the system handle refresh token rotation when the client is offline and comes back online with an expired refresh token? The current 30-day TTL means long-idle sessions will require re-authentication, but the product team wants a "remember me" experience that lasts up to 90 days.',
+    context: 'Product management requested extended session persistence for mobile users. Need to balance security requirements (SOC2 compliance requires session limits) with user experience goals.',
+  },
+];
+
+const MOCK_RESOLVED_QUESTIONS = [
+  {
+    question: 'Should we use symmetric (HS256) or asymmetric (RS256) signing for JWT tokens?',
+    resolution: 'Decided on RS256 with 2048-bit keys. This allows services to verify tokens using only the public key, without needing access to the signing secret. Key rotation is handled via JWKS endpoint that publishes the current and previous public keys. The private key is stored in AWS KMS and never leaves the HSM boundary.',
+    resolvedDate: '2024-01-10',
+  },
+  {
+    question: 'Where should refresh tokens be stored on the client side — localStorage, sessionStorage, or cookies?',
+    resolution: 'Refresh tokens will be stored in httpOnly secure cookies with SameSite=Strict attribute. This prevents XSS attacks from accessing the token (unlike localStorage) while still allowing automatic inclusion in refresh requests. The cookie is scoped to the /api/auth/refresh endpoint only, so it is not sent with every API request. Access tokens are stored in memory only and are not persisted across page reloads — the client performs a silent refresh on app initialization.',
+    resolvedDate: '2024-01-12',
+  },
+  {
+    question: 'Should we implement our own rate limiting or use a third-party service like Cloudflare Rate Limiting?',
+    resolution: 'We will implement application-level rate limiting using a Redis-backed sliding window counter. While Cloudflare provides IP-based rate limiting at the edge, we need per-account rate limiting that requires knowledge of the authenticated user, which is only available at the application layer. Redis was chosen over in-memory counters to ensure rate limits are consistent across all application instances in the cluster. The implementation will use the token bucket algorithm with configurable burst size.',
+    resolvedDate: '2024-01-18',
+  },
+  {
+    question: 'Do we need to support SAML 2.0 in addition to OAuth 2.0 for enterprise SSO?',
+    resolution: 'SAML 2.0 support is deferred to Phase 2. The current enterprise customer pipeline (3 accounts) all support OAuth 2.0/OIDC. We will revisit when we onboard customers that require SAML. The authentication architecture is designed to be protocol-agnostic at the session layer, so adding SAML later will not require changes to downstream services — only a new identity provider adapter.',
+    resolvedDate: '2024-02-01',
+  },
+];
+
+const MOCK_NOTES = `## Implementation Notes
+
+The auth module is structured as a standalone package within the monorepo that exposes a clean API surface: \`createSession()\`, \`validateToken()\`, \`refreshSession()\`, and \`revokeSession()\`. All internal implementation details (bcrypt rounds, JWT claims structure, Redis key format) are encapsulated and not leaked to consumers.
+
+### Dependencies & Integration Points
+
+- **Database**: Uses a dedicated \`auth\` schema with tables for users, credentials, sessions, oauth_links, and audit_log. Migrations are managed via Drizzle ORM and versioned alongside the code.
+- **Redis**: Shared Redis cluster for rate limiting counters, session blacklist (for immediate revocation), and JWKS cache. Keys are namespaced with \`auth:\` prefix.
+- **Email**: Integrates with the notification service for sending lockout alerts, password reset links, and email verification tokens. Uses Resend as the delivery provider.
+- **Monitoring**: Custom metrics exported to Prometheus — login success/failure rate, token refresh latency p99, active sessions gauge, rate limit hit counter.
+
+### Security Considerations
+
+The bcrypt work factor is set to 12 rounds, which provides approximately 250ms hashing time on current hardware. This is intentionally slow to resist brute-force attacks but fast enough to not impact user experience. The work factor should be reviewed annually and increased as hardware improves.
+
+All sensitive configuration (JWT private key ARN, Redis connection string, bcrypt work factor) is injected via environment variables and never committed to the repository. The CI/CD pipeline retrieves secrets from AWS Secrets Manager at deploy time.
+
+### Known Technical Debt
+
+- The OAuth provider abstraction currently has provider-specific code paths in the callback handler. This should be refactored into a proper strategy pattern.
+- The audit log table does not have an archival strategy. At current write volume (~50K events/day), the table will reach 18M rows by end of quarter. Need to implement partitioning or offload to a time-series database.
+- Error codes are string constants scattered across multiple files. Should be consolidated into a single enum with documentation.`;
+
+const MOCK_WORK_SUMMARIES = [
+  {
+    cycle: 3,
+    approach: 'Implemented JWT refresh token rotation with sliding window expiry.',
+    filesCreated: ['src/auth/refresh.ts', 'src/auth/middleware.ts'],
+    filesUpdated: ['src/routes/login.ts'],
+    filesDeleted: ['src/auth/legacy-session.ts'],
+    decisions: [
+      'Use RS256 for JWT signing',
+      'Store refresh tokens in httpOnly cookies',
+    ],
+  },
+  {
+    cycle: 2,
+    approach: 'Added OAuth provider abstraction layer.',
+    filesCreated: ['src/auth/oauth.ts'],
+    filesUpdated: ['src/routes/auth.ts', 'src/config.ts'],
+    filesDeleted: [],
+    decisions: ['Unified callback URL pattern for all providers'],
+  },
+];
+
+const MOCK_EDGES = [
+  { neighborId: 'feat_user_profile', neighborName: 'User Profile', relation: 'depends_on', direction: 'outgoing' },
+  { neighborId: 'feat_api_gateway', neighborName: 'API Gateway', relation: 'consumed_by', direction: 'incoming' },
+  { neighborId: 'feat_rbac', neighborName: 'Role-Based Access', relation: 'relates_to', direction: 'outgoing' },
+];
+
+/* ── Local helpers ── */
+
+function TaskIcon({ status }: { status: string }) {
+  if (status === 'completed') return <CheckCircle2 size={14} className="text-accent shrink-0" />;
+  if (status === 'in_progress') return <Loader2 size={14} className="text-accent-secondary shrink-0 animate-spin" />;
+  return <Circle size={14} className="text-content-muted shrink-0" />;
+}
+
+/* ── Card Stack Panel ── */
+
+function CardStackPanel() {
+  return (
+    <div className="flex w-[420px] flex-col gap-3 rounded-2xl border border-edge bg-panel p-4">
+      {/* Header */}
+      <div className="flex items-start justify-between">
+        <div className="flex-1 min-w-0">
+          <h3 className="text-[15px] font-semibold text-content truncate">{MOCK_NODE.name}</h3>
+          <span className="font-mono text-[11px] text-content-muted">{MOCK_NODE.id}</span>
+        </div>
+        <button className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-content-muted hover:bg-surface-raised hover:text-content transition-colors">
+          <X size={14} />
+        </button>
+      </div>
+
+      {/* Status card */}
+      <div className="flex items-center gap-3 rounded-xl border border-edge bg-surface-alt p-3">
+        <CompletionRing pct={MOCK_NODE.completeness} />
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="rounded-md bg-surface-raised px-2 py-0.5 text-[11px] font-medium text-content-secondary capitalize">
+              {MOCK_NODE.type}
+            </span>
+            <StatusDot status={MOCK_NODE.status} />
+            <span className="text-[11px] text-content-secondary capitalize">
+              {MOCK_NODE.status.replace(/_/g, ' ')}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* Tasks */}
+      <ContentCard
+        icon={<ListTodo size={13} />}
+        label="Tasks"
+        badge={
+          <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-semibold text-accent">
+            {MOCK_TASKS.completed}/{MOCK_TASKS.total}
+          </span>
+        }
+        defaultOpen
+      >
+        <div className="space-y-1.5">
+          {MOCK_TASKS.items.map((t, i) => (
+            <div key={i} className="flex items-center gap-2">
+              <TaskIcon status={t.status} />
+              <span className={`text-[12px] ${t.status === 'completed' ? 'text-content-muted line-through' : 'text-content'}`}>
+                {t.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      </ContentCard>
+
+      {/* Description */}
+      <ContentCard icon={<AlignLeft size={13} />} label="Description" defaultOpen>
+        <div className="text-[12px] leading-relaxed text-content-secondary whitespace-pre-line">
+          {MOCK_DESCRIPTION}
+        </div>
+      </ContentCard>
+
+      {/* Acceptance Criteria */}
+      <ContentCard
+        icon={<ClipboardCheck size={13} />}
+        label="Acceptance Criteria"
+        badge={<span className="text-[10px] text-content-muted">{MOCK_ACCEPTANCE_CRITERIA.length} criteria</span>}
+      >
+        <AccentBorderList>
+          {MOCK_ACCEPTANCE_CRITERIA.map((ac, i) => (
+            <AccentBorderItem key={i} index={i + 1}>
+              <h4 className="text-[12px] font-semibold text-content inline">{ac.title}</h4>
+              <p className="text-[12px] leading-[1.75] text-content-secondary mt-1">{ac.body}</p>
+            </AccentBorderItem>
+          ))}
+        </AccentBorderList>
+      </ContentCard>
+
+      {/* Open Questions */}
+      <ContentCard
+        icon={<HelpCircle size={13} />}
+        label="Open Questions"
+        badge={
+          <span className="rounded-full bg-accent-secondary/15 px-2 py-0.5 text-[10px] font-semibold text-accent-secondary">
+            {MOCK_OPEN_QUESTIONS.length}
+          </span>
+        }
+      >
+        <AccentBorderList>
+          {MOCK_OPEN_QUESTIONS.map((q, i) => (
+            <AccentBorderItem key={i} color="secondary" index={i + 1}>
+              <p className="text-[12px] leading-[1.75] text-content">{q.question}</p>
+              <p className="text-[11px] leading-[1.7] text-content-muted italic mt-1">{q.context}</p>
+            </AccentBorderItem>
+          ))}
+        </AccentBorderList>
+      </ContentCard>
+
+      {/* Resolved Questions */}
+      <ContentCard
+        icon={<CheckSquare size={13} />}
+        label="Resolved Questions"
+        badge={
+          <span className="rounded-full bg-accent/15 px-2 py-0.5 text-[10px] font-semibold text-accent">
+            {MOCK_RESOLVED_QUESTIONS.length}
+          </span>
+        }
+      >
+        <AccentBorderList>
+          {MOCK_RESOLVED_QUESTIONS.map((q, i) => (
+            <AccentBorderItem key={i} index={i + 1}>
+              <h4 className="text-[12px] font-semibold text-content">{q.question}</h4>
+              <p className="text-[12px] leading-[1.75] text-content-secondary mt-1">{q.resolution}</p>
+              <span className="inline-block mt-1 text-[10px] text-content-muted">Resolved {q.resolvedDate}</span>
+            </AccentBorderItem>
+          ))}
+        </AccentBorderList>
+      </ContentCard>
+
+      {/* Notes */}
+      <ContentCard icon={<StickyNote size={13} />} label="Notes">
+        <div className="text-[12px] leading-relaxed text-content-secondary whitespace-pre-line">
+          {MOCK_NOTES}
+        </div>
+      </ContentCard>
+
+      {/* Work Summary */}
+      <ContentCard
+        icon={<Activity size={13} />}
+        label="Work Summary"
+        badge={<span className="text-[10px] text-content-muted">{MOCK_WORK_SUMMARIES.length} cycles</span>}
+      >
+        <AccentBorderList>
+          {MOCK_WORK_SUMMARIES.map((ws, i) => (
+            <AccentBorderItem key={i} index={`Cycle ${ws.cycle}`}>
+              <p className="text-[12px] leading-[1.75] text-content-secondary mt-1 mb-2">{ws.approach}</p>
+              <div className="flex flex-wrap gap-1.5 mb-1.5">
+                {ws.filesCreated.map((f, fi) => (
+                  <span key={fi} className="inline-flex items-center gap-1 rounded-md bg-accent/10 px-1.5 py-0.5 text-[10px] text-accent">
+                    <FolderPlus size={10} />{f.split('/').pop()}
+                  </span>
+                ))}
+                {ws.filesUpdated.map((f, fi) => (
+                  <span key={fi} className="inline-flex items-center gap-1 rounded-md bg-accent-secondary/10 px-1.5 py-0.5 text-[10px] text-accent-secondary">
+                    <FileText size={10} />{f.split('/').pop()}
+                  </span>
+                ))}
+                {ws.filesDeleted.map((f, fi) => (
+                  <span key={fi} className="inline-flex items-center gap-1 rounded-md bg-error/10 px-1.5 py-0.5 text-[10px] text-error">
+                    <Trash2 size={10} />{f.split('/').pop()}
+                  </span>
+                ))}
+              </div>
+              {ws.decisions.length > 0 && (
+                <div className="space-y-1">
+                  {ws.decisions.map((d, di) => (
+                    <div key={di} className="flex items-start gap-1.5 text-[10px] text-content-muted">
+                      <Lightbulb size={10} className="mt-0.5 shrink-0 text-accent-secondary" />
+                      {d}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </AccentBorderItem>
+          ))}
+        </AccentBorderList>
+      </ContentCard>
+
+      {/* Relationships */}
+      <div className="rounded-xl border border-edge bg-surface-alt p-3">
+        <div className="flex items-center gap-2 mb-2">
+          <GitBranch size={13} className="text-content-muted" />
+          <span className="text-[12px] font-medium text-content">Relationships</span>
+          <span className="text-[10px] text-content-muted">{MOCK_EDGES.length}</span>
+        </div>
+        <div className="space-y-1.5">
+          {MOCK_EDGES.map((e, i) => (
+            <div key={i} className="flex items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-surface-raised/50 transition-colors group">
+              {e.direction === 'outgoing'
+                ? <ArrowRight size={12} className="text-accent shrink-0" />
+                : <ArrowLeft size={12} className="text-accent-secondary shrink-0" />}
+              <span className="text-[11px] text-content-muted capitalize flex-shrink-0">
+                {e.relation.replace(/_/g, ' ')}
+              </span>
+              <span className="text-[12px] text-accent font-medium truncate group-hover:underline cursor-pointer">
+                {e.neighborName}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Export showcase ── */
+
+export function SidePanelShowcase() {
+  return <CardStackPanel />;
+}

package/templates/assistkick-product-system/packages/frontend/src/components/ds/SideSheet.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  children: ReactNode;
+  width?: number;
+  zIndex?: number;
+}
+
+export const SideSheet = ({ isOpen, onClose, title, children, width = 420, zIndex = 250 }: Props) => {
+  const sheetRef = useRef<HTMLDivElement>(null);
+
+  // Close on outside click — defer listener to skip the opening click
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e: MouseEvent) => {
+      if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const frame = requestAnimationFrame(() => {
+      document.addEventListener('click', handleClick);
+    });
+    return () => {
+      cancelAnimationFrame(frame);
+      document.removeEventListener('click', handleClick);
+    };
+  }, [isOpen, onClose]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isOpen, onClose]);
+
+  return (
+    <div
+      ref={sheetRef}
+      className={`fixed top-[44px] right-0 h-[calc(100vh-44px)] flex flex-col overflow-hidden bg-panel border-l border-edge shadow-[-4px_0_16px_var(--panel-shadow)] transition-transform duration-250 ease-out ${
+        isOpen ? 'translate-x-0' : 'translate-x-full'
+      }`}
+      style={{ width, zIndex }}
+    >
+      <div className="flex items-center justify-between px-4 py-3 border-b border-edge min-h-[48px]">
+        <span className="text-[13px] font-semibold text-content truncate">{title}</span>
+        <button
+          className="shrink-0 px-2 py-1 text-[18px] text-content-secondary bg-transparent border-none rounded cursor-pointer hover:bg-tab-hover hover:text-content"
+          onClick={onClose}
+        >
+          &times;
+        </button>
+      </div>
+      <div className="flex-1 overflow-y-auto p-4 text-[13px] leading-relaxed text-content">
+        {children}
+      </div>
+    </div>
+  );
+};

package/templates/assistkick-product-system/packages/frontend/src/components/ds/StatusDot.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const STATUS_COLORS: Record<string, string> = {
+  draft: 'bg-content-muted',
+  partially_defined: 'bg-accent-secondary',
+  defined: 'bg-accent',
+  in_progress: 'bg-accent-secondary',
+};
+
+export interface StatusDotProps {
+  status: string;
+}
+
+export function StatusDot({ status }: StatusDotProps) {
+  return (
+    <span className={`inline-block h-2 w-2 rounded-full ${STATUS_COLORS[status] || 'bg-content-muted'}`} />
+  );
+}

package/templates/assistkick-product-system/packages/frontend/src/components/workflow/CheckCardPositionNode.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import { GitBranch } from 'lucide-react';
+import { KANBAN_COLUMNS } from './workflow_types';
+
+export function CheckCardPositionNode({ selected }: NodeProps) {
+  return (
+    <div className={`px-4 py-3 rounded-lg border bg-surface-raised text-content min-w-[180px] ${
+      selected ? 'border-accent shadow-[0_0_0_1px_var(--accent)]' : 'border-edge'
+    }`}>
+      <Handle type="target" position={Position.Top} className="!w-3 !h-3 !bg-accent !border-2 !border-surface" />
+      <div className="flex items-center gap-2 mb-2">
+        <GitBranch size={14} className="text-cyan-400" />
+        <span className="text-[12px] font-semibold">Check Card Position</span>
+      </div>
+      <div className="text-[10px] text-content-muted mb-1">Output per column:</div>
+      <div className="flex flex-wrap gap-1">
+        {KANBAN_COLUMNS.map((col, i) => (
+          <div key={col} className="relative">
+            <span className="px-1.5 py-0.5 rounded bg-surface text-[9px] text-content-muted border border-edge">
+              {col.replace('_', ' ')}
+            </span>
+            <Handle
+              type="source"
+              position={Position.Bottom}
+              id={col}
+              className="!w-2 !h-2 !bg-cyan-400 !border !border-surface"
+              style={{ left: `${((i + 0.5) / KANBAN_COLUMNS.length) * 100}%` }}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}