docs[agent]: finalize bid-status implementation plan

AGENT_NOTES.md

@@ -4,6 +4,7 @@
 | Task | Owner | Status | Created | Completed | Notes |
 |---|---|---|---|---|---|
 | Init ledger and snapshot backup | hermes | done | 2026-06-10 | 2026-06-10 | Snapshot created, secrets excluded |
+| Add bid-status visual indicators (pending/accepted/rejected/counter_offer) | hermes | in-progress | 2026-06-10 | | Use Tailwind colors, integrate with freight-bidding-system skill |
 
 ## Decisions
 - Use `AGENT_NOTES.md` as the single source of truth for active work and handoffs.

implementation/bid-status-indicators.md

@@ -0,0 +1,119 @@
+# Implementation Plan: Bid-Status Visual Indicators
+
+**Task ID**: `bid-status-indicators`  
+**Status**: `in-progress`  
+**Owner**: hermes  
+**Created**: 2026-06-10  
+**Skill Reference**: `freight-bidding-system`
+
+---
+
+## Objective
+Implement visual indicators (color-coded badges/labels) for bid statuses in the freight bidding UI.
+
+## Status Types
+| Status | Description | UI Color |
+|--------|-------------|----------|
+| `pending` | Bid submitted, awaiting acceptance | `bg-amber-100 text-amber-800` |
+| `accepted` | Shipper accepted bid | `bg-green-100 text-green-800` |
+| `rejected` | Shipper rejected bid | `bg-red-100 text-red-800` |
+| `counter_offer` | Bid counter-proposed | `bg-blue-100 text-blue-800` |
+
+---
+
+## Implementation Steps
+
+### 1. Create Status Badge Component
+**File**: `freight-app/components/bids/BidStatusBadge.tsx`
+
+```tsx
+import { BidStatus } from '@/types/bid'
+
+const statusConfig = {
+  pending: 'bg-amber-100 text-amber-800',
+  accepted: 'bg-green-100 text-green-800',
+  rejected: 'bg-red-100 text-red-800',
+  counter_offer: 'bg-blue-100 text-blue-800',
+} as const
+
+interface BidStatusBadgeProps {
+  status: BidStatus
+}
+
+export default function BidStatusBadge({ status }: BidStatusBadgeProps) {
+  const classes = statusConfig[status] ?? 'bg-gray-100 text-gray-800'
+  return (
+    <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${classes}`}>
+      {status.replace('_', ' ')}
+    </span>
+  )
+}
+```
+
+### 2. Integrate into Bid Feed
+**File**: `freight-app/components/bids/BidFeed.tsx`
+
+```tsx
+import BidStatusBadge from './BidStatusBadge'
+
+// Inside bid list mapping:
+{bids.map(bid => (
+  <div key={bid.id} className="border rounded-lg p-4">
+    <div className="flex justify-between items-start">
+      <div>
+        <h4 className="font-semibold">{bid.amount} {bid.currency}</h4>
+        <p className="text-sm text-gray-600">{bid.carrier_name}</p>
+      </div>
+      <BidStatusBadge status={bid.status} />
+    </div>
+  </div>
+))}
+```
+
+### 3. Update Bid Type Definition
+**File**: `freight-app/types/bid.ts`
+
+```ts
+export type BidStatus = 'pending' | 'accepted' | 'rejected' | 'counter_offer'
+
+export interface Bid {
+  id: string
+  amount: number
+  currency: string
+  carrier_name: string
+  status: BidStatus
+  // ... other fields
+}
+```
+
+### 4. Add Tailwind Colors (if missing)
+**File**: `freight-app/tailwind.config.js`
+
+```js
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Amber, green, red, blue shades are included in Tailwind v3
+      }
+    }
+  }
+}
+```
+
+---
+
+## Verification
+- [ ] Component renders correctly for all 4 status types
+- [ ] Colors match the Tailwind config
+- [ ] Badge text transforms `counter_offer` to `counter offer`
+- [ ] No TypeScript errors
+
+---
+
+## Next Agent Handoff
+If work is paused:
+1. Review current state in `AGENT_NOTES.md`
+2. Check if any status types were added/removed
+3. Update `BidStatus` type if needed
+4. Resume at the next unchecked item