Add walkthrough images for base features

.github/docs/BOLT12-Offers.md

@@ -0,0 +1,38 @@
+# BOLT12 Offers
+
+A BOLT12 **offer** is a *reusable* payment code: unlike a BOLT11 invoice it
+does not expire after one payment — any number of payers can pay it, any
+number of times, each payment fetching its own fresh invoice from your node.
+
+## Create an offer
+
+1. Click **Receive** on the Lightning Wallet card.
+2. Switch the payment type radio from **Invoice** to **Offer**.
+3. Enter a **Description**. Leave **Amount** empty for an *any-amount* offer
+   (the payer chooses what to pay — ideal for tips/donations), or set a fixed
+   amount:
+
+   ![Offer form](../images/walkthroughs/offer-01-form.png)
+
+4. Click **Generate Offer**. The app calls the node's `offer` RPC and shows
+   the `lno1…` offer string as a QR code. This QR can be printed or published
+   permanently — it never becomes stale:
+
+   ![Offer QR](../images/walkthroughs/offer-02-qr.png)
+
+## The same offer, paid more than once
+
+Each payer scans the same offer, their wallet runs `fetchinvoice` against it,
+and pays the returned invoice. Here the offer above was paid **twice by two
+different nodes** — 15,000 sats and 20,000 sats — and both payments appear as
+separate entries with the offer's description:
+
+![Same offer paid twice](../images/walkthroughs/offer-03-paid-twice-list.png)
+
+## The Offers tab
+
+The **Offers** tab of the Lightning Wallet card lists every offer created on
+the node with its status — *Active* and *Multi Use* below. This is where you
+can find or disable an offer later:
+
+![Offers tab](../images/walkthroughs/offer-04-offers-tab.png)

.github/docs/Bookkeeper.md

@@ -0,0 +1,55 @@
+# Bookkeeper
+
+Bookkeeper is the accounting side of the application, built on Core
+Lightning's `bookkeeper` plugin. Open it with the **Bookkeeper** button in
+the header (the button turns into **Dashboard** to switch back).
+
+## Bookkeeper dashboard
+
+The landing page summarizes the node's accounting in three cards, each with
+a **View More** that opens the full feature:
+
+![Bookkeeper Dashboard](../images/walkthroughs/bookkeeper-dashboard.png)
+
+- **Account Events** — track account activity at any given time: total
+  invoices received, total payments sent, routing revenue and on-chain fees.
+- **Sats Flow** — inflow and outflow this month.
+- **Volume Chart** — route performance: the routes with the most and least
+  forwarded traffic.
+
+## Account Events
+
+Balances of every account — the on-chain **wallet** plus each channel
+(by short channel id) — stacked over time:
+
+![Account Events](../images/walkthroughs/account-events.png)
+
+- Filter by **Time Granularity** (daily/weekly/monthly), a **date range**,
+  and specific **channels**; **Show Zero Activity** includes empty periods.
+- The chart stacks each account's balance per period, color-coded per
+  account.
+- The table below breaks a selected period down: short channel id, remote
+  alias, balance, percentage of the total, and the underlying account id.
+
+## Sats Flow
+
+Money movement over time — inflows drawn upward, outflows downward, with a
+net-flow line across the bars:
+
+![Sats Flow](../images/walkthroughs/satsflow.png)
+
+- The same granularity/date-range controls apply, plus an **event-type
+  filter**. Event types include Routed, Invoice Fee, Received Invoice,
+  Paid Invoice, Deposit and Onchain Fee, and the filter can either
+  **Include** or **Exclude** the selected set:
+
+  ![Sats Flow event filter](../images/walkthroughs/satsflow-filter.png)
+
+## Volume Chart
+
+Where routed traffic actually flows: a two-ring chart pairing the
+**inbound channel (inner circle)** with the **outbound channel (outer
+circle)** for forwarded payments, so you can see which route pairs carry
+the volume. Channels can be filtered with the dropdown:
+
+![Volume Chart](../images/walkthroughs/volume-chart-filtered.png)

.github/docs/Dashboard.md

@@ -0,0 +1,57 @@
+# The CLN Dashboard
+
+The home page of the application is a single dashboard that surfaces the
+node's full state at a glance:
+
+![CLN Dashboard](../images/walkthroughs/cln-dashboard.png)
+
+## Header
+
+- **Node identity** — the node's alias, version and connection status
+  (green dot = connected).
+- **Bookkeeper** — opens the [Bookkeeper dashboard](Bookkeeper.md) with
+  accounting and routing analytics.
+- **Settings** — units (SATS/BTC), fiat currency, light/dark theme and
+  password configuration.
+- The lock icon logs out of the session; the moon/sun icon toggles the theme
+  directly.
+
+## Balance and node summary
+
+- **Total Balance** — combined on-chain + Lightning funds.
+- The summary strip beside it shows **Active Channels**, connected **Peers**,
+  and **Maximum Send / Maximum Receive** — the node's total outbound and
+  inbound Lightning capacity.
+
+## Bitcoin Wallet card
+
+On-chain funds. **Withdraw** sends to a bitcoin address, **Deposit**
+generates a receive address, and the list below shows on-chain transactions
+(deposits and withdrawals) with their fiat value.
+
+## Lightning Wallet card
+
+Off-chain funds. **Send** pays a BOLT11 invoice, BOLT12 offer or keysend;
+**Receive** generates invoices and offers. Two tabs list the node's
+**Transactions** (paid/received payments) and **Offers**. Step-by-step
+guides: [Send & Receive Payments](Send-Receive.md) and
+[BOLT12 Offers](BOLT12-Offers.md).
+
+## Payment Channels card
+
+Every channel with its state dot (green = active, yellow = pending,
+red = inactive), peer alias and a liquidity bar (yellow = local /
+spendable, grey = remote / receivable). Clicking a channel opens its
+detail view; **Open Channel** starts a new one — see
+[Opening a Channel](Open-Channel.md).
+
+## Step-by-step guides
+
+Detailed walkthroughs, with screenshots, for the flows available from this
+dashboard:
+
+| Guide | What it covers |
+|---|---|
+| [Send & Receive](Send-Receive.md) | Receiving via BOLT11 invoice + QR, and paying a pasted invoice |
+| [BOLT12 Offers](BOLT12-Offers.md) | Creating a reusable offer, its QR, and the same offer paid more than once |
+| [Opening a Channel](Open-Channel.md) | Peer + amount → pending → active, and reading a channel's liquidity |

.github/docs/Open-Channel.md

@@ -0,0 +1,50 @@
+# Opening a Payment Channel
+
+Channels are managed from the **Payment Channels** card on the home page.
+
+## Open a channel
+
+1. Click **Open Channel** at the bottom of the Payment Channels card.
+2. Fill in:
+   - **Node ID** — the peer in `pubkey@ip:port` form.
+   - **Amount** — the channel capacity in sats, funded from the on-chain
+     (Bitcoin) wallet. The valid range is shown in the placeholder.
+   - **Announce** — leave on for a public channel, off for a private one.
+   - **Fee Rate** — Slow / Normal / Urgent, or tick *Custom Fee Rate* to
+     enter an exact perkw rate.
+
+   ![Open channel form](../images/walkthroughs/channel-01-open-form.png)
+
+3. Click **Open Channel**. The app connects to the peer, funds the channel
+   and broadcasts the funding transaction; a green alert shows the new
+   channel id:
+
+   ![Channel opened](../images/walkthroughs/channel-02-opened-success.png)
+
+## Pending → Active
+
+Until the funding transaction confirms, the channel sits in the list with a
+**yellow dot** (state `CHANNELD_AWAITING_LOCKIN`) — it cannot route payments
+yet:
+
+![Pending channel](../images/walkthroughs/channel-03-pending.png)
+
+After enough confirmations (6 blocks here) the dot turns **green** and the
+channel is active and ready to route:
+
+![Active channel](../images/walkthroughs/channel-04-active.png)
+
+## Reading a channel's liquidity
+
+Every list entry shows a liquidity bar: the **yellow** portion is the local
+balance (what you can send through this channel) and the **grey** portion is
+the remote balance (what you can receive). A freshly opened channel is all
+local balance — you funded the whole capacity — so you can send but not yet
+receive through it.
+
+Clicking a channel opens **Channel Detail** with the full picture: the
+liquidity bar, short channel id, who opened it, channel type, dust limit,
+**Spendable** / **Receivable** amounts and the channel/funding ids. The
+channel can also be closed from here:
+
+![Channel detail with liquidity](../images/walkthroughs/channel-05-liquidity-details.png)

.github/docs/Send-Receive.md

@@ -0,0 +1,56 @@
+# Send & Receive Payments
+
+The **Lightning Wallet** card on the home page is the entry point for both
+flows.
+
+## Receive — create an invoice
+
+1. Click **Receive** on the Lightning Wallet card.
+2. Keep the payment type on **Invoice** (the default; **Offer** creates a
+   reusable BOLT12 offer instead — see [BOLT12 Offers](BOLT12-Offers.md)).
+3. Enter a **Description** (required) and an **Amount** in sats. Leaving the
+   amount empty creates an *open* (any-amount) invoice. The fiat equivalent is
+   previewed under the amount field.
+
+   ![Receive form](../images/walkthroughs/receive-01-form.png)
+
+4. Click **Generate Invoice**. The app calls the node's `invoice` RPC and
+   shows the BOLT11 string as a QR code, ready to be scanned by the payer.
+   Clicking the QR or the copy icon copies the invoice.
+
+   ![Invoice QR](../images/walkthroughs/receive-02-invoice-qr.png)
+
+5. Once the payer settles the invoice, it appears at the top of the
+   **Transactions** list with its description, the received amount and the
+   *Paid at* timestamp:
+
+   ![Paid invoice in the transactions list](../images/walkthroughs/receive-03-paid-list.png)
+
+6. Clicking the entry expands its details (payment hash, preimage, etc.):
+
+   ![Paid invoice detail](../images/walkthroughs/receive-04-paid-detail.png)
+
+## Send — pay an invoice
+
+1. Click **Send** on the Lightning Wallet card.
+2. Keep the payment type on **Invoice** (**Offer** pays a BOLT12 offer,
+   **Keysend** pays a node pubkey directly without an invoice).
+3. Paste (or scan) the BOLT11 invoice into the **Invoice** field. The app
+   decodes it immediately and shows the invoice's description and amount
+   underneath the field, so you can verify what you are about to pay —
+   this is the confirmation step:
+
+   ![Pasted invoice decoded for confirmation](../images/walkthroughs/send-01-pasted-decoded.png)
+
+   *For an open (any-amount) invoice an extra Amount field appears so you
+   choose how much to send.*
+
+4. Click **Send Payment**. On success the app shows a green alert with the
+   payment hash:
+
+   ![Payment sent](../images/walkthroughs/send-02-paid.png)
+
+5. The outgoing payment shows up in the **Transactions** list with a
+   *Created at* timestamp and a negative amount:
+
+   ![Sent payment in the transactions list](../images/walkthroughs/send-03-sent-list.png)

README.md

@@ -147,6 +147,19 @@
 
 ---
 
+# Feature Walkthroughs
+
+Step-by-step guides for basic node management flows by the
+CLN application, captured against a Core Lightning regtest network
+(5 nodes, the app connected to node *ODDSPORK*).
+
+| Guide | What it covers |
+|---|---|
+| [CLN Dashboard](.github/docs/Dashboard.md) | The home page: balances, wallets, channels — with guides for sending & receiving payments, BOLT12 offers and opening channels |
+| [Bookkeeper](.github/docs/Bookkeeper.md) | Accounting dashboard: Account Events, Sats Flow and the Volume Chart |
+
+---
+
 # Contributing
 
 - We welcome and appreciate new contributions!