Tally — Agent Wallet Interface

Built for agents, made for humans.

A sample dashboard interface for Tally, the agent wallet that gives AI agents the ability to pay for services autonomously — while keeping humans in control.

This is a design prototype built with Next.js, TypeScript, and Tailwind CSS. It demonstrates the core screens and interactions for managing agent spending, viewing transactions, and configuring wallet settings.

Screens

• Dashboard — Balance overview, active agent cards, recent transactions, Add Funds modal
• Transactions — Full transaction table with search, date filtering, agent filtering, and pagination
• Agents — Agent management grid with status, budget progress bars, and a Create Agent wizard
• Agent Detail — Individual agent view with spending breakdown, daily limit settings, and transaction history
• Settings — Account info, notification preferences, payment methods, API key management

Getting Started

# Install dependencies
npm install

# Run the development server
npm run dev

Open http://localhost:3000 in your browser.

Tech Stack

• Next.js 14+ (App Router)
• TypeScript
• Tailwind CSS
• Lucide React (icons)
• Inter + JetBrains Mono (fonts)

Design

The interface follows a light-mode, pastel aesthetic inspired by Mercury and Apple Card — clean, airy, and trustworthy. Key design decisions:

• No crypto language — everything is "balance", "funds", "credits", "spend"
• Pastel agent cards — each agent gets a unique color (lavender, mint, rose)
• Frosted glass nav — backdrop-blur pill navigation
• Soft gradient background — radial lavender/mint gradients for depth
• Monospace amounts — JetBrains Mono for all financial figures

Project Structure

src/
  app/                    # Next.js App Router pages
    page.tsx              # Dashboard
    transactions/         # Transaction history
    agents/               # Agent management + detail
    settings/             # Settings with tabbed sidebar
  components/
    layout/               # Nav, Container
    dashboard/            # Balance hero, agent cards, activity
    transactions/         # Table, controls, pagination
    agents/               # Management cards, create wizard
    agent-detail/         # Hero, spending breakdown, settings
    settings/             # Sidebar, account, notifications, etc.
    shared/               # Button, Modal, Toggle, FilterPill, etc.
    modals/               # Add Funds modal
  lib/
    types.ts              # TypeScript interfaces
    mock-data.ts          # Sample data
    constants.ts          # Color themes, nav items
    utils.ts              # Formatting utilities
  styles/
    tokens.css            # CSS custom properties (design tokens)

License

MIT