> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lynxhub.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Card renderer methods

> Implement frontend methods to manage addresses, arguments, and card details.

Frontend card methods handle user configuration changes, parse terminal feeds for server URLs, and populate description fields in card details modals.

***

## Server URL detection

LynxHub launches a companion browser tab automatically when a card starts its server process. To enable this, your card must inspect the console stream and locate the active address.

* **Method**: `catchAddress(line: string): string | undefined`
* **Responsibility**: Checks each incoming line of terminal output. Returns the web address (URL) if discovered.

### Example

```javascript theme={null}
line => {
  const match = line.match(/Running on local URL:\s+(http:\/\/127\.0\.0\.1:\d+)/);
  return match ? match[1] : undefined;
};
```

***

## Arguments serialization

If your card supports custom parameters, you must implement serialization methods. These serialize argument states into command parameters and reconstruct argument views from saved commands.

* **Methods**: `parseArgsToString(args: ChosenArgument[]): string` and `parseStringToArgs(args: string): ChosenArgument[]`
* **Responsibility**: Converts the React UI arguments state array into a single execution string, and parses configuration strings back into the UI state.

### Example

```javascript theme={null}
const methods = {
  parseArgsToString: args => {
    return args.map(arg => `${arg.name} ${arg.value}`).join(' ');
  },
  parseStringToArgs: str => {
    // Reconstruct arguments array from saved string
    return [];
  },
};
```

***

## Card details modal

You can populate metadata and status details dynamically when users open a card's info dialog.

* **Method**: `cardInfo(api: CardInfoApi, callback: CardInfoCallback): void`
* **Responsibility**: Queries the local environment using the helper `api` parameter and pushes formatted fields to the view via the `callback` interface.

### Example

```javascript theme={null}
async (api, callback) => {
  const folderSize = await api.getFolderSize(api.installationFolder);
  const gitTag = await api.getCurrentReleaseTag(api.installationFolder);

  callback.setDescription([
    {
      title: 'Storage Details',
      items: [
        {label: 'Size on Disk', result: `${(folderSize / (1024 * 1024)).toFixed(2)} MB`},
        {label: 'Release Version', result: gitTag},
      ],
    },
  ]);
};
```